feat(studio): group answer cards in the chat and focus chart hovers by jm-rivera · Pull Request #92 · DevelopmentFinanceObservatory/website

jm-rivera · 2026-10-31T22:25:24Z

Several cards from one answer collapse into one row in the chat, chart hovers name the series under the pointer, and table cards state shared text once and sort by header.

Changes

Chat: two or more cards from one answer show as one "N cards" row that expands to one-line rows, with Remove on hover or focus and a Remove all menu; one card is a slim row; the approved plan pill takes one line (WidgetChips.tsx, ApprovedPlanPill.tsx, src/lib/studio/turnCards.ts).
Chart hover: the tooltip names only the nearest series with its legend name, the other series and legend entries fade, and holding Shift lists every series largest first (chartSetup.ts, ChartCard.tsx, nearestPoint and largestFirst in src/lib/studio/chartHover.ts).
Charts with no legend use full series names in the tooltip.
Palettes: every preset and paletteFromAccent keep their first eight colours and add two, so ten series stay apart and saved canvases keep their colours (theme.ts).
Table cards: constant columns and the text shared by variable names move into a caption, only the column marked namesColumn is shortened, and headers sort with numbers read back from their display form (src/lib/studio/tableView.ts, TableCard.tsx, splitLabels in seriesLabels.ts).

Notes for reviewers

Mono's two added greys (#000000, #2d2d2d) pass the distinctness test at 8.6, but read close to its existing darks as lines.
Tables saved before namesColumn keep full names.
The Kenya film's cue sheet targets .chips and .chipOpen; both classes stay on the new group.
Remove all sends one remove per card.

Testing: pnpm lint, pnpm lint:css, pnpm typecheck, pnpm test (2,233 pass on the full stack) and pnpm build pass. Before and after screenshots of a seeded conversation are below.

Screenshots

Before is origin/dev (b91925c) and after is this branch, at 1440 by 900. Both ran against a local Postgres seeded with the same two saved conversations, loaded at /studio/.

Change	Before	After
Chat answer with six cards, collapsed: one "6 cards" row
Chat answer with six cards, expanded: six one-line rows with a menu
Chart hover: the tooltip shows the nearest series and the other lines fade
Hover with Shift held
Table after a click on the Value header: the header is a button and the rows sort ascending
Table after a second click: the rows sort descending

Several cards from one answer collapse into one "N cards" row that expands to one-line rows, with Remove on hover or focus and a Remove all menu (WidgetChips.tsx); the approved plan pill takes one line. Chart hovers name only the nearest series with its legend name, fade the others and the other legend entries, and list every series while Shift is held (chartSetup.ts, lib/studio/chartHover.ts). Every palette keeps its first eight colours and adds two, so ten series stay apart (theme.ts). Table cards move constant columns and the text shared by variable names into a caption, shorten only the variable column, and sort by header with numbers read back from their display form (lib/studio/tableView.ts).

`redraw` spread the held widget under the new cells, so a revision with no `stat_var` column kept the old `namesColumn` and shortened names such as South Sudan to Sudan.

jm-rivera added this pull request to stack #93 October 31, 2026 22:25

jm-rivera added 2 commits October 31, 2026 23:43

fix(studio): drop a revised table's stale names column

6e0700d

`redraw` spread the held widget under the new cells, so a revision with no `stat_var` column kept the old `namesColumn` and shortened names such as South Sudan to Sudan.