From a2a51f81815293035aeab3cd7c3b04dcd58de69c Mon Sep 17 00:00:00 2001 From: wind Date: Mon, 2 Mar 2026 15:08:01 +0100 Subject: [PATCH] fix: topology graph empty after async fetch useNodesState/useEdgesState only consume their argument as an initial value at mount time. Since topology is fetched async, the nodes/edges arrays were always empty when React Flow initialised. Fix: capture setNodes/setEdges from the hooks and sync them via useEffect whenever initialNodes/initialEdges change (i.e. when the fetch resolves). Also removes the inert 'synced' state that was added as a failed workaround but never called setNodes/setEdges. Closes #109 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- frontend/src/pages/TopologyPage.tsx | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/frontend/src/pages/TopologyPage.tsx b/frontend/src/pages/TopologyPage.tsx index 8ebb7f4..3968236 100644 --- a/frontend/src/pages/TopologyPage.tsx +++ b/frontend/src/pages/TopologyPage.tsx @@ -210,16 +210,19 @@ export function TopologyPage() { [topology, gateway], ); - const [rfNodes, , onNodesChange] = useNodesState(initialNodes); - const [rfEdges, , onEdgesChange] = useEdgesState(initialEdges); + const [rfNodes, setNodes, onNodesChange] = useNodesState(initialNodes); + const [rfEdges, setEdges, onEdgesChange] = useEdgesState(initialEdges); - // Sync when topology loads - const [synced, setSynced] = useState(false); + // Sync React Flow state when topology data arrives (useNodesState/useEdgesState + // only consume their argument as an initial value, so async fetch results must + // be pushed in explicitly via setNodes/setEdges). useEffect(() => { - if (topology.length > 0 && !synced) { - setSynced(true); - } - }, [topology, synced]); + setNodes(initialNodes); + }, [initialNodes, setNodes]); + + useEffect(() => { + setEdges(initialEdges); + }, [initialEdges, setEdges]); if (loading) { return (