Tree: Legend by the pan/zoom hint + clickable ×N duplicate badges #248

2026-06-11T08:32:53-04:00

justin commented

2026-06-11 08:32:53 -04:00

Prompted by "why do some people show ×2".

Legend — a hover/focus link next to the "drag to pan…" hint explaining the ×N badge (the same person drawn N times because they connect through more than one line — a shared ancestor or intermarriage), the gender card colors, and the pan/zoom/recenter controls.
Clickable ×N — the badge now reads as clickable (cursor + hover), and clicking it flashes every copy of that person in the view (a bronze outline pulse) so you can spot where else they appear. Delegated on the chart container, matching the d3-bound person id across cards; capture-phase + stopPropagation so a badge click flashes instead of recentering.

Frontend only, type-checks clean. Honest follow-up: the flash finds on-screen copies; a true "fly to an off-screen copy" needs d3-zoom transform work (the chart pans by transform, not scroll).

🤖 Generated with Claude Code

Prompted by "why do some people show ×2". - **Legend** — a hover/focus link next to the "drag to pan…" hint explaining the `×N` badge (the same person drawn N times because they connect through more than one line — a shared ancestor or intermarriage), the gender card colors, and the pan/zoom/recenter controls. - **Clickable `×N`** — the badge now reads as clickable (cursor + hover), and clicking it **flashes every copy** of that person in the view (a bronze outline pulse) so you can spot where else they appear. Delegated on the chart container, matching the d3-bound person id across cards; capture-phase + `stopPropagation` so a badge click flashes instead of recentering. Frontend only, type-checks clean. Honest follow-up: the flash finds on-screen copies; a true "fly to an off-screen copy" needs d3-zoom transform work (the chart pans by transform, not scroll). 🤖 Generated with [Claude Code](https://claude.com/claude-code)

justin added 1 commit 2026-06-11 08:32:53 -04:00

Tree: a Legend by the pan/zoom hint, and clickable ×N duplicate badges 690a6da659

Two small tree-view aids prompted by "why do some people show ×2".

- Legend: a hover/focus "Legend" link next to the "drag to pan…" hint, explaining
  the ×N badge (a person drawn N times in the view because they connect through
  more than one line — a shared ancestor or an intermarriage), the gender card
  colors, and the pan/zoom/recenter controls.
- The ×N badge is now clearly clickable (cursor + hover state); clicking it
  flashes every copy of that person in the current view (a bronze outline pulse),
  so you can spot where else they appear. Implemented by delegating on the chart
  container and matching the d3-bound person id across cards; capture-phase +
  stopPropagation so a badge click flashes instead of recentering.

Frontend only. Honest follow-up: flashing finds copies that are on-screen; a true
"fly to an off-screen copy" needs d3-zoom transform work (the chart pans by
transform, not scroll) — a later enhancement.

Signed-off-by: Justin Paul <justin@jpaul.me>

justin merged commit f7666ad30b into main

2026-06-11 08:32:54 -04:00

justin deleted branch tree-legend-and-duplicate-flash

2026-06-11 08:32:54 -04:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: justin/provenance#248