Skip to content

[charts] Improve progressive scatter zoom#22817

Closed
Anexus5919 wants to merge 1 commit into
mui:masterfrom
Anexus5919:feat/progressive-scatter-zoom
Closed

[charts] Improve progressive scatter zoom#22817
Anexus5919 wants to merge 1 commit into
mui:masterfrom
Anexus5919:feat/progressive-scatter-zoom

Conversation

@Anexus5919

Copy link
Copy Markdown
Contributor

Summary

Follow-up to #22518 (the progressive scatter renderer), requested in this review comment and tracked in #22731.

When the progressive renderer is active on a large scatter dataset, zooming or panning used to repaint every visible point on each interaction frame. The progressive batching only protected the first paint, not the interaction, so large datasets could stutter while the user zoomed or panned.

This PR makes the progressive scheduler zoom aware: while a zoom or pan interaction is in progress, only the first batch of each series is painted, which keeps every interaction frame cheap. Once the interaction settles, the remaining batches are revealed progressively, exactly like the initial paint.

How it works

  • The scheduler now reads selectorChartZoomIsInteracting. While it is true, revealedRounds is capped to the first batch (INTERACTION_REVEALED_ROUNDS = 1).
  • When it becomes false again, the existing animation frame ramp resumes from the current reveal count up to the full count.
  • The "delay of inactivity" reuses the zoom plugin's existing 166ms isInteracting debounce, which is the same signal the line, bar, and area charts already use to skip animation during zoom. No new timer is introduced.
  • useProgressiveRendering now declares UseChartCartesianAxisSignature as a dependency (it is always registered before progressive rendering in every chart), mirroring useChartClosestPoint.

Behavior

  • Pro charts with the progressive renderer: during zoom or pan only the first batch repaints; the rest fill in once the interaction stops.
  • Community charts: no change. Zoom is a Pro feature, so isInteracting stays false and the renderer behaves exactly as before.
  • No public API change.

Testing

Added ScatterChartPro.progressive.test.tsx: it renders 1500 points with renderer="svg-progressive", asserts all 1500 markers are revealed at rest, that the count drops to the first batch (1000) during a zoom interaction, and that it returns to 1500 after the interaction settles.

Verified locally: TypeScript (x-charts, x-charts-pro, x-charts-premium), ESLint, and the existing scatter test suites all pass.

Closes #22731

Changelog

[charts] The progressive scatter renderer now stays fluid while zooming and panning: it paints only the first batch during the interaction and reveals the rest once it settles.

@chatgpt-codex-connector

Copy link
Copy Markdown

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, you can upgrade your account or add credits to your account and enable them for code reviews in your settings.

@code-infra-dashboard

code-infra-dashboard Bot commented Jun 15, 2026

Copy link
Copy Markdown

Deploy preview

https://deploy-preview-22817--material-ui-x.netlify.app/

Bundle size

Bundle Parsed size Gzip size
@mui/x-data-grid 0B(0.00%) 0B(0.00%)
@mui/x-data-grid-pro 0B(0.00%) 0B(0.00%)
@mui/x-data-grid-premium 0B(0.00%) 0B(0.00%)
@mui/x-charts 🔺+232B(+0.06%) 🔺+65B(+0.05%)
@mui/x-charts-pro 🔺+232B(+0.04%) 🔺+42B(+0.03%)
@mui/x-charts-premium 🔺+232B(+0.04%) 🔺+56B(+0.03%)
@mui/x-date-pickers 0B(0.00%) 0B(0.00%)
@mui/x-date-pickers-pro 0B(0.00%) 0B(0.00%)
@mui/x-tree-view 0B(0.00%) 0B(0.00%)
@mui/x-tree-view-pro 0B(0.00%) 0B(0.00%)
@mui/x-license 0B(0.00%) 0B(0.00%)

Details of bundle changes

Performance

Total duration: 1,757.18 ms -19.28 ms(-1.1%) | Renders: 67 (+0)

Test Duration Renders
SparkLineChart grid of 100 instances 171.71 ms 🔺+34.28 ms(+24.9%) 1 (+0)
ScatterChartPremium with big data amount (webgl renderer) 71.44 ms ▼-22.39 ms(-23.9%) 5 (+0)
Area chart with big data amount (no marks) 20.08 ms ▼-5.98 ms(-22.9%) 2 (+0)
ScatterChartPro with big data amount (batch renderer) 7.69 ms ▼-2.57 ms(-25.0%) 2 (+0)
ScatterChartPro with big data amount and zoomed in (single renderer) 8.18 ms ▼-2.40 ms(-22.7%) 2 (+0)

21 tests within noise — details

Metric alarms

Test Metric Change
SparkLineChart grid of 100 instances bench:paint 🔺 +93.40 ms

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

@Anexus5919

Anexus5919 commented Jun 15, 2026

Copy link
Copy Markdown
Contributor Author

@JCQuintas @alexfauquette Kindly have a review on this pr. Thanks!

@oliviertassinari oliviertassinari added the scope: charts Changes related to the charts. label Jun 15, 2026
@alexfauquette alexfauquette added plan: Pro Impact at least one Pro user. CLA: required Head to https://mui-org.notion.site/92ece655b1584b10b00e4de9e67eed. labels Jun 16, 2026
@JCQuintas

Copy link
Copy Markdown
Member

Hi @Anexus5919 thanks for the interest, while your solution goes straight to the point, this one required a bit more architectural changes to be stable.

I was working on a PR for this issue before you opened this one, so it was easier to keep my work there rather than try to integrate it to your changes

You can see the main behaviour difference in this comment #22862 (comment)

I'll be closing this one to avoid confusion.

@JCQuintas JCQuintas closed this Jun 17, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA: required Head to https://mui-org.notion.site/92ece655b1584b10b00e4de9e67eed. plan: Pro Impact at least one Pro user. scope: charts Changes related to the charts.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[charts] Improve progressive scatter zoom

4 participants