Abstract relation graph, can handle any sequential graph

Author: craquet

src/components/GlobalModalProvider.tsx

@@ -6,26 +6,25 @@ import { ReactFlowProvider } from "@xyflow/react"
 import { useCallback, useState } from "react"
 import { RFS_GlobalModalContext } from "./RFS_GlobalModalContext"
 import { ResultViewProps } from "@elastic/react-search-ui-views"
+import { GraphNode } from "@/components/graph/GraphNode"
+import { RelationsGraphOptions } from "@/components/graph/RelationsGraphOptions"
 
 export function GlobalModalProvider(props: PropsWithChildren<{ resultView: ComponentType<ResultViewProps> }>) {
     const [relationGraphState, setRelationGraphState] = useState<{
-        source: string[]
-        target: string[]
-        base: string
+        nodes: GraphNode[]
+        options: RelationsGraphOptions
         isOpen: boolean
     }>({
-        source: [],
-        target: [],
-        base: "",
+        nodes: [],
+        options: {},
         isOpen: false
     })
 
-    const openRelationGraph = useCallback((source: string[], base: string, target: string[]) => {
+    const openRelationGraph = useCallback((nodes: GraphNode[], options?: RelationsGraphOptions) => {
         setRelationGraphState({
-            source,
-            base,
-            target,
-            isOpen: true
+            nodes,
+            isOpen: true,
+            options: options ?? {}
         })
     }, [])
 
@@ -37,12 +36,11 @@ export function GlobalModalProvider(props: PropsWithChildren<{ resultView: Compo
         <RFS_GlobalModalContext.Provider value={{ openRelationGraph }}>
             <ReactFlowProvider>
                 <RelationsGraphModal
+                    nodes={relationGraphState.nodes}
                     isOpen={relationGraphState.isOpen}
                     onOpenChange={onRelationGraphOpenChange}
-                    referencedBy={relationGraphState.source}
-                    references={relationGraphState.target}
-                    base={relationGraphState.base}
                     resultView={props.resultView}
+                    options={relationGraphState.options}
                 />
 
                 {props.children}

src/components/RFS_GlobalModalContext.tsx

@@ -1,7 +1,9 @@
 import { createContext } from "react"
+import { GraphNode } from "@/components/graph/GraphNode"
+import { RelationsGraphOptions } from "@/components/graph/RelationsGraphOptions"
 
 export const RFS_GlobalModalContext = createContext<{
-    openRelationGraph: (source: string[], base: string, target: string[]) => void
+    openRelationGraph: (nodes: GraphNode[], options?: RelationsGraphOptions) => void
 }>({
     openRelationGraph: (): void => {
         throw "GlobalModalProvider not mounted"

src/components/graph/GraphNode.ts

@@ -0,0 +1,7 @@
+export interface GraphNode {
+    type: string
+    id: string
+    in: string[]
+    out: string[]
+    data?: Record<string, unknown>
+}

src/components/graph/GraphNodeUtils.ts

@@ -0,0 +1,25 @@
+import { GraphNode } from "@/components/graph/GraphNode"
+import { toArray } from "@/components/result"
+
+export class GraphNodeUtils {
+    static buildNodesSequential(type: string, ...ids: (string | string[])[]): GraphNode[] {
+        const nodes: GraphNode[] = []
+
+        for (let layer = 0; layer < ids.length; layer++) {
+            const previousLayer = layer > 0 ? toArray(ids[layer - 1]) : []
+            const currentLayer = toArray(ids[layer])
+            const nextLayer = layer + 1 < ids.length ? toArray(ids[layer + 1]) : []
+
+            for (const node of currentLayer) {
+                nodes.push({
+                    type,
+                    id: node,
+                    in: previousLayer,
+                    out: nextLayer
+                })
+            }
+        }
+
+        return nodes
+    }
+}

src/components/graph/PlainNode.tsx

@@ -1,4 +1,4 @@
-import { buildGraphForReferences, getLayoutedElements, ResultPID } from "@/components/graph/helpers"
+import { buildGraphForReferences, getLayoutedElements } from "@/components/graph/helpers"
 import {
     Background,
     BackgroundVariant,
@@ -14,28 +14,22 @@ import {
 } from "@xyflow/react"
 import { ComponentType, useCallback, useEffect, useMemo, useRef } from "react"
 import "@xyflow/react/dist/style.css"
-import { useStore } from "zustand"
-import { resultCache } from "@/lib/ResultCache"
 import { ResultViewWrapper } from "@/components/graph/ResultViewWrapper"
 import { ResultViewProps } from "@elastic/react-search-ui-views"
+import { GraphNode } from "@/components/graph/GraphNode"
+import { RelationsGraphOptions } from "@/components/graph/RelationsGraphOptions"
 
 /**
  * Renders an interactive graph for the specified results. Results will be fetched from cache via PID. Currently intended for internal use only.
  */
-export function RelationsGraph(props: { base: string; referencedBy: string[]; references: string[]; resultView: ComponentType<ResultViewProps> }) {
-    const getFromCache = useStore(resultCache, (s) => s.get)
-
+export function RelationsGraph(props: { nodes: GraphNode[]; options?: RelationsGraphOptions; resultView: ComponentType<ResultViewProps> }) {
     const { initialEdges, initialNodes } = useMemo(() => {
-        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])
+        return buildGraphForReferences(props.nodes)
+    }, [props.nodes])
 
     const nodeTypes = useMemo(() => {
         return {
-            plain: (nodeProps: NodeProps) => <ResultViewWrapper {...nodeProps} resultView={props.resultView} />
+            result: (nodeProps: NodeProps) => <ResultViewWrapper {...nodeProps} resultView={props.resultView} />
         }
     }, [props.resultView])
 
@@ -58,11 +52,11 @@ export function RelationsGraph(props: { base: string; referencedBy: string[]; re
 
         window.requestAnimationFrame(() => {
             setTimeout(() => {
-                fitView({ nodes: [{ id: props.base }], duration: 200, padding: 1 })
+                fitView({ nodes: props.options?.focusedNodes?.map((n) => ({ id: n })), duration: 200, padding: 1 })
                 updateNodeInternals(nodes.map((n) => n.id))
             }, 100)
         })
-    }, [nodes, edges, setNodes, setEdges, fitView, props.base, updateNodeInternals])
+    }, [nodes, edges, setNodes, setEdges, fitView, props.options?.focusedNodes, updateNodeInternals])
 
     const onLayoutDebounced = useRef(onLayout)
     useEffect(() => {

src/components/graph/RelationsGraph.tsx

@@ -4,20 +4,20 @@ import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog"
 import * as VisuallyHidden from "@radix-ui/react-visually-hidden"
 import { ComponentType, useCallback, useContext } from "react"
 import { ResultViewProps } from "@elastic/react-search-ui-views"
+import { GraphNode } from "@/components/graph/GraphNode"
+import { RelationsGraphOptions } from "@/components/graph/RelationsGraphOptions"
 
 export function RelationsGraphModal({
     isOpen,
     onOpenChange,
-    referencedBy,
-    references,
-    base,
-    resultView
+    nodes,
+    resultView,
+    options
 }: {
     isOpen: boolean
     onOpenChange: (val: boolean) => void
-    referencedBy: string[]
-    references: string[]
-    base: string
+    nodes: GraphNode[]
+    options?: RelationsGraphOptions
     resultView: ComponentType<ResultViewProps>
 }) {
     const searchContext = useContext(FairDOSearchContext)
@@ -34,7 +34,7 @@ export function RelationsGraphModal({
         <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">
                 <VisuallyHidden.Root>
-                    <DialogTitle>Relationship graph for PID {base}</DialogTitle>
+                    <DialogTitle>Relationship graph</DialogTitle>
                 </VisuallyHidden.Root>
 
                 <FairDOSearchContext.Provider
@@ -46,7 +46,7 @@ export function RelationsGraphModal({
                         config: searchContext.config
                     }}
                 >
-                    <RelationsGraph referencedBy={referencedBy} references={references} base={base} resultView={resultView} />
+                    <RelationsGraph nodes={nodes} resultView={resultView} options={options} />
                 </FairDOSearchContext.Provider>
             </DialogContent>
         </Dialog>

src/components/graph/RelationsGraphModal.tsx

@@ -0,0 +1,3 @@
+export interface RelationsGraphOptions {
+    focusedNodes?: string[]
+}

src/components/graph/RelationsGraphOptions.ts

@@ -4,10 +4,18 @@ import { ResultViewProps } from "@elastic/react-search-ui-views"
 import { FairDOSearchContext } from "@/components/FairDOSearchContext"
 import { Button } from "@/components/ui/button"
 import { SearchIcon } from "lucide-react"
+import { useStore } from "zustand/index"
+import { resultCache } from "@/lib/ResultCache"
+
+export function ResultViewWrapper({ resultView: ResultView, id }: NodeProps & { resultView: ComponentType<ResultViewProps> }) {
+    const get = useStore(resultCache, (s) => s.get)
+
+    const data = useMemo(() => {
+        return get(id)
+    }, [get, id])
 
-export function ResultViewWrapper({ resultView: ResultView, data, id }: NodeProps & { resultView: ComponentType<ResultViewProps> }) {
     const dataEmpty = useMemo(() => {
-        return Object.keys(data).length === 0
+        return !data || Object.keys(data).length === 0
     }, [data])
 
     const { searchFor } = useContext(FairDOSearchContext)
@@ -19,7 +27,7 @@ export function ResultViewWrapper({ resultView: ResultView, data, id }: NodeProp
     return (
         <div className="rfs-w-[800px] -rfs-m-2">
             <Handle type="target" position={Position.Left} />
-            {dataEmpty ? (
+            {!data || dataEmpty ? (
                 <div className="rfs-m-2 rfs-p-4 rfs-rounded-lg rfs-bg-background rfs-border rfs-flex rfs-justify-between rfs-items-center">
                     <div>
                         <div>{id}</div>