Improve generic result view tag and add spdx parsing

Author: craquet

src/components/result/GenericResultViewTag.tsx

@@ -6,20 +6,41 @@ import { autoUnwrap } from "@/components/result/utils"
 import { useCopyToClipboard } from "usehooks-ts"
 
 export interface GenericResultViewTagProps {
+    /**
+     * The elasticsearch field that this tag will display
+     */
     field: string
     result: SearchResult
+    /**
+     * Icon for this tag, can be any react component. Ideally a [lucide icon](https://lucide.dev) with 16px by 16px site.
+     */
     icon?: ReactNode
+    /**
+     * Label to display in a tooltip
+     */
     label?: string
-    valueMapper?: (value: string | string[]) => string | ReactNode
+    /**
+     * Optional, here you can map each value or all values of the elasticsearch field to a string or a React component.
+     * Can't the used together with `singleValueMapper`
+     * @param value
+     */
+    valueMapper?: (value: string | string[]) => ReactNode
+    /**
+     * Optional, here you can map each value of the elasticsearch field to a string or a React component. Can't be used
+     * together with `valueMapper`
+     * @param value
+     */
+    singleValueMapper?: (value: string) => ReactNode
 }
 
-export function GenericResultViewTag({ field, result, icon, label, valueMapper }: GenericResultViewTagProps) {
+export function GenericResultViewTag({ field, result, icon, label, valueMapper, singleValueMapper }: GenericResultViewTagProps) {
     const value = useMemo(() => {
-        const value = autoUnwrap(result[field])
+        const value: string | string[] = autoUnwrap(result[field])
         if (!value) return undefined
         if (valueMapper) return valueMapper(value)
+        if (singleValueMapper) return Array.isArray(value) ? value.map(singleValueMapper) : singleValueMapper(value)
         else return value
-    }, [field, result, valueMapper])
+    }, [field, result, singleValueMapper, valueMapper])
 
     const [, copy] = useCopyToClipboard()
 
@@ -33,7 +54,7 @@ export function GenericResultViewTag({ field, result, icon, label, valueMapper }
     )
 
     const base = useCallback(
-        (value: string) => {
+        (value: ReactNode) => {
             return (
                 <Badge variant="secondary" className="rfs-truncate" onClick={copyTagValue}>
                     <span className="rfs-flex rfs-truncate">

src/components/result/PidDisplay.tsx

@@ -1,6 +1,6 @@
 import { PidResolver, pidResolver } from "@/lib/pidResolver"
 import { memo, useCallback } from "react"
-import { ontobeeResolver } from "@/lib/OntobeeResolver"
+import { tempResolver } from "@/lib/TempResolver"
 import useSWRImmutable from "swr/immutable"
 
 /**
@@ -14,17 +14,15 @@ export const PidDisplay = memo(function PidDisplay({ pid }: { pid: string }) {
             const content = await pidResolver.resolve(pid)
             return content.name
         } else if (pid.startsWith("http://purl.obolibrary.org")) {
-            return ontobeeResolver.parse(pid)
+            return tempResolver.resolvePurl(pid)
+        } else if (pid.startsWith("https://spdx.org")) {
+            return tempResolver.resolveSpdx(pid)
         } else {
             return pid
         }
     }, [])
 
     const { data, error } = useSWRImmutable(pid, resolveContent)
 
-    if (error) {
-        return <div className="rfs-text-red-500">{pid}</div>
-    }
-
-    return <span>{data ?? ""}</span>
+    return <span>{error ? pid : (data ?? "")}</span>
 })

src/lib/OntobeeResolver.ts renamed to src/lib/TempResolver.ts

@@ -1,13 +1,17 @@
 import { z } from "zod"
 
+/**
+ * !TODO Replace with resolver from pid-component
+ */
+
 const TS4TIBResponse = z.object({
     response: z.object({
         docs: z.object({ label: z.string(), iri: z.string() }).array()
     })
 })
 
-export class OntobeeResolver {
-    async parse(url: string) {
+export class TempResolver {
+    async resolvePurl(url: string) {
         try {
             const result = await fetch(`https://service.tib.eu/ts4tib/api/select?q=${url}`)
             const data = await result.json()
@@ -23,6 +27,17 @@ export class OntobeeResolver {
             return url
         }
     }
+
+    async resolveSpdx(url: string) {
+        try {
+            const result = await fetch(url)
+            const data = await result.json()
+            console.log(data)
+        } catch (e) {
+            console.error(e)
+            return url
+        }
+    }
 }
 
-export const ontobeeResolver = new OntobeeResolver()
+export const tempResolver = new TempResolver()

src/lib/pidResolver.ts

@@ -43,12 +43,15 @@ export class PidResolver {
                     return PIDDataSchema.parse(data)
                 } catch (e) {
                     console.error(`Failed to parse response for resolve request of pid ${pid}`, e)
-                    throw undefined
+                    return null
                 }
+            } else {
+                console.error(`Network request failed for parsing pid ${pid}`, request.status)
+                return null
             }
         } catch (e) {
             console.error(`Network request failed for parsing pid ${pid}`, e)
-            throw undefined
+            return null
         }
     }
 }

src/stories/FairDOElasticSearch.stories.tsx

@@ -25,16 +25,16 @@ const demoConfig: FairDOConfig = {
     apiKey: "UGNoTW1KUUJ3WmluUHBTcEVpalo6cGloOUVKZ0tTdnlMYVlpTzV4SXBrUQ==",
     indices: [
         {
-            name: "fdo-test-6",
+            name: "fdo-test-8",
             facets: [
                 {
                     key: "resourceType.keyword",
                     label: "Resource Type"
                 },
                 {
                     key: "hadPrimarySource.keyword",
-                    label: "Source",
-                    prettyPrintURLs: true
+                    label: "Source"
+                    // usePidResolver: true
                 },
                 {
                     key: "NMR_Method.keyword",
@@ -47,7 +47,8 @@ const demoConfig: FairDOConfig = {
                 },
                 {
                     key: "Acquisition_Nucleus.keyword",
-                    label: "Acquisition Nucleus"
+                    label: "Acquisition Nucleus",
+                    usePidResolver: true
                 },
                 {
                     key: "dateCreatedRfc3339",
@@ -62,7 +63,7 @@ const demoConfig: FairDOConfig = {
                 {
                     key: "licenseURL.keyword",
                     label: "License",
-                    prettyPrintURLs: true
+                    usePidResolver: true
                 },
                 {
                     key: "digitalObjectType.keyword",
@@ -168,7 +169,7 @@ export const GenericResultRenderer: Story = {
                         icon: <UserIcon className="rfs-shrink-0 rfs-size-4 rfs-mr-2" />,
                         label: "Contact",
                         field: "contact",
-                        valueMapper: (v) => (Array.isArray(v) ? v.map((vv) => <OrcidDisplay orcid={vv} />) : <OrcidDisplay orcid={v} />)
+                        singleValueMapper: (v) => <OrcidDisplay orcid={v} />
                     },
                     {
                         icon: <GraduationCap className="rfs-shrink-0 rfs-size-4 rfs-mr-2" />,
@@ -178,26 +179,26 @@ export const GenericResultRenderer: Story = {
                     {
                         icon: <GlobeIcon className="rfs-shrink-0 rfs-size-4 rfs-mr-2" />,
                         field: "hadPrimarySource",
-                        valueMapper: (v) => tryURLPrettyPrint(v + ""),
+                        // singleValueMapper: (v) => <PidDisplay pid={v} />,
                         label: "Source"
                     },
                     {
                         icon: <ScaleIcon className="rfs-shrink-0 rfs-size-4 rfs-mr-2" />,
                         field: "licenseURL",
-                        valueMapper: (v) => tryURLPrettyPrint(v + ""),
+                        singleValueMapper: (v) => tryURLPrettyPrint(v),
                         label: "License URL"
                     },
                     {
                         icon: <AtomIcon className="rfs-shrink-0 rfs-size-4 rfs-mr-2" />,
                         field: "Compound.Molar_mass",
                         label: "Molar Mass",
-                        valueMapper: (v) => v + " g/mol"
+                        singleValueMapper: (v) => v + " g/mol"
                     },
                     {
                         icon: <Microscope className="rfs-shrink-0 rfs-size-4 rfs-mr-2" />,
                         label: "NMR Method",
                         field: "NMR_Method",
-                        valueMapper: (v) => <PidDisplay pid={v + ""} />
+                        singleValueMapper: (v) => <PidDisplay pid={v} />
                     },
                     {
                         icon: <AudioLines className="rfs-shrink-0 rfs-size-4 rfs-mr-2" />,
@@ -207,7 +208,8 @@ export const GenericResultRenderer: Story = {
                     {
                         icon: <CircleDot className="rfs-shrink-0 rfs-size-4 rfs-mr-2" />,
                         label: "Acquisition Nucleus",
-                        field: "Acquisition_Nucleus"
+                        field: "Acquisition_Nucleus",
+                        singleValueMapper: (v) => <PidDisplay pid={v} />
                     }
                 ]}
                 titleField="name"