relayouts the graph using Dagre when a replace change causes node intersections (#459)

* relayouts the graph using Dagre when a `replace` change causes node intersections

* Update agents-manage-ui/src/components/graph/graph.tsx

Author: dimaMachina

.changeset/blue-lemons-study.md

@@ -0,0 +1,5 @@
+---
+"@inkeep/agents-manage-ui": patch
+---
+
+relayouts the graph using Dagre when a `replace` change causes node intersections

agents-manage-ui/src/components/graph/graph.tsx

@@ -21,12 +21,13 @@ import { toast } from 'sonner';
 import { commandManager } from '@/features/graph/commands/command-manager';
 import { AddNodeCommand, AddPreparedEdgeCommand } from '@/features/graph/commands/commands';
 import {
+  applyDagreLayout,
   deserializeGraphData,
   type ExtendedFullGraphDefinition,
   extractGraphMetadata,
   serializeGraphData,
 } from '@/features/graph/domain';
-import { useGraphActions, useGraphStore } from '@/features/graph/state/use-graph-store';
+import { useGraphActions, useGraphStore } from '@/features/graph/state/use-graph-store'
 import { useGraphShortcuts } from '@/features/graph/ui/use-graph-shortcuts';
 import { useGraphErrors } from '@/hooks/use-graph-errors';
 import { useSidePane } from '@/hooks/use-side-pane';
@@ -179,7 +180,7 @@ function Flow({
     return lookup;
   }, [graph?.agents]);
 
-  const { screenToFlowPosition, updateNodeData, fitView } = useReactFlow();
+  const { screenToFlowPosition, updateNodeData, fitView, getNodes, getEdges, getIntersectingNodes } = useReactFlow();
   const { storeNodes, edges, metadata } = useGraphStore((state) => ({
     storeNodes: state.nodes,
     edges: state.edges,
@@ -188,7 +189,7 @@ function Flow({
   const {
     setNodes,
     setEdges,
-    onNodesChange,
+    onNodesChange: storeOnNodesChange,
     onEdgesChange,
     setMetadata,
     setInitial,
@@ -202,6 +203,38 @@ function Flow({
   const { nodeId, edgeId, setQueryState, openGraphPane, isOpen } = useSidePane();
   const { errors, showErrors, setErrors, clearErrors, setShowErrors } = useGraphErrors();
 
+  /**
+   * Custom `onNodesChange` handler that relayouts the graph using Dagre
+   * when a `replace` change causes node intersections.
+   **/
+  const onNodesChange: typeof storeOnNodesChange = useCallback((changes) => {
+    storeOnNodesChange(changes);
+
+    const replaceChanges = changes.filter(change => change.type === 'replace');
+    if (!replaceChanges.length) {
+      return
+    }
+    // Using `setTimeout` instead of `requestAnimationFrame` ensures updated node positions are available,
+    // as `requestAnimationFrame` may run too early, causing `hasIntersections` to incorrectly return false.
+    setTimeout(() => {
+      const currentNodes = getNodes();
+      // Check if any of the replaced nodes are intersecting with others
+      for (const change of replaceChanges) {
+        const node = currentNodes.find(n => n.id === change.id);
+        if (!node) {
+          continue
+        }
+        // Use React Flow's intersection detection
+        const intersectingNodes = getIntersectingNodes(node);
+        if (intersectingNodes.length > 0) {
+          // Apply Dagre layout to resolve intersections
+          setNodes((prev) => applyDagreLayout(prev, getEdges()))
+          return // exit loop
+        }
+      }
+    }, 0)
+  }, [getNodes, getEdges, getIntersectingNodes, setNodes, storeOnNodesChange]);
+
   // biome-ignore lint/correctness/useExhaustiveDependencies: we only want to run this effect on first render
   useEffect(() => {
     setInitial(

agents-manage-ui/src/features/graph/domain/deserialize.ts

@@ -64,8 +64,8 @@ function calculateNodeHeight(node: Node): number {
   return Math.max(height, BASE_NODE_HEIGHT);
 }
 
-function applyDagreLayout(nodes: Node[], edges: Edge[]): Node[] {
-  const g = new (dagre as any).graphlib.Graph();
+export function applyDagreLayout(nodes: Node[], edges: Edge[]): Node[] {
+  const g = new dagre.graphlib.Graph();
   g.setGraph({
     rankdir: 'TB',
     nodesep: 150,
@@ -85,7 +85,7 @@ function applyDagreLayout(nodes: Node[], edges: Edge[]): Node[] {
     g.setEdge(edge.source, edge.target);
   }
 
-  (dagre as any).layout(g);
+  dagre.layout(g);
 
   return nodes.map((node) => {
     const nodeWithPosition = g.node(node.id);