chore: make icon optional in metadata tag + add glyph property to met…

…adata content
NIAID-Data-Ecosystem · May 15, 2024 · 1631bac · 1631bac
1 parent d7f7a92
commit 1631bac
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 61 deletions.
diff --git a/src/components/metadata/helpers.ts b/src/components/metadata/helpers.ts
@@ -67,6 +67,7 @@ export interface MetadataContentProps {
   id: string;
   label: string;
   property: string;
+  glyph?: string;
   isDisabled: boolean;
   name?: string;
   img?: { src: string; alt: string };
@@ -168,6 +169,7 @@ const createFundingContent = (
   return {
     id: `${property}-${id}`,
     label: 'Funding',
+    glyph: property,
     property,
     isDisabled: !fundingDetails || fundingDetails.length === 0,
     items:
@@ -219,6 +221,7 @@ const createHealthConditionContent = (
     id: `${property}-${id}`,
     label: 'Health Condition',
     property,
+    glyph: property,
     isDisabled: !healthCondition,
     items:
       showItems && healthCondition
@@ -266,6 +269,7 @@ const createLicenseContent = (
     id: `${property}-${id}`,
     label: 'License',
     property,
+    glyph: property,
     isDisabled: !license,
     name: license?.title,
     url: license?.url,
@@ -287,6 +291,7 @@ const createMeasurementTechniqueContent = (
     id: `${property}-${id}`,
     label: 'Measurement Technique',
     property,
+    glyph: property,
     isDisabled: !measurementTechnique,
     items:
       showItems && measurementTechnique
@@ -326,6 +331,7 @@ const createInfectiousAgentContent = (
     id: `${property}-${id}`,
     label: 'Pathogen',
     property,
+    glyph: property,
     isDisabled: !infectiousAgent,
     items:
       showItems && infectiousAgent
@@ -377,6 +383,7 @@ const createSpeciesContent = (
     id: `${property}-${id}`,
     label: 'Species',
     property,
+    glyph: property,
     isDisabled: !species,
     items:
       showItems && species
@@ -429,6 +436,7 @@ const createUsageInfoContent = (
     id: `${property}-${id}`,
     label: 'Usage Info',
     property,
+    glyph: property,
     isDisabled: !usageInfo,
     items: Array.isArray(usageInfo)
       ? usageInfo?.map((usage, idx) => ({
@@ -457,6 +465,7 @@ const createVariableMeasuredContent = (
     id: `${property}-${id}`,
     label: 'Variable Measured',
     property,
+    glyph: property,
     isDisabled: !variableMeasured,
     items:
       showItems && variableMeasured

diff --git a/src/components/resource-sections/components/overview/index.tsx b/src/components/resource-sections/components/overview/index.tsx
@@ -78,67 +78,69 @@ const Overview: React.FC<OverviewProps> = ({
           borderRadius='semi'
           w='100%'
         >
-          {sortedMetadataContent.map(({ img, items, name, url, ...props }) => {
-            if (props.property === 'spatialCoverage') {
-              return (
-                <SpatiotemporalCoverage
-                  key={`block-${props.id}`}
-                  id={props.id}
-                  isDisabled={props.isDisabled}
-                  isLoading={isLoading}
-                  inLanguage={inLanguage}
-                  spatialCoverage={spatialCoverage}
-                  temporalCoverage={temporalCoverage}
-                  type={data['@type']}
-                />
-              );
-            }
+          {sortedMetadataContent.map(
+            ({ img, items, name, glyph, url, ...props }) => {
+              if (props.property === 'spatialCoverage') {
+                return (
+                  <SpatiotemporalCoverage
+                    key={`block-${props.id}`}
+                    id={props.id}
+                    isDisabled={props.isDisabled}
+                    isLoading={isLoading}
+                    inLanguage={inLanguage}
+                    spatialCoverage={spatialCoverage}
+                    temporalCoverage={temporalCoverage}
+                    type={data['@type']}
+                  />
+                );
+              }
 
-            return (
-              <Skeleton
-                key={`block-${props.id}-${props.property}`}
-                isLoaded={!isLoading}
-              >
-                <MetadataBlock
-                  tooltipLabel={getMetadataDescription(
-                    props.property,
-                    data['@type'],
-                  )}
-                  glyph={props.property}
-                  {...props}
+              return (
+                <Skeleton
+                  key={`block-${props.id}-${props.property}`}
+                  isLoaded={!isLoading}
                 >
-                  {name && (
-                    <MetadataContent
-                      name={name}
-                      img={img}
-                      url={url}
-                      {...content}
-                    />
-                  )}
-                  {items && items.length > 0 && (
-                    <ScrollContainer maxHeight='150px' overflow='auto'>
-                      <MetadataList>
-                        {items.map(({ key, ...item }) => {
-                          return (
-                            <MetadataListItem
-                              key={key}
-                              property={props.property}
-                            >
-                              <MetadataContent
-                                includeOntology
-                                includeSearch
-                                {...item}
-                              />
-                            </MetadataListItem>
-                          );
-                        })}
-                      </MetadataList>
-                    </ScrollContainer>
-                  )}
-                </MetadataBlock>
-              </Skeleton>
-            );
-          })}
+                  <MetadataBlock
+                    tooltipLabel={getMetadataDescription(
+                      props.property,
+                      data['@type'],
+                    )}
+                    glyph={glyph}
+                    {...props}
+                  >
+                    {name && (
+                      <MetadataContent
+                        name={name}
+                        img={img}
+                        url={url}
+                        {...content}
+                      />
+                    )}
+                    {items && items.length > 0 && (
+                      <ScrollContainer maxHeight='150px' overflow='auto'>
+                        <MetadataList>
+                          {items.map(({ key, ...item }) => {
+                            return (
+                              <MetadataListItem
+                                key={key}
+                                property={props.property}
+                              >
+                                <MetadataContent
+                                  includeOntology
+                                  includeSearch
+                                  {...item}
+                                />
+                              </MetadataListItem>
+                            );
+                          })}
+                        </MetadataList>
+                      </ScrollContainer>
+                    )}
+                  </MetadataBlock>
+                </Skeleton>
+              );
+            },
+          )}
         </SimpleGrid>
       </Flex>
     </Flex>

diff --git a/src/components/search-results-page/components/card/metadata-accordion/index.tsx b/src/components/search-results-page/components/card/metadata-accordion/index.tsx
@@ -97,7 +97,7 @@ const MetadataAccordion: React.FC<MetadataAccordionProps> = ({ data }) => {
                     alignItems='center'
                   >
                     {sortedMetadataContent.map(
-                      ({ label, property, isDisabled }) => {
+                      ({ label, property, glyph, isDisabled }) => {
                         const color = isDisabled
                           ? 'gray'
                           : getMetadataTheme(property);
@@ -134,7 +134,7 @@ const MetadataAccordion: React.FC<MetadataAccordionProps> = ({ data }) => {
                                 <MetadataIcon
                                   id={`indicator-${property}-${id}`}
                                   title={property}
-                                  glyph={property}
+                                  glyph={glyph}
                                   fill={`${color}.600`}
                                   m={0.5}
                                   boxSize={4}