[charts-pro] Prefer global pointer interaction tracker in Heatmap by bernardobelchior · Pull Request #20697 · mui/mui-x

bernardobelchior · 2025-12-17T18:11:05Z

Related to #20702.

This change doesn't provide any meaningful performance improvement from my tests. The only benefit is that both the single SVG renderer and potential future renderers (be it canvas, WebGL or SVG batch) can reuse this implementation.

mui-bot · 2025-12-17T18:12:29Z

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

Bundle size report

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	0B^(0.00%)	0B^(0.00%)
@mui/x-charts-pro	🔺+560B^(+0.12%)	🔺+245B^(+0.17%)
@mui/x-charts-premium	🔺+566B^(+0.12%)	🔺+227B^(+0.16%)
@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%)

Details of bundle changes

Generated by 🚫 dangerJS against bb785e3

codspeed-hq · 2025-12-17T18:32:15Z

Merging this PR will not alter performance

✅ 14 untouched benchmarks

_{Comparing bernardobelchior:heatmap-perf-improv (bb785e3) with master (d1ccc97)¹}

No successful run was found on master (728ab0e) during the generation of this report, so d1ccc97 was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩

github-actions · 2025-12-18T15:37:11Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

bernardobelchior · 2025-12-18T16:36:46Z

packages/x-charts-pro/src/Heatmap/useInteractionItemProps.ts

+/**
+ * Hook to get pointer interaction props for chart items.
+ */
+export function useInteractionItemProps() {


This logic is pretty much the same as the one for the bar batch renderer PR. After both these PRs are merged we'll have two hooks that basically do the same thing. I'll work on creating a API that makes this extendable to other charts as I suspect we'll want that as well.

github-actions · 2025-12-23T10:04:25Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

bernardobelchior · 2025-12-24T12:25:54Z

packages/x-charts-pro/src/Heatmap/HeatmapItem.tsx

  const Cell = slots?.cell ?? HeatmapCell;
  const cellProps = useSlotProps({
    elementType: Cell,
-    additionalProps: interactionProps,


Isn't this also technically a breaking change? We're removing the interaction item props from a potential slot, which means that it might break someone's behavior.

For example, if they're using composition using a custom HeatmapPlot and rendering a HeatmapItem with slots, it might break. Seems a bit of an edge case, though

bernardobelchior · 2026-01-05T06:55:44Z

packages/x-charts-pro/src/Heatmap/HeatmapPlot.tsx

 }

+function RegisterHeatmapPointerInteractions() {
+  useRegisterPointerInteractions(selectorHeatmapItemAtPosition);


This component only exists so we can call useRegisterPointerInteractions conditionally

Why not make the hook decide itself if it should register the listeners or not?

It introduces complexity because we need to provide a skip flag and return early if it's set. IMO, this is simpler. Any reason why you think moving this to the hook would be better?

Was just wondering, if the inputs were simple it would be more reasonable than a random element, but it takes the slots/props in so meh 🫠

github-actions · 2026-01-06T14:04:41Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

bernardobelchior · 2026-01-06T14:41:01Z

packages/x-charts-pro/src/Heatmap/HeatmapItem.tsx

-  const interactionProps = useInteractionItemProps({ type: 'heatmap', seriesId, dataIndex });
+  // If we aren't using the default cell, we skip adding interaction props because we have a more efficient way to
+  // calculate them. To avoid breaking changes, we need to keep this behavior. We can remove this in v9.
+  const skipInteractionItemProps = shouldRegisterPointerInteractionsGlobally(props.slots);


I implemented this logic because users might be using the interactionsProps for something (e.g., to disable the tooltip/highlight by not passing them to their custom elements). However, now that I think of it, this isn't the recommended way to disable tooltips or highlights.

@alexfauquette @JCQuintas what's your take on this? Can I remove this conditional altogether and useInteractionItemProps altogether, or do you see any use case where it might be a breaking change?

The way you mitigate breaking changes looks good to me.

The shouldRegisterPointerInteractionsGlobally could also check for slotProps because another way to remove interaction is to set slotProps.legend.onPointerEnter to null

The shouldRegisterPointerInteractionsGlobally could also check for slotProps because another way to remove interaction is to set slotProps.legend.onPointerEnter to null

I suppose you mean slotProps.cell.onPointerEnter.

So, you are suggesting that shouldRegisterPointerInteractionsGlobally should return false if slotProps.cell.onPointerEnter === null because it means someone was trying to disable the pointer interactions?

Yes. You can even be safer with just checking if slotProps.cell.onPointerEnter exist. I'm not sure if slotProps event handler are concatenated by the useSlots or overriden

You can even be safer with just checking if slotProps.cell.onPointerEnter exist

Yeah, I think that's the best approach as someone could set onPointerEnter: undefined.

alexfauquette · 2026-01-08T13:49:14Z

packages/x-charts-pro/src/Heatmap/HeatmapItem.tsx

-  const interactionProps = useInteractionItemProps({ type: 'heatmap', seriesId, dataIndex });
+  // If we aren't using the default cell, we skip adding interaction props because we have a more efficient way to
+  // calculate them. To avoid breaking changes, we need to keep this behavior. We can remove this in v9.
+  const skipInteractionItemProps = shouldRegisterPointerInteractionsGlobally(props.slots);


The way you mitigate breaking changes looks good to me.

The shouldRegisterPointerInteractionsGlobally could also check for slotProps because another way to remove interaction is to set slotProps.legend.onPointerEnter to null

github-actions · 2026-01-13T09:59:25Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

bernardobelchior added performance type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. scope: charts Changes related to the charts. labels Dec 17, 2025

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Dec 18, 2025

bernardobelchior force-pushed the heatmap-perf-improv branch from bdcc83e to 4cc5aa3 Compare December 18, 2025 16:34

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Dec 18, 2025

bernardobelchior commented Dec 18, 2025

View reviewed changes

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Dec 23, 2025

bernardobelchior force-pushed the heatmap-perf-improv branch from 4cc5aa3 to 636f942 Compare December 23, 2025 14:27

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Dec 23, 2025

bernardobelchior commented Dec 24, 2025

View reviewed changes

bernardobelchior force-pushed the heatmap-perf-improv branch from ffed0d8 to b915753 Compare December 24, 2025 15:47

bernardobelchior force-pushed the heatmap-perf-improv branch from 2d7a448 to 1c822d4 Compare January 2, 2026 18:11

bernardobelchior commented Jan 5, 2026

View reviewed changes

bernardobelchior mentioned this pull request Jan 5, 2026

[charts-pro] Add onItemClick to the heatmap #20817

Merged

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jan 6, 2026

bernardobelchior force-pushed the heatmap-perf-improv branch from 22b2689 to f382aaf Compare January 6, 2026 14:08

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jan 6, 2026

bernardobelchior changed the title ~~[charts-pro] Heatmap performance improvements~~ [charts-pro] Prefer global pointer interaction tracker in Heatmap Jan 6, 2026

bernardobelchior commented Jan 6, 2026

View reviewed changes

bernardobelchior marked this pull request as ready for review January 7, 2026 10:47

bernardobelchior requested a review from a team as a code owner January 7, 2026 10:47

alexfauquette approved these changes Jan 8, 2026

View reviewed changes

bernardobelchior force-pushed the heatmap-perf-improv branch from 293f4ee to 4adb706 Compare January 9, 2026 15:42

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jan 13, 2026

bernardobelchior added 13 commits January 14, 2026 10:46

Move highlight handling to plot component

17b986a

Remove styled from heatmap cell

2fa4b47

Slightly more efficient findMinMax

c5e8a2f

Revert styled changes

0c0559e

Try to make useRegisterPointerInteractions generic

0a11d8b

Work around limitations

44ae96e

Revert the removal of useInteractionItemProps

542f460

Avoid registering the global listeners twice when using custom slots

a75e9ab

Reduce changes

1f99ec7

Fix registering global pointer interactions twice

d4531d9

Move HeatmapCell to internals directory

f3399cf

Add comment

7e4a136

Handle slotProps edge case

bb785e3

bernardobelchior force-pushed the heatmap-perf-improv branch from 4adb706 to bb785e3 Compare January 14, 2026 09:47

bernardobelchior requested a review from JCQuintas as a code owner January 14, 2026 09:47

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jan 14, 2026

JCQuintas approved these changes Jan 14, 2026

View reviewed changes

bernardobelchior mentioned this pull request Jan 14, 2026

[charts] Tasks for v9 #17955

Closed

29 tasks

bernardobelchior merged commit 59ac1e6 into mui:master Jan 14, 2026
22 checks passed

bernardobelchior deleted the heatmap-perf-improv branch January 14, 2026 15:23

JCQuintas mentioned this pull request Jan 16, 2026

[charts] Remove compatibility layer for React vs native events #20957

Closed

JCQuintas mentioned this pull request Mar 18, 2026

[charts] Remove compatibility layer for React vs native events #21780

Merged

Uh oh!

Conversation

bernardobelchior commented Dec 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mui-bot commented Dec 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle size report

Uh oh!

codspeed-hq bot commented Dec 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merging this PR will not alter performance

Footnotes

Uh oh!

github-actions bot commented Dec 18, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Dec 23, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jan 6, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jan 13, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

bernardobelchior commented Dec 17, 2025 •

edited

Loading

mui-bot commented Dec 17, 2025 •

edited

Loading

codspeed-hq bot commented Dec 17, 2025 •

edited

Loading