Improve hover performance on bar chart

Author: matt-aitken

apps/webapp/app/components/primitives/charts/ChartBar.tsx

@@ -3,7 +3,6 @@ import {
   Bar,
   BarChart,
   CartesianGrid,
-  Cell,
   ReferenceArea,
   ReferenceLine,
   XAxis,
@@ -15,9 +14,7 @@ import { ChartTooltip, ChartTooltipContent } from "~/components/primitives/chart
 import { useChartContext } from "./ChartContext";
 import { ChartBarInvalid, ChartBarLoading, ChartBarNoData } from "./ChartLoading";
 import { useHasNoData } from "./ChartRoot";
-// Legend is now rendered by ChartRoot outside the chart container
 import { ZoomTooltip, useZoomHandlers } from "./ChartZoom";
-import { getBarOpacity } from "./hooks/useHighlightState";
 
 //TODO: fix the first and last bars in a stack not having rounded corners
 
@@ -116,9 +113,8 @@ export function ChartBarRenderer({
       onMouseDown={zoomHandlers.onMouseDown}
       onMouseMove={(e: any) => {
         zoomHandlers.onMouseMove?.(e);
-        // Update active payload for legend
         if (e?.activePayload?.length) {
-          highlight.setActivePayload(e.activePayload);
+          highlight.setActivePayload(e.activePayload, e.activeTooltipIndex);
           highlight.setTooltipActive(true);
         } else {
           highlight.setTooltipActive(false);
@@ -189,6 +185,11 @@ export function ChartBarRenderer({
       )}
 
       {visibleSeries.map((key, index, array) => {
+        const dimmed =
+          !zoom?.isSelecting &&
+          highlight.activeBarKey !== null &&
+          highlight.activeBarKey !== key;
+
         return (
           <Bar
             key={key}
@@ -204,7 +205,7 @@ export function ChartBarRenderer({
               ] as [number, number, number, number]
             }
             activeBar={false}
-            fillOpacity={1}
+            fillOpacity={dimmed ? 0.2 : 1}
             onClick={(data, index, e) => handleBarClick(data, e)}
             onMouseEnter={(entry, index) => {
               if (entry.tooltipPayload?.[0]) {
@@ -214,20 +215,7 @@ export function ChartBarRenderer({
             }}
             onMouseLeave={highlight.reset}
             isAnimationActive={false}
-          >
-            {data.map((_, dataIndex) => {
-              // Don't dim bars during zoom selection
-              const opacity = zoom?.isSelecting ? 1 : getBarOpacity(key, dataIndex, highlight);
-
-              return (
-                <Cell
-                  key={`cell-${key}-${dataIndex}`}
-                  fill={config[key]?.color}
-                  fillOpacity={opacity}
-                />
-              );
-            })}
-          </Bar>
+          />
         );
       })}
 

apps/webapp/app/components/primitives/charts/ChartLine.tsx

@@ -142,9 +142,8 @@ export function ChartLineRenderer({
           right: 12,
         }}
         onMouseMove={(e: any) => {
-          // Update active payload for legend
           if (e?.activePayload?.length) {
-            highlight.setActivePayload(e.activePayload);
+            highlight.setActivePayload(e.activePayload, e.activeTooltipIndex);
             highlight.setTooltipActive(true);
           } else {
             highlight.setTooltipActive(false);
@@ -191,9 +190,8 @@ export function ChartLineRenderer({
         right: 12,
       }}
       onMouseMove={(e: any) => {
-        // Update active payload for legend
         if (e?.activePayload?.length) {
-          highlight.setActivePayload(e.activePayload);
+          highlight.setActivePayload(e.activePayload, e.activeTooltipIndex);
           highlight.setTooltipActive(true);
         } else {
           highlight.setTooltipActive(false);

apps/webapp/app/components/primitives/charts/hooks/useHighlightState.ts

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 
 export type HighlightState = {
   /** The currently highlighted series key (e.g., "completed", "failed") */
@@ -16,8 +16,8 @@ export type HighlightActions = {
   setHoveredBar: (key: string, index: number, payload?: any[]) => void;
   /** Set the hovered legend item (highlights all bars of that type) */
   setHoveredLegendItem: (key: string) => void;
-  /** Set the active payload (for tooltip data) */
-  setActivePayload: (payload: any[] | null) => void;
+  /** Set the active payload (for tooltip data). Pass tooltipIndex to skip redundant updates. */
+  setActivePayload: (payload: any[] | null, tooltipIndex?: number | null) => void;
   /** Set tooltip active state */
   setTooltipActive: (active: boolean) => void;
   /** Reset all highlight state */
@@ -39,6 +39,7 @@ const initialState: HighlightState = {
  */
 export function useHighlightState(): UseHighlightStateReturn {
   const [state, setState] = useState<HighlightState>(initialState);
+  const activeTooltipIndexRef = useRef<number | null>(null);
 
   const setHoveredBar = useCallback((key: string, index: number, payload?: any[]) => {
     setState({
@@ -53,11 +54,19 @@ export function useHighlightState(): UseHighlightStateReturn {
     setState((prev) => ({
       ...prev,
       activeBarKey: key,
-      activeDataPointIndex: null, // null indicates legend hover (all bars of this type)
+      activeDataPointIndex: null,
     }));
   }, []);
 
-  const setActivePayload = useCallback((payload: any[] | null) => {
+  const setActivePayload = useCallback((payload: any[] | null, tooltipIndex?: number | null) => {
+    const idx = tooltipIndex ?? null;
+    if (idx !== null && idx === activeTooltipIndexRef.current) {
+      console.log("Tooltip index is the same, skipping update", activeTooltipIndexRef.current);
+      return;
+    }
+
+    console.log("Tooltip index changed", idx);
+    activeTooltipIndexRef.current = idx;
     setState((prev) => ({
       ...prev,
       activePayload: payload,
@@ -72,6 +81,7 @@ export function useHighlightState(): UseHighlightStateReturn {
   }, []);
 
   const reset = useCallback(() => {
+    activeTooltipIndexRef.current = null;
     setState(initialState);
   }, []);