The ReactFlowProvider is correctly added for GraphVisualization, but the GraphTemplateDetail component, which also uses React Flow controls, is not wrapped by a provider. This will likely cause its controls to not function as expected.

A better approach would be to have a single ReactFlowProvider at a higher level, wrapping all components that need the React Flow context. I'd suggest moving the provider to wrap the top-level div in this component's return statement (at line 75). This would provide the context to both GraphVisualization and GraphTemplateDetail.

Example:

// at line 74
return (
  <ReactFlowProvider>
    <div className="min-h-screen bg-background">
      {/* ... rest of the component ... */}
    </div>
  </ReactFlowProvider>
);

With that change, you can remove the ReactFlowProvider wrapper from around GraphVisualization here.

You can simplify the code by removing this useCallback. The state setter function from useState (setIsInteractive) is guaranteed by React to be stable and doesn't need to be memoized. You can pass it directly to the onInteractiveChange prop in the <Controls> component at line 297:

onInteractiveChange={setIsInteractive}

⚠️ Potential issue | 🔴 Critical

Fix rules-of-hooks violation (hooks after early return).

useState/useCallback are declared after a conditional return (Line 240), which will crash with "Rendered fewer hooks than expected" when nodes length changes.

Apply this diff to remove the hooks here:

-  const [isInteractive, setIsInteractive] = useState(true);
-  const handleInteractiveChange = useCallback((val: boolean) => setIsInteractive(val), []);

Then add them immediately after the useEdgesState declaration (before the early return), e.g.:

// place right after:
const [flowEdgesState, , onEdgesChange] = useEdgesState(flowEdges);

const [isInteractive, setIsInteractive] = useState(true);
const handleInteractiveChange = useCallback((val: boolean) => setIsInteractive(val), []);

In dashboard/src/components/GraphTemplateDetail.tsx around lines 240-262, the
useState/useCallback hooks for isInteractive are currently declared after an
early conditional return which violates the Rules of Hooks; remove the existing
declarations at lines ~260-262 and instead add them immediately after the
useEdgesState declaration (right after the line where flowEdgesState and
onEdgesChange are declared) so the hooks run unconditionally before any returns,
e.g., move the two hook declarations to just after useEdgesState.

⚠️ Potential issue | 🟠 Major

nodesDraggable toggle is ineffective due to per-node draggable=false.

Each node is created with draggable: false (Lines 193–194), which overrides the global nodesDraggable={isInteractive} and prevents dragging even in interactive mode.

Fix: remove the per-node draggable flag from node creation so the global toggle works:

// In flowNodes.push(...) remove this line:
draggable: false,

Optional: if you want the graph to reflect updated interactivity when props change, sync state like in GraphVisualization:

const [flowNodesState, setFlowNodesState, onNodesChange] = useNodesState(flowNodes);
const [flowEdgesState, setFlowEdgesState, onEdgesChange] = useEdgesState(flowEdges);

useEffect(() => {
  setFlowNodesState(flowNodes);
  setFlowEdgesState(flowEdges);
}, [flowNodes, flowEdges, setFlowNodesState, setFlowEdgesState]);

In dashboard/src/components/GraphTemplateDetail.tsx around lines 285 to 293,
nodes are still created with a per-node draggable: false which overrides the
global nodesDraggable={isInteractive} and prevents dragging; remove the
draggable: false property from each node in the flowNodes creation so the global
nodesDraggable prop takes effect, and optionally, if you need the nodes/edges to
reflect prop changes, initialize and sync state using
useNodesState/useEdgesState and a useEffect to set the flow state when
flowNodes/flowEdges change.

🧹 Nitpick | 🔵 Trivial

Explicitly show interactive/fit buttons for Controls (consistency).

Make Controls behavior explicit and consistent with GraphVisualization.

-            <Controls 
-              position="bottom-left"
-              onInteractiveChange={handleInteractiveChange} 
-            />
+            <Controls 
+              position="bottom-left"
+              showInteractive={true}
+              showFitView={true}
+              onInteractiveChange={handleInteractiveChange} 
+            />

In dashboard/src/components/GraphTemplateDetail.tsx around lines 295 to 298,
Controls is rendered without explicitly enabling the interactive/fit buttons
which makes its behavior inconsistent with GraphVisualization; update the
Controls invocation to pass the same explicit props used by GraphVisualization
(e.g., showInteractiveButton and showFitButton or the specific prop names used
in your Controls API) and set them to true so the interactive and fit controls
are always visible and consistent across components.

⚠️ Potential issue | 🟠 Major

nodesDraggable toggle is overridden by node.draggable=false.

Nodes are constructed with draggable: false (Line 286), which disables dragging even when isInteractive is true.

Fix: remove the per-node flag so the global nodesDraggable={isInteractive} takes effect:

// In reactFlowNodes.push(...) remove:
draggable: false,

In dashboard/src/components/GraphVisualization.tsx around lines 540 to 548 and
node creation at ~line 286, the nodes are being created with draggable: false
which overrides the global nodesDraggable={isInteractive}; remove the per-node
draggable: false property from the object pushed into reactFlowNodes so the
global nodesDraggable prop can control draggability, then run the component to
verify nodes are draggable when isInteractive is true.

Since you've added a custom 'Fit View' button in the top-right panel which provides a better user experience with smooth animation, it's a good idea to hide the default 'Fit View' button from the built-in controls to avoid duplication and provide a cleaner UI.

🧹 Nitpick | 🔵 Trivial

Avoid duplicate Fit View actions (optional).

You already provide a “Fit View” button in the Panel. Consider disabling the Control’s Fit View to reduce UI duplication.

-              <Controls 
-                showInteractive={true}
-                showFitView={true}
+              <Controls 
+                showInteractive={true}
+                showFitView={false}
                 position="bottom-left"
                 onInteractiveChange={setIsInteractive}
               />

In dashboard/src/components/GraphVisualization.tsx around lines 550 to 556, the
Controls component renders a duplicate "Fit View" action that is also provided
in the Panel; remove or disable the duplicate by changing the Controls props to
not show the Fit View (e.g., set showFitView={false} or remove the prop) so only
the Panel contains the Fit View button, keeping onInteractiveChange and other
props unchanged.

This custom panel is a great UX improvement. However, the 'Refresh' button here duplicates an existing 'Refresh' button at the top of the GraphVisualization component (line 394). Both buttons call the same loadGraphStructure function. To avoid user confusion from redundant controls, it would be best to have only one. Since this new one inside the panel is contextually better placed, I'd recommend removing the older one from the component's header.