fix(releases): Fix chart zooming instead of Releases List Drawer (#91935)

Change the chart zoom behavior in the Releases List Drawer to update the
start/end values of the drawer instead of the main view.

Author: billyvg

static/app/views/insights/common/components/insightsTimeSeriesWidget.tsx

@@ -132,7 +132,11 @@ export function InsightsTimeSeriesWidget(props: InsightsTimeSeriesWidgetProps) {
   }
 
   const enableReleaseBubblesProps = organization.features.includes('release-bubbles-ui')
-    ? ({releases, showReleaseAs: props.showReleaseAs || 'bubble'} as const)
+    ? ({
+        releases,
+        showReleaseAs: props.showReleaseAs || 'bubble',
+        onZoom: props.onZoom,
+      } as const)
     : {};
 
   return (

static/app/views/insights/common/components/widgets/types.tsx

@@ -1,4 +1,5 @@
 import type {PageFilters} from 'sentry/types/core';
+import type {EChartDataZoomHandler} from 'sentry/types/echarts';
 
 /**
  * These props are common across components that are required to dynamically
@@ -23,6 +24,13 @@ export interface LoadableChartWidgetProps {
    */
   loaderSource?: 'releases-drawer';
 
+  /**
+   * Callback that returns an updated ECharts zoom selection. If omitted, the
+   * default behavior is to update the URL with updated `start` and `end` query
+   * parameters.
+   */
+  onZoom?: EChartDataZoomHandler;
+
   /**
    * PageFilters-like object that will override the main PageFilters e.g. in
    * Releases Drawer, we have a smaller timeframe to show a smaller amount of

static/app/views/releases/drawer/releasesDrawerList.tsx

@@ -17,10 +17,18 @@ import {
 } from 'sentry/components/events/eventDrawer';
 import {t, tn} from 'sentry/locale';
 import type {PageFilters} from 'sentry/types/core';
-import type {ReactEchartsRef, SeriesDataUnit} from 'sentry/types/echarts';
+import type {
+  EChartDataZoomHandler,
+  ReactEchartsRef,
+  SeriesDataUnit,
+} from 'sentry/types/echarts';
+import {getUtcDateString} from 'sentry/utils/dates';
+import {useLocation} from 'sentry/utils/useLocation';
+import {useNavigate} from 'sentry/utils/useNavigate';
 import {useReleaseStats} from 'sentry/utils/useReleaseStats';
 import {formatVersion} from 'sentry/utils/versions/formatVersion';
 import {EVENT_GRAPH_WIDGET_ID} from 'sentry/views/issueDetails/streamline/eventGraphWidget';
+import {ReleasesDrawerFields} from 'sentry/views/releases/drawer/utils';
 
 import {ReleaseDrawerTable} from './releasesDrawerTable';
 
@@ -83,7 +91,9 @@ const unhighlightMarkLines = createMarkLineUpdater({});
  * Allows users to view releases of a specific timebucket.
  */
 export function ReleasesDrawerList({chart, pageFilters}: ReleasesDrawerListProps) {
+  const navigate = useNavigate();
   const {releases} = useReleaseStats(pageFilters);
+  const location = useLocation();
   const chartRef = useRef<ReactEchartsRef | null>(null);
   const chartHeight = chart === EVENT_GRAPH_WIDGET_ID ? '160px' : '220px';
 
@@ -118,6 +128,34 @@ export function ReleasesDrawerList({chart, pageFilters}: ReleasesDrawerListProps
     },
   ];
 
+  const handleDataZoom = useCallback<EChartDataZoomHandler>(
+    evt => {
+      let {startValue, endValue} = (evt as any).batch[0] as {
+        endValue: number | null;
+        startValue: number | null;
+      };
+
+      // if `rangeStart` and `rangeEnd` are null, then we are going back
+      if (startValue && endValue) {
+        // round off the bounds to the minute
+        startValue = Math.floor(startValue / 60_000) * 60_000;
+        endValue = Math.ceil(endValue / 60_000) * 60_000;
+
+        // ensure the bounds has 1 minute resolution
+        startValue = Math.min(startValue, endValue - 60_000);
+
+        navigate({
+          query: {
+            ...location.query,
+            [ReleasesDrawerFields.START]: getUtcDateString(startValue),
+            [ReleasesDrawerFields.END]: getUtcDateString(endValue),
+          },
+        });
+      }
+    },
+    [navigate, location.query]
+  );
+
   return (
     <EventDrawerContainer>
       <EventDrawerHeader>
@@ -135,6 +173,7 @@ export function ReleasesDrawerList({chart, pageFilters}: ReleasesDrawerListProps
               pageFilters={pageFilters}
               showReleaseAs="line"
               loaderSource="releases-drawer"
+              onZoom={handleDataZoom}
             />
           </div>
         ) : null}