feat(releases): Refactor to support deep-linked Issues Chart (#89711)

This PR creates a "chart widget" similar to what we did for Insights
widgets (e.g. #89344). This is
so that we can deep-link to the `EventGraph` using only `groupId` from
URL parameters.

This also makes some changes to `EventGraph` so that we can use a custom
date range (/page filters). This is used when we click a release bubble,
we want the chart in the drawer to refetch the same stats (but at a
different interval) according to the bubble's time bucket.


Part of #88560

Author: billyvg

static/app/components/charts/chartWidgetLoader.tsx

@@ -4,6 +4,7 @@ import {useQuery} from '@tanstack/react-query';
 import Placeholder from 'sentry/components/placeholder';
 import {t} from 'sentry/locale';
 import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
+import {EVENT_GRAPH_WIDGET_ID} from 'sentry/views/issueDetails/streamline/eventGraphWidget';
 
 interface Props extends LoadableChartWidgetProps {
   /**
@@ -26,7 +27,13 @@ interface Props extends LoadableChartWidgetProps {
 export function ChartWidgetLoader(props: Props) {
   const query = useQuery<{default: React.FC<LoadableChartWidgetProps>}>({
     queryKey: [`widget-${props.id}`],
-    queryFn: () => import(`sentry/views/insights/common/components/widgets/${props.id}`),
+    queryFn: () => {
+      if (props.id === EVENT_GRAPH_WIDGET_ID) {
+        return import('sentry/views/issueDetails/streamline/eventGraphWidget');
+      }
+
+      return import(`sentry/views/insights/common/components/widgets/${props.id}`);
+    },
   });
 
   if (query.isPending) {

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

@@ -26,6 +26,7 @@ import type {ReactEchartsRef, SeriesDataUnit} from 'sentry/types/echarts';
 import type {Event} from 'sentry/types/event';
 import type {Group} from 'sentry/types/group';
 import type {EventsStats, MultiSeriesEventsStats} from 'sentry/types/organization';
+import type EventView from 'sentry/utils/discover/eventView';
 import {DiscoverDatasets} from 'sentry/utils/discover/types';
 import {formatAbbreviatedNumber} from 'sentry/utils/formatters';
 import {getConfigForIssueType} from 'sentry/utils/issueTypeConfig';
@@ -48,7 +49,7 @@ import {Tab} from 'sentry/views/issueDetails/types';
 import {useGroupDetailsRoute} from 'sentry/views/issueDetails/useGroupDetailsRoute';
 import {useReleaseBubbles} from 'sentry/views/releases/releaseBubbles/useReleaseBubbles';
 
-const enum EventGraphSeries {
+enum EventGraphSeries {
   EVENT = 'event',
   USER = 'user',
 }
@@ -64,6 +65,7 @@ interface EventGraphProps {
    * chart).
    */
   disableZoomNavigation?: boolean;
+  eventView?: EventView;
   ref?: React.Ref<ReactEchartsRef>;
   /**
    * Configures showing releases on the chart as bubbles or lines. This is used
@@ -100,6 +102,7 @@ function createSeriesAndCount(stats: EventsStats) {
 export function EventGraph({
   group,
   event,
+  eventView: eventViewProps,
   disableZoomNavigation = false,
   showReleasesAs,
   showSummary = true,
@@ -131,7 +134,8 @@ export function EventGraph({
     ref: chartContainerRef,
     onResize,
   });
-  const eventView = useIssueDetailsEventView({group, isSmallContainer});
+  const eventViewHook = useIssueDetailsEventView({group, isSmallContainer});
+  const eventView = eventViewProps || eventViewHook;
 
   const {
     data: groupStats = {},
@@ -447,18 +451,22 @@ export function EventGraph({
   if (isLoadingStats || isPendingUniqueUsersCount) {
     return (
       <GraphWrapper {...styleProps}>
-        <SummaryContainer>
-          <GraphButton
-            isActive={visibleSeries === EventGraphSeries.EVENT}
-            disabled
-            label={t('Events')}
-          />
-          <GraphButton
-            isActive={visibleSeries === EventGraphSeries.USER}
-            disabled
-            label={t('Users')}
-          />
-        </SummaryContainer>
+        {showSummary ? (
+          <SummaryContainer>
+            <GraphButton
+              isActive={visibleSeries === EventGraphSeries.EVENT}
+              disabled
+              label={t('Events')}
+            />
+            <GraphButton
+              isActive={visibleSeries === EventGraphSeries.USER}
+              disabled
+              label={t('Users')}
+            />
+          </SummaryContainer>
+        ) : (
+          <div />
+        )}
         <LoadingChartContainer ref={chartContainerRef}>
           <Placeholder height="96px" testId="event-graph-loading" />
         </LoadingChartContainer>
@@ -561,7 +569,11 @@ function GraphButton({
   label,
   count,
   ...props
-}: {isActive: boolean; label: string; count?: string} & Partial<ButtonProps>) {
+}: {
+  isActive: boolean;
+  label: string;
+  count?: string;
+} & Partial<ButtonProps>) {
   return (
     <CalloutButton
       isActive={isActive}

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

@@ -0,0 +1,58 @@
+import styled from '@emotion/styled';
+
+import Placeholder from 'sentry/components/placeholder';
+import {t} from 'sentry/locale';
+import {useParams} from 'sentry/utils/useParams';
+import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
+import {EventGraph} from 'sentry/views/issueDetails/streamline/eventGraph';
+import {useIssueDetailsEventView} from 'sentry/views/issueDetails/streamline/hooks/useIssueDetailsDiscoverQuery';
+import {useGroup} from 'sentry/views/issueDetails/useGroup';
+
+export default function EventGraphWidget({pageFilters}: LoadableChartWidgetProps) {
+  const {groupId} = useParams();
+
+  const {
+    data: groupData,
+    isPending: loadingGroup,
+    isError: isGroupError,
+  } = useGroup({groupId: groupId!});
+
+  const eventView = useIssueDetailsEventView({
+    group: groupData!,
+    isSmallContainer: true,
+    pageFilters,
+  });
+
+  if (loadingGroup) {
+    return (
+      <Container>
+        <Placeholder height="100%" />
+      </Container>
+    );
+  }
+
+  if (isGroupError) {
+    return (
+      <Container>
+        <Placeholder height="100%" error={t('Error loading chart')} />
+      </Container>
+    );
+  }
+
+  return (
+    <EventGraph
+      event={undefined}
+      eventView={eventView}
+      group={groupData}
+      showSummary={false}
+      showReleasesAs="line"
+      disableZoomNavigation
+    />
+  );
+}
+
+const Container = styled('div')`
+  height: 100%;
+`;
+
+export const EVENT_GRAPH_WIDGET_ID = 'event-graph-widget';

static/app/views/issueDetails/streamline/hooks/useIssueDetailsDiscoverQuery.tsx

@@ -1,4 +1,5 @@
 import {getInterval} from 'sentry/components/charts/utils';
+import type {PageFilters} from 'sentry/types/core';
 import type {Group} from 'sentry/types/group';
 import type {NewQuery, SavedQuery} from 'sentry/types/organization';
 import EventView from 'sentry/utils/discover/eventView';
@@ -16,11 +17,13 @@ import {useGroupDefaultStatsPeriod} from 'sentry/views/issueDetails/useGroupDefa
 
 export function useIssueDetailsEventView({
   group,
+  pageFilters,
   queryProps,
   isSmallContainer = false,
 }: {
   group: Group;
   isSmallContainer?: boolean;
+  pageFilters?: PageFilters;
   queryProps?: Partial<SavedQuery>;
 }) {
   const searchQuery = useEventQuery({groupId: group.id});
@@ -29,13 +32,15 @@ export function useIssueDetailsEventView({
   const hasSetStatsPeriod =
     location.query.statsPeriod || location.query.start || location.query.end;
   const defaultStatsPeriod = useGroupDefaultStatsPeriod(group, group.project);
-  const periodQuery = hasSetStatsPeriod
-    ? getPeriod({
-        start: location.query.start as string,
-        end: location.query.end as string,
-        period: location.query.statsPeriod as string,
-      })
-    : defaultStatsPeriod;
+  const periodQuery = pageFilters
+    ? getPeriod(pageFilters.datetime)
+    : hasSetStatsPeriod
+      ? getPeriod({
+          start: location.query.start as string,
+          end: location.query.end as string,
+          period: location.query.statsPeriod as string,
+        })
+      : defaultStatsPeriod;
 
   const interval = getInterval(
     {