feat(releases): Use routing for charts inside of Releases Drawer

static/app/utils/useReleaseStats.tsx

@@ -1,4 +1,4 @@
-import {useEffect} from 'react';
+import {useEffect, useMemo} from 'react';
 
 import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilters/parse';
 import {useInfiniteApiQuery} from 'sentry/utils/queryClient';
@@ -27,7 +27,10 @@ interface UseReleaseStatsParams {
  */
 export function useReleaseStats(
   {datetime, environments, projects, maxPages = 10}: UseReleaseStatsParams,
-  queryOptions: {staleTime: number} = {staleTime: Infinity}
+  queryOptions: {enabled?: boolean; staleTime?: number} = {
+    staleTime: Infinity,
+    enabled: true,
+  }
 ) {
   const organization = useOrganization();
 
@@ -62,11 +65,16 @@ export function useReleaseStats(
     }
   }, [isFetching, hasNextPage, fetchNextPage, maxPages, currentNumberPages]);
 
+  const releases = useMemo(
+    () => data?.pages.flatMap(([pageData]) => pageData) ?? [],
+    [data]
+  );
+
   return {
     isLoading,
     isPending,
     isError,
     error,
-    releases: data?.pages.flatMap(([pageData]) => pageData),
+    releases,
   };
 }

static/app/views/app/index.tsx

@@ -36,6 +36,7 @@ import type {InstallWizardProps} from 'sentry/views/admin/installWizard';
 import {AsyncSDKIntegrationContextProvider} from 'sentry/views/app/asyncSDKIntegrationProvider';
 import LastKnownRouteContextProvider from 'sentry/views/lastKnownRouteContextProvider';
 import {OrganizationContextProvider} from 'sentry/views/organizationContext';
+import {ReleasesDrawerProvider} from 'sentry/views/releases/drawer/releasesDrawerContext';
 import RouteAnalyticsContextProvider from 'sentry/views/routeAnalyticsContextProvider';
 
 type Props = {
@@ -257,13 +258,15 @@ function App({children, params}: Props) {
           {renderOrganizationContextProvider(
             <AsyncSDKIntegrationContextProvider>
               <GlobalFeedbackForm>
-                <GlobalDrawer>
-                  <MainContainer tabIndex={-1} ref={mainContainerRef}>
-                    <GlobalModal onClose={handleModalClose} />
-                    <Indicators className="indicators-container" />
-                    <ErrorBoundary>{renderBody()}</ErrorBoundary>
-                  </MainContainer>
-                </GlobalDrawer>
+                <ReleasesDrawerProvider>
+                  <GlobalDrawer>
+                    <MainContainer tabIndex={-1} ref={mainContainerRef}>
+                      <GlobalModal onClose={handleModalClose} />
+                      <Indicators className="indicators-container" />
+                      <ErrorBoundary>{renderBody()}</ErrorBoundary>
+                    </MainContainer>
+                  </GlobalDrawer>
+                </ReleasesDrawerProvider>
               </GlobalFeedbackForm>
             </AsyncSDKIntegrationContextProvider>
           )}

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

@@ -1,4 +1,4 @@
-import {useCallback, useRef} from 'react';
+import {useCallback, useMemo, useRef} from 'react';
 import {useNavigate} from 'react-router-dom';
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
@@ -31,6 +31,7 @@ import type {AggregationOutputType} from 'sentry/utils/discover/fields';
 import {type Range, RangeMap} from 'sentry/utils/number/rangeMap';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
+import type {ChartRendererProps} from 'sentry/views/releases/releaseBubbles/types';
 import {useReleaseBubbles} from 'sentry/views/releases/releaseBubbles/useReleaseBubbles';
 import {makeReleasesPathname} from 'sentry/views/releases/utils/pathnames';
 
@@ -49,6 +50,8 @@ import {TimeSeriesWidgetYAxis} from './timeSeriesWidgetYAxis';
 const {error, warn, info} = Sentry.logger;
 
 export interface TimeSeriesWidgetVisualizationProps {
+  chartId: string;
+
   /**
    * An array of `Plottable` objects. This can be any object that implements the `Plottable` interface.
    */
@@ -124,29 +127,33 @@ export function TimeSeriesWidgetVisualization(props: TimeSeriesWidgetVisualizati
   const earliestTimeStamp = allBoundaries.at(0);
   const latestTimeStamp = allBoundaries.at(-1);
 
+  const chartRenderer = useMemo(
+    () =>
+      function ({ref: chartRendererRef}: ChartRendererProps) {
+        return (
+          <DrawerWidgetWrapper>
+            <TimeSeriesWidgetVisualization
+              {...props}
+              ref={chartRendererRef}
+              disableReleaseNavigation
+              onZoom={() => {}}
+              showReleaseAs="line"
+            />
+          </DrawerWidgetWrapper>
+        );
+      },
+    [props]
+  );
+
   const {
     connectReleaseBubbleChartRef,
     releaseBubbleEventHandlers,
     releaseBubbleSeries,
     releaseBubbleXAxis,
     releaseBubbleGrid,
   } = useReleaseBubbles({
-    chartRenderer: ({start: trimStart, end: trimEnd, ref: chartRendererRef}) => {
-      return (
-        <DrawerWidgetWrapper>
-          <TimeSeriesWidgetVisualization
-            {...props}
-            ref={chartRendererRef}
-            disableReleaseNavigation
-            onZoom={() => {}}
-            plottables={props.plottables.map(plottable =>
-              plottable.constrain(trimStart, trimEnd)
-            )}
-            showReleaseAs="line"
-          />
-        </DrawerWidgetWrapper>
-      );
-    },
+    chartId: props.chartId,
+    chartRenderer,
     minTime: earliestTimeStamp ? new Date(earliestTimeStamp).getTime() : undefined,
     maxTime: latestTimeStamp ? new Date(latestTimeStamp).getTime() : undefined,
     releases: hasReleaseBubbles

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

@@ -34,6 +34,7 @@ import type {DiscoverSeries} from '../queries/useDiscoverSeries';
 import {convertSeriesToTimeseries} from '../utils/convertSeriesToTimeseries';
 
 export interface InsightsTimeSeriesWidgetProps extends WidgetTitleProps {
+  chartId: string;
   error: Error | null;
   isLoading: boolean;
   series: DiscoverSeries[];
@@ -59,6 +60,7 @@ export function InsightsTimeSeriesWidget(props: InsightsTimeSeriesWidgetProps) {
     })) ?? [];
 
   const visualizationProps: TimeSeriesWidgetVisualizationProps = {
+    chartId: props.chartId,
     plottables: (props.series.filter(Boolean) ?? [])?.map(serie => {
       const timeSeries = convertSeriesToTimeseries(serie);
       const PlottableDataConstructor =

static/app/views/insights/http/views/httpLandingPage.tsx

@@ -183,6 +183,7 @@ export function HTTPLandingPage() {
               <ModulesOnboarding moduleName={ModuleName.HTTP}>
                 <ModuleLayout.Third>
                   <InsightsLineChartWidget
+                    chartId={Referrer.LANDING_THROUGHPUT_CHART}
                     title={getThroughputChartTitle('http')}
                     series={[throughputData['epm()']]}
                     isLoading={isThroughputDataLoading}
@@ -192,6 +193,7 @@ export function HTTPLandingPage() {
 
                 <ModuleLayout.Third>
                   <InsightsLineChartWidget
+                    chartId={Referrer.LANDING_DURATION_CHART}
                     title={getDurationChartTitle('http')}
                     series={[durationData['avg(span.self_time)']]}
                     isLoading={isDurationDataLoading}
@@ -201,6 +203,7 @@ export function HTTPLandingPage() {
 
                 <ModuleLayout.Third>
                   <InsightsLineChartWidget
+                    chartId={Referrer.LANDING_RESPONSE_CODE_CHART}
                     title={DataTitles.unsuccessfulHTTPCodes}
                     series={[
                       responseCodeData[`http_response_rate(3)`],

static/app/views/issueDetails/streamline/eventGraph.tsx

@@ -239,20 +239,15 @@ export function EventGraph({
     }
   );
 
-  const {releases = []} = useReleaseStats(
-    {
-      projects: eventView.project,
-      environments: eventView.environment,
-      datetime: {
-        start: eventView.start,
-        end: eventView.end,
-        period: eventView.statsPeriod,
-      },
+  const {releases} = useReleaseStats({
+    projects: eventView.project,
+    environments: eventView.environment,
+    datetime: {
+      start: eventView.start,
+      end: eventView.end,
+      period: eventView.statsPeriod,
     },
-    {
-      staleTime: 0,
-    }
-  );
+  });
 
   const releaseSeries = useReleaseMarkLineSeries({
     group,
@@ -270,26 +265,29 @@ export function EventGraph({
     penultEventSeriesTimestamp &&
     lastEventSeriesTimestamp - penultEventSeriesTimestamp;
 
+  const chartRenderer = useCallback(
+    () => (
+      <EventGraph
+        group={group}
+        event={event}
+        showSummary={false}
+        showReleasesAs="line"
+        disableZoomNavigation
+        {...styleProps}
+      />
+    ),
+    [group, event, styleProps]
+  );
+
   const {
     connectReleaseBubbleChartRef,
     releaseBubbleEventHandlers,
     releaseBubbleSeries,
     releaseBubbleXAxis,
     releaseBubbleGrid,
   } = useReleaseBubbles({
-    chartRenderer: ({ref: chartRef}) => {
-      return (
-        <EventGraph
-          ref={chartRef}
-          group={group}
-          event={event}
-          showSummary={false}
-          showReleasesAs="line"
-          disableZoomNavigation
-          {...styleProps}
-        />
-      );
-    },
+    chartId: 'issue-details-event-graph',
+    chartRenderer,
     alignInMiddle: true,
     legendSelected: legendSelected.Releases,
     desiredBuckets: eventSeries.length,

static/app/views/nav/secondary/sections/insights/insightsSecondaryNav.tsx

@@ -31,6 +31,7 @@ import ProjectIcon from 'sentry/views/nav/projectIcon';
 import {SecondaryNav} from 'sentry/views/nav/secondary/secondary';
 import {PrimaryNavGroup} from 'sentry/views/nav/types';
 import {isLinkActive} from 'sentry/views/nav/utils';
+import {useReleasesDrawer} from 'sentry/views/releases/drawer/useReleasesDrawer';
 
 import {MODULE_BASE_URLS} from '../../../../insights/common/utils/useModuleURL';
 import {ModuleName} from '../../../../insights/types';
@@ -42,6 +43,7 @@ export function InsightsSecondaryNav() {
   const location = useLocation();
   const baseUrl = `/organizations/${organization.slug}/${DOMAIN_VIEW_BASE_URL}`;
   const [isLaravelInsightsEnabled] = useIsLaravelInsightsEnabled();
+  useReleasesDrawer();
 
   const {projects} = useProjects();