chore: avoid re-rendering tooltips on each cursor pixel change over charts (#82)

* chore: avoid re-rendering tooltips on each cursor pixel change over charts

* chore: using getSeriesId as a better way to check series

---------

Co-authored-by: Enmanuel Duran <[email protected]>

Author: enmanuelduran

src/core/__tests__/chart-core-tooltip.test.tsx

@@ -316,6 +316,45 @@ describe("CoreChart: tooltip", () => {
     }
   });
 
+  test("only re-renders when group has changed", () => {
+    const getTooltipContentMock = vi.fn(() => ({
+      header: () => "Tooltip title",
+      body: () => "Tooltip body",
+      footer: () => "Tooltip footer",
+    }));
+    renderChart({
+      highcharts,
+      options: {
+        series: lineSeries,
+        chart: {
+          events: {
+            load() {
+              this.plotTop = 0;
+              this.plotLeft = 0;
+              this.plotWidth = 100;
+              this.plotHeight = 100;
+            },
+          },
+        },
+      },
+      getTooltipContent: getTooltipContentMock,
+    });
+
+    act(() => {
+      hc.getChart().container.dispatchEvent(createMouseMoveEvent({ pageX: 1, pageY: 0 }));
+    });
+
+    act(() => {
+      hc.getChart().container.dispatchEvent(createMouseMoveEvent({ pageX: 1, pageY: 2 }));
+    });
+
+    act(() => {
+      hc.getChart().container.dispatchEvent(createMouseMoveEvent({ pageX: 1, pageY: 4 }));
+    });
+
+    expect(getTooltipContentMock).toHaveBeenCalledTimes(2);
+  });
+
   test("renders highlight markers", async () => {
     const { wrapper } = renderChart({
       highcharts,

src/core/chart-api/chart-extra-tooltip.tsx

@@ -10,9 +10,9 @@ import * as Styles from "../../internal/chart-styles";
 import { renderMarker } from "../../internal/components/series-marker/render-marker";
 import AsyncStore from "../../internal/utils/async-store";
 import { SVGRendererPool, SVGRendererSingle } from "../../internal/utils/renderer-utils";
-import { DebouncedCall } from "../../internal/utils/utils";
+import { DebouncedCall, isEqualArrays } from "../../internal/utils/utils";
 import { Rect } from "../interfaces";
-import { getGroupRect, getPointRect, isXThreshold } from "../utils";
+import { getGroupRect, getPointRect, getSeriesId, isXThreshold } from "../utils";
 import { ChartExtraContext } from "./chart-extra-context";
 
 import testClasses from "../test-classes/styles.css.js";
@@ -78,7 +78,7 @@ export class ChartExtraTooltip extends AsyncStore<ReactiveTooltipState> {
 
   public showTooltipOnGroup(group: readonly Highcharts.Point[], ignoreLock = false) {
     if (!this.tooltipLock || ignoreLock) {
-      this.set(() => ({ visible: true, pinned: false, point: null, group }));
+      this.setGroupIfDifferent(group);
       this.onRenderTooltip({ point: null, group });
     }
   }
@@ -97,6 +97,20 @@ export class ChartExtraTooltip extends AsyncStore<ReactiveTooltipState> {
     }
   }
 
+  // Avoid re-rendering the tooltip on every cursor position change when hovering over the graph.
+  // Just re-render when the groups are different.
+  private setGroupIfDifferent(group: readonly Highcharts.Point[]) {
+    function isGroupEqual(a: Highcharts.Point, b: Highcharts.Point) {
+      return a?.x === b?.x && a?.y === b?.y && getSeriesId(a?.series) === getSeriesId(b?.series);
+    }
+
+    this.set((prev) => {
+      return isEqualArrays(prev.group, group, isGroupEqual)
+        ? prev
+        : { visible: true, pinned: false, point: null, group };
+    });
+  }
+
   private onRenderTooltip = (props: { point: null | Highcharts.Point; group: readonly Highcharts.Point[] }) => {
     const chartType =
       this.context.chart().series.find((s) => s.type === "pie" || s.type === "solidgauge")?.type ?? "cartesian";