fix: clear hover for non-existent steps

Author: JavaZeroo

src/components/ChartContainer.jsx

@@ -103,6 +103,27 @@ const ChartWrapper = ({ data, options, chartId, onRegisterChart, onSyncHover })
   );
 };
 
+export const syncHoverToCharts = (charts, step) => {
+  charts.forEach((chart) => {
+    if (!chart) return;
+    if (step === null) {
+      chart.setActiveElements([]);
+      chart.tooltip.setActiveElements([]);
+      chart.update('none');
+    } else {
+      const activeElements = getActiveElementsAtStep(chart.data.datasets, step);
+      chart.setActiveElements(activeElements);
+      if (activeElements.length > 0) {
+        const xPixel = chart.scales.x.getPixelForValue(step);
+        chart.tooltip.setActiveElements(activeElements, { x: xPixel, y: 0 });
+      } else {
+        chart.tooltip.setActiveElements([]);
+      }
+      chart.update('none');
+    }
+  });
+};
+
 export default function ChartContainer({
   files,
   metrics = [],
@@ -121,19 +142,7 @@ export default function ChartContainer({
   }, []);
 
   const syncHoverToAllCharts = useCallback((step) => {
-    chartRefs.current.forEach((chart) => {
-      if (!chart) return;
-      if (step === null) {
-        chart.setActiveElements([]);
-        chart.tooltip.setActiveElements([]);
-        chart.update('none');
-      } else {
-        const activeElements = getActiveElementsAtStep(chart.data.datasets, step);
-        chart.setActiveElements(activeElements);
-        chart.tooltip.setActiveElements(activeElements, { x: 0, y: 0 });
-        chart.update('none');
-      }
-    });
+    syncHoverToCharts(chartRefs.current, step);
   }, []);
 
   const parsedData = useMemo(() => {

src/components/__tests__/ChartContainer.test.jsx

@@ -26,7 +26,7 @@ vi.mock('chart.js', () => {
 
 vi.mock('chartjs-plugin-zoom', () => ({ default: {} }));
 
-import ChartContainer, { getComparisonData, getActiveElementsAtStep } from '../ChartContainer.jsx';
+import ChartContainer, { getComparisonData, getActiveElementsAtStep, syncHoverToCharts } from '../ChartContainer.jsx';
 
 const sampleFile = {
   name: 'test.log',
@@ -126,4 +126,33 @@ describe('ChartContainer', () => {
       const result = getActiveElementsAtStep(datasets, 0);
       expect(result).toEqual([]);
     });
+
+    it('clears highlights when step is absent', () => {
+      const chart = {
+        setActiveElements: vi.fn(),
+        tooltip: { setActiveElements: vi.fn() },
+        update: vi.fn(),
+        data: { datasets: [{ data: [{ x: 210, y: 1 }] }] }
+      };
+      const charts = new Map([["a", chart]]);
+      syncHoverToCharts(charts, 0);
+      expect(chart.setActiveElements).toHaveBeenCalledWith([]);
+      expect(chart.tooltip.setActiveElements).toHaveBeenCalledWith([]);
+      expect(chart.update).toHaveBeenCalledWith('none');
+    });
+
+    it('positions tooltip at matching step', () => {
+      const chart = {
+        setActiveElements: vi.fn(),
+        tooltip: { setActiveElements: vi.fn() },
+        update: vi.fn(),
+        data: { datasets: [{ data: [{ x: 210, y: 1 }] }] },
+        scales: { x: { getPixelForValue: vi.fn().mockReturnValue(123) } }
+      };
+      const charts = new Map([["a", chart]]);
+      syncHoverToCharts(charts, 210);
+      expect(chart.setActiveElements).toHaveBeenCalledWith([{ datasetIndex: 0, index: 0 }]);
+      expect(chart.tooltip.setActiveElements).toHaveBeenCalledWith([{ datasetIndex: 0, index: 0 }], { x: 123, y: 0 });
+      expect(chart.update).toHaveBeenCalledWith('none');
+    });
   });