docs(benchmarks): the benchmark charts share one pair of axes across every model, and a box dragged on any chart zooms all of them

[FBumann]

Prompt: Can we add more brushes for seconds/MB ? And align all axes?

Prompt: I think such a box to zoom should replace all sliders!!! … Keep the box. We need to keep al plots in sync!!

Note

The following content was generated by AI.

Every panel of the benchmark chart has the same x and y axes. Dragging a box on any panel zooms all four to the box's size range and value range, and the table to its sizes. The size slider is gone, and a Reset zoom button sits above the charts.

What changed

docs/javascripts/benchmarks.js:

• Shared axes. draw() collects every visible panel's points in view, and sharedScales builds one x and one y axis from all of them. Unzoomed, they look as on main but span every panel.
• Zoom box. state.zoom holds the last box in data units: a size range x and a value range y, each null where the box left that axis alone. A drag on any panel draws the box in all four at once. The panels share axes and size, so the same pixels are the same range in each. Tooltips are hidden during the drag so they do not cover it. On release the box's corners are inverted through the panel's resolved scales, which a control that draws nothing (reader) keeps. A side under 8 px leaves that axis as it was, so a horizontal drag zooms only sizes and a vertical drag only values. A zoomed axis ends exactly at the box. Its log ticks are 1–2–5 inside the box, or d3's own log ticks where a narrow range leaves fewer than three. The table keeps only the sizes inside the box.
• Zooming out. Reset zoom sits above the charts at all times and is disabled while nothing is zoomed. A double-click on a chart also zooms out. Switching measure or view zooms out too, because the units change. Switching the axis type keeps the zoom. The box also works under ÷ specsolve, where it replaces the fixed window, and the edge labels follow it.
• No text selection. A press on a chart cancels mousedown, so neither a drag nor a double-click selects text on the page. The charts are also user-select: none with the -webkit- prefix, which Safari still needs.
• specsolve's name sits right of its last point inside the y axis, and is left out where none is. It is drawn as a control, outside the marks' clip, so a zoomed axis had put it above the panel.
• The size slider is removed, with its decade stops. Those stops counted a 5× size toward the decade above: dispatch xs5 (50k) as 100k.
• x ticks on powers of ten. One axis over four models would otherwise show every model's sizes as ticks. Where fewer than two powers fit, the ticks fall back to 1–2–5.
• y ticks evenly spaced. logTicks always kept the top tick, so it could sit next to the tick before it: "50 s" printed over "20 s". That was already the case on main in the network and sector panels, and shared axes would put it in every panel. The domain now runs on to the next tick at the same step.

docs/about/benchmarks.md: the slider is removed. A bar above the charts holds the hint "drag on a chart to zoom every chart" and the reset button. The reading guide says the panels share their axes and how the box works.

docs/stylesheets/benchmarks.css: the slider rules are removed. The box, the reset bar, the crosshair cursor, and hiding tooltips during a drag are added. touch-action: pan-y keeps a vertical swipe scrolling the page on a phone, so there a drag zooms along x.

Why not the library's own gestures. TanStack Charts 1.0 has brushX and zoomX, both along x only. Its docs say a different gesture should be built by the application, with d3-brush or directly, and that the y-domain policy belongs to the application too. This box is about 50 lines and adds no dependency, where d3-brush would add two.

Verified, and not done

pixi run check on 208b84c: lint, format and typecheck clean; 5601 passed, 566 skipped, 4 xfailed. tests/test_docs_site.py: 10 passed. pixi run -e docs docs-build: strict, no issues.

The page was then loaded in Chromium with #2039's benchmarks.json dropped into the built site only. This session's egress policy blocks cdn.jsdelivr.net, so the scratch copies of the page loaded the same pinned packages (@tanstack/charts@1.0.0, d3-scale@4.0.2, d3-shape@3.2.0) from npm instead. The tree's import map is unchanged. Real mouse drags, each step checking that all four panels carry identical tick labels:

step	axes, all four panels	table sizes
start	1k–10M · 0.2 ms–200 s	all 21
box on network	20k–2M · 1 ms–1 s; box shown in 4 panels mid-drag	10k … 1.5M
horizontal drag on nodal	50k–200k · y kept	50k, 100k, 150k
double-click	back to start	all 21
vertical drag on dispatch	x kept · 50 ms–5 s	all 21
Reset zoom	back to start	all 21
box, then peak RSS	zoom cleared · 100 MB–5 GB	all 21
box under ÷ specsolve	50k–1M · 0.5×–5×	narrowed
then linear axes	zoom kept	narrowed

The browser selection stays empty during and after a drag inside a plot, past the panel's edge, and from the axis labels, and after a double-click. A text selection during zooming was reported in a browser this session does not have; Chromium did not reproduce it before or after the fix.

Two console errors appear on both pages, main's included: another blocked host, and a TypeError reading output. They are not from this change.

Not done, by decision: the zoom has no keyboard path. The size slider had one, and the library's zoomX would have one for x only. On a phone a drag zooms along x only, because pan-y keeps the page scrollable.

🤖 Generated with Claude Code

https://claude.ai/code/session_01NTByC5UJJWvcFj3mvmv83v

[read-the-docs-community]

Documentation build overview

📚 specsolve | 🛠️ Build #35143805 | 📁 Comparing 208b84c against latest (2588883)

  🔍 Preview build  

2 files changed

± about/benchmarks/index.html
± about/changelog/index.html

[codspeed]

Merging this PR will not alter performance

✅ 104 untouched benchmarks
⏩ 307 skipped benchmarks¹

---

_{Comparing claude/bench-aligned-axes (208b84c) with main (2588883)}

Footnotes

1. 307 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩