From 8047a99b2204f330bce42513aff3dee25ae6247a Mon Sep 17 00:00:00 2001
From: George Gritsouk <989898+gggritso@users.noreply.github.com>
Date: Fri, 3 Jul 2026 15:26:26 -0400
Subject: [PATCH] fix(dashboards): Stop chart drag-to-zoom selecting the wrong
 time range

Dragging to zoom on a dashboard time-series widget could update the global
time filter to the wrong (collapsed) range. The widget inherited BaseChart's
notMerge=true default, so every data refresh did a full ECharts re-init that
re-created the toolbox dataZoom "select" component. On ECharts 6.1 that rebuild
re-emits a stale `dataZoom` event, so a single drag cascaded into repeated
refetches that settled on a wrong, collapsed range (see apache/echarts#21661).

Force merge mode and remove the notMerge prop entirely so it can't be re-enabled:
the existing replaceMerge already fully replaces the volatile series/axes, which
was the only reason notMerge was ever reached for. Update the explore callers
(metrics, spans, logs) that passed notMerge accordingly.

Fixes DAIN-1753

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../timeSeriesWidgetVisualization.tsx         | 21 +++++++++++++------
 .../components/chart/chartVisualization.tsx   |  3 ---
 static/app/views/explore/logs/logsGraph.tsx   |  9 +-------
 .../explore/metrics/metricGraph/index.tsx     |  2 +-
 .../app/views/explore/spans/charts/index.tsx  |  1 -
 5 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization.tsx b/static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization.tsx
index 19886d78750e..3fbcd28207e3 100644
--- a/static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization.tsx
+++ b/static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization.tsx
@@ -88,11 +88,6 @@ export interface TimeSeriesWidgetVisualizationProps extends Partial<LoadableChar
    */
   legendSelection?: LegendSelection;
 
-  /**
-   * Whether new options fully replace previous chart options.
-   */
-  notMerge?: boolean;
-
   /**
    * Callback that returns an updated `LegendSelection` after a user manipulations the selection via the legend
    */
@@ -615,7 +610,21 @@ export function TimeSeriesWidgetVisualization(props: TimeSeriesWidgetVisualizati
         <BaseChart
           ref={mergeRefs(props.ref, props.chartRef, chartRef, handleChartRef)}
           autoHeightResize
-          notMerge={props.notMerge}
+          // `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']}
           series={allSeries}
           grid={{
diff --git a/static/app/views/explore/components/chart/chartVisualization.tsx b/static/app/views/explore/components/chart/chartVisualization.tsx
index fb24408d037e..ea5751ccd170 100644
--- a/static/app/views/explore/components/chart/chartVisualization.tsx
+++ b/static/app/views/explore/components/chart/chartVisualization.tsx
@@ -25,7 +25,6 @@ interface ChartVisualizationProps {
   chartInfo: ChartInfo;
   chartRef?: Ref<ReactEchartsRef>;
   chartXRangeSelection?: Partial<ChartXRangeSelectionProps>;
-  notMerge?: boolean;
 }
 
 export function useChartVisualizationPlottables(chartInfo: ChartInfo) {
@@ -63,7 +62,6 @@ export function ChartVisualization({
   chartXRangeSelection,
   chartInfo,
   chartRef,
-  notMerge,
 }: ChartVisualizationProps) {
   const plottables = useChartVisualizationPlottables(chartInfo);
   const previousPlottables = usePrevious(
@@ -115,7 +113,6 @@ export function ChartVisualization({
         ref={chartRef}
         plottables={activePlottables}
         chartXRangeSelection={chartXRangeSelection}
-        notMerge={notMerge}
       />
     </StyledTransparentLoadingMask>
   );
diff --git a/static/app/views/explore/logs/logsGraph.tsx b/static/app/views/explore/logs/logsGraph.tsx
index 995e15d9c169..9f0496d2efde 100644
--- a/static/app/views/explore/logs/logsGraph.tsx
+++ b/static/app/views/explore/logs/logsGraph.tsx
@@ -36,7 +36,6 @@ import {
   useChartVisualizationPlottables,
 } from 'sentry/views/explore/components/chart/chartVisualization';
 import type {ChartInfo} from 'sentry/views/explore/components/chart/types';
-import {useLogsAutoRefreshEnabled} from 'sentry/views/explore/contexts/logs/logsAutoRefreshContext';
 import {useLogsPageDataQueryResult} from 'sentry/views/explore/contexts/logs/logsPageData';
 import {formatSort} from 'sentry/views/explore/contexts/pageParamsContext/sortBys';
 import {CHART_TYPE_TO_DISPLAY_TYPE} from 'sentry/views/explore/hooks/useAddToDashboard';
@@ -128,7 +127,6 @@ function Graph({
   visualize,
 }: GraphProps) {
   const isShortViewport = useIsShortViewport();
-  const autorefreshEnabled = useLogsAutoRefreshEnabled();
   const {isEmpty: tableIsEmpty, isPending: tableIsPending} = useLogsPageDataQueryResult();
 
   const aggregate = visualize.yAxis;
@@ -181,7 +179,6 @@ function Graph({
         !visualize.visible && plottablesCanBeVisualized(plottables) ? (
           <TimeSeriesWidgetVisualization
             plottables={plottables}
-            notMerge={false}
             showLegend="never"
             showXAxis="never"
             showYAxis="never"
@@ -263,11 +260,7 @@ function Graph({
       Actions={Actions}
       Visualization={
         visualize.visible && (
-          <ChartVisualization
-            key={chartRemountKey}
-            chartInfo={chartInfo}
-            notMerge={!autorefreshEnabled}
-          />
+          <ChartVisualization key={chartRemountKey} chartInfo={chartInfo} />
         )
       }
       Footer={
diff --git a/static/app/views/explore/metrics/metricGraph/index.tsx b/static/app/views/explore/metrics/metricGraph/index.tsx
index 26c894c78ef2..1312401b30a0 100644
--- a/static/app/views/explore/metrics/metricGraph/index.tsx
+++ b/static/app/views/explore/metrics/metricGraph/index.tsx
@@ -219,7 +219,7 @@ function Graph({
               )}
             />
           ) : showChart ? (
-            <ChartVisualization chartInfo={chartInfo} notMerge={false} />
+            <ChartVisualization chartInfo={chartInfo} />
           ) : undefined
         }
         Footer={
diff --git a/static/app/views/explore/spans/charts/index.tsx b/static/app/views/explore/spans/charts/index.tsx
index 34af7c5c896c..332ae264c7d6 100644
--- a/static/app/views/explore/spans/charts/index.tsx
+++ b/static/app/views/explore/spans/charts/index.tsx
@@ -217,7 +217,6 @@ function Chart({
         !visualize.visible && plottablesCanBeVisualized(plottables) ? (
           <TimeSeriesWidgetVisualization
             plottables={plottables}
-            notMerge={false}
             showLegend="never"
             showXAxis="never"
             showYAxis="never"