You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
fix(canvas): Focus mode does not dim the connections outside the focus set #329
With Focus mode on, the nodes outside the focus set are dimmed as docs/large-graph-readability.md §LGR2 specifies, but the connections outside it are drawn at full strength. Only their selection underlay and their labels follow Focus mode. This is on production v0.21.0 and on main6de1852, and it predates both #325 and playback work.
Measured
main6de1852 (dev server) and production v0.21.0 · build 6de1852 (real UI, a throwaway Chrome context), Focus mode on with one node selected: every connection outside the focus set has the lgr-deemph class, and its path's computed opacity is 1, at rest and during a played step.
The nodes outside the set are dimmed as expected, so a dimmed node sits on a full-strength connection.
Cause
src/components/edges/LoopEdge.tsx passes opacity: activatorOn === false ? 0.5 : 1 as an inline style on every connection path (since e7a401d, 2026-08-28).
The dimming rule .react-flow__edge.lgr-deemph .react-flow__edge-path { opacity: 0.26 } in src/index.css came later (986eed5, 2026-09-02). An inline style beats a stylesheet rule, so the rule never applies.
The end-to-end tests assert the lgr-deemph class on connections, not the drawn opacity, so nothing caught it.
Expected
Light and dark themes: a connection outside the focus set is drawn at 0.26, its path and its arrowhead, the same as a dimmed node, and it stops taking pointer events as it does today.
An unsatisfied activator outside the focus set: Focus dimming wins over the activator's 0.5, so it is drawn at 0.26. Inside the focus set an unsatisfied activator keeps its 0.5.
Forced colours: no low opacity; the existing sparse 1 5 dash stays the tell of a dimmed connection.
Everything §LGR2.3 keeps at full strength stays so: selection and keyboard-focus rings, invalid and blocked flags.
Display only: no change to files, digests, the engine, the simulation, undo or the focus set itself.
A patch release, v0.21.1, with its own release note and .changes declaration.
Tests: the computed opacity of a dimmed and an undimmed connection, at rest and during a played step, in the light and the dark theme; an unsatisfied activator inside and outside the focus set; the 1 5 dash and full opacity under forced colours. Visual baselines that show Focus mode change only where a connection is now dimmed, each reviewed before it is updated.
Not claimed
No manual screen-reader check; this changes no text and no accessibility tree.
Fixed in #331, merged as 7e66da2 and released as v0.21.1: a connection outside the focus set is drawn at 0.26 in light and dark (Focus winning over an unsatisfied activator's 0.5) and keeps opacity 1 with the 1 5 dash under forced colours. PR and main CI green with no retries; production checked by automation, 21 of 21.
Summary
With Focus mode on, the nodes outside the focus set are dimmed as
docs/large-graph-readability.md§LGR2 specifies, but the connections outside it are drawn at full strength. Only their selection underlay and their labels follow Focus mode. This is on productionv0.21.0and onmain6de1852, and it predates both #325 and playback work.Measured
main6de1852(dev server) and productionv0.21.0 · build 6de1852(real UI, a throwaway Chrome context), Focus mode on with one node selected: every connection outside the focus set has thelgr-deemphclass, and its path's computed opacity is1, at rest and during a played step.Cause
src/components/edges/LoopEdge.tsxpassesopacity: activatorOn === false ? 0.5 : 1as an inline style on every connection path (sincee7a401d, 2026-08-28)..react-flow__edge.lgr-deemph .react-flow__edge-path { opacity: 0.26 }insrc/index.csscame later (986eed5, 2026-09-02). An inline style beats a stylesheet rule, so the rule never applies.lgr-deemphclass on connections, not the drawn opacity, so nothing caught it.Expected
1 5dash stays the tell of a dimmed connection.+Nbadges, arrival and conversion cues #330), not here; this fix does not change them.Scope
.changesdeclaration.1 5dash and full opacity under forced colours. Visual baselines that show Focus mode change only where a connection is now dimmed, each reviewed before it is updated.Not claimed