Fix: Retry edge overlaps its source node#280
Conversation
✅ Deploy Preview for openworkflow-editor ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull request overview
Updates the diagram editor’s ELK auto-layout configuration and ELK graph generation so feedback/cycle edges route around nodes (instead of overlapping them), aligning edge endpoints with React Flow’s fixed top/bottom handles and addressing issue #279.
Changes:
- Enable ELK feedback-edge routing and increase edge-node spacing in the root layout options.
- Generate explicit NORTH/SOUTH ports for nodes involved in edges and update ELK edges to reference those port IDs.
- Expand/adjust auto-layout integration tests and add a Changesets release note entry.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| packages/open-workflow-diagram-editor/src/react-flow/diagram/autoLayout.ts | Adds feedback-edge routing option, increases spacing, and introduces explicit port modeling + edge port resolution in the ELK graph builder. |
| packages/open-workflow-diagram-editor/tests/react-flow/diagram/autoLayout.integration.test.ts | Updates expectations and adds coverage around port assignment, edge port ID resolution, and forwarded layout inputs. |
| .changeset/fix-feedback-edges-routing.md | Declares a release note for the routing/overlap fix. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 3 out of 3 changed files in this pull request and generated no new comments.
Comments suppressed due to low confidence (1)
packages/open-workflow-diagram-editor/src/react-flow/diagram/autoLayout.ts:195
- The comment says “Give every leaf node explicit SOUTH (out) and NORTH (in) ports…”, but ports are only added when the node participates in an edge (source/target). Updating the comment avoids misleading future changes and keeps behavior/documentation aligned.
// Give every leaf node explicit SOUTH (out) and NORTH (in) ports so ELK always
// routes outgoing edges from the bottom and incoming edges to the top.
// This ensures back-edges (feedback/cycle edges) also exit bottom and enter top,
// matching React Flow's fixed connection handle positions.
fantonangeli
left a comment
fantonangeli
left a comment
There was a problem hiding this comment.
@handreyrc thanks a lot for this PR LGTM
lornakelly
left a comment
lornakelly
left a comment
There was a problem hiding this comment.
LGTM, thanks Handrey!
|
@handreyrc FYI Looks like there is an issue with signature |
|
Pulled branch locally and tested in QF, looks good ❤️ 
|
Signed-off-by: handreyrc <[email protected]>
20f4af6 to
95c11f0
Compare
Closes #279
Describe the Bug
Feedback edges are not being routed properly by the auto-layout engine, causing overlaps and bad path routing around the nodes.
Steps to reproduce
Expected Behavior
**Note: Changes in edge routing and port assignment could cause side effects in other scenarios so all workflow examples shall be validated to ensure that no issues were introduced by this PR.
Editor Version
No response
Platform
Web / Browser