fix(charts): Preserve ECharts zoom state

static/app/components/charts/chartZoom.tsx

@@ -7,8 +7,8 @@ import type {
 } from 'echarts';
 import type {Location} from 'history';
 import moment, {type MomentInput} from 'moment-timezone';
-import * as qs from 'query-string';
 
+import {CHART_ZOOM_MERGE_OPTIONS} from 'sentry/components/charts/chartZoomConfig';
 import {DataZoomInside} from 'sentry/components/charts/components/dataZoomInside';
 import {ToolBox} from 'sentry/components/charts/components/toolBox';
 import {activateZoomAreaSelect} from 'sentry/components/charts/utils';
@@ -21,6 +21,7 @@ import type {
   EChartRestoreHandler,
 } from 'sentry/types/echarts';
 import {getUtcDateString, getUtcToLocalDateObject} from 'sentry/utils/dates';
+import {navigateIfQueryChanged} from 'sentry/utils/navigateIfQueryChanged';
 import {useLocation} from 'sentry/utils/useLocation';
 import type {ReactRouter3Navigate} from 'sentry/utils/useNavigate';
 import {useNavigate} from 'sentry/utils/useNavigate';
@@ -46,6 +47,8 @@ export interface ZoomRenderProps extends Pick<Props, ZoomPropKeys> {
   dataZoom?: DataZoomComponentOption[];
   end?: Date;
   isGroupedByDate?: boolean;
+  notMerge?: boolean;
+  replaceMerge?: string[];
   showTimeInTooltip?: boolean;
   start?: Date;
   toolBox?: ToolboxComponentOption;
@@ -167,10 +170,7 @@ class ChartZoom extends Component<Props> {
         pageStatsPeriod: period ?? undefined,
       };
 
-      // Only push new location if query params has changed because this will cause a heavy re-render
-      if (qs.stringify(newQuery) !== qs.stringify(location.query)) {
-        navigate({pathname: location.pathname, query: newQuery});
-      }
+      navigateIfQueryChanged(navigate, location, {query: newQuery});
     } else {
       updateDateTime(
         {
@@ -326,13 +326,13 @@ class ChartZoom extends Component<Props> {
         utc,
         start,
         end,
-        isGroupedByDate: true,
+        ...CHART_ZOOM_MERGE_OPTIONS,
         ...props,
       });
     }
     const renderProps = {
-      // Zooming only works when grouped by date
-      isGroupedByDate: true,
+      ...props,
+      ...CHART_ZOOM_MERGE_OPTIONS,
       onChartReady: this.handleChartReady,
       utc,
       start,
@@ -360,7 +360,6 @@ class ChartZoom extends Component<Props> {
       onDataZoom: this.handleDataZoom,
       onFinished: this.handleChartFinished,
       onRestore: this.handleZoomRestore,
-      ...props,
     };
 
     return children(renderProps);

static/app/components/charts/chartZoomConfig.ts

@@ -0,0 +1,20 @@
+export const CHART_ZOOM_MERGE_OPTIONS = {
+  // Zooming only works when grouped by date.
+  isGroupedByDate: true,
+  // `notMerge` should always be `false`. i.e., ECharts should be
+  // allowed to _merge_ the incoming options when they change. Note
+  // `replaceMerge` below which ensures that the critical components
+  // like the series and the axes are merged using the "replace"
+  // algorithm, not the "normal" algorithm.
+  //
+  // Under `notMerge`, every data refresh does a full ECharts re-init that
+  // destroys and re-creates the toolbox dataZoom "select" component. In
+  // ECharts 6.1 that rebuild re-emits a stale `dataZoom` event, so a
+  // single drag-to-zoom cascades into repeated refetches that settle on
+  // the wrong time range. See apache/echarts#21661.
+  //
+  // To guard against this, we allow ECharts to preserve the
+  // configuration of the toolbox, which prevents these stale fires.
+  notMerge: false,
+  replaceMerge: ['series', 'xAxis', 'yAxis'],
+};

static/app/components/charts/useChartZoom.spec.tsx

@@ -0,0 +1,117 @@
+import {act, renderHookWithProviders} from 'sentry-test/reactTestingLibrary';
+
+import type {EChartDataZoomHandler} from 'sentry/types/echarts';
+
+import {useChartZoom} from './useChartZoom';
+
+const START_VALUE = Date.UTC(2026, 6, 3, 11, 1, 30);
+const END_VALUE = Date.UTC(2026, 6, 3, 16, 54, 30);
+
+type UseChartZoomProps = Parameters<typeof useChartZoom>[0];
+
+function dataZoomPayload(
+  startValue = START_VALUE,
+  endValue = END_VALUE
+): Parameters<EChartDataZoomHandler>[0] {
+  return {
+    type: 'datazoom',
+    start: 0,
+    end: 100,
+    batch: [{startValue, endValue}],
+  } as Parameters<EChartDataZoomHandler>[0];
+}
+
+describe('useChartZoom', () => {
+  it('keeps zoom merge props and the inside dataZoom model across disabled rerenders', () => {
+    const {result, rerender} = renderHookWithProviders<
+      ReturnType<typeof useChartZoom>,
+      UseChartZoomProps
+    >((props: UseChartZoomProps) => useChartZoom(props), {
+      initialProps: {saveOnZoom: true},
+    });
+
+    expect(result.current).toMatchObject({
+      isGroupedByDate: true,
+      notMerge: false,
+      replaceMerge: ['series', 'xAxis', 'yAxis'],
+    });
+    expect(result.current.dataZoom).toEqual([
+      expect.objectContaining({
+        id: 'useChartZoom-inside',
+        type: 'inside',
+      }),
+    ]);
+    expect(result.current.toolBox).toEqual(
+      expect.objectContaining({
+        id: 'useChartZoom-toolbox',
+      })
+    );
+
+    rerender({saveOnZoom: true, disabled: true});
+
+    expect(result.current).toMatchObject({
+      isGroupedByDate: true,
+      notMerge: false,
+      replaceMerge: ['series', 'xAxis', 'yAxis'],
+    });
+    expect(result.current.dataZoom).toEqual([
+      expect.objectContaining({
+        id: 'useChartZoom-inside',
+        type: 'inside',
+      }),
+    ]);
+    expect(result.current.toolBox).toEqual({});
+  });
+
+  it('updates query params from a zoom event and no-ops while disabled', () => {
+    const {result, rerender, router} = renderHookWithProviders<
+      ReturnType<typeof useChartZoom>,
+      UseChartZoomProps
+    >((props: UseChartZoomProps) => useChartZoom(props), {
+      initialProps: {
+        usePageDate: true,
+      },
+      initialRouterConfig: {
+        location: {
+          pathname: '/issues/1/',
+          query: {project: '11276', statsPeriod: '7d'},
+        },
+      },
+    });
+
+    act(() => {
+      result.current.onDataZoom(dataZoomPayload(), {} as any);
+    });
+
+    expect(router.location.query).toEqual(
+      expect.objectContaining({
+        project: '11276',
+        start: '2026-07-03T11:01:00',
+        end: '2026-07-03T16:55:00',
+      })
+    );
+    expect(router.location.query.statsPeriod).toBeUndefined();
+
+    rerender({
+      disabled: true,
+      usePageDate: true,
+    });
+
+    act(() => {
+      result.current.onDataZoom(
+        dataZoomPayload(
+          Date.UTC(2026, 6, 4, 11, 1, 30),
+          Date.UTC(2026, 6, 4, 16, 54, 30)
+        ),
+        {} as any
+      );
+    });
+
+    expect(router.location.query).toEqual(
+      expect.objectContaining({
+        start: '2026-07-03T11:01:00',
+        end: '2026-07-03T16:55:00',
+      })
+    );
+  });
+});