fix(graph): prevent cyclic dependencies in graph following ReactFlow examples

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx

@@ -56,6 +56,7 @@ import { useWorkflowDiffStore } from '@/stores/workflow-diff/store'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 import { getUniqueBlockName } from '@/stores/workflows/utils'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
+import { wouldCreateCycle } from '@/stores/workflows/workflow/utils'
 
 /** Lazy-loaded components for non-critical UI that can load after initial render */
 const LazyChat = lazy(() =>
@@ -1638,6 +1639,31 @@ const WorkflowContent = React.memo(() => {
     setIsErrorConnectionDrag(false)
   }, [])
 
+  /**
+   * Validates if a connection is allowed before it's created.
+   * Prevents cycles and other invalid connections.
+   */
+  const isValidConnection = useCallback(
+    (connection: { source: string | null; target: string | null }) => {
+      if (!connection.source || !connection.target) {
+        return false
+      }
+
+      // Prevent self-connections
+      if (connection.source === connection.target) {
+        return false
+      }
+
+      // Check if this connection would create a cycle
+      if (wouldCreateCycle(edges, connection.source, connection.target)) {
+        return false
+      }
+
+      return true
+    },
+    [edges]
+  )
+
   /** Handles new edge connections with container boundary validation. */
   const onConnect = useCallback(
     (connection: any) => {
@@ -2249,6 +2275,7 @@ const WorkflowContent = React.memo(() => {
               onConnect={effectivePermissions.canEdit ? onConnect : undefined}
               onConnectStart={effectivePermissions.canEdit ? onConnectStart : undefined}
               onConnectEnd={effectivePermissions.canEdit ? onConnectEnd : undefined}
+              isValidConnection={effectivePermissions.canEdit ? isValidConnection : undefined}
               nodeTypes={nodeTypes}
               edgeTypes={edgeTypes}
               onDrop={effectivePermissions.canEdit ? onDrop : undefined}

apps/sim/stores/workflows/workflow/store.ts

@@ -20,7 +20,11 @@ import type {
   WorkflowState,
   WorkflowStore,
 } from '@/stores/workflows/workflow/types'
-import { generateLoopBlocks, generateParallelBlocks } from '@/stores/workflows/workflow/utils'
+import {
+  generateLoopBlocks,
+  generateParallelBlocks,
+  wouldCreateCycle,
+} from '@/stores/workflows/workflow/utils'
 
 const logger = createLogger('WorkflowStore')
 
@@ -428,6 +432,15 @@ export const useWorkflowStore = create<WorkflowStore>()(
           return
         }
 
+        // Prevent self-connections and cycles
+        if (wouldCreateCycle(get().edges, edge.source, edge.target)) {
+          logger.warn('Prevented edge that would create a cycle', {
+            source: edge.source,
+            target: edge.target,
+          })
+          return
+        }
+
         // Check for duplicate connections
         const isDuplicate = get().edges.some(
           (existingEdge) =>

apps/sim/stores/workflows/workflow/utils.ts

@@ -1,7 +1,56 @@
+import type { Edge } from 'reactflow'
 import type { BlockState, Loop, Parallel } from '@/stores/workflows/workflow/types'
 
 const DEFAULT_LOOP_ITERATIONS = 5
 
+/**
+ * Check if adding an edge would create a cycle in the graph.
+ * Uses depth-first search to detect if the source node is reachable from the target node.
+ *
+ * @param edges - Current edges in the graph
+ * @param sourceId - Source node ID of the proposed edge
+ * @param targetId - Target node ID of the proposed edge
+ * @returns true if adding this edge would create a cycle
+ */
+export function wouldCreateCycle(edges: Edge[], sourceId: string, targetId: string): boolean {
+  if (sourceId === targetId) {
+    return true
+  }
+
+  const adjacencyList = new Map<string, string[]>()
+  for (const edge of edges) {
+    if (!adjacencyList.has(edge.source)) {
+      adjacencyList.set(edge.source, [])
+    }
+    adjacencyList.get(edge.source)!.push(edge.target)
+  }
+
+  const visited = new Set<string>()
+
+  function canReachSource(currentNode: string): boolean {
+    if (currentNode === sourceId) {
+      return true
+    }
+
+    if (visited.has(currentNode)) {
+      return false
+    }
+
+    visited.add(currentNode)
+
+    const neighbors = adjacencyList.get(currentNode) || []
+    for (const neighbor of neighbors) {
+      if (canReachSource(neighbor)) {
+        return true
+      }
+    }
+
+    return false
+  }
+
+  return canReachSource(targetId)
+}
+
 /**
  * Convert UI loop block to executor Loop format
  *