Display result view in graph

Author: craquet

package-lock.json

@@ -73,7 +73,7 @@ export function FairDOElasticSearch({
         <SearchProvider config={elasticConfig}>
             <FairDOSearchProvider config={rawConfig}>
                 <TooltipProvider>
-                    <GlobalModalProvider>
+                    <GlobalModalProvider resultView={actualResultView}>
                         <WithSearch
                             mapContextToProps={({ wasSearched, isLoading }: SearchContextState) => ({
                                 wasSearched,

src/components/FairDOElasticSearch.tsx

@@ -1,26 +1,26 @@
 "use client"
 
-import type { RelationNode } from "@/lib/RelationNode"
-import type { PropsWithChildren } from "react"
+import type { ComponentType, PropsWithChildren } from "react"
 import { RelationsGraphModal } from "@/components/graph/RelationsGraphModal"
 import { ReactFlowProvider } from "@xyflow/react"
 import { useCallback, useState } from "react"
 import { RFS_GlobalModalContext } from "./RFS_GlobalModalContext"
+import { ResultViewProps } from "@elastic/react-search-ui-views"
 
-export function GlobalModalProvider(props: PropsWithChildren) {
+export function GlobalModalProvider(props: PropsWithChildren<{ resultView: ComponentType<ResultViewProps> }>) {
     const [relationGraphState, setRelationGraphState] = useState<{
-        source: RelationNode[]
-        target: RelationNode[]
-        base: RelationNode
+        source: string[]
+        target: string[]
+        base: string
         isOpen: boolean
     }>({
         source: [],
         target: [],
-        base: { id: "", label: "" },
+        base: "",
         isOpen: false
     })
 
-    const openRelationGraph = useCallback((source: RelationNode[], base: RelationNode, target: RelationNode[]) => {
+    const openRelationGraph = useCallback((source: string[], base: string, target: string[]) => {
         setRelationGraphState({
             source,
             base,
@@ -42,6 +42,7 @@ export function GlobalModalProvider(props: PropsWithChildren) {
                     referencedBy={relationGraphState.source}
                     references={relationGraphState.target}
                     base={relationGraphState.base}
+                    resultView={props.resultView}
                 />
 
                 {props.children}

src/components/GlobalModalProvider.tsx

@@ -1,8 +1,7 @@
-import type { RelationNode } from "@/lib/RelationNode"
 import { createContext } from "react"
 
 export const RFS_GlobalModalContext = createContext<{
-    openRelationGraph: (source: RelationNode[], base: RelationNode, target: RelationNode[]) => void
+    openRelationGraph: (source: string[], base: string, target: string[]) => void
 }>({
     openRelationGraph: (): void => {
         throw "GlobalModalProvider not mounted"

src/components/RFS_GlobalModalContext.tsx

@@ -1,27 +1,52 @@
-import type { RelationNode } from "@/lib/RelationNode"
-
-import { buildGraphForReferences, getLayoutedElements } from "@/components/graph/helpers"
-import { PlainNode } from "@/components/graph/PlainNode"
-import { Background, BackgroundVariant, ReactFlow, useEdgesState, useNodesInitialized, useNodesState, useReactFlow } from "@xyflow/react"
-import { useCallback, useEffect, useMemo, useRef } from "react"
+import { buildGraphForReferences, getLayoutedElements, ResultPID } from "@/components/graph/helpers"
+import {
+    Background,
+    BackgroundVariant,
+    NodeProps,
+    ReactFlow,
+    useEdgesState,
+    useNodesInitialized,
+    useNodesState,
+    useReactFlow,
+    useUpdateNodeInternals
+} from "@xyflow/react"
+import { ComponentType, useCallback, useEffect, useMemo, useRef } from "react"
 import "@xyflow/react/dist/style.css"
-
-const nodeTypes = {
-    plain: PlainNode
-}
+import { useStore } from "zustand"
+import { resultCache } from "@/lib/ResultCache"
+import { ResultViewWrapper } from "@/components/graph/ResultViewWrapper"
+import { ResultViewProps } from "@elastic/react-search-ui-views"
 
 /**
  * Renders an interactive graph for the specified RelationNodes.
  */
-export function RelationsGraph(props: { base: RelationNode; referencedBy: RelationNode[]; references: RelationNode[] }) {
+export function RelationsGraph(props: { base: string; referencedBy: string[]; references: string[]; resultView: ComponentType<ResultViewProps> }) {
+    const getFromCache = useStore(resultCache, (s) => s.get)
+
     const { initialEdges, initialNodes } = useMemo(() => {
-        return buildGraphForReferences(props.base, props.referencedBy, props.references)
-    }, [props.base, props.referencedBy, props.references])
+        const base: ResultPID = { pid: props.base, result: getFromCache(props.base) }
+        const referencedBy = props.referencedBy.map((pid) => ({ pid, result: getFromCache(pid) }))
+        const references = props.references.map((pid) => ({ pid, result: getFromCache(pid) }))
+
+        return buildGraphForReferences(base, referencedBy, references)
+    }, [getFromCache, props.base, props.referencedBy, props.references])
+
+    const nodeTypes = useMemo(() => {
+        return {
+            plain: (nodeProps: NodeProps) => <ResultViewWrapper {...nodeProps} resultView={props.resultView} />
+        }
+    }, [props.resultView])
 
     const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes)
     const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges)
     const { fitView } = useReactFlow()
     const nodesInitialized = useNodesInitialized()
+    const updateNodeInternals = useUpdateNodeInternals()
+
+    useEffect(() => {
+        setNodes(initialNodes)
+        setEdges(initialEdges)
+    }, [initialEdges, initialNodes, setEdges, setNodes])
 
     const onLayout = useCallback(() => {
         const layouted = getLayoutedElements(nodes, edges)
@@ -30,9 +55,12 @@ export function RelationsGraph(props: { base: RelationNode; referencedBy: Relati
         setEdges([...layouted.edges])
 
         window.requestAnimationFrame(() => {
-            fitView()
+            setTimeout(() => {
+                fitView({ nodes: [{ id: props.base }], duration: 200, padding: 1 })
+                updateNodeInternals(nodes.map((n) => n.id))
+            }, 100)
         })
-    }, [nodes, edges, setNodes, setEdges, fitView])
+    }, [nodes, edges, setNodes, setEdges, fitView, props.base, updateNodeInternals])
 
     const onLayoutDebounced = useRef(onLayout)
     useEffect(() => {

src/components/graph/RelationsGraph.tsx

@@ -1,22 +1,24 @@
-import type { RelationNode } from "@/lib/RelationNode"
 import { FairDOSearchContext } from "@/components/FairDOSearchContext"
 import { RelationsGraph } from "@/components/graph/RelationsGraph"
 import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog"
 import * as VisuallyHidden from "@radix-ui/react-visually-hidden"
-import { useCallback, useContext } from "react"
+import { ComponentType, useCallback, useContext } from "react"
+import { ResultViewProps } from "@elastic/react-search-ui-views"
 
 export function RelationsGraphModal({
     isOpen,
     onOpenChange,
     referencedBy,
     references,
-    base
+    base,
+    resultView
 }: {
     isOpen: boolean
     onOpenChange: (val: boolean) => void
-    referencedBy: RelationNode[]
-    references: RelationNode[]
-    base: RelationNode
+    referencedBy: string[]
+    references: string[]
+    base: string
+    resultView: ComponentType<ResultViewProps>
 }) {
     const searchContext = useContext(FairDOSearchContext)
 
@@ -30,11 +32,9 @@ export function RelationsGraphModal({
 
     return (
         <Dialog open={isOpen} onOpenChange={onOpenChange}>
-            <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">
+            <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>
-                        Relationship graph between {referencedBy.map((s) => s.label).join(", ")} and {references.map((s) => s.label).join(", ")}
-                    </DialogTitle>
+                    <DialogTitle>Relationship graph for PID {base}</DialogTitle>
                 </VisuallyHidden.Root>
 
                 <FairDOSearchContext.Provider
@@ -44,7 +44,7 @@ export function RelationsGraphModal({
                         searchForBackground: searchContext.searchForBackground
                     }}
                 >
-                    <RelationsGraph referencedBy={referencedBy} references={references} base={base} />
+                    <RelationsGraph referencedBy={referencedBy} references={references} base={base} resultView={resultView} />
                 </FairDOSearchContext.Provider>
             </DialogContent>
         </Dialog>

src/components/graph/RelationsGraphModal.tsx

@@ -0,0 +1,21 @@
+import { Handle, NodeProps, Position } from "@xyflow/react"
+import { ComponentType, useMemo } from "react"
+import { ResultViewProps } from "@elastic/react-search-ui-views"
+
+export function ResultViewWrapper({ resultView: ResultView, data, id }: NodeProps & { resultView: ComponentType<ResultViewProps> }) {
+    const dataEmpty = useMemo(() => {
+        return Object.keys(data).length === 0
+    }, [data])
+
+    return (
+        <div className="rfs-w-[800px] -rfs-m-2">
+            <Handle type="target" position={Position.Left} />
+            {dataEmpty ? (
+                <div className="rfs-m-2 rfs-p-4 rfs-rounded-lg rfs-bg-background rfs-border">{id}</div>
+            ) : (
+                <ResultView result={data} onClickLink={() => {}} />
+            )}
+            <Handle type="source" position={Position.Right} />
+        </div>
+    )
+}

src/components/graph/ResultViewWrapper.tsx

@@ -1,53 +1,55 @@
-import type { RelationNode } from "@/lib/RelationNode"
 import { Edge, Node } from "@xyflow/react"
 import Dagre from "@dagrejs/dagre"
 
-export function buildGraphForReferences(base: RelationNode, parents: RelationNode[], _children: RelationNode[]) {
-    const children = _children.filter((pid) => !parents.find((e) => e.id === pid.id))
+export type ResultPID = {
+    pid: string
+    result?: Record<string, unknown>
+}
+
+export function buildGraphForReferences(base: ResultPID, parents: ResultPID[], _children: ResultPID[]) {
+    const children = _children.filter((pid) => !parents.find((e) => e.pid === pid.pid))
     const yStartParents = -((parents.length - 1) * 100) / 2
     const yStartChildren = -((children.length - 1) * 100) / 2
     const nodes: { id: string; type: string; position: { x: number; y: number }; data: Record<string, unknown> }[] = [
         {
-            id: base.id,
+            id: base.pid,
             type: "plain",
             position: { x: 0, y: 0 },
-            data: { ...base }
+            data: { ...base.result }
         }
     ]
     const edges: { id: string; source: string; target: string }[] = []
 
     for (let i = 0; i < parents.length; i++) {
         nodes.push({
-            id: parents[i].id,
+            id: parents[i].pid,
             type: "plain",
             position: { x: -1000, y: yStartParents + i * 100 },
-            data: { ...parents[i] }
+            data: { ...parents[i].result }
         })
 
         edges.push({
-            id: `e-${parents[i].id}-base`,
-            source: parents[i].id,
-            target: base.id
+            id: `e-${parents[i].pid}-base`,
+            source: parents[i].pid,
+            target: base.pid
         })
     }
 
     for (let i = 0; i < children.length; i++) {
         nodes.push({
-            id: children[i].id,
+            id: children[i].pid,
             type: "plain",
             position: { x: 1000, y: yStartChildren + i * 100 },
-            data: { ...children[i] }
+            data: { ...children[i].result }
         })
 
         edges.push({
-            id: `e-base-${children[i].id}`,
-            source: base.id,
-            target: children[i].id
+            id: `e-base-${children[i].pid}`,
+            source: base.pid,
+            target: children[i].pid
         })
     }
 
-    console.log(nodes, edges)
-
     return { initialNodes: nodes, initialEdges: edges }
 }