[charts] Improve axis tooltip performances (#17398)

Author: alexfauquette

packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianInteraction.selectors.ts

@@ -1,3 +1,4 @@
+import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
 import { createSelector } from '../../utils/selectors';
 import { AxisId, ChartsAxisProps } from '../../../../models/axis';
 import {
@@ -109,9 +110,22 @@ export const selectorChartsInteractionTooltipXAxes = createSelector(
 
     return axes.axisIds
       .filter((id) => axes.axis[id].triggerTooltip)
-      .map((axisId) => ({ axisId, dataIndex: getAxisIndex(axes.axis[axisId], value) }))
+      .map(
+        (axisId): AxisItemIdentifier => ({
+          axisId,
+          dataIndex: getAxisIndex(axes.axis[axisId], value),
+        }),
+      )
       .filter(({ dataIndex }) => dataIndex >= 0);
   },
+  {
+    memoizeOptions: {
+      // Keep the same reference if array content is the same.
+      // If possible, avoid this pattern by creating selectors that
+      // uses string/number as arguments.
+      resultEqualityCheck: isDeepEqual,
+    },
+  },
 );
 
 /**
@@ -126,9 +140,22 @@ export const selectorChartsInteractionTooltipYAxes = createSelector(
 
     return axes.axisIds
       .filter((id) => axes.axis[id].triggerTooltip)
-      .map((axisId) => ({ axisId, dataIndex: getAxisIndex(axes.axis[axisId], value) }))
+      .map(
+        (axisId): AxisItemIdentifier => ({
+          axisId,
+          dataIndex: getAxisIndex(axes.axis[axisId], value),
+        }),
+      )
       .filter(({ dataIndex }) => dataIndex >= 0);
   },
+  {
+    memoizeOptions: {
+      // Keep the same reference if array content is the same.
+      // If possible, avoid this pattern by creating selectors that
+      // uses string/number as arguments.
+      resultEqualityCheck: isDeepEqual,
+    },
+  },
 );
 
 /**
@@ -138,3 +165,5 @@ export const selectorChartsInteractionAxisTooltip = createSelector(
   [selectorChartsInteractionTooltipXAxes, selectorChartsInteractionTooltipYAxes],
   (xTooltip, yTooltip) => xTooltip.length > 0 || yTooltip.length > 0,
 );
+
+export type AxisItemIdentifier = { axisId: string; dataIndex: number };

packages/x-charts/src/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.ts

@@ -1,5 +1,7 @@
+import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
 import { AxisId, ChartsAxisProps } from '../../../../models/axis';
 import { createSelector } from '../../utils/selectors';
+import type { AxisItemIdentifier } from '../useChartCartesianAxis/useChartCartesianInteraction.selectors';
 import {
   selectorChartsInteractionPointerX,
   selectorChartsInteractionPointerY,
@@ -96,9 +98,17 @@ export const selectorChartsInteractionTooltipRotationAxes = createSelector(
     }
 
     return axes.axisIds
-      .map((axisId, axisIndex) => ({ axisId, dataIndex: indexes[axisIndex] }))
+      .map((axisId, axisIndex): AxisItemIdentifier => ({ axisId, dataIndex: indexes[axisIndex] }))
       .filter(({ axisId, dataIndex }) => axes.axis[axisId].triggerTooltip && dataIndex >= 0);
   },
+  {
+    memoizeOptions: {
+      // Keep the same reference if array content is the same.
+      // If possible, avoid this pattern by creating selectors that
+      // uses string/number as arguments.
+      resultEqualityCheck: isDeepEqual,
+    },
+  },
 );
 
 /**