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

[waleedlatif1]

Summary

• prevent cyclic dependencies in graph following ReactFlow examples
• https://reactflow.dev/examples/interaction/prevent-cycles

Type of Change

• Bug fix

Testing

Tested manually

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Review	Updated (UTC)
docs	Skipped		Dec 18, 2025 3:01am

[greptile-apps]

Greptile Summary

This PR implements cycle detection for the workflow graph by adding a wouldCreateCycle function that uses depth-first search to check if adding an edge would create a cycle. The implementation follows ReactFlow's recommended approach.

Key changes:

• Added wouldCreateCycle utility function using DFS algorithm to detect cycles
• Integrated cycle check in addEdge method at the store level for centralized validation
• Added cycle checks to all 5 handle isValidConnection callbacks for immediate UI feedback
• Removed redundant self-connection check from onConnect handler

Implementation is sound:

• Algorithm correctly checks if target can reach source (which would create a cycle when adding source→target edge)
• Self-connections are properly detected
• All edge addition paths go through the store's addEdge method where validation occurs
• UI feedback is provided during drag operations via isValidConnection

Minor observation:

• The isValidConnection callbacks call useWorkflowStore.getState().edges during drag operations, which could have performance implications for very large graphs (hundreds of nodes). However, this is following ReactFlow's example pattern and is unlikely to be an issue for typical workflow sizes.

Confidence Score: 5/5

• This PR is safe to merge with no blocking issues
• The cycle detection algorithm is correct and well-implemented. All edge addition paths are properly validated. The code follows ReactFlow's recommended patterns. No logical errors, security issues, or breaking changes detected.
• No files require special attention

Important Files Changed

Filename	Overview
apps/sim/stores/workflows/workflow/utils.ts	Added wouldCreateCycle function implementing cycle detection using DFS - algorithm is correct and well-documented
apps/sim/stores/workflows/workflow/store.ts	Integrated cycle check in addEdge method to prevent cycles at the store level - proper centralized validation
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx	Added cycle checks to all 5 handle isValidConnection callbacks for UI feedback - potential performance concern with repeated store access during drag
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx	Removed redundant self-connection check from onConnect as it's now handled by cycle detection - cleaner code

Sequence Diagram

sequenceDiagram
    participant User
    participant Handle as WorkflowBlock Handle
    participant ReactFlow
    participant OnConnect as workflow.tsx onConnect
    participant Store as useWorkflowStore
    participant Utils as wouldCreateCycle

    User->>Handle: Drag connection from source to target
    Handle->>Utils: isValidConnection(connection)
    Utils->>Store: getState().edges
    Store-->>Utils: current edges[]
    Utils->>Utils: Check if source === target
    alt Self-connection
        Utils-->>Handle: false (reject)
    else Valid so far
        Utils->>Utils: Build adjacency list from edges
        Utils->>Utils: DFS from target to find source
        alt Cycle would be created
            Utils-->>Handle: false (reject)
        else No cycle
            Utils-->>Handle: true (allow UI)
        end
    end
    
    alt Connection allowed by UI
        User->>ReactFlow: Drop connection
        ReactFlow->>OnConnect: onConnect(connection)
        OnConnect->>OnConnect: Validate container boundaries
        OnConnect->>Store: addEdge(edge)
        Store->>Utils: wouldCreateCycle(edges, source, target)
        Utils->>Utils: Run cycle detection again
        alt Cycle detected
            Utils-->>Store: true
            Store->>Store: Log warning and return early
        else No cycle
            Utils-->>Store: false
            Store->>Store: Check for duplicates
            Store->>Store: Add edge to store
        end
    end

Loading

[greptile-apps]

_{3 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[waleedlatif1]

@greptile