[UI] Visualize metadata completeness scores for search results and data records

[gtsueng]

Background: The metadata completeness score is a reflection of how much metadata was parsed, or augmented relative to the number of fields that are considered, required and recommended in the schema. The optional fields are not currently considered for metadata completeness as they are highly variable and repository dependent.

To do:

• [x] Generate potential visualizations of the metadata completeness score as it would be displayed (@candicecz):
  • [x] On the search results page
  • [x] On the metadata record page
• [x] Formulate the description / question for a User test that would indicate which visualization is most interpretable (@EmilyHaag, @candicecz, @leandrocollares)
• [x] Conduct a user test using the visualizations and the description / question to identify the top visualization (@leandrocollares, @EmilyHaag, @candicecz)
• [x] Iterate with NIAID team on the top design

[candicecz]

Metadata completeness score badges are viewable on staging:

• Within the search cards: https://data-staging.niaid.nih.gov/search
• Within the resource page: https://data-staging.niaid.nih.gov/resources?id=GSE111097

[candicecz]

Metadata completeness score badges are viewable on production:

Within the search cards: https://data.niaid.nih.gov/search Within the resource page: https://data.niaid.nih.gov/resources?id=GEO_GSE111097