Fixes and allow relation graph to display n:n relations

craquet · craquet · commit 35021196e07a · 2025-01-27T17:58:00.000+01:00
diff --git a/src/components/GlobalModalProvider.tsx b/src/components/GlobalModalProvider.tsx
@@ -9,19 +9,19 @@ import { RFS_GlobalModalContext } from "./RFS_GlobalModalContext"
 
 export function GlobalModalProvider(props: PropsWithChildren) {
     const [relationGraphState, setRelationGraphState] = useState<{
-        base: RelationNode
-        referenced: RelationNode[]
+        source: RelationNode[]
+        target: RelationNode[]
         isOpen: boolean
     }>({
-        base: { id: "", label: "" },
-        referenced: [],
+        source: [],
+        target: [],
         isOpen: false
     })
 
-    const openRelationGraph = useCallback((base: RelationNode, referenced: RelationNode[]) => {
+    const openRelationGraph = useCallback((source: RelationNode[], target: RelationNode[]) => {
         setRelationGraphState({
-            base,
-            referenced,
+            source,
+            target,
             isOpen: true
         })
     }, [])
@@ -36,8 +36,8 @@ export function GlobalModalProvider(props: PropsWithChildren) {
                 <RelationsGraphModal
                     isOpen={relationGraphState.isOpen}
                     onOpenChange={onRelationGraphOpenChange}
-                    base={relationGraphState.base}
-                    referenced={relationGraphState.referenced}
+                    source={relationGraphState.source}
+                    target={relationGraphState.target}
                 />
 
                 {props.children}
diff --git a/src/components/RFS_GlobalModalContext.tsx b/src/components/RFS_GlobalModalContext.tsx
@@ -2,7 +2,7 @@ import type { RelationNode } from "@/lib/RelationNode"
 import { createContext } from "react"
 
 export const RFS_GlobalModalContext = createContext<{
-    openRelationGraph: (base: RelationNode, referenced: RelationNode[]) => void
+    openRelationGraph: (source: RelationNode[], target: RelationNode[]) => void
 }>({
     openRelationGraph: (): void => {
         throw "GlobalModalProvider not mounted"
diff --git a/src/components/graph/RelationsGraph.tsx b/src/components/graph/RelationsGraph.tsx
@@ -19,15 +19,15 @@ export function RelationsGraph(props: {
     /**
      * Source of the relation
      */
-    base: RelationNode
+    source: RelationNode[]
     /**
      * Targets of the relation. Will be connected to the base (source) only
      */
-    referenced: RelationNode[]
+    target: RelationNode[]
 }) {
     const { initialEdges, initialNodes } = useMemo(() => {
-        return buildGraphForReferences(props.base, props.referenced)
-    }, [props.base, props.referenced])
+        return buildGraphForReferences(props.source, props.target)
+    }, [props.source, props.target])
 
     const [nodes, , onNodesChange] = useNodesState(initialNodes)
     const [edges, , onEdgesChange] = useEdgesState(initialEdges)
diff --git a/src/components/graph/RelationsGraphModal.tsx b/src/components/graph/RelationsGraphModal.tsx
@@ -8,13 +8,13 @@ import { useCallback, useContext } from "react"
 export function RelationsGraphModal({
     isOpen,
     onOpenChange,
-    base,
-    referenced
+    source,
+    target
 }: {
     isOpen: boolean
     onOpenChange: (val: boolean) => void
-    base: RelationNode
-    referenced: RelationNode[]
+    source: RelationNode[]
+    target: RelationNode[]
 }) {
     const searchContext = useContext(FairDOSearchContext)
 
@@ -31,8 +31,7 @@ export function RelationsGraphModal({
             <DialogContent className="rfs-h-max rfs-max-h-[min(100vh,800px)] rfs-min-h-[500px] rfs-min-w-[500px] !rfs-max-w-[min(calc(100vw-40px),1500px)] rfs-p-0">
                 <VisuallyHidden.Root>
                     <DialogTitle>
-                        FDOs related to
-                        {base.label}
+                        Relationship graph between {source.map((s) => s.label).join(", ")} and {target.map((s) => s.label).join(", ")}
                     </DialogTitle>
                 </VisuallyHidden.Root>
 
@@ -43,7 +42,7 @@ export function RelationsGraphModal({
                         searchForBackground: searchContext.searchForBackground
                     }}
                 >
-                    <RelationsGraph base={base} referenced={referenced} />
+                    <RelationsGraph source={source} target={target} />
                 </FairDOSearchContext.Provider>
             </DialogContent>
         </Dialog>
diff --git a/src/components/graph/helpers.ts b/src/components/graph/helpers.ts
@@ -1,23 +1,38 @@
 import type { RelationNode } from "@/lib/RelationNode"
 
-export function buildGraphForReferences(base: RelationNode, _referenced: RelationNode[]) {
-    const referenced = _referenced.filter((pid) => pid !== base)
-    const yStart = -((referenced.length - 1) * 100) / 2
-    const nodes = [{ id: base.id, type: "plain", position: { x: 0, y: 0 }, data: { ...base } }]
+export function buildGraphForReferences(source: RelationNode[], _referenced: RelationNode[]) {
+    const referenced = _referenced.filter((pid) => !source.find((e) => e.id === pid.id))
+    const yStartSource = -((source.length - 1) * 100) / 2
+    const yStartReferenced = -((referenced.length - 1) * 100) / 2
+    const nodes: { id: string; type: string; position: { x: number; y: number }; data: Record<string, unknown> }[] = []
     const edges: { id: string; source: string; target: string }[] = []
 
+    for (let i = 0; i < source.length; i++) {
+        nodes.push({
+            id: source[i].id,
+            type: "plain",
+            position: { x: 0, y: yStartSource + i * 100 },
+            data: { ...source[i] }
+        })
+    }
+
     for (let i = 0; i < referenced.length; i++) {
         nodes.push({
             id: referenced[i].id,
             type: "plain",
-            position: { x: 1000, y: yStart + i * 100 },
+            position: { x: 1000, y: yStartReferenced + i * 100 },
             data: { ...referenced[i] }
         })
-        edges.push({
-            id: `e-${base.id}-${referenced[i].id}`,
-            source: base.id,
-            target: referenced[i].id
-        })
+    }
+
+    for (let x = 0; x < source.length; x++) {
+        for (let y = 0; y < referenced.length; y++) {
+            edges.push({
+                id: `e-${source[x].id}-${referenced[y].id}`,
+                source: source[x].id,
+                target: referenced[y].id
+            })
+        }
     }
 
     return { initialNodes: nodes, initialEdges: edges }
diff --git a/src/components/result/GenericResultView.tsx b/src/components/result/GenericResultView.tsx
@@ -3,7 +3,7 @@ import { RFS_GlobalModalContext } from "@/components/RFS_GlobalModalContext"
 import { FairDOSearchContext } from "@/components/FairDOSearchContext"
 import { useStore } from "zustand/index"
 import { resultCache } from "@/lib/ResultCache"
-import { autoUnwrap, autoUnwrapArray } from "@/components/result/utils"
+import { autoUnwrap, autoUnwrapArray, toArray } from "@/components/result/utils"
 import { DateTime } from "luxon"
 import { BasicRelationNode } from "@/lib/RelationNode"
 import { BookText, ChevronDown, GitFork, ImageOff, LinkIcon, Microscope } from "lucide-react"
@@ -64,9 +64,9 @@ export interface GenericResultViewProps {
     relatedItemPidsField?: string
 
     /**
-     * Options for prefetching of related items in the relations graph. It is recommended to defined this if the default settings don't work properly.
+     * Options for prefetching of related items in the relations graph. It is recommended to define this if the default settings don't work properly.
      */
-    relatedItemsPrefetch?: { prefetchAmount?: number; searchFields?: Record<string, SearchFieldConfiguration> }
+    relatedItemsPrefetch?: { searchFields?: Record<string, SearchFieldConfiguration> }
 
     /**
      * The elastic field where the unique identifier of the parent item (metadata item) of the current FDO will be read from. Will be accessible via a `Find Metadata` button
@@ -111,7 +111,7 @@ export function GenericResultView({
     parentItemPidField = "hasMetadata",
     creationDateField = "creationDate",
     additionalIdentifierField = "identifier",
-    relatedItemsPrefetch = { prefetchAmount: 20, searchFields: { pid: {} } },
+    relatedItemsPrefetch = { searchFields: { pid: {} } },
     tags = [],
     showOpenInFairDoScope = true
 }: GenericResultViewProps) {
@@ -207,8 +207,9 @@ export function GenericResultView({
     }, [getField, additionalIdentifierField])
 
     const isMetadataFor = useMemo(() => {
-        return getArrayField(relatedItemPidsField ?? "isMetadataFor")
-    }, [getArrayField, relatedItemPidsField])
+        const val = getArrayOrSingleField(relatedItemPidsField ?? "isMetadataFor")
+        return val ? toArray(val) : undefined
+    }, [getArrayOrSingleField, relatedItemPidsField])
 
     const creationDate = useMemo(() => {
         const value = getField(creationDateField ?? "dateCreated")
@@ -218,54 +219,85 @@ export function GenericResultView({
     }, [creationDateField, getField])
 
     const hasMetadata = useMemo(() => {
-        return getField(parentItemPidField ?? "hasMetadata")
-    }, [getField, parentItemPidField])
-
-    const fetchRelatedItems = useCallback(async () => {
-        const search = await elasticConnector?.onSearch(
-            { searchTerm: pid, resultsPerPage: relatedItemsPrefetch?.prefetchAmount },
-            {
-                result_fields: {},
-                searchTerm: pid,
-                search_fields: relatedItemsPrefetch?.searchFields ?? { [pidField ?? "pid"]: {} },
-                resultsPerPage: relatedItemsPrefetch?.prefetchAmount
+        const val = getArrayOrSingleField(parentItemPidField ?? "hasMetadata")
+        return val ? toArray(val) : undefined
+    }, [getArrayOrSingleField, parentItemPidField])
+
+    const fetchRelatedItems = useCallback(
+        async (term: string, amount: number) => {
+            const search = await elasticConnector?.onSearch(
+                { searchTerm: term, resultsPerPage: amount },
+                {
+                    result_fields: {},
+                    searchTerm: term,
+                    search_fields: relatedItemsPrefetch?.searchFields ?? { [pidField ?? "pid"]: {} },
+                    resultsPerPage: amount
+                }
+            )
+
+            if (search) {
+                for (const entry of search.results) {
+                    const pid = autoUnwrap(entry[pidField ?? "pid"])
+                    if (!pid) continue
+                    addToResultCache(pid, {
+                        pid,
+                        name: autoUnwrap(entry[titleField ?? "name"]) ?? ""
+                    })
+                }
             }
-        )
-
-        if (search) {
-            for (const entry of search.results) {
-                const pid = autoUnwrap(entry[pidField ?? "pid"])
-                if (!pid) continue
-                addToResultCache(pid, {
-                    pid,
-                    name: autoUnwrap(entry[titleField ?? "name"]) ?? ""
+        },
+        [addToResultCache, elasticConnector, pidField, relatedItemsPrefetch?.searchFields, titleField]
+    )
+
+    const showRelatedItemsGraph = useCallback(async () => {
+        if (!isMetadataFor || !pid) return
+        await fetchRelatedItems(pid, isMetadataFor.length)
+
+        if (isMetadataFor.length === 1) {
+            searchFor(isMetadataFor[0])
+        } else {
+            openRelationGraph(
+                [
+                    {
+                        id: pid ?? "source",
+                        label: title ?? "Source",
+                        tag: "Current",
+                        remoteURL: doLocation,
+                        searchQuery: pid
+                    }
+                ],
+                isMetadataFor.map((pid) => {
+                    const cached = getResultFromCache(pid)
+                    return new BasicRelationNode(pid, "Related", cached?.name)
                 })
-            }
+            )
         }
-    }, [addToResultCache, elasticConnector, pid, pidField, relatedItemsPrefetch?.prefetchAmount, relatedItemsPrefetch?.searchFields, titleField])
-
-    const showRelatedItems = useCallback(async () => {
-        await fetchRelatedItems()
-
-        openRelationGraph(
-            {
-                id: pid ?? "source",
-                label: title ?? "Source",
-                tag: "Current",
-                remoteURL: doLocation,
-                searchQuery: pid
-            },
-            isMetadataFor.map((pid) => {
-                const cached = getResultFromCache(pid)
-                return new BasicRelationNode(pid, "Related", cached?.name)
-            })
-        )
-    }, [doLocation, fetchRelatedItems, getResultFromCache, isMetadataFor, openRelationGraph, pid, title])
+    }, [doLocation, fetchRelatedItems, getResultFromCache, isMetadataFor, openRelationGraph, pid, searchFor, title])
 
-    const goToMetadata = useCallback(() => {
+    const showHasMetadataGraph = useCallback(async () => {
         if (!hasMetadata) return
-        searchFor(hasMetadata)
-    }, [hasMetadata, searchFor])
+        await fetchRelatedItems(hasMetadata.join(" "), hasMetadata.length)
+
+        if (hasMetadata.length === 1) {
+            searchFor(hasMetadata[0])
+        } else {
+            openRelationGraph(
+                hasMetadata.map((pid) => {
+                    const cached = getResultFromCache(pid)
+                    return new BasicRelationNode(pid, "Metadata", cached?.name)
+                }),
+                [
+                    {
+                        id: pid ?? "current",
+                        label: title ?? "Current",
+                        tag: "Current",
+                        remoteURL: doLocation,
+                        searchQuery: pid
+                    }
+                ]
+            )
+        }
+    }, [doLocation, fetchRelatedItems, getResultFromCache, hasMetadata, openRelationGraph, pid, searchFor, title])
 
     const exactPidMatch = useMemo(() => {
         return searchTerm === pid || searchTerm === doLocation
@@ -282,10 +314,10 @@ export function GenericResultView({
 
     return (
         <div
-            className={`rfs-m-2 rfs-rounded-lg rfs-border rfs-border-border rfs-p-4 rfs-group/resultView ${exactPidMatch ? "rfs-animate-outline-ping" : ""}`}
+            className={`rfs-m-2 rfs-rounded-lg rfs-border rfs-border-border rfs-p-4 rfs-group/resultView ${exactPidMatch ? "rfs-animate-rfs-outline-ping" : ""}`}
         >
             <div
-                className={`rfs-grid ${imageField ? "rfs-grid-rows-[100px_1fr] md:rfs-grid-cols-[200px_1fr] md:rfs-grid-rows-1" : ""} rfs-gap-4 rfs-overflow-x-auto md:rfs-max-w-full`}
+                className={`rfs-grid ${imageField ? "rfs-grid-rows-[150px_1fr] md:rfs-grid-cols-[200px_1fr] md:rfs-grid-rows-1" : ""} rfs-gap-4 rfs-overflow-x-auto md:rfs-max-w-full`}
             >
                 {imageField && (
                     <div
@@ -295,7 +327,11 @@ export function GenericResultView({
                             Array.isArray(previewImage) ? (
                                 <GenericResultViewImageCarousel images={previewImage} title={title} />
                             ) : (
-                                <img className="md:rfs-size-[200px]" src={previewImage} alt={`Preview for ${title}`} />
+                                <img
+                                    className="md:rfs-max-h-[200px] md:rfs-max-w-[200px] rfs-object-contain"
+                                    src={previewImage}
+                                    alt={`Preview for ${title}`}
+                                />
                             )
                         ) : (
                             <div className="rfs-flex rfs-flex-col rfs-justify-center dark:rfs-text-background">
@@ -324,30 +360,30 @@ export function GenericResultView({
                     </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">
-                        {isMetadataFor.length > 0 && (
+                        {isMetadataFor && isMetadataFor.length > 0 && (
                             <div className="rfs-flex rfs-items-center">
-                                <Button className="rfs-grow rfs-rounded-r-none" size="sm" variant="secondary" onClick={showRelatedItems}>
+                                <Button className="rfs-grow rfs-rounded-r-none" size="sm" variant="secondary" onClick={showRelatedItemsGraph}>
                                     <GitFork className="rfs-mr-1 rfs-size-4" /> Show Related Items
                                 </Button>
                                 <Button
                                     className="rfs-rounded-l-none rfs-border-l rfs-border-l-border rfs-text-xs rfs-font-bold"
                                     size="sm"
                                     variant="secondary"
-                                    onClick={showRelatedItems}
+                                    onClick={showRelatedItemsGraph}
                                 >
                                     {isMetadataFor.length}
                                 </Button>
                             </div>
                         )}
                         {hasMetadata && (
-                            <Button className="" size="sm" variant="secondary" onClick={goToMetadata}>
+                            <Button className="" size="sm" variant="secondary" onClick={showHasMetadataGraph}>
                                 <BookText className="rfs-mr-1 rfs-size-4" /> Find Metadata
                             </Button>
                         )}
 
                         {landingPageLocation && (
                             <div className="rfs-flex rfs-items-center">
-                                <a href={landingPageLocation} target="_blank" className="grow">
+                                <a href={landingPageLocation} target="_blank" className="rfs-grow">
                                     <Button size="sm" className="rfs-w-full rfs-rounded-r-none rfs-px-4">
                                         Open
                                     </Button>
diff --git a/src/components/result/utils.ts b/src/components/result/utils.ts
@@ -22,3 +22,8 @@ export function autoUnwrapArray(item?: string[] | { raw?: string[] }) {
         return [JSON.stringify(item)]
     }
 }
+
+export function toArray<E>(element: E | E[]) {
+    if (Array.isArray(element)) return element
+    else return [element]
+}
diff --git a/src/stories/FairDOElasticSearch.stories.tsx b/src/stories/FairDOElasticSearch.stories.tsx
diff --git a/tailwind.config.js b/tailwind.config.js

Original file line number	Diff line number	Diff line change
`@@ -22,3 +22,8 @@ export function autoUnwrapArray(item?: string[] \| { raw?: string[] }) {`
`22`	`22`	`return [JSON.stringify(item)]`
`23`	`23`	`}`
`24`	`24`	`}`
	`25`	`+`
	`26`	`+export function toArray<E>(element: E \| E[]) {`
	`27`	`+ if (Array.isArray(element)) return element`
	`28`	`+ else return [element]`
	`29`	`+}`