fix: preserve chart zoom state across data refetches (#382)

Store dataZoom range in component state instead of ref and include
start/end values directly in the ECharts option config. This ensures
zoom state survives option updates when react-query refetches data
or when legend toggles change displayed series.

- Changed dataZoomStateRef to zoomRange state
- Added threshold check to prevent state update loops
- Included start/end in both inside and slider dataZoom configs
- Removed obsolete dispatchAction restoration effect

Author: Savid

src/components/Charts/MultiLine/MultiLine.tsx

@@ -99,8 +99,9 @@ export function MultiLineChart({
   const chartWrapperRef = useRef<ReactEChartsCore | null>(null);
   // Store the chart instance for sync cleanup
   const chartInstanceRef = useRef<EChartsInstance | null>(null);
-  // Store dataZoom state to preserve zoom when legend toggles series visibility
-  const dataZoomStateRef = useRef<{ start: number; end: number } | null>(null);
+  // Store dataZoom state to preserve zoom across data updates and legend toggles
+  // Using state (not ref) ensures zoom range is included in the option config
+  const [zoomRange, setZoomRange] = useState({ start: 0, end: 100 });
 
   // Get shared crosshairs context for sync registration
   const crosshairsContext = useContext(SharedCrosshairsContext);
@@ -114,16 +115,24 @@ export function MultiLineChart({
         crosshairsContext.registerChart(syncGroup, echartsInstance);
       }
 
-      // Track dataZoom changes to preserve zoom state when legend toggles series
-      // Must be attached here because chartInstanceRef is not available during effect mount
+      // Track dataZoom changes to preserve zoom state across data updates and legend toggles
+      // Using state ensures the zoom range is included in the option config on re-renders
       if (enableDataZoom) {
         const handleDataZoom = (): void => {
           const option = echartsInstance.getOption() as {
             dataZoom?: Array<{ start?: number; end?: number }>;
           };
           const dz = option.dataZoom?.[0];
           if (dz && typeof dz.start === 'number' && typeof dz.end === 'number') {
-            dataZoomStateRef.current = { start: dz.start, end: dz.end };
+            const newStart = dz.start;
+            const newEnd = dz.end;
+            // Only update state if values changed significantly (prevents infinite loops)
+            setZoomRange(prev => {
+              if (Math.abs(prev.start - newStart) < 0.01 && Math.abs(prev.end - newEnd) < 0.01) {
+                return prev; // No change, return same reference
+              }
+              return { start: newStart, end: newEnd };
+            });
           }
         };
         echartsInstance.on('datazoom', handleDataZoom);
@@ -368,26 +377,6 @@ export function MultiLineChart({
     showAggregate,
   ]);
 
-  // Restore dataZoom state after chart option changes
-  // This handles: legend toggles, data refetches, any re-render that resets zoom
-  useEffect(() => {
-    const instance = chartInstanceRef.current;
-    if (!instance || !enableDataZoom || !dataZoomStateRef.current) return;
-
-    // Use setTimeout to ensure this runs after the chart option update
-    const timeoutId = setTimeout(() => {
-      if (dataZoomStateRef.current) {
-        instance.dispatchAction({
-          type: 'dataZoom',
-          start: dataZoomStateRef.current.start,
-          end: dataZoomStateRef.current.end,
-        });
-      }
-    }, 0);
-
-    return () => clearTimeout(timeoutId);
-  }, [displayedSeries, enableDataZoom]);
-
   // Build complete option
   // Memoize based on actual data that should trigger re-animation
   const option = useMemo(() => {
@@ -803,13 +792,17 @@ export function MultiLineChart({
               zoomOnMouseWheel: true,
               moveOnMouseWheel: false,
               moveOnMouseMove: true,
+              start: zoomRange.start,
+              end: zoomRange.end,
             },
             {
               type: 'slider' as const,
               xAxisIndex: 0,
               filterMode: 'none' as const,
               height: 20,
               bottom: 10,
+              start: zoomRange.start,
+              end: zoomRange.end,
               borderColor: themeColors.border,
               backgroundColor: 'transparent',
               fillerColor: hexToRgba(themeColors.primary, 0.2),
@@ -849,6 +842,7 @@ export function MultiLineChart({
     tooltipTrigger,
     tooltipMode,
     enableDataZoom,
+    zoomRange,
     connectNulls,
     extendedPalette,
     relativeSlots,