AdithyaVardan commited on
Commit
57fa65c
·
1 Parent(s): e735b1b

Fix force-graph mount: use ForceGraph2D()(element) not ForceGraph2D(element)

Browse files

Kapsule (force-graph's base) uses a two-call pattern: first call creates
the instance, second call with a DOM element mounts it. Passing the element
to the first call treated it as options — the canvas was never attached to
the DOM so nothing rendered. Also set explicit width/height.

frontend/src/components/results/KnowledgeGraph.tsx CHANGED
@@ -65,12 +65,16 @@ export function KnowledgeGraph({ nodes, edges, loading, onNodeClick, onNodeHover
65
  import('force-graph').then(({ default: ForceGraph2D }) => {
66
  if (!containerRef.current) return
67
 
68
- graphRef.current = ForceGraph2D(containerRef.current)
69
- .backgroundColor('transparent')
 
 
70
  .nodeId('id')
71
  .nodeLabel('name')
72
  .nodeColor((n: FGNode) => n.color)
73
  .nodeRelSize(6)
 
 
74
  .linkColor(() => '#94a3b8')
75
  .linkLabel('rel')
76
  .linkDirectionalArrowLength(4)
@@ -78,11 +82,10 @@ export function KnowledgeGraph({ nodes, edges, loading, onNodeClick, onNodeHover
78
  .onNodeClick((n: FGNode) => {
79
  onNodeClick({ id: n.id, label: n.label, name: n.name })
80
  })
81
- .onNodeHover((n: FGNode | null, _prev: unknown, event: MouseEvent) => {
82
- const x = event?.clientX ?? 0
83
- const y = event?.clientY ?? 0
84
- onNodeHover(n ? { id: n.id, label: n.label, name: n.name } : null, x, y)
85
  })
 
86
 
87
  // Push any data that arrived before the canvas was ready
88
  pushData(pendingRef.current.nodes, pendingRef.current.edges)
 
65
  import('force-graph').then(({ default: ForceGraph2D }) => {
66
  if (!containerRef.current) return
67
 
68
+ // ForceGraph2D() returns a component function; call it with the element to mount
69
+ const fg = ForceGraph2D()
70
+ fg(containerRef.current)
71
+ fg.backgroundColor('transparent')
72
  .nodeId('id')
73
  .nodeLabel('name')
74
  .nodeColor((n: FGNode) => n.color)
75
  .nodeRelSize(6)
76
+ .width(containerRef.current.clientWidth || 380)
77
+ .height(containerRef.current.clientHeight || 400)
78
  .linkColor(() => '#94a3b8')
79
  .linkLabel('rel')
80
  .linkDirectionalArrowLength(4)
 
82
  .onNodeClick((n: FGNode) => {
83
  onNodeClick({ id: n.id, label: n.label, name: n.name })
84
  })
85
+ .onNodeHover((n: FGNode | null) => {
86
+ onNodeHover(n ? { id: n.id, label: n.label, name: n.name } : null, 0, 0)
 
 
87
  })
88
+ graphRef.current = fg
89
 
90
  // Push any data that arrived before the canvas was ready
91
  pushData(pendingRef.current.nodes, pendingRef.current.edges)