docs(benchmarks): the benchmark tooltip ranks the libraries against specsolve, and the specsolve label sits clear of the other lines

[FBumann]

Prompt: I woud like to quickly explore some minor improvements to the visal, hover and specsolve text positionon.

Note

The following content was generated by AI.

The specsolve label moves to the right of its last point, clear of the other lines. The tooltip lists the libraries slowest first, as the lines stack, with each value and its ratio to specsolve aligned in columns. pyomo takes the gold of its logo and linopy the blue.

What changed

• Label. The label sat above and left of specsolve's last point, where the lines bunch up, and overlapped them. It now sits right of that point, vertically centred, in a 76 px right margin. It is a chart control, not a text mark: the marks share one clip group, and the clip cut the label off in the margin. At a size where specsolve is projected, the label follows the end of the projection.
• Tooltip rows.
  • The rows are sorted by value, slowest at the top and fastest at the bottom, the order of the lines at that size. They were in legend order.
  • Every row reads library value · ratio, specsolve's own 1.0× included. specsolve's row is active, so TanStack draws it bold on a tinted background.
  • A projected row says so in its label, pyomo (projected). The value no longer carries a ≈ prefix, which would break the column.
• Tooltip columns. TanStack lays out each row as its own grid, with the value right-aligned in tabular digits. A column therefore lines up only if every entry has the same shape. Three rules give that:
  • one unit for the whole tooltip, the smallest value's (14781 ms over 761 ms, not 14.78 s over 761 ms);
  • fixed decimals in each column: the ratio always has one, and the value has as many as its smallest entry needs;
  • left padding with figure spaces (U+2007), which are one digit wide.
• Tooltip size.
  • TanStack's default font is 0.75rem, which is 15 px under the theme's 20 px root. The tooltip now uses .64rem, the table's size.
  • The width cap is 24rem rather than TanStack's 80% of the panel.
  • Labels do not wrap, so a long (projected) label near the panel edge stays on one line.
• Colours.
  • pyomo takes the gold. Its logo is a bird, mostly gold and orange.
  • linopy takes the blue. Its logo is a grey-mauve wordmark with an orange dot, so it has no blue, but it has no other distinctive colour either.
  • Orange for pyomo was tried and refused. Beside gurobipy-loop's red, orange scores ΔE 11 for normal vision, below the validator's floor of 15.
  • HiGHS (red and black) appears only inside the neutral matrix floor, so it keeps no colour of its own.
  • Dark-mode blue. linopy is the line nearest specsolve, so in dark mode its blue moves from #3987e5 to #35b9f2. That is drawn as #329ccb after the 85% mix with the surface. Against specsolve's violet, the blue drawn before (#3372c0) scored ΔE 14.3 for normal vision and 6.7 for protanopia. The new blue scores 16.2, and 6.4 for deuteranopia. The validator allows 6.4 only with a second cue; specsolve has three: a thicker line, larger dots and its label. In light mode the drawn pair scores 27, and 22 for deuteranopia.

What was verified, and what was not

• Gates: pixi run check passed (4999 tests) on ee0c424. The later commits change only the changelog, the JS, the CSS and the page's JSON spec, which check does not lint. pixi run docs-build (strict) passes on the head commit.
• Browser, on the built site: headless Chromium, with the jsdelivr files served from the npm tarball.

  • Alignment, measured: the sweep hovers every panel at 18 points each, for wall time and peak RSS on both ladders. That gives 204 tooltips. In every one, the non-bold value cells are the same width, a spread of 0.00 px. The bold specsolve cell is 0.8 px wider, because its digits are bold. No label wraps.

  • Tooltip: dispatch — gurobi at 1M reads:

    pyomo             14781 ms · 18.2×
    gurobipy-loop      2420 ms ·  3.0×
    linopy              941 ms ·  1.2×
    specsolve           814 ms ·  1.0×
    gurobipy-matrix     761 ms ·  0.9×
    

    Checked in light and dark.

  • Colours: read back from the page as drawn and checked with the dataviz skill's validate_palette.js.

  • Label: one specsolve label per panel, drawn in full right of the last point. Checked in log–log on the length ladder and in linear–linear on the width ladder.

  • Toggles: the toggle test from docs(benchmarks): the benchmark charts and their method are one page of the docs, in the site's theme #1860 still passes, on a direct load and after instant navigation.

• Not checked: phone widths. At phone width the 76 px margin leaves a plot of about 185 px.

What was not done

• Gridlines, the vertical hover line and dot sizes are unchanged. I had proposed fainter gridlines, a lighter hover line, larger specsolve dots and a stronger dark-mode band. In the screenshots the gridlines already read as faint, and the specsolve dots are already the largest. The hover line stays as it is.
• The gold–red pair is left as it is. As drawn, gold and red score ΔE 3.7 for deuteranopia in both themes, and 12.6 (light) and 14.7 (dark) for normal vision. This pair was there before this PR, when linopy had the gold; now pyomo has it. Both meet only in the Gurobi panels, where pyomo's line runs well above gurobipy-loop's. Fixing it means a new colour for one of them, so it is a separate change.

🤖 Generated with Claude Code

https://claude.ai/code/session_01K42KwZJtqPPhf5hDzUD91o

[read-the-docs-community]

Documentation build overview

📚 specsolve | 🛠️ Build #34980482 | 📁 Comparing 9dcfafa against latest (7af455a)

  🔍 Preview build  

1 file changed

± about/changelog/index.html

[codspeed]

Merging this PR will not alter performance

✅ 67 untouched benchmarks
⏩ 307 skipped benchmarks¹

---

_{Comparing claude/benchmark-chart-polish (9dcfafa) with main (7af455a)}

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. ↩