Tickets for FE and actor split

2026-09-07 14:54:21 +01:00
parent 920629dbad
commit 738e90c45c
11 changed files with 346 additions and 48 deletions
@@ -0,0 +1,51 @@
+# 111 — Legend must scroll instead of overflowing the panel
+
+## Summary
+
+`PanelChart`'s recharts `<Legend>` (`webapp/src/components/
+PanelChart.tsx:134`, `:190`) has no height constraint or scroll
+container. A panel with many series (e.g. a high-cardinality PromQL
+query, or the post-`squashRows` `MAX_KEPT_SERIES` = 7 kept rows plus
+"Other") wraps the legend across as many lines as it needs, growing
+the panel's rendered height and pushing surrounding dashboard layout
+around rather than staying within the chart's fixed footprint.
+
+## Where
+
+- `webapp/src/components/PanelChart.tsx:117`, `:154`, `:176` — each
+  chart type wraps its `<ResponsiveContainer>` at a fixed `height={220}`,
+  but the `<Legend>` inside it (`:134`, `:190`) isn't given its own
+  bounded, scrollable region — recharts lays it out in the space left
+  after the plot area, which can push the container's effective
+  rendered height past 220 when the legend wraps to multiple rows.
+- `webapp/src/components/Dashboards.tsx:46-92` (`PanelPreview`) is the
+  only caller of `PanelChart` today — worth checking that whatever
+  fixed-height/scroll wrapper gets added here doesn't fight with
+  `PanelPreview`'s own loading/error states (`:85-90`), which render
+  outside `PanelChart` at a different fixed height (`h-48`).
+
+## Direction
+
+- recharts' `<Legend>` supports a `wrapperStyle` prop (already used
+  for `fontSize`, `:134`/`:190`) — extending it with a fixed
+  `maxHeight` and `overflowY: 'auto'` is the natural fix and avoids
+  building a custom legend renderer just for this.
+- Verify this doesn't conflict with the click-to-focus work in
+  [[110-legend-click-to-focus-series]] — that ticket also touches the
+  `<Legend>` props (`onClick`, `formatter`) on these same two call
+  sites, so land whichever lands second by rebasing onto the other's
+  `<Legend>` props rather than both independently restructuring it.
+- Decide a concrete max height (e.g. two or three legend rows' worth)
+  that keeps the panel's total footprint predictable in a dashboard
+  grid; check `Dashboards.tsx`'s panel grid/card layout for whatever
+  existing panel height convention should inform the number.
+
+## Scope
+
+- Line and pie charts only, matching where `<Legend>` already
+  renders — same boundary as [[110-legend-click-to-focus-series]].
+- Out of scope: virtualizing the legend list for very large series
+  counts — `squashRows` (`PanelChart.tsx:50-57`) already caps bar/pie
+  series at `MAX_KEPT_SERIES` (7) + "Other", and line charts have no
+  equivalent cap today, but adding one is a separate concern from
+  making the legend scrollable.