[charts] Extract a tooltip plugin from the interaction one #20591

alexfauquette · 2025-12-08T10:03:39Z

This is a preliminary PR before the one to control tooltip item

The useChartInteraction handles at the same time the follwoing state

item : defines the item tooltip
pointer: {x, y}: defines the current coordinate of the pointer
lastUpdate: the interaction that triggered the last update (keyboard or pointer)

In terms of usage:

item : only for the item tooltip
pointer: {x, y}: for both the axis tooltip, and the axis highlight
lastUpdate: for both tooltip and highlight

The idea is to keep in interaction only the state that is shared between multiple concept (highlight and tooltip) and in the tooltip plugin put what is only related to the tooltip.

The PR is splitted by commits to simplify the review

mui-bot · 2025-12-08T10:05:25Z

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

Updated pages:

docs/data/charts/plugins/plugins.md

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	🔺+258B^(+0.08%)	▼-5B^(0.00%)
@mui/x-charts-pro	🔺+276B^(+0.06%)	🔺+28B^(+0.02%)
@mui/x-charts-premium	🔺+254B^(+0.06%)	🔺+31B^(+0.02%)
@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 f626002

codspeed-hq · 2025-12-08T10:15:56Z

CodSpeed Performance Report

Merging #20591 will not alter performance

_{Comparing alexfauquette:tooltip-item-control (f626002) with master (f4a21f7)¹}

Summary

✅ 13 untouched

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

alexfauquette · 2025-12-08T10:08:44Z

...ts/src/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.selectors.ts

-export const selectorChartsInteractionItem = createSelector(
-  selectInteraction,
-  (interaction) => interaction?.item ?? null,
-);
-


Replaced by selectorChartsTooltipPointerItem

alexfauquette · 2025-12-08T10:09:06Z

...ts/src/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.selectors.ts

-export const selectorChartsInteractionItemIsDefined = createSelector(
-  selectorChartsInteractionItem,
-  (item) => item !== null,
-);


Replaced by selectorChartsTooltipPointerItemIsDefined

alexfauquette · 2025-12-08T10:12:00Z

...ges/x-charts/src/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.ts

-    store.set('interaction', { ...store.state.interaction, item: null });
+    store.update({
+      interaction: { ...store.state.interaction, pointer: null },
+      tooltip: { ...store.state.tooltip, item: null },


Having the tooltip update here avoid to modify too many lines. Migth need to remove it when introducing the control

Why though? If the goal is to split them, shouldn't we isolate them more?

Or maybe do it in a new PR if it needs changing a lot of files 😆

Because I realized that while reviewing my own PR :)

I did it by modifying the "closest point" plugin because it's able to set the tooltip item. But I did not modify the cartesian/polar axis plugins, because they do not set values to the item tooltip.

JCQuintas · 2025-12-08T10:57:34Z

...ges/x-charts/src/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.ts

-    store.set('interaction', { ...store.state.interaction, item: null });
+    store.update({
+      interaction: { ...store.state.interaction, pointer: null },
+      tooltip: { ...store.state.tooltip, item: null },


Why though? If the goal is to split them, shouldn't we isolate them more?

Or maybe do it in a new PR if it needs changing a lot of files 😆

JCQuintas · 2025-12-08T11:06:51Z

packages/x-charts/src/internals/plugins/featurePlugins/useChartTooltip/useChartTooltip.ts

+      Object.keys(itemToRemove).some(
+        (key) =>
+          itemToRemove[key as keyof typeof itemToRemove] !== prevItem[key as keyof typeof prevItem],
+      )


cant we use it like this?

Suggested change

Object.keys(itemToRemove).some(

(key) =>

itemToRemove[key as keyof typeof itemToRemove] !== prevItem[key as keyof typeof prevItem],

)

Object.keys(itemToRemove).some(

(key: keyof ChartItemIdentifier<ChartSeriesType>) =>

itemToRemove[key] !== prevItem[key],

)

No, but this work

(Object.keys(itemToRemove) as Array<keyof ChartItemIdentifier<ChartSeriesType>>).some( (key) => itemToRemove[key] !== prevItem[key], )

bernardobelchior · 2025-12-08T17:07:40Z

packages/x-charts/src/internals/plugins/featurePlugins/useChartTooltip/useChartTooltip.types.ts

+
+export interface UseChartTooltipInstance {
+  /**
+   * Setter for the item the user is interacting with.


Should we update these docs? "Interaction" and "interacting" may not make sense anymore

bernardobelchior · 2025-12-08T17:08:13Z

packages/x-charts/src/internals/plugins/featurePlugins/useChartTooltip/useChartTooltip.types.ts

+   * Setter for the item the user is interacting with.
+   * @param {ChartItemIdentifier} newItem The identifier of the item.
+   */
+  setItemTooltip: (newItem: ChartItemIdentifier<ChartSeriesType>) => void;


We can do this later, but wouldn't it make more sense to call this setTooltipItem?

bernardobelchior · 2025-12-08T17:08:33Z

packages/x-charts/src/internals/plugins/featurePlugins/useChartTooltip/useChartTooltip.types.ts

+   */
+  setItemTooltip: (newItem: ChartItemIdentifier<ChartSeriesType>) => void;
+  /**
+   * Remove item interaction if the current if the provided item is still the one interacting.


The case where itemToRemove isn't provided is not documented

bernardobelchior · 2025-12-08T17:10:03Z

packages/x-charts/src/internals/plugins/featurePlugins/useChartTooltip/useChartTooltip.ts

+      (Object.keys(itemToRemove) as Array<keyof ChartItemIdentifier<ChartSeriesType>>).some(
+        (key) => itemToRemove[key] !== prevItem[key],
+      )


Can't we use fastObjectShallowCompare here?

bernardobelchior · 2025-12-08T17:11:59Z

...charts/src/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types.ts

+   * @param {InteractionUpdateSource} interaction The source of the last interaction update (pointer or keyboard)
+   * @returns {void}
+   */
+  setLastUpdate: (interaction: InteractionUpdateSource) => void;


Suggested change

setLastUpdate: (interaction: InteractionUpdateSource) => void;

setLastUpdateSource: (interaction: InteractionUpdateSource) => void;

bernardobelchior · 2025-12-08T17:13:04Z

...s/x-charts/src/internals/plugins/featurePlugins/useChartClosestPoint/useChartClosestPoint.ts

+        instance.removeItemTooltip?.();
        instance.clearHighlight?.();
+        instance.removeItemTooltip?.();


Did you intend to call removeItemTooltip? Seems a bit weird

bernardobelchior · 2025-12-08T17:18:53Z

...charts/src/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types.ts

 export type UseChartInteractionSignature = ChartPluginSignature<{
  instance: UseChartInteractionInstance;
  state: UseChartInteractionState;
+  optionalDependencies: [UseChartTooltipSignature];


Why does this plugin depend on the tooltip plugin? I couldn't find any reference to the tooltip plugin from this one.

Nice catch. It's because initially the cleanInteraction() was also resetting the tooltip item

alexfauquette added 4 commits December 8, 2025 10:48

Split interaction and tooltip in distinct plugins

0a24e30

update logics

ceff5be

update TS and imports

049f1d5

update docs

b47f174

alexfauquette requested review from a team and prakhargupta1 as code owners December 8, 2025 10:03

alexfauquette added 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 8, 2025

alexfauquette commented Dec 8, 2025

View reviewed changes

JCQuintas approved these changes Dec 8, 2025

View reviewed changes

alexfauquette added 3 commits December 8, 2025 16:45

feedback

2cf60cb

scripts

4a62cb3

isolate-item-tooltip-removal

9ec530e

bernardobelchior reviewed Dec 8, 2025

View reviewed changes

Feedback

f626002

alexfauquette merged commit d72d0f4 into mui:master Dec 9, 2025
22 checks passed

A-s-h-o-k pushed a commit to A-s-h-o-k/mui-x that referenced this pull request Dec 14, 2025

[charts] Extract a tooltip plugin from the interaction one (mui#20591)

b572af1

mapache-salvaje pushed a commit to mapache-salvaje/mui-x that referenced this pull request Dec 29, 2025

[charts] Extract a tooltip plugin from the interaction one (mui#20591)

13d980a

	setLastUpdate: (interaction: InteractionUpdateSource) => void;
	setLastUpdateSource: (interaction: InteractionUpdateSource) => void;

Uh oh!

[charts] Extract a tooltip plugin from the interaction one #20591

[charts] Extract a tooltip plugin from the interaction one #20591

Uh oh!

Conversation

alexfauquette commented Dec 8, 2025

Uh oh!

mui-bot commented Dec 8, 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 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merging #20591 will not alter performance

Summary

Footnotes

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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

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

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!

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!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

mui-bot commented Dec 8, 2025 •

edited

Loading

codspeed-hq bot commented Dec 8, 2025 •

edited

Loading

alexfauquette Dec 8, 2025 •

edited

Loading