Improve tag view to support more data types

Author: craquet

src/components/result/GenericResultView.tsx

@@ -365,7 +365,7 @@ export function GenericResultView({
                         <span className="rfs-text-sm rfs-text-muted-foreground">{pid}</span>
                     </a>
                     <div className="rfs-flex rfs-flex-wrap rfs-gap-2 rfs-truncate">
-                        {tags && tags.map((tag) => <GenericResultViewTag key={tag.field} result={result} {...tag} />)}
+                        {tags && tags.map((tag, i) => <GenericResultViewTag key={i} result={result} {...tag} />)}
                     </div>
                     <div className="rfs-grow">{description}</div>
                     <div className="rfs-mt-8 rfs-flex rfs-flex-col rfs-flex-wrap rfs-justify-end rfs-gap-2 md:rfs-flex-row md:rfs-items-center md:rfs-gap-4">

src/components/result/GenericResultViewTag.tsx

@@ -80,9 +80,9 @@ export function GenericResultViewTag({
     )
 
     const base = useCallback(
-        (fieldValue: string | string[], value: ReactNode) => {
+        (fieldValue: string | string[], value: ReactNode, key?: string) => {
             return (
-                <Badge variant="secondary" className="rfs-truncate" onClick={(e) => handleClick(fieldValue, value, e)}>
+                <Badge key={key} variant="secondary" className="rfs-truncate" onClick={(e) => handleClick(fieldValue, value, e)}>
                     <span className="rfs-flex rfs-truncate">
                         {icon} {value}
                     </span>
@@ -92,12 +92,12 @@ export function GenericResultViewTag({
         [handleClick, icon]
     )
 
-    if (!label) return Array.isArray(value) ? value.map((v) => base(fieldValue[value.indexOf(v)], v)) : base(fieldValue, value)
+    if (!label) return Array.isArray(value) ? value.map((v, i) => base(fieldValue[value.indexOf(v)], v, field + i)) : base(fieldValue, value)
     if (!value) return null
 
     if (Array.isArray(value)) {
         return value.map((entry, i) => (
-            <Tooltip delayDuration={500} key={i}>
+            <Tooltip delayDuration={500} key={field + i}>
                 <TooltipTrigger>{base(fieldValue[value.indexOf(entry)], entry)}</TooltipTrigger>
                 <TooltipContent>{label}</TooltipContent>
             </Tooltip>

src/components/result/utils.ts

@@ -1,13 +1,9 @@
 export function autoUnwrap<E>(item?: E | { raw?: E }) {
     if (!item) {
         return undefined
-    } else if (typeof item === "string") {
-        return item
     } else if (typeof item === "object" && "raw" in item) {
         return item.raw
-    } else {
-        return JSON.stringify(item)
-    }
+    } else return item
 }
 
 export function autoUnwrapArray<E>(item?: E[] | { raw?: E[] }) {

src/stories/GenericResultView.stories.tsx

@@ -101,7 +101,13 @@ export const Full: Story = {
             landingPageLocation: "https://www.chemotion-repository.net/inchikey/UMEUUBQHJXGOAF-UHFFFAOYSA-N.1",
             identifier: "CRS-39445",
             isMetadataFor: ["example1", "example2", "example3"],
-            timestamp: "2024-05-21"
+            timestamp: "2024-05-21",
+            numberTest: 2025,
+            numberArrayTest: [1, 2, 3],
+            booleanTest: true,
+            booleanArrayTest: [true, false],
+            stringTest: "A single entry",
+            stringArrayTest: ["Works", "with", "arrays"]
         },
         imageField: "locationPreview/Sample",
         invertImageInDarkMode: true,
@@ -114,19 +120,45 @@ export const Full: Story = {
             {
                 icon: <GlobeIcon className="rfs-shrink-0 rfs-size-4 rfs-mr-2" />,
                 field: "hadPrimarySource",
-                valueMapper: tryURLPrettyPrint,
-                label: "Primary Source"
+                singleValueMapper: tryURLPrettyPrint,
+                label: "Primary Source",
+                clickBehavior: "follow-url"
             },
             {
                 icon: <ScaleIcon className="rfs-shrink-0 rfs-size-4 rfs-mr-2" />,
                 field: "licenseURL",
-                valueMapper: tryURLPrettyPrint,
-                label: "License URL"
+                singleValueMapper: tryURLPrettyPrint,
+                label: "License URL",
+                clickBehavior: "follow-url"
             },
             {
                 icon: <AtomIcon className="rfs-shrink-0 rfs-size-4 rfs-mr-2" />,
                 field: "Compound",
                 label: "Compound"
+            },
+            {
+                field: "numberTest"
+            },
+            {
+                field: "numberArrayTest"
+            },
+            {
+                field: "booleanTest",
+                singleValueMapper: (b) => (b ? "Yes" : "No")
+            },
+            {
+                field: "booleanArrayTest",
+                singleValueMapper: (b) => (b ? "Yes" : "No")
+            },
+            {
+                field: "stringTest"
+            },
+            {
+                field: "stringArrayTest"
+            },
+            {
+                field: "stringArrayTest",
+                singleValueMapper: (v) => v.toUpperCase()
             }
         ]
     }