ottyl/tickets/110-legend-click-to-focus-series.md

110 — Clicking a legend entry should focus that series, fading the rest

Summary

PanelChart's line and pie charts render a recharts <Legend> (webapp/src/components/PanelChart.tsx:134, :190) but it's purely decorative — clicking an entry does nothing. Bar charts have no <Legend> at all (:151-168), since each bar is its own labeled category on the x-axis rather than a separate series.

Add click-to-focus: clicking a legend entry marks that series "focused"; any focused series stay at full opacity/stroke while every other series fades. Clicking the same entry again (or clicking empty space in the legend, per whatever recharts exposes) clears focus and returns everyone to equal opacity — i.e. "no focused series" means "all at the same opacity", not "all faded".

Where

• webapp/src/components/PanelChart.tsx:116-148 — line chart. Series are recharts <Line> elements keyed by keys (from toLineData, :60-78), colored via COLORS[i % COLORS.length] (:140). Fading a line means varying strokeOpacity (or swapping stroke for a color-mix'd faded variant) per key based on focus state.
• webapp/src/components/PanelChart.tsx:170-193 — pie chart. Slices are <Cell> elements (:179-181) keyed by row index into rows (from squashRows, :50-57); fading a slice means varying its fillOpacity.
• webapp/src/components/PanelChart.tsx:134, :190 — the two <Legend> usages. recharts' <Legend> takes an onClick handler on its payload entries ((entry) => void, where entry.dataKey / entry.value identifies which series was clicked) — this is the hook point rather than building a custom legend from scratch.
• Bar charts (:151-168) have no legend to click, since bars aren't named series here — out of scope for this ticket unless the direction chosen below turns out to need bar-chart parity (see Scope).

Direction

• Add focus state as a Set<string> (or single nullable string, if only one series can be focused at a time — decide during implementation) of series keys, local to PanelChart via useState. Reset it when series changes identity to avoid stale focus surviving a query change onto a chart with different series.
• Wire the <Legend>'s onClick to toggle membership in that set.
• Compute per-series opacity from the set: full opacity if the set is empty or the series is a member, faded (e.g. 0.25) otherwise. Thread that into <Line stroke=...> / <Cell fill=...> via strokeOpacity/fillOpacity rather than swapping the base color, so the existing COLORS palette and its color-mix theming stay untouched.
• The legend entries themselves should visually reflect focus too (e.g. dim the faded entries' swatch/text) so it's clear what's focused without hunting across the plot — recharts' legend formatter prop can restyle each entry's label.

Scope

• Line and pie charts only, matching where <Legend> already renders. Bar charts stay as-is — no legend, no per-bar fade — unless investigation shows recharts' bar <Legend> support is trivial to add alongside this; if so, note it as a follow-up rather than folding scope creep into this ticket.
• Out of scope: persisting focus state across re-renders driven by polling (Dashboards.tsx's PanelPreview, :46-92, re-fetches on every poll tick) — focus should survive a data refresh as long as the series identity (legend key) is unchanged, but there's no need to persist it to localStorage or across a page reload.
• Out of scope: multi-select "compare exactly these two series" UX beyond simple toggle-membership — keep it to click-to-add/click-to- remove from the focused set.