Improved performance more by splitting state out for payload

Author: matt-aitken

apps/webapp/app/components/code/QueryResultsChart.tsx

@@ -10,7 +10,7 @@ import { aggregateValues } from "../primitives/charts/aggregation";
 import { getRunStatusHexColor } from "~/components/runs/v3/TaskRunStatus";
 import { getSeriesColor } from "./chartColors";
 
-const MAX_SERIES = 30;
+const MAX_SERIES = 50;
 const MAX_SVG_ELEMENT_BUDGET = 6_000;
 const MIN_DATA_POINTS = 100;
 const MAX_DATA_POINTS = 500;

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

@@ -65,7 +65,7 @@ export function ChartBarRenderer({
   width,
   height,
 }: ChartBarRendererProps) {
-  const { config, data, dataKey, dataKeys, visibleSeries, state, highlight, zoom, showLegend } = useChartContext();
+  const { config, data, dataKey, dataKeys, visibleSeries, state, highlight, setActivePayload, zoom, showLegend } = useChartContext();
   const hasNoData = useHasNoData();
   const zoomHandlers = useZoomHandlers();
   const enableZoom = zoom !== null;
@@ -114,7 +114,7 @@ export function ChartBarRenderer({
       onMouseMove={(e: any) => {
         zoomHandlers.onMouseMove?.(e);
         if (e?.activePayload?.length) {
-          highlight.setActivePayload(e.activePayload, e.activeTooltipIndex);
+          setActivePayload(e.activePayload, e.activeTooltipIndex);
           highlight.setTooltipActive(true);
         } else {
           highlight.setTooltipActive(false);

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

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useMemo } from "react";
+import React, { createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
 import type { ChartConfig, ChartState } from "./Chart";
 import { useHighlightState, type UseHighlightStateReturn } from "./hooks/useHighlightState";
 import {
@@ -27,9 +27,12 @@ export type ChartContextValue = {
   /** Function to format the x-axis label (used in legend, tooltips, etc.) */
   labelFormatter?: LabelFormatter;
 
-  // Highlight state
+  // Highlight state (does NOT include activePayload — see PayloadContext)
   highlight: UseHighlightStateReturn;
 
+  /** Update the active payload for the legend. Pass tooltipIndex to skip redundant updates. */
+  setActivePayload: (payload: any[] | null, tooltipIndex?: number | null) => void;
+
   // Zoom state (only present when zoom is enabled)
   zoom: UseZoomSelectionReturn | null;
 
@@ -42,6 +45,12 @@ export type ChartContextValue = {
 
 const ChartCompoundContext = createContext<ChartContextValue | null>(null);
 
+/**
+ * Separate context for activePayload so that frequent payload updates
+ * only re-render the legend, not the entire chart (bars, lines, etc.).
+ */
+const PayloadContext = createContext<any[] | null>(null);
+
 export function useChartContext(): ChartContextValue {
   const context = useContext(ChartCompoundContext);
   if (!context) {
@@ -50,6 +59,11 @@ export function useChartContext(): ChartContextValue {
   return context;
 }
 
+/** Read the active payload (only re-renders when payload changes). */
+export function useActivePayload(): any[] | null {
+  return useContext(PayloadContext);
+}
+
 export type ChartProviderProps = {
   config: ChartConfig;
   data: any[];
@@ -86,6 +100,35 @@ export function ChartProvider({
   const highlight = useHighlightState();
   const zoomState = useZoomSelection();
 
+  // activePayload lives in its own state + context so updates don't re-render bars
+  const [activePayload, setActivePayloadRaw] = useState<any[] | null>(null);
+  const activeTooltipIndexRef = useRef<number | null>(null);
+
+  const setActivePayload = useCallback(
+    (payload: any[] | null, tooltipIndex?: number | null) => {
+      const idx = tooltipIndex ?? null;
+      if (idx !== null && idx === activeTooltipIndexRef.current) {
+        return;
+      }
+      activeTooltipIndexRef.current = idx;
+      setActivePayloadRaw(payload);
+    },
+    []
+  );
+
+  // Reset the tooltip index ref when highlight resets (mouse leaves chart)
+  const originalReset = highlight.reset;
+  const resetWithPayload = useCallback(() => {
+    activeTooltipIndexRef.current = null;
+    setActivePayloadRaw(null);
+    originalReset();
+  }, [originalReset]);
+
+  const highlightWithReset = useMemo(
+    () => ({ ...highlight, reset: resetWithPayload }),
+    [highlight, resetWithPayload]
+  );
+
   // Compute series keys (use provided series or derive from config)
   const dataKeys = useMemo(
     () => series ?? Object.keys(config).filter((k) => k !== dataKey),
@@ -106,13 +149,18 @@ export function ChartProvider({
       visibleSeries,
       state,
       labelFormatter,
-      highlight,
+      highlight: highlightWithReset,
+      setActivePayload,
       zoom: enableZoom ? zoomState : null,
       onZoomChange: enableZoom ? onZoomChange : undefined,
       showLegend,
     }),
-    [config, data, dataKey, dataKeys, visibleSeries, state, labelFormatter, highlight, zoomState, enableZoom, onZoomChange, showLegend]
+    [config, data, dataKey, dataKeys, visibleSeries, state, labelFormatter, highlightWithReset, setActivePayload, zoomState, enableZoom, onZoomChange, showLegend]
   );
 
-  return <ChartCompoundContext.Provider value={value}>{children}</ChartCompoundContext.Provider>;
+  return (
+    <ChartCompoundContext.Provider value={value}>
+      <PayloadContext.Provider value={activePayload}>{children}</PayloadContext.Provider>
+    </ChartCompoundContext.Provider>
+  );
 }

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

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
 import type { AggregationType } from "~/components/metrics/QueryWidget";
-import { useChartContext } from "./ChartContext";
+import { useActivePayload, useChartContext } from "./ChartContext";
 import { useSeriesTotal } from "./ChartRoot";
 import { aggregateValues } from "./aggregation";
 import { cn } from "~/utils/cn";
@@ -54,6 +54,7 @@ export function ChartLegendCompound({
   scrollable = false,
 }: ChartLegendCompoundProps) {
   const { config, dataKey, dataKeys, highlight, labelFormatter } = useChartContext();
+  const activePayload = useActivePayload();
   const totals = useSeriesTotal(aggregation);
 
   // Derive the effective label from the aggregation type when no explicit label is provided
@@ -71,10 +72,10 @@ export function ChartLegendCompound({
 
   // Calculate current total based on hover state (null when hovering a gap-filled point)
   const currentTotal = useMemo((): number | null => {
-    if (!highlight.activePayload?.length) return grandTotal;
+    if (!activePayload?.length) return grandTotal;
 
     // Collect all series values from the hovered data point, preserving nulls
-    const rawValues = highlight.activePayload
+    const rawValues = activePayload
       .filter((item) => item.value !== undefined && dataKeys.includes(item.dataKey as string))
       .map((item) => item.value);
 
@@ -91,29 +92,29 @@ export function ChartLegendCompound({
       return values.reduce((a, b) => a + b, 0);
     }
     return aggregateValues(values, aggregation);
-  }, [highlight.activePayload, grandTotal, dataKeys, aggregation]);
+  }, [activePayload, grandTotal, dataKeys, aggregation]);
 
   // Get the label for the total row - x-axis value when hovering, effectiveTotalLabel otherwise
   const currentTotalLabel = useMemo(() => {
-    if (!highlight.activePayload?.length) return effectiveTotalLabel;
+    if (!activePayload?.length) return effectiveTotalLabel;
 
     // Get the x-axis label from the payload's original data
-    const firstPayloadItem = highlight.activePayload[0];
+    const firstPayloadItem = activePayload[0];
     const xAxisValue = firstPayloadItem?.payload?.[dataKey];
 
     if (xAxisValue === undefined) return effectiveTotalLabel;
 
     // Apply the formatter if provided, otherwise just stringify the value
     const stringValue = String(xAxisValue);
     return labelFormatter ? labelFormatter(stringValue) : stringValue;
-  }, [highlight.activePayload, dataKey, effectiveTotalLabel, labelFormatter]);
+  }, [activePayload, dataKey, effectiveTotalLabel, labelFormatter]);
 
   // Get current data for the legend based on hover state (values may be null for gap-filled points)
   const currentData = useMemo((): Record<string, number | null> => {
-    if (!highlight.activePayload?.length) return totals;
+    if (!activePayload?.length) return totals;
 
     // If we have activePayload data from hovering over a bar/line
-    const hoverData = highlight.activePayload.reduce(
+    const hoverData = activePayload.reduce(
       (acc, item) => {
         if (item.dataKey && item.value !== undefined) {
           // Preserve null for gap-filled points instead of coercing to 0
@@ -129,7 +130,7 @@ export function ChartLegendCompound({
       ...totals,
       ...hoverData,
     };
-  }, [highlight.activePayload, totals]);
+  }, [activePayload, totals]);
 
   // Prepare legend items with capped display
   const legendItems = useMemo(() => {
@@ -163,7 +164,7 @@ export function ChartLegendCompound({
     return null;
   }
 
-  const isHovering = (highlight.activePayload?.length ?? 0) > 0;
+  const isHovering = (activePayload?.length ?? 0) > 0;
 
   return (
     <div

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

@@ -78,7 +78,7 @@ export function ChartLineRenderer({
   width,
   height,
 }: ChartLineRendererProps) {
-  const { config, data, dataKey, dataKeys, visibleSeries, state, highlight, showLegend } = useChartContext();
+  const { config, data, dataKey, dataKeys, visibleSeries, state, highlight, setActivePayload, showLegend } = useChartContext();
   const hasNoData = useHasNoData();
 
   // Render loading/error states
@@ -143,7 +143,7 @@ export function ChartLineRenderer({
         }}
         onMouseMove={(e: any) => {
           if (e?.activePayload?.length) {
-            highlight.setActivePayload(e.activePayload, e.activeTooltipIndex);
+            setActivePayload(e.activePayload, e.activeTooltipIndex);
             highlight.setTooltipActive(true);
           } else {
             highlight.setTooltipActive(false);
@@ -191,7 +191,7 @@ export function ChartLineRenderer({
       }}
       onMouseMove={(e: any) => {
         if (e?.activePayload?.length) {
-          highlight.setActivePayload(e.activePayload, e.activeTooltipIndex);
+          setActivePayload(e.activePayload, e.activeTooltipIndex);
           highlight.setTooltipActive(true);
         } else {
           highlight.setTooltipActive(false);

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

@@ -1,23 +1,19 @@
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 
 export type HighlightState = {
   /** The currently highlighted series key (e.g., "completed", "failed") */
   activeBarKey: string | null;
   /** The index of the specific data point being hovered (null when hovering legend) */
   activeDataPointIndex: number | null;
-  /** The payload data from the hovered element */
-  activePayload: any[] | null;
   /** Whether the tooltip is currently active */
   tooltipActive: boolean;
 };
 
 export type HighlightActions = {
   /** Set the hovered bar (specific data point) */
-  setHoveredBar: (key: string, index: number, payload?: any[]) => void;
+  setHoveredBar: (key: string, index: number) => void;
   /** Set the hovered legend item (highlights all bars of that type) */
   setHoveredLegendItem: (key: string) => 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 */
@@ -29,70 +25,55 @@ export type UseHighlightStateReturn = HighlightState & HighlightActions;
 const initialState: HighlightState = {
   activeBarKey: null,
   activeDataPointIndex: null,
-  activePayload: null,
   tooltipActive: false,
 };
 
 /**
  * Hook to manage highlight state for chart elements.
  * Handles both bar hover (specific data point) and legend hover (all bars of a type).
+ *
+ * activePayload is intentionally NOT managed here — it lives in a separate context
+ * so that payload updates (frequent during mouse movement) don't cause bar re-renders.
  */
 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[]) => {
+  const setHoveredBar = useCallback((key: string, index: number) => {
     setState({
       activeBarKey: key,
       activeDataPointIndex: index,
-      activePayload: payload ?? null,
       tooltipActive: true,
     });
   }, []);
 
   const setHoveredLegendItem = useCallback((key: string) => {
-    setState((prev) => ({
-      ...prev,
-      activeBarKey: key,
-      activeDataPointIndex: 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,
-    }));
+    setState((prev) => {
+      if (prev.activeBarKey === key && prev.activeDataPointIndex === null) return prev;
+      return { ...prev, activeBarKey: key, activeDataPointIndex: null };
+    });
   }, []);
 
   const setTooltipActive = useCallback((active: boolean) => {
-    setState((prev) => ({
-      ...prev,
-      tooltipActive: active,
-    }));
+    setState((prev) => {
+      if (prev.tooltipActive === active) return prev;
+      return { ...prev, tooltipActive: active };
+    });
   }, []);
 
   const reset = useCallback(() => {
-    activeTooltipIndexRef.current = null;
     setState(initialState);
   }, []);
 
-  return {
-    ...state,
-    setHoveredBar,
-    setHoveredLegendItem,
-    setActivePayload,
-    setTooltipActive,
-    reset,
-  };
+  return useMemo(
+    () => ({
+      ...state,
+      setHoveredBar,
+      setHoveredLegendItem,
+      setTooltipActive,
+      reset,
+    }),
+    [state, setHoveredBar, setHoveredLegendItem, setTooltipActive, reset]
+  );
 }
 
 /**

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

@@ -1,4 +1,4 @@
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 
 export type ZoomRange = {
   start: string;
@@ -175,14 +175,17 @@ export function useZoomSelection(): UseZoomSelectionReturn {
     setState(initialState);
   }, []);
 
-  return {
-    ...state,
-    startSelection,
-    updateSelection,
-    finishSelection,
-    cancelSelection,
-    toggleInspectionLine,
-    clearInspectionLine,
-    reset,
-  };
+  return useMemo(
+    () => ({
+      ...state,
+      startSelection,
+      updateSelection,
+      finishSelection,
+      cancelSelection,
+      toggleInspectionLine,
+      clearInspectionLine,
+      reset,
+    }),
+    [state, startSelection, updateSelection, finishSelection, cancelSelection, toggleInspectionLine, clearInspectionLine, reset]
+  );
 }