fix(designer): stop edge remove buttons from stacking and sticking by Abyssalisk · Pull Request #1126 · elsa-workflows/elsa-studio

Abyssalisk · 2026-10-06T21:30:17Z

Purpose

Stops the flowchart designer's edge remove button from stacking on repeated hovers and from staying visible after the pointer has moved away.

Scope

Description

Problem

Hovering a connection in the flowchart designer shows a remove button. The button sometimes stays visible after the pointer has moved away, and repeated hovers can stack several.

edge:mouseenter calls addTools on every entry, and X6 appends rather than replaces, so each re-entry adds another vertices tool and another button-remove.
edge:mouseleave removes only one button-remove, and X6 does not raise it at all when the pointer leaves across a tool or moves straight onto another edge, a node, or empty canvas.

Solution

The hover logic moves from create-graph.ts to edge-hover-tools.ts:

each tool is added only if the edge does not already have it;
the last hovered edge's remove button is cleared when the pointer enters another edge or a node, hovers the blank canvas (blank:mouseover; blank:mousemove only fires while a button is held), or leaves the graph;
a hovered edge that is removed is forgotten.

Otherwise behavior is unchanged: the tools are still registered only when the designer mode allows interactive edges, and the vertex handles behave as before.

Verification

Steps:

Open a flowchart with several connections in the designer.
Hover a connection, then move quickly to another connection, onto a node, onto empty canvas, and outside the designer. Repeat a few times, including re-entering the same connection.
Run npm test in src/modules/Elsa.Studio.Workflows.Designer/ClientLib.

Expected outcome:

Exactly one remove button is visible while the pointer is over a connection, and none remain once it moves elsewhere.
npm test passes (262 tests). The new edge-hover-tools.test.ts replays the event sequences that leave a button behind: against the previous logic 5 of its 9 cases fail, and with this change all pass.

Screenshots / Recordings (if applicable)

Before:
edge-hover-before.webm

After:
edge-hover-after.webm

Before (main) and after (this PR), same pointer path. Recorded in a downstream build of Studio with custom node styling; the hover handlers in the "before" clip are identical to main, and the "after" clip runs this PR's edge-hover-tools.ts.

Checklist

The PR is focused on a single concern
Commit messages follow the recommended convention
Tests added or updated (if applicable)
Documentation updated (if applicable)
No unrelated cleanup included
All tests pass## Purpose

Summary by CodeRabbit

Bug Fixes
- Edge editing tools now appear on hover only when interactive edge editing is enabled, and are not duplicated when hovering repeatedly.
- The remove button is cleared when moving to another edge, a node, or blank canvas, or when leaving the graph. It is also cleared if the hovered edge is removed.

greptile-apps · 2026-10-06T21:30:27Z

PR author is not in the allowed authors list.

coderabbitai · 2026-10-06T21:30:38Z

Important

Review skipped

Review was skipped as selected files did not have any reviewable changes.

⚙️ Run configuration

Configuration used: defaults
Review profile: CHILL
Plan: Advanced
Run ID: bbf8f315-fe64-4516-8da3-1604fdd6f9f8

📥 Commits

Reviewing files that changed from the base of the PR and between 1a38c0d and 5379ea7.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults
Review profile: CHILL
Plan: Advanced
Run ID: 5f60eb1b-a4ae-4e0f-86c3-3b3716263145

📥 Commits

Reviewing files that changed from the base of the PR and between 3d028a4 and 1a38c0d.

📒 Files selected for processing (4)

src/modules/Elsa.Studio.Workflows.Designer/ClientLib/src/designer/api/__tests__/edge-hover-tools.test.ts
src/modules/Elsa.Studio.Workflows.Designer/ClientLib/src/designer/api/create-graph.ts
src/modules/Elsa.Studio.Workflows.Designer/ClientLib/src/designer/api/edge-hover-tools.ts
src/modules/Elsa.Studio.Workflows.Designer/ClientLib/vitest.config.ts

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

📝 Walkthrough

Walkthrough

The graph designer now registers edge hover tools through a dedicated helper. The helper adds tools on edge entry and removes the remove button when hover moves away or the hovered edge is removed. Tests cover these event cases and disabled registration.

Changes

Edge Hover Tools

Layer / File(s)	Summary
Register and clean up edge hover tools `src/modules/Elsa.Studio.Workflows.Designer/ClientLib/src/designer/api/edge-hover-tools.ts`, `src/modules/Elsa.Studio.Workflows.Designer/ClientLib/src/designer/api/__tests__/edge-hover-tools.test.ts`	The helper adds missing tools on edge entry and clears the remove button when hover moves away or the hovered edge is removed. Tests cover repeated entry, hover transitions, edge removal, and disabled registration.
Integrate hover tools into graph creation `src/modules/Elsa.Studio.Workflows.Designer/ClientLib/src/designer/api/create-graph.ts`, `src/modules/Elsa.Studio.Workflows.Designer/ClientLib/vitest.config.ts`	Graph creation registers the helper using the interactive-edge policy. The coverage comment includes edge hover tools.

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Bug fix

Sequence Diagram(s)

sequenceDiagram
  participant Graph
  participant registerEdgeHoverTools
  participant Edge
  Graph->>registerEdgeHoverTools: Emit edge:mouseenter
  registerEdgeHoverTools->>Edge: Add missing vertex and remove tools
  Graph->>registerEdgeHoverTools: Emit edge, node, blank, or graph leave event
  registerEdgeHoverTools->>Edge: Remove the remove button

Suggested reviewers: sfmskywalker

Merge Risk: ⚪ Minimal · up to 1a38c

The hover-button change is mergeable after normal checks. Browser pointer-event ordering remains unverified, but no specific failure is established.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 4 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title clearly and concisely summarizes the main change: preventing edge remove buttons from stacking or remaining visible after pointer movement.
Description check	✅ Passed	The description covers the purpose, bug-fix scope, problem, solution, verification steps and expected outcome, screenshots, and checklist. It provides enough detail for review.

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create a new PR

Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

_{Comment @coderabbitai help to get the list of available commands.}

Abyssalisk · 2026-10-06T21:48:54Z

@dotnet-policy-service agree company="Aristotle International"

sfmskywalker · 2026-10-07T23:20:02Z

Adopted this contribution in elsa-core #8656, preserving Gav's original author identity and the exact four-file source blobs from 5379ea79fec28705ae888b75cf5f03993ad666f0 under the consolidated Studio paths. The accepted program merge is 9df90490eee034088b4341b149986de6b9d317b0; final Core main promotion is tracked separately in #8655.

Separate reviewed corrections cover stale edge-leave events and read-only registration. Validation passed 263 frontend tests/typecheck/bundles, nine real-X6 natural browser cases and four handler-isolation controls, broad exact-head CI, independent source/runtime approval and Greptile 5/5. Browser receipt/evidence.

This source PR remains open and unchanged for the explicit contribution-migration disposition under Core #8216. No npm publication or source publisher cutover is implied.

Abyssalisk changed the title ~~fix(designer): stop edge remove buttons from stacking and sticking~~ fix(designer): stop edge remove buttons from stacking and sticking Oct 6, 2026

�fix(designer): stop edge remove buttons from stacking and sticking

5379ea7

Abyssalisk force-pushed the fix/edge-remove-button-sticks branch from 1a38c0d to 5379ea7 Compare October 6, 2026 22:47

sfmskywalker mentioned this pull request Oct 9, 2026

[Feature] F3.4: Artifact provenance, release notes, and recovery procedures elsa-workflows/elsa-core#8220

Open

3 tasks

Navigation Menu

Repository navigation

fix(designer): stop edge remove buttons from stacking and sticking - #1126

fix(designer): stop edge remove buttons from stacking and sticking#1126
Abyssalisk wants to merge 1 commit into
elsa-workflows:mainfrom
Abyssalisk:fix/edge-remove-button-sticks

Abyssalisk commented Oct 6, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

greptile-apps Bot commented Oct 6, 2026

Uh oh!

coderabbitai Bot commented Oct 6, 2026 •

edited

Loading

Review skipped

Walkthrough

Changes

Sequence Diagram(s)

❌ Failed checks (1 warning)

Uh oh!

Abyssalisk commented Oct 6, 2026

Uh oh!

sfmskywalker commented Oct 7, 2026

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

Abyssalisk commented Oct 6, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Purpose

Scope

Description

Problem

Solution

Verification

Screenshots / Recordings (if applicable)

Checklist

Summary by CodeRabbit

Uh oh!

greptile-apps Bot commented Oct 6, 2026

Uh oh!

coderabbitai Bot commented Oct 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Walkthrough

Changes

Sequence Diagram(s)

❌ Failed checks (1 warning)

Uh oh!

Abyssalisk commented Oct 6, 2026

Uh oh!

sfmskywalker commented Oct 7, 2026

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Abyssalisk commented Oct 6, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Oct 6, 2026 •

edited

Loading