fix: Bar chart tooltip scroll

CHANGELOG.md

@@ -11,7 +11,8 @@ You can also check the
 
 # Unreleased
 
-Nothing yet.
+- Fixes
+  - Bar chart tooltip doesn't go off the screen anymore during scroll
 
 # [5.2.0] - 2025-01-22
 

app/charts/shared/interaction/tooltip-box.tsx

@@ -1,6 +1,6 @@
 import { Box } from "@mui/material";
 import throttle from "lodash/throttle";
-import { ReactNode, useCallback, useEffect, useMemo, useState } from "react";
+import { ReactNode, useEffect, useMemo, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 
 import { Margins, useSize } from "@/charts/shared/use-size";
@@ -53,26 +53,30 @@ const useScroll = () => {
   return state;
 };
 
-const usePosition = () => {
-  const [bcr, setBcr] = useState<[number, number]>();
-  const [bcrX, bcrY] = bcr || [0, 0];
-  const handleRef = useCallback(
-    (node: HTMLDivElement) => {
-      if (bcr || !node) {
+const usePosition = (yKey?: number) => {
+  const yKeyRef = useRef<number>();
+  const [rect, rectRect] = useState<[number, number]>();
+  const [x, y] = rect ?? [0, 0];
+  const setRef = useMemo(() => {
+    return (node: HTMLDivElement) => {
+      if (yKey === yKeyRef.current || !node) {
         return;
       }
 
-      const nbcr = node.getBoundingClientRect();
-      setBcr([nbcr.left, nbcr.top]);
-    },
-    [bcr]
-  );
+      const { left, top } = node.getBoundingClientRect();
+      rectRect([left, top]);
+      yKeyRef.current = yKey;
+    };
+  }, [yKey]);
   const [scrollX, scrollY] = useScroll();
-  const box = useMemo(() => {
-    return { left: bcrX + scrollX, top: bcrY + scrollY };
-  }, [bcrX, bcrY, scrollX, scrollY]);
+  const bbox = useMemo(() => {
+    return {
+      left: x + scrollX,
+      top: y + scrollY,
+    };
+  }, [x, y, scrollX, scrollY]);
 
-  return [box, handleRef] as const;
+  return [bbox, setRef] as const;
 };
 
 /**
@@ -131,41 +135,35 @@ export const TooltipBox = ({
   withTriangle = true,
 }: TooltipBoxProps) => {
   const triangle = withTriangle ? mkTriangle(placement) : null;
-  const [pos, posRef] = usePosition();
-
+  const [position, positionRef] = usePosition(y);
   const [tooltipRef, tooltipWidth] = useResizeObserver<HTMLDivElement>();
-
   const isMobile = useIsMobile();
   const { width, height } = useSize();
   const { chartWidth } = useChartBounds(width, margins, height);
-
   const tooltipXBoundary = isMobile
     ? getTooltipXBoundary(x!, tooltipWidth, chartWidth)
     : x!;
-
   const mobileTriangleXPosition = getTriangleXPos(x!, tooltipWidth, chartWidth);
-
   const desktopTriangleXPosition = {
     left: triangle?.left,
     right: triangle?.right,
   };
-
   const triangleXPosition = isMobile
     ? { left: mobileTriangleXPosition }
     : desktopTriangleXPosition;
 
   return (
     <>
-      <div ref={posRef} />
+      <div ref={positionRef} />
       <Portal>
         <Box
           ref={tooltipRef}
           data-testid="chart-tooltip"
           style={{
             zIndex: 1301,
             position: "absolute",
-            left: tooltipXBoundary! + margins.left + pos.left,
-            top: mxYOffset(y!, placement) + margins.top + pos.top,
+            left: tooltipXBoundary! + margins.left + position.left,
+            top: mxYOffset(y!, placement) + margins.top + position.top,
             transform: mkTranslation(placement),
             pointerEvents: "none",
           }}

app/charts/shared/interaction/tooltip.tsx

@@ -19,7 +19,7 @@ export const Tooltip = ({ type = "single" }: { type: TooltipType }) => {
   const [state] = useInteraction();
   const { visible, d } = state.interaction;
 
-  return <>{visible && d && <TooltipInner d={d} type={type} />}</>;
+  return visible && d ? <TooltipInner d={d} type={type} /> : null;
 };
 export type { TooltipPlacement };
 

e2e/tooltip.spec.ts

@@ -2,7 +2,7 @@ import { setup, sleep } from "./common";
 
 const { test, expect } = setup();
 
-test("tooltip content", async ({
+test("should have correct tooltip content", async ({
   actions,
   selectors,
   within,
@@ -52,3 +52,35 @@ test("tooltip content", async ({
   const textContent = await tooltip.textContent();
   expect(textContent?.startsWith("1996")).toBe(true);
 });
+
+test("should keep correct position after scrolling", async ({
+  page,
+  actions,
+}) => {
+  await actions.chart.createFrom({
+    iri: "https://agriculture.ld.admin.ch/foag/cube/MilkDairyProducts/Consumption_Price_Month",
+    dataSource: "Prod",
+    createURLParams: "flag__enable-experimental-features=true",
+  });
+  await actions.editor.changeRegularChartType("Bars");
+  const chart = page.locator("[data-chart-loaded]");
+  const chartBbox = await chart.boundingBox();
+  const rect0 = chart.locator('[data-index="0"]');
+  await rect0.hover({ force: true });
+  await sleep(3_000);
+  const rect50 = chart.locator('[data-index="50"]');
+  await rect50.hover({ force: true });
+  await sleep(3_000);
+  const tooltip = page.locator('[data-testid="chart-tooltip"]');
+  await tooltip.waitFor({ state: "attached", timeout: 1_000 });
+  const tooltipRect = await tooltip.boundingBox();
+
+  if (!chartBbox || !tooltipRect) {
+    throw new Error("Bounding box not found!");
+  }
+
+  expect(tooltipRect.x).toBeGreaterThanOrEqual(chartBbox.x);
+  expect(tooltipRect.x).toBeLessThanOrEqual(chartBbox.x + chartBbox.width);
+  expect(tooltipRect.y).toBeGreaterThanOrEqual(chartBbox.y);
+  expect(tooltipRect.y).toBeLessThanOrEqual(chartBbox.y + chartBbox.height);
+});