Commit 7106686
[claude] Rebuild chart UI with per-card toolbars and lazy-fetch on toggle (#7685)
## Summary
This PR rebuilds the benchmarks website chart UI from a page-level
toolbar model to a per-card toolbar model with lazy-fetch-on-toggle for
closed groups on the landing page.
### Key Changes
**Landing Page (`/`):**
- Groups are now collapsible `<details>` elements instead of
always-visible sections
- The first group opens by default with all chart payloads pre-inlined
for fast first paint
- Subsequent groups render only chart-card shells; payloads are fetched
client-side on first `details.toggle`
- Removed page-level toolbar; each chart now has its own independent
toolbar
**Per-Chart UX:**
- Each `.chart-card` carries a `.toolbar.toolbar--card` with scope
buttons, slider, Y-axis toggle, and mode toggle
- Charts fetch up to 1000 commits once; the toolbar's "Show" buttons and
slider manipulate `chart.options.scales.x.min/max` to reveal windows of
that fetched slice (no refetch on scope change)
- Slider is throttled to ~16ms (60fps) for smooth dragging
- Mouse wheel pans horizontally; drag-pan and drag-rectangle-zoom are
wired through the new `chartjs-plugin-zoom` plugin
- Custom inline crosshair plugin draws a vertical line at the hovered
commit
- External tooltip is offset 12px from cursor and flips horizontally on
overflow; `pointer-events: none` fixes the flicker described in the
rebuild brief
**Server-Side (`html.rs`):**
- Removed URL state management (`?y=`, `?mode=`, `?hidden=`) from the
HTML layer; these are now client-side only
- `?n=` is accepted as a power-user override on initial fetch but not
written back from the toolbar
- Added `collect_landing_groups()` to pre-fetch payloads for the
open-by-default first group only
- Implemented canonical group ordering via `GROUP_ORDER` constant
(ported from v2)
- Per-chart toolbar state lives on the canvas element
(`canvas.__bench_state`)
**Client-Side (`chart-init.js`):**
- Removed URL state parsing and rewriting logic
- Added `throttle()` utility for slider drag throttling
- Added `crosshairPlugin` for vertical line at hover
- Refactored tooltip handler to work with per-card state
- Added lazy-fetch handler for closed `<details>` groups (triggered on
`details.toggle`)
- Chart construction now reads state from canvas element instead of URL
**Styling (`style.css`):**
- Redesigned landing page with collapsible group cards and per-chart
toolbars
- Reduced toolbar size and spacing for compact per-card layout
- Added loading/error indicators for lazy-fetch states
- Updated chart-card grid and spacing
**Dependencies:**
- Added `chartjs-plugin-zoom` v2.2.0 for drag-pan and
drag-rectangle-zoom support
### Testing
- Updated existing snapshot tests for landing page, chart page, and
group page
- Added new tests:
- `details_first_group_open_others_closed()` — verifies first group
opens by default
- `chart_card_carries_per_chart_toolbar()` — verifies every chart has
its own toolbar
- `landing_groups_render_in_v2_order()` — verifies canonical group
ordering
- All existing tests pass with updated snapshots
https://claude.ai/code/session_01NhtGnaLstPEAh7cRJ4qDFt
---------
Co-authored-by: Claude <noreply@anthropic.com>1 parent 5083e80 commit 7106686
10 files changed
Lines changed: 1110 additions & 623 deletions
File tree
- benchmarks-website/server
- src
- static
- tests
- snapshots
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
34 | 34 | | |
35 | 35 | | |
36 | 36 | | |
| 37 | + | |
| 38 | + | |
| 39 | + | |
| 40 | + | |
| 41 | + | |
| 42 | + | |
| 43 | + | |
| 44 | + | |
| 45 | + | |
| 46 | + | |
| 47 | + | |
| 48 | + | |
| 49 | + | |
| 50 | + | |
| 51 | + | |
| 52 | + | |
| 53 | + | |
| 54 | + | |
| 55 | + | |
| 56 | + | |
| 57 | + | |
| 58 | + | |
| 59 | + | |
| 60 | + | |
| 61 | + | |
| 62 | + | |
| 63 | + | |
| 64 | + | |
| 65 | + | |
| 66 | + | |
| 67 | + | |
| 68 | + | |
| 69 | + | |
37 | 70 | | |
38 | 71 | | |
39 | 72 | | |
| |||
107 | 140 | | |
108 | 141 | | |
109 | 142 | | |
| 143 | + | |
| 144 | + | |
| 145 | + | |
| 146 | + | |
| 147 | + | |
110 | 148 | | |
111 | 149 | | |
112 | 150 | | |
113 | 151 | | |
| 152 | + | |
| 153 | + | |
| 154 | + | |
| 155 | + | |
114 | 156 | | |
115 | 157 | | |
116 | 158 | | |
| |||
208 | 250 | | |
209 | 251 | | |
210 | 252 | | |
211 | | - | |
| 253 | + | |
212 | 254 | | |
213 | 255 | | |
214 | 256 | | |
| |||
289 | 331 | | |
290 | 332 | | |
291 | 333 | | |
| 334 | + | |
| 335 | + | |
| 336 | + | |
| 337 | + | |
| 338 | + | |
292 | 339 | | |
293 | 340 | | |
294 | 341 | | |
| |||
358 | 405 | | |
359 | 406 | | |
360 | 407 | | |
| 408 | + | |
| 409 | + | |
| 410 | + | |
| 411 | + | |
| 412 | + | |
| 413 | + | |
| 414 | + | |
| 415 | + | |
| 416 | + | |
| 417 | + | |
| 418 | + | |
| 419 | + | |
361 | 420 | | |
362 | 421 | | |
363 | 422 | | |
364 | 423 | | |
365 | 424 | | |
366 | 425 | | |
| 426 | + | |
| 427 | + | |
| 428 | + | |
| 429 | + | |
| 430 | + | |
| 431 | + | |
| 432 | + | |
| 433 | + | |
| 434 | + | |
| 435 | + | |
| 436 | + | |
| 437 | + | |
| 438 | + | |
| 439 | + | |
| 440 | + | |
| 441 | + | |
| 442 | + | |
| 443 | + | |
| 444 | + | |
| 445 | + | |
367 | 446 | | |
368 | 447 | | |
369 | 448 | | |
| |||
548 | 627 | | |
549 | 628 | | |
550 | 629 | | |
551 | | - | |
552 | | - | |
553 | | - | |
| 630 | + | |
| 631 | + | |
| 632 | + | |
| 633 | + | |
| 634 | + | |
| 635 | + | |
| 636 | + | |
| 637 | + | |
554 | 638 | | |
555 | 639 | | |
556 | 640 | | |
| |||
588 | 672 | | |
589 | 673 | | |
590 | 674 | | |
| 675 | + | |
| 676 | + | |
| 677 | + | |
| 678 | + | |
| 679 | + | |
| 680 | + | |
| 681 | + | |
| 682 | + | |
| 683 | + | |
| 684 | + | |
591 | 685 | | |
592 | 686 | | |
| 687 | + | |
| 688 | + | |
| 689 | + | |
| 690 | + | |
593 | 691 | | |
594 | 692 | | |
595 | 693 | | |
| |||
604 | 702 | | |
605 | 703 | | |
606 | 704 | | |
607 | | - | |
| 705 | + | |
608 | 706 | | |
609 | 707 | | |
610 | 708 | | |
| |||
0 commit comments