Skip to content

[dashboard] Improve benchmark timeline view#1311

Merged
Janpot merged 12 commits intomasterfrom
dashboard-benchmark-inline-compare
Apr 21, 2026
Merged

[dashboard] Improve benchmark timeline view#1311
Janpot merged 12 commits intomasterfrom
dashboard-benchmark-inline-compare

Conversation

@Janpot
Copy link
Copy Markdown
Member

@Janpot Janpot commented Apr 14, 2026

Summary

  • Click-to-compare on the timeline: click a point on the benchmark chart to pick the report, click another to pick the baseline.
  • Three chart modes: duration (default), render count, and paint (metrics['paint:default']). Use stacked bar charts.
  • Granularity toggle: switch between daily (first commit of each day, existing behavior) and per commit (every fetched commit, 30 per page).

https://code-infra-dashboard-pr-1311.onrender.com/repository/mui/base-ui/benchmarks

Click a point on the daily benchmark chart to mark it as the report, then
click an earlier point to set a baseline — a full comparison renders inline
below the chart using the already-loaded reports (no refetching). Role
assignment is date-aware: clicking a later point promotes it to report and
demotes the current report to baseline.

Chart-level changes:
- One line per test (totalDuration) instead of one per render/phase
- Selected commits shown as labeled ChartsReferenceLine verticals
- Baseline/Report chips under the chart
- Single shared LineChart for single vs multi-benchmark mode

The comparison UI was extracted from BenchmarkDetails into a pure
BenchmarkComparisonReportView that takes value/base reports and owns
compareBenchmarkReports internally.

Entry sort now uses a precomputed priority on ComparisonItem encoding
severity (error → success → neutral) and absolute diff magnitude in one
number, so the shared view always shows regressions first.

Also moves scrollbar-gutter: stable from body to html so the rule applies
to the real viewport scroll container and the benchmarks page no longer
shifts when the comparison section appears.
@code-infra-dashboard
Copy link
Copy Markdown

code-infra-dashboard Bot commented Apr 14, 2026

Bundle size

Bundle Parsed size Gzip size
@base-ui/react 0B(0.00%) 0B(0.00%)
@mui/x-charts-pro 0B(0.00%) 0B(0.00%)

Details of bundle changes

Deploy preview

https://deploy-preview-1311--mui-internal.netlify.app/

Performance

Total duration: 16.99 ms +1.89 ms(+12.5%) | Renders: 4 (+0) | Paint: 71.66 ms -2.33 ms(-3.2%)

Test Duration Renders
HeavyList mount 10.88 ms 🔺+2.62 ms(+31.7%) 1 (+0)
DataGrid mount with paint timing 1.90 ms ▼-0.73 ms(-27.8%) 1 (+0)
Counter click 4.21 ms ▼-0.00 ms(0.0%) 2 (+0)

Details of benchmark changes


Check out the code infra dashboard for more information about this PR.

@Janpot Janpot added the scope: code-infra Involves the code-infra product (https://www.notion.so/mui-org/5562c14178aa42af97bc1fa5114000cd). label Apr 14, 2026
Janpot added 2 commits April 17, 2026 13:17
…-inline-compare

# Conflicts:
#	apps/code-infra-dashboard/src/views/BenchmarkDetails.tsx
@oliviertassinari oliviertassinari temporarily deployed to dashboard-benchmark-inline-compare - mui-tools-public PR #1311 April 17, 2026 11:19 — with Render Destroyed
@github-actions github-actions Bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Apr 17, 2026
@Janpot Janpot marked this pull request as ready for review April 17, 2026 11:19
@Janpot Janpot changed the title [dashboard] Inline benchmark report comparison on timeline [dashboard] Improve benchmark timeline view Apr 17, 2026
@oliviertassinari oliviertassinari temporarily deployed to dashboard-benchmark-inline-compare - code-infra-dashboard PR #1311 April 17, 2026 11:24 — with Render Destroyed
@Janpot Janpot requested a review from a team April 17, 2026 11:25
@Janpot Janpot merged commit 99fb0c8 into master Apr 21, 2026
13 checks passed
@Janpot Janpot deleted the dashboard-benchmark-inline-compare branch April 21, 2026 09:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

scope: code-infra Involves the code-infra product (https://www.notion.so/mui-org/5562c14178aa42af97bc1fa5114000cd).

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants