Adrian/dropped data drawer disable zoom (#128298)

This PR adds a disableZoom prop to the `TimeSeriesWidgetVisualization`
component to prevent zooming in the drawer's chart.

Close DAIN-1949

Author: adrianviquez

static/app/components/droppedData/drawer/droppedDataChart.spec.tsx

@@ -1,6 +1,51 @@
+import type {ECharts} from 'echarts';
 import {DroppedEventFixture} from 'sentry-fixture/droppedEvent';
 
-import {droppedEventsToSeries} from './droppedDataChart';
+import {act, render} from 'sentry-test/reactTestingLibrary';
+
+import {BaseChart} from 'sentry/components/charts/baseChart';
+import type {EChartDataZoomHandler} from 'sentry/types/echarts';
+
+import {DroppedDataChart, droppedEventsToSeries} from './droppedDataChart';
+
+jest.mock('sentry/components/charts/baseChart', () => ({
+  BaseChart: jest.fn(() => null),
+}));
+
+describe('DroppedDataChart', () => {
+  it('does not zoom or change the time range', () => {
+    const {router} = render(
+      <DroppedDataChart
+        droppedEvents={[DroppedEventFixture({outcome: 'filtered', count: 5})]}
+        colors={{filtered: '#000'}}
+        selection={{}}
+        onSelectionChange={jest.fn()}
+      />,
+      {
+        initialRouterConfig: {
+          location: {pathname: '/explore/traces/', query: {statsPeriod: '14d'}},
+        },
+      }
+    );
+
+    const props = jest.mocked(BaseChart).mock.calls.at(-1)![0];
+    expect(props.toolBox).toEqual({});
+
+    act(() => {
+      props.onDataZoom?.(
+        {
+          type: 'datazoom',
+          start: 0,
+          end: 100,
+          batch: [{startValue: 0, endValue: 600_000}],
+        } as Parameters<EChartDataZoomHandler>[0],
+        {} as ECharts
+      );
+    });
+
+    expect(router.location.query).toEqual({statsPeriod: '14d'});
+  });
+});
 
 describe('droppedEventsToSeries', () => {
   it('returns an empty object for no events', () => {

static/app/components/droppedData/drawer/droppedDataChart.tsx

@@ -119,7 +119,11 @@ export function DroppedDataChart({
       />
       <Container height={CHART_HEIGHT}>
         {plottables.length > 0 ? (
-          <TimeSeriesWidgetVisualization plottables={plottables} showLegend="never" />
+          <TimeSeriesWidgetVisualization
+            plottables={plottables}
+            showLegend="never"
+            disableZoom
+          />
         ) : legendItems.length > 0 ? (
           <Flex height="100%" align="center">
             <EmptyState

static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization.tsx

@@ -97,6 +97,11 @@ export interface TimeSeriesWidgetVisualizationProps extends Partial<LoadableChar
    */
   chartXRangeSelection?: Partial<ChartXRangeSelectionProps>;
 
+  /**
+   * Disables drag-to-zoom, so zooming never updates the URL or page filters.
+   */
+  disableZoom?: boolean;
+
   /**
    * Dropped-data annotations rendered as a severity band between the plot and
    * the x-axis line. The band is hidden when `visible` is false or no bucket has
@@ -226,6 +231,7 @@ export function TimeSeriesWidgetVisualization(props: TimeSeriesWidgetVisualizati
     onChartReady: onChartReadyZoom,
     ...chartZoomProps
   } = useChartZoom({
+    disabled: props.disableZoom,
     saveOnZoom: true,
   });