Spaces:
Sleeping
Sleeping
Commit ·
57fa65c
1
Parent(s): e735b1b
Fix force-graph mount: use ForceGraph2D()(element) not ForceGraph2D(element)
Browse filesKapsule (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 |
-
|
| 69 |
-
|
|
|
|
|
|
|
| 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
|
| 82 |
-
|
| 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)
|