Skip to content

fix(canvas): Focus mode does not dim the connections outside the focus set #329

Description

@MerciHanrim

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 production v0.21.0 and on main 6de1852, and it predates both #325 and playback work.

Measured

  • main 6de1852 (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.
  • How playback cues are drawn on a dimmed connection is decided in the play execution visualization issue (feat(playback): play execution visualization — taken paths, +N badges, arrival and conversion cues #330), not here; this fix does not change them.

Scope

  • 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.

Activity

  1. MerciHanrim commented on Oct 7, 2026

    @MerciHanrim
    OwnerAuthor

    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.

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions