FE-1687: Lay out the metric card's chart options as two aggregate dimensions and add an Enlarge button

[kube]

Summary

Before this PR, a metric card's Chart options button opened one flat list of seventeen items under two headings: Heatmap, Percentile lines and eight statistics under Runs; Value, two running extremes and four aggregates under Time. Nothing said which items aggregate and which draw every run or step, picking one silently dropped the other mode's choice, and the card had no way to grow beyond its grid cell.

This PR lays the menu out as the two dimensions the settings already have. The same ellipsis opens a compact popover with a Runs block and a Time block, each a two-segment switch, Every run | Aggregate and Every step | Aggregate, beside one select whose options follow the mode. Switching a mode back restores that side's last statistic, and the chart redraws behind the open popover. Right of the ellipsis a second button enlarges the card to the grid's full row at twice the height and shrinks it back, per card, without touching the other cards' sizes.

9666.mp4

Links

• Ticket FE-1687
• Docs Experiments › Metric charts
• Docs Optimization

Changes

Chart options

• Two aggregate dimensions in a popover

  MetricViewMenu keeps its trigger and contract and opens a ds Popover of two AggregationDimension blocks: an uppercase label, a SegmentedControl naming the mode and a Select of that mode's choices. Runs shows for distribution metrics only.

• Settings update field by field

  Every run restores the last distribution view, Aggregate the last statistic; the subtitle text and describeMetricView are unchanged.

• Keyboard path comes from the ds Popover defaults

  MetricViewMenu passes no initialFocusRef. Ark focuses the first control on open; the ds Popover closes on Escape and returns focus to the trigger.

Enlarge

• Enlarge and Shrink button right of the ellipsis

  A ghost icon button toggling expand and collapse, with its name as tooltip.

• Full-row card at twice the height

  The card spans every column and two rows; its plot is 543 px in an experiment and 745 px in a study.
  Size is per card, beside the view settings in MetricTiles, and resets with them.
  An enlarged study card pushes the study's other cards below the fold in the drawer.

• Grid packs densely

  The cards after the enlarged one fill the cells its row left and the rest move below; no other card changes size.
  Tab follows the packed order where the browser supports reading-flow, source order elsewhere.

• Metric plots resize in place

  use-metric-plot.ts calls setSize on the mounted chart instead of rebuilding it when the card changes size.
  The size observer debounces, so the plot stretches for up to 50 ms before it resizes.

Tests

• Shared jsdom stubs for ds controls

  shared/ds-control-stubs.tsx renders the Popover in place, the Select as a native select and the SegmentedControl as pressed buttons; both drawer tests and the new menu test use them.

Review fixes

• Card grid declares reading-flow: grid-order

  Dense packing pulled a later card up beside an earlier one while Tab kept source order, so focus jumped down to the enlarged card and back up.
  Browsers with reading-flow now tab in the packed order and the rest keep source order; the ChartCardGrid test pins the class and the GridWithLargeCard story tabs from the first card.

• Enlarge and Shrink button passes pressed

  ds Button emits aria-pressed="false" without it, so the Shrink toggle announced not pressed while the card was large.
  Both drawer tests assert the pressed state on each side of the toggle.

• Chart options popover body takes the ds popover's own padding

  withPadding={false} set padding: 0 !important on the body, so the padding: 3 in bodyStyle never applied and the blocks sat on the popover's edge.
  Both are gone; the ds body's padding frames the blocks, visible in the Simulate / MetricViewMenu stories.

Test coverage

• metric-view-menu.test.tsx:

  Both blocks for a distribution metric, Time alone for a scalar one, each segment and select updating its field, the last statistic restored on switching back, the popover staying open across choices.

• metric-tiles coverage in view-experiment-drawer.test.tsx and view-optimization-drawer.test.tsx:

  Enlarge toggling the button's name and aria-pressed from false to pressed, the enlarged card spanning the row at the larger body height while the others keep theirs.

• chart-card.test.tsx:

  ChartCardGrid declaring dense packing and reading-flow: grid-order.

• Storybook:

  Simulate / MetricViewMenu shows the open popover for a distribution and a scalar metric; Simulate / ChartCard gains a grid with an enlarged card whose play function tabs from the first card and expects the packed order where reading-flow is supported.

How to test

• Open Petrinaut preview on Vercel
• Menu > Load example > SIR Model
• Simulate > Experiments > Create > Add metric > Place tokens, Place Infected > Run
• Open the experiment row
• Infected card > Chart options

  Expect a popover with a Runs block and a Time block, each a two-segment switch and a select

• Runs > Aggregate

  Expect the select to read Average, the chart to redraw as a line, the subtitle average over runs · value over time, the popover still open

• Runs > Every run

  Expect Heatmap restored

• Time > Aggregate > select Sum

  Expect the subtitle to end in sum over time

• Escape

  Expect the popover closed and the focus back on the ellipsis

• Infected card > Enlarge

  Expect the card to span the row at twice the height, the chart redrawn at the new size, the other cards unchanged

• Shrink

  Expect the grid back as it was

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
hash	Ready	Preview	Sep 12, 2026 4:32pm UTC
petrinaut	Ready	Preview	Sep 12, 2026 4:32pm UTC
petrinaut-docs	Ready	Preview	Sep 12, 2026 4:32pm UTC

1 Skipped Deployment

Project	Deployment	Actions	Updated
hashdotdesign-tokens	Ignored	Preview	Sep 12, 2026 4:32pm UTC

[cursor]

PR Summary

Low Risk
UI-only changes to metric card menus, grid layout, and chart resizing; no auth, data, or backend behavior changes.

Overview
Metric cards get a redesigned Chart options experience and an Enlarge control, with docs and tests updated to match.

Chart options no longer use a flat menu of mixed run/time choices. The ellipsis opens a popover with separate Runs (distribution metrics only) and Time blocks. Each block uses Every run / Every step vs Aggregate segments plus a select for heatmap, traces, or statistics. Settings still update the same fields, last choices are restored when toggling modes, and the popover stays open while the chart redraws.

Enlarge sits next to chart options on each metric tile (experiments and optimization objective charts). It toggles a card to full row width and double row height; Shrink restores the default cell. ChartCardGrid uses dense packing and reading-flow: grid-order so reflow fills gaps and keyboard focus follows visual order where supported. useMetricPlot resizes the mounted uPlot via setSize instead of destroying the chart on height changes.

Shared jsdom stubs for Popover, Select, and SegmentedControl support new unit tests and updated drawer tests.

^{Reviewed by Cursor Bugbot for commit adf2dba. Bugbot is set up for automated code reviews on this repo. Configure here.}

[Copilot]

🟡 Changes recommended

The enlargement controls currently expose conflicting focus and toggle-state behavior to keyboard and assistive-technology users.

Get a fresh assessment by requesting another Copilot review.

Pull request overview

Refines Petrinaut metric cards with two-dimensional chart aggregation controls and per-card enlargement.

Changes:

• Replaces the flat chart menu with Runs and Time aggregation controls.
• Adds per-card enlarge/shrink behavior and in-place plot resizing.
• Adds tests, stories, documentation, and a package changeset.

File summaries

File	Description
shared/metric-tiles.tsx	Adds per-card sizing controls.
shared/ds-control-stubs.tsx	Adds shared test stubs for DS controls.
shared/chart-card.tsx	Supports spanning cards and dense grid packing.
shared/chart-card.test.tsx	Tests body-height calculations.
shared/chart-card.stories.tsx	Demonstrates an enlarged metric card.
optimizations/view-optimization-drawer.test.tsx	Tests enlargement in studies.
experiments/view-experiment-drawer.test.tsx	Tests enlargement in experiments.
use-metric-plot.ts	Resizes mounted uPlot charts in place.
metric-view-menu/aggregation-dimension.tsx	Implements reusable aggregation controls.
metric-view-menu.tsx	Replaces the flat menu with a popover.
metric-view-menu.test.tsx	Tests menu modes and selections.
metric-view-menu.stories.tsx	Adds distribution and scalar menu stories.
docs/optimization.md	Documents enlarged study metric cards.
docs/experiments.md	Documents the revised controls and enlargement.
.changeset/metric-card-chart-options.md	Records the Petrinaut patch change.

Review details

• Files reviewed: 15/15 changed files
• Comments generated: 2
• Review effort level: Balanced (auto)

Note

Copilot is running an experiment and ran this review at Balanced.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.