vmui/logs: preserve zoom selection on autorefresh

app/vmui/packages/vmui/src/components/Chart/BarHitsChart/BarHitsChart.tsx

@@ -83,18 +83,36 @@ const BarHitsChart: FC<Props> = ({ logHits, data: _data, period, setPeriod, onAp
 
   useEffect(() => {
     if (!uPlotInst) return;
+
+    const oldSeriesMap = new Map(uPlotInst.series.map(s => [s.label, s]));
+
+    const syncedSeries = series.map(s => {
+      const old = oldSeriesMap.get(s.label);
+      return old ? { ...s, show: old.show } : s;
+    });
+
     delSeries(uPlotInst);
-    addSeries(uPlotInst, series, true);
-    setBand(uPlotInst, series);
+    addSeries(uPlotInst, syncedSeries, true);
+    setBand(uPlotInst, syncedSeries);
     uPlotInst.redraw();
-  }, [series]);
+  }, [series, uPlotInst]);
+
+
+  useEffect(() => {
+    if (!uPlotInst) return;
+    uPlotInst.delBand();
+    bands.forEach(band => {
+      uPlotInst.addBand(band);
+    });
+    uPlotInst.redraw();
+  }, [bands]);
 
   useEffect(() => {
     if (!uPlotRef.current) return;
     const uplot = new uPlot(options, data, uPlotRef.current);
     setUPlotInst(uplot);
     return () => uplot.destroy();
-  }, [uPlotRef.current, options]);
+  }, [uPlotRef.current]);
 
   useEffect(() => {
     if (!uPlotInst) return;

app/vmui/packages/vmui/src/components/Chart/BarHitsChart/BarHitsLegend/BarHitsLegend.tsx

@@ -25,7 +25,12 @@ const BarHitsLegend: FC<Props> = ({ uPlotInst, legendDetails, onApplyFilter }) =
   };
 
   useEffect(() => {
-    setSeries(getSeries());
+    if (!uPlotInst.hooks.draw) {
+      uPlotInst.hooks.draw = [];
+    }
+    uPlotInst.hooks.draw.push(() => {
+      setSeries(getSeries());
+    });
   }, [uPlotInst]);
 
   return (

app/vmui/packages/vmui/src/components/Chart/BarHitsChart/hooks/useBarHitsOptions.ts

@@ -64,25 +64,34 @@ const useBarHitsOptions = ({
   };
 
   const series: Series[] = useMemo(() => {
-    let colorN = 0;
+    let visibleColorIndex = 0;
+
     return data.map((_d, i) => {
-      if (i === 0) return {}; // 0 index is xAxis(timestamps)
-      const target = logHits?.[i - 1];
-      const label = getLabelFromLogHit(target);
-      const color = getCssVariable(target?._isOther ? "color-log-hits-bar-0" : seriesColors[colorN]);
-      if (!target?._isOther) colorN++;
+      if (i === 0) return {}; // x-axis
+
+      const logHit = logHits?.[i - 1];
+      const label = getLabelFromLogHit(logHit);
+
+      const isOther = logHit?._isOther;
+      const colorVar = isOther
+        ? "color-log-hits-bar-0"
+        : seriesColors[visibleColorIndex++];
+
+      const color = getCssVariable(colorVar);
+
       return {
         label,
         width: strokeWidth[graphOptions.graphStyle],
         spanGaps: true,
+        show: true,
         stroke: color,
-        fill: graphOptions.fill ? color + (target?._isOther ? "" : "80") : "",
+        fill: graphOptions.fill && !isOther ? `${color}80` : graphOptions.fill ? color : "",
         paths: getSeriesPaths(graphOptions.graphStyle),
       };
     });
   }, [isDarkTheme, data, graphOptions]);
 
-  const options: Options = useMemo(() => ({
+  const options: Options = {
     series,
     bands,
     width: containerSize.width || (window.innerWidth / 2),
@@ -111,7 +120,7 @@ const useBarHitsOptions = ({
     legend: { show: false },
     axes: getAxes([{}, { scale: "y" }]),
     tzDate: ts => dayjs(formatDateForNativeInput(dateFromSeconds(ts))).local().toDate(),
-  }), [isDarkTheme, series, bands]);
+  };
 
   return {
     options,

docs/victorialogs/CHANGELOG.md

@@ -28,6 +28,7 @@ Released at 2025-04-10
 
 * BUGFIX: [web UI](https://docs.victoriametrics.com/victorialogs/querying/#web-ui): fix endless group expansion loop bug. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/8347).
 * BUGFIX: [web UI](https://docs.victoriametrics.com/victorialogs/querying/#web-ui): respect nanosecond precision when sorting logs. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/8346).
+* BUGFIX: [web UI](https://docs.victoriametrics.com/victorialogs/querying/#web-ui): preserve zoom selection in the logs chart when auto-refresh is enabled. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/8557).
 
 ## [v1.17.0](https://github.com/VictoriaMetrics/VictoriaMetrics/releases/tag/v1.17.0-victorialogs)