Skip to content

fix(subflows): make edges inside subflows directly clickable#3969

Open
waleedlatif1 wants to merge 2 commits intostagingfrom
waleedlatif1/subflow-edge-click
Open

fix(subflows): make edges inside subflows directly clickable#3969
waleedlatif1 wants to merge 2 commits intostagingfrom
waleedlatif1/subflow-edge-click

Conversation

@waleedlatif1
Copy link
Copy Markdown
Collaborator

Summary

  • Edges inside subflows (loop/parallel) are now directly clickable without needing to first select a connected block
  • Derived edge z-index from the container's depth-based z-index (+1) so edges sit just above their parent container but below canvas blocks and child blocks

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)

Edges inside subflows defaulted to z-index 0, causing the subflow body
area (pointer-events: auto) to intercept clicks. Derive edge z-index
from the container's depth so edges sit just above their parent container
but below canvas blocks and child blocks.
@vercel
Copy link
Copy Markdown

vercel bot commented Apr 5, 2026

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

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Skipped Skipped Apr 5, 2026 2:28am

Request Review

@cursor
Copy link
Copy Markdown

cursor bot commented Apr 5, 2026

PR Summary

Medium Risk
Adjusts ReactFlow edge z-index layering to sit above subflow container bodies, which could have side effects on click/selection behavior and visual stacking in complex nested workflows.

Overview
Fixes edge hit-testing inside loop/parallel subflows by giving non-elevated edges a container-relative zIndex (parent container depth + 1) instead of 0, keeping them above the subflow body layer so they can be clicked directly.

Also bumps the selected-edge delete control’s zIndex to ensure it renders/captures clicks above the canvas/subflow layers.

Reviewed by Cursor Bugbot for commit ff76743. Bugbot is set up for automated code reviews on this repo. Configure here.

@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps bot commented Apr 5, 2026

Greptile Summary

This PR fixes a bug where edges inside subflow containers (loop/parallel blocks) were not directly clickable because their z-index was 0, placing them below the container's body area which has pointer-events: auto. The fix introduces a baseZIndex derived from the parent container's depth-based z-index (+1), so subflow edges now sit just above their container while remaining safely below regular canvas blocks (z=21+) and child blocks (z=1000).

  • Single-file change inside the edgesWithSelection useMemo in workflow.tsx
  • Non-subflow edges retain zIndex: 0 (unchanged behavior)
  • Elevated edges (connected to selected/interacted nodes) retain the existing elevatedZIndex logic unchanged
  • Safe fallback: if containerNode is not found in the node map, baseZIndex defaults to 0 via the ?? 0 guard
  • No regressions to the existing z-index layering: depth-based container z-index (0,1,2...) + 1 is well below the 21+ layer for canvas blocks and the 1000 layer for child blocks

Confidence Score: 5/5

Safe to merge — targeted, minimal fix with correct z-index logic and no regressions to non-subflow edges

Single useMemo change with clear intent, correct depth-based z-index derivation, safe fallback to 0 when container not found, and no impact on existing edge behavior outside subflows. No P0 or P1 issues found.

No files require special attention

Important Files Changed

Filename Overview
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx Derives edge z-index from parent container's depth-based z-index (+1) so subflow edges sit above the container body area and become directly clickable without selecting a connected block first

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Edge in edgesWithSelection] --> B{connectedToElevated?}
    B -->|Yes| C[elevatedZIndex = max 22 sourceZ+1 targetZ+1]
    B -->|No| D{parentLoopId exists?}
    D -->|Yes| E[containerNode = nodeMap.get parentLoopId]
    E --> F{containerNode found?}
    F -->|Yes| G[baseZIndex = containerNode.zIndex + 1]
    F -->|No| H[baseZIndex = 0]
    D -->|No| H
    C --> I[Edge above selected blocks z22+]
    G --> J[Edge clickable - above container body, below canvas z21+ and child blocks z1000]
    H --> K[Edge at z=0 default]
Loading

Reviews (1): Last reviewed commit: "fix(subflows): make edges inside subflow..." | Re-trigger Greptile

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant