Work on graph generalization

Author: craquet

package-lock.json

@@ -32,6 +32,7 @@
     "build": "rm -rf ./dist && tsc -p tsconfig.build.json && tsc-alias -p tsconfig.app.json && tailwind build -i src/index.css -o dist/index.css && cp ./src/elastic-ui.css ./dist"
   },
   "dependencies": {
+    "@dagrejs/dagre": "^1.1.4",
     "@elastic/react-search-ui": "^1.22.0",
     "@elastic/react-search-ui-views": "^1.22.0",
     "@elastic/search-ui": "^1.22.0",
@@ -132,4 +133,4 @@
       "url": "https://orcid.org/0009-0003-2196-9187"
     }
   ]
-}
+}

package.json

@@ -11,16 +11,19 @@ export function GlobalModalProvider(props: PropsWithChildren) {
     const [relationGraphState, setRelationGraphState] = useState<{
         source: RelationNode[]
         target: RelationNode[]
+        base: RelationNode
         isOpen: boolean
     }>({
         source: [],
         target: [],
+        base: { id: "", label: "" },
         isOpen: false
     })
 
-    const openRelationGraph = useCallback((source: RelationNode[], target: RelationNode[]) => {
+    const openRelationGraph = useCallback((source: RelationNode[], base: RelationNode, target: RelationNode[]) => {
         setRelationGraphState({
             source,
+            base,
             target,
             isOpen: true
         })
@@ -36,8 +39,9 @@ export function GlobalModalProvider(props: PropsWithChildren) {
                 <RelationsGraphModal
                     isOpen={relationGraphState.isOpen}
                     onOpenChange={onRelationGraphOpenChange}
-                    source={relationGraphState.source}
-                    target={relationGraphState.target}
+                    referencedBy={relationGraphState.source}
+                    references={relationGraphState.target}
+                    base={relationGraphState.base}
                 />
 
                 {props.children}

src/components/GlobalModalProvider.tsx

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

src/components/RFS_GlobalModalContext.tsx

@@ -1,9 +1,9 @@
 import type { RelationNode } from "@/lib/RelationNode"
 
-import { buildGraphForReferences } from "@/components/graph/helpers"
+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 { useEffect, useMemo } from "react"
+import { useCallback, useEffect, useMemo, useRef } from "react"
 import "@xyflow/react/dist/style.css"
 
 const nodeTypes = {
@@ -12,33 +12,38 @@ const nodeTypes = {
 
 /**
  * Renders an interactive graph for the specified RelationNodes.
- * @param props
- * @constructor
  */
-export function RelationsGraph(props: {
-    /**
-     * Source of the relation
-     */
-    source: RelationNode[]
-    /**
-     * Targets of the relation. Will be connected to the base (source) only
-     */
-    target: RelationNode[]
-}) {
+export function RelationsGraph(props: { base: RelationNode; referencedBy: RelationNode[]; references: RelationNode[] }) {
     const { initialEdges, initialNodes } = useMemo(() => {
-        return buildGraphForReferences(props.source, props.target)
-    }, [props.source, props.target])
+        return buildGraphForReferences(props.base, props.referencedBy, props.references)
+    }, [props.base, props.referencedBy, props.references])
 
-    const [nodes, , onNodesChange] = useNodesState(initialNodes)
-    const [edges, , onEdgesChange] = useEdgesState(initialEdges)
+    const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes)
+    const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges)
     const { fitView } = useReactFlow()
     const nodesInitialized = useNodesInitialized()
 
+    const onLayout = useCallback(() => {
+        const layouted = getLayoutedElements(nodes, edges)
+
+        setNodes([...layouted.nodes])
+        setEdges([...layouted.edges])
+
+        window.requestAnimationFrame(() => {
+            fitView()
+        })
+    }, [nodes, edges, setNodes, setEdges, fitView])
+
+    const onLayoutDebounced = useRef(onLayout)
+    useEffect(() => {
+        onLayoutDebounced.current = onLayout
+    }, [onLayout])
+
     useEffect(() => {
         if (nodesInitialized) {
-            fitView().then()
+            onLayoutDebounced.current()
         }
-    }, [fitView, nodesInitialized])
+    }, [nodesInitialized])
 
     return (
         <ReactFlow

src/components/graph/RelationsGraph.tsx

@@ -8,13 +8,15 @@ import { useCallback, useContext } from "react"
 export function RelationsGraphModal({
     isOpen,
     onOpenChange,
-    source,
-    target
+    referencedBy,
+    references,
+    base
 }: {
     isOpen: boolean
     onOpenChange: (val: boolean) => void
-    source: RelationNode[]
-    target: RelationNode[]
+    referencedBy: RelationNode[]
+    references: RelationNode[]
+    base: RelationNode
 }) {
     const searchContext = useContext(FairDOSearchContext)
 
@@ -31,7 +33,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>
-                        Relationship graph between {source.map((s) => s.label).join(", ")} and {target.map((s) => s.label).join(", ")}
+                        Relationship graph between {referencedBy.map((s) => s.label).join(", ")} and {references.map((s) => s.label).join(", ")}
                     </DialogTitle>
                 </VisuallyHidden.Root>
 
@@ -42,7 +44,7 @@ export function RelationsGraphModal({
                         searchForBackground: searchContext.searchForBackground
                     }}
                 >
-                    <RelationsGraph source={source} target={target} />
+                    <RelationsGraph referencedBy={referencedBy} references={references} base={base} />
                 </FairDOSearchContext.Provider>
             </DialogContent>
         </Dialog>

src/components/graph/RelationsGraphModal.tsx

@@ -1,39 +1,81 @@
 import type { RelationNode } from "@/lib/RelationNode"
+import { Edge, Node } from "@xyflow/react"
+import Dagre from "@dagrejs/dagre"
 
-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> }[] = []
+export function buildGraphForReferences(base: RelationNode, parents: RelationNode[], _children: RelationNode[]) {
+    const children = _children.filter((pid) => !parents.find((e) => e.id === pid.id))
+    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,
+            type: "plain",
+            position: { x: 0, y: 0 },
+            data: { ...base }
+        }
+    ]
     const edges: { id: string; source: string; target: string }[] = []
 
-    for (let i = 0; i < source.length; i++) {
+    for (let i = 0; i < parents.length; i++) {
         nodes.push({
-            id: source[i].id,
+            id: parents[i].id,
             type: "plain",
-            position: { x: 0, y: yStartSource + i * 100 },
-            data: { ...source[i] }
+            position: { x: -1000, y: yStartParents + i * 100 },
+            data: { ...parents[i] }
+        })
+
+        edges.push({
+            id: `e-${parents[i].id}-base`,
+            source: parents[i].id,
+            target: base.id
         })
     }
 
-    for (let i = 0; i < referenced.length; i++) {
+    for (let i = 0; i < children.length; i++) {
         nodes.push({
-            id: referenced[i].id,
+            id: children[i].id,
             type: "plain",
-            position: { x: 1000, y: yStartReferenced + i * 100 },
-            data: { ...referenced[i] }
+            position: { x: 1000, y: yStartChildren + i * 100 },
+            data: { ...children[i] }
         })
-    }
 
-    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
-            })
-        }
+        edges.push({
+            id: `e-base-${children[i].id}`,
+            source: base.id,
+            target: children[i].id
+        })
     }
 
+    console.log(nodes, edges)
+
     return { initialNodes: nodes, initialEdges: edges }
 }
+
+export function getLayoutedElements(nodes: (Node & { type: string })[], edges: Edge[]) {
+    const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}))
+    g.setGraph({ rankdir: "LR", nodesep: 25, ranksep: 100 })
+
+    edges.forEach((edge) => g.setEdge(edge.source, edge.target))
+    nodes.forEach((node) =>
+        g.setNode(node.id, {
+            ...node,
+            width: node.measured?.width ?? 0,
+            height: node.measured?.height ?? 0
+        })
+    )
+
+    Dagre.layout(g)
+
+    return {
+        nodes: nodes.map((node) => {
+            const position = g.node(node.id)
+            // We are shifting the dagre node position (anchor=center center) to the top left
+            // so it matches the React Flow node anchor point (top left).
+            const x = position.x - (node.measured?.width ?? 0) / 2
+            const y = position.y - (node.measured?.height ?? 0) / 2
+
+            return { ...node, position: { x, y } }
+        }),
+        edges
+    }
+}

src/components/graph/helpers.ts

@@ -24,8 +24,13 @@ export const Default: Story = {
         )
     ],
     args: {
-        base: new BasicRelationNode("T10/436895408650943", "Source"),
-        referenced: [
+        referencedBy: [
+            new BasicRelationNode("T10/parentA", "Parent"),
+            new BasicRelationNode("T10/parentB", "Parent"),
+            new BasicRelationNode("T10/parentC", "Source")
+        ],
+        base: new BasicRelationNode("T10/436895408650943, abcde", "Source"),
+        references: [
             new BasicRelationNode("T10/436895408650941", "Dataset", "Something else"),
             new BasicRelationNode("T10/436895408650942", "Dataset"),
             new BasicRelationNode("T10/436895408650944", "Dataset"),