feat(ui): Add release bubbles to issue details (#86950)

Adds new release bubbles to the issue details graph


![image](https://github.com/user-attachments/assets/2eee7aa2-4971-43af-8031-892aa38d7efe)


ref #86946

depends on
- #86841
- #86840

---------

Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>

Author: billyvg

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

@@ -114,14 +114,16 @@ export function TimeSeriesWidgetVisualization(props: TimeSeriesWidgetVisualizati
   } = useReleaseBubbles({
     chartRenderer: ({start: trimStart, end: trimEnd}) => {
       return (
-        <TimeSeriesWidgetVisualization
-          {...props}
-          disableReleaseNavigation
-          plottables={props.plottables.map(plottable =>
-            plottable.constrain(trimStart, trimEnd)
-          )}
-          showReleaseAs="line"
-        />
+        <DrawerWidgetWrapper>
+          <TimeSeriesWidgetVisualization
+            {...props}
+            disableReleaseNavigation
+            plottables={props.plottables.map(plottable =>
+              plottable.constrain(trimStart, trimEnd)
+            )}
+            showReleaseAs="line"
+          />
+        </DrawerWidgetWrapper>
       );
     },
     minTime: earliestTimeStamp ? new Date(earliestTimeStamp).getTime() : undefined,
@@ -545,4 +547,8 @@ const LoadingMask = styled(TransparentLoadingMask)`
   background: ${p => p.theme.background};
 `;
 
+const DrawerWidgetWrapper = styled('div')`
+  height: 220px;
+`;
+
 TimeSeriesWidgetVisualization.LoadingPlaceholder = LoadingPanel;

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

@@ -8,7 +8,7 @@ import {
 } from 'react';
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
-import {useResizeObserver} from '@react-aria/utils';
+import {mergeRefs, useResizeObserver} from '@react-aria/utils';
 import Color from 'color';
 
 import {BarChart, type BarChartSeries} from 'sentry/components/charts/barChart';
@@ -22,7 +22,7 @@ import InteractionStateLayer from 'sentry/components/interactionStateLayer';
 import Placeholder from 'sentry/components/placeholder';
 import {t, tct, tn} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import type {SeriesDataUnit} from 'sentry/types/echarts';
+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';
@@ -33,6 +33,7 @@ import {useApiQuery} from 'sentry/utils/queryClient';
 import {useLocalStorageState} from 'sentry/utils/useLocalStorageState';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
+import {useReleaseStats} from 'sentry/utils/useReleaseStats';
 import {getBucketSize} from 'sentry/views/dashboards/utils/getBucketSize';
 import {useIssueDetails} from 'sentry/views/issueDetails/streamline/context';
 import useFlagSeries from 'sentry/views/issueDetails/streamline/hooks/featureFlags/useFlagSeries';
@@ -44,6 +45,7 @@ import {
 import {useReleaseMarkLineSeries} from 'sentry/views/issueDetails/streamline/hooks/useReleaseMarkLineSeries';
 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 {
   EVENT = 'event',
@@ -54,6 +56,24 @@ interface EventGraphProps {
   event: Event | undefined;
   group: Group;
   className?: string;
+  /**
+   * Disables navigation via router when the chart is zoomed. This is so the
+   * release bubbles can zoom in on the chart when it renders and not trigger
+   * navigation (which would update the page filters and affect the main
+   * chart).
+   */
+  disableZoomNavigation?: boolean;
+  ref?: React.Ref<ReactEchartsRef>;
+  /**
+   * Configures showing releases on the chart as bubbles or lines. This is used
+   * when showing the chart inside of the flyout drawer. Bubbles are shown when
+   * this prop is anything besides "line".
+   */
+  showReleasesAs?: 'line' | 'bubble';
+  /**
+   * Enable/disables showing the event and user summary
+   */
+  showSummary?: boolean;
   style?: CSSProperties;
 }
 
@@ -76,7 +96,15 @@ function createSeriesAndCount(stats: EventsStats) {
   );
 }
 
-export function EventGraph({group, event, ...styleProps}: EventGraphProps) {
+export function EventGraph({
+  group,
+  event,
+  disableZoomNavigation = false,
+  showReleasesAs,
+  showSummary = true,
+  ref,
+  ...styleProps
+}: EventGraphProps) {
   const theme = useTheme();
   const organization = useOrganization();
   const chartContainerRef = useRef<HTMLDivElement | null>(null);
@@ -116,6 +144,8 @@ export function EventGraph({group, event, ...styleProps}: EventGraphProps) {
     },
   });
 
+  const hasReleaseBubblesSeries = organization.features.includes('release-bubbles-ui');
+
   const noQueryEventView = eventView.clone();
   noQueryEventView.query = `issue:${group.shortId}`;
   noQueryEventView.environment = [];
@@ -200,7 +230,75 @@ export function EventGraph({group, event, ...styleProps}: EventGraphProps) {
     event,
     group,
   });
-  const releaseSeries = useReleaseMarkLineSeries({group});
+
+  const [legendSelected, setLegendSelected] = useLocalStorageState(
+    'issue-details-graph-legend',
+    {
+      ['Feature Flags']: true,
+      ['Releases']: false,
+    }
+  );
+
+  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,
+    releases: hasReleaseBubblesSeries && showReleasesAs !== 'line' ? [] : releases,
+  });
+
+  const {
+    connectReleaseBubbleChartRef,
+    releaseBubbleEventHandlers,
+    releaseBubbleSeries,
+    releaseBubbleXAxis,
+    releaseBubbleGrid,
+  } = useReleaseBubbles({
+    chartRenderer: ({chartRef}) => {
+      return (
+        <EventGraph
+          ref={chartRef}
+          group={group}
+          event={event}
+          showSummary={false}
+          showReleasesAs="line"
+          disableZoomNavigation
+          {...styleProps}
+        />
+      );
+    },
+    legendSelected: legendSelected.Releases,
+    desiredBuckets: eventSeries.length,
+    minTime: eventSeries.length && (eventSeries.at(0)?.name as number),
+    maxTime: eventSeries.length && (eventSeries.at(-1)?.name as number),
+    releases: hasReleaseBubblesSeries && showReleasesAs !== 'line' ? releases : [],
+    projects: eventView.project,
+    environments: eventView.environment,
+    datetime: {
+      start: eventView.start,
+      end: eventView.end,
+      period: eventView.statsPeriod,
+    },
+  });
+
+  const handleConnectRef = useCallback(
+    (e: ReactEchartsRef | null) => {
+      connectReleaseBubbleChartRef(e);
+    },
+    [connectReleaseBubbleChartRef]
+  );
   const flagSeries = useFlagSeries({
     query: {
       start: eventView.start,
@@ -273,7 +371,7 @@ export function EventGraph({group, event, ...styleProps}: EventGraphProps) {
       seriesData.push(currentEventSeries as BarChartSeries);
     }
 
-    if (releaseSeries.markLine) {
+    if (releaseSeries?.markLine) {
       seriesData.push(releaseSeries as BarChartSeries);
     }
 
@@ -298,14 +396,6 @@ export function EventGraph({group, event, ...styleProps}: EventGraphProps) {
 
   const bucketSize = eventSeries ? getBucketSize(series) : undefined;
 
-  const [legendSelected, setLegendSelected] = useLocalStorageState(
-    'issue-details-graph-legend',
-    {
-      ['Feature Flags']: true,
-      ['Releases']: false,
-    }
-  );
-
   const legend = Legend({
     theme,
     orient: 'horizontal',
@@ -363,32 +453,39 @@ export function EventGraph({group, event, ...styleProps}: EventGraphProps) {
 
   return (
     <GraphWrapper {...styleProps}>
-      <SummaryContainer>
-        <GraphButton
-          onClick={() =>
-            visibleSeries === EventGraphSeries.USER &&
-            setVisibleSeries(EventGraphSeries.EVENT)
-          }
-          isActive={visibleSeries === EventGraphSeries.EVENT}
-          disabled={visibleSeries === EventGraphSeries.EVENT}
-          label={tn('Event', 'Events', eventCount)}
-          count={String(eventCount)}
-        />
-        <GraphButton
-          onClick={() =>
-            visibleSeries === EventGraphSeries.EVENT &&
-            setVisibleSeries(EventGraphSeries.USER)
-          }
-          isActive={visibleSeries === EventGraphSeries.USER}
-          disabled={visibleSeries === EventGraphSeries.USER}
-          label={tn('User', 'Users', userCount)}
-          count={String(userCount)}
-        />
-      </SummaryContainer>
+      {showSummary ? (
+        <SummaryContainer>
+          <GraphButton
+            onClick={() =>
+              visibleSeries === EventGraphSeries.USER &&
+              setVisibleSeries(EventGraphSeries.EVENT)
+            }
+            isActive={visibleSeries === EventGraphSeries.EVENT}
+            disabled={visibleSeries === EventGraphSeries.EVENT}
+            label={tn('Event', 'Events', eventCount)}
+            count={String(eventCount)}
+          />
+          <GraphButton
+            onClick={() =>
+              visibleSeries === EventGraphSeries.EVENT &&
+              setVisibleSeries(EventGraphSeries.USER)
+            }
+            isActive={visibleSeries === EventGraphSeries.USER}
+            disabled={visibleSeries === EventGraphSeries.USER}
+            label={tn('User', 'Users', userCount)}
+            count={String(userCount)}
+          />
+        </SummaryContainer>
+      ) : (
+        <div />
+      )}
       <ChartContainer role="figure" ref={chartContainerRef}>
         <BarChart
+          {...releaseBubbleEventHandlers}
+          ref={mergeRefs(ref, handleConnectRef)}
           height={100}
           series={series}
+          additionalSeries={releaseBubbleSeries ? [releaseBubbleSeries] : []}
           legend={legend}
           onLegendSelectChanged={onLegendSelectChanged}
           showTimeInTooltip
@@ -397,6 +494,7 @@ export function EventGraph({group, event, ...styleProps}: EventGraphProps) {
             right: 8,
             top: 20,
             bottom: 0,
+            ...releaseBubbleGrid,
           }}
           tooltip={{
             formatAxisLabel: (
@@ -428,7 +526,15 @@ export function EventGraph({group, event, ...styleProps}: EventGraphProps) {
               },
             },
           }}
-          {...chartZoomProps}
+          xAxis={{
+            ...releaseBubbleXAxis,
+          }}
+          {...(disableZoomNavigation
+            ? {
+                isGroupedByDate: true,
+                dataZoom: chartZoomProps.dataZoom,
+              }
+            : chartZoomProps)}
         />
       </ChartContainer>
     </GraphWrapper>

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

@@ -3,42 +3,30 @@ import {useTheme} from '@emotion/react';
 import MarkLine from 'sentry/components/charts/components/markLine';
 import {t} from 'sentry/locale';
 import type {Group} from 'sentry/types/group';
+import type {ReleaseMetaBasic} from 'sentry/types/release';
 import {escape} from 'sentry/utils';
 import {getFormattedDate} from 'sentry/utils/dates';
-import {useApiQuery} from 'sentry/utils/queryClient';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
 import {formatVersion} from 'sentry/utils/versions/formatVersion';
 import {useIssueDetailsEventView} from 'sentry/views/issueDetails/streamline/hooks/useIssueDetailsDiscoverQuery';
 import {makeReleasesPathname} from 'sentry/views/releases/utils/pathnames';
 
-interface ReleaseStat {
-  date: string;
-  version: string;
-}
-
-export function useReleaseMarkLineSeries({group}: {group: Group}) {
+export function useReleaseMarkLineSeries({
+  group,
+  releases,
+}: {
+  group: Group;
+  releases: ReleaseMetaBasic[];
+}) {
   const navigate = useNavigate();
   const theme = useTheme();
   const eventView = useIssueDetailsEventView({group});
   const organization = useOrganization();
-  const {data: releases = []} = useApiQuery<ReleaseStat[]>(
-    [
-      `/organizations/${organization.slug}/releases/stats/`,
-      {
-        query: {
-          project: eventView.project,
-          environment: eventView.environment,
-          start: eventView.start,
-          end: eventView.end,
-          statsPeriod: eventView.statsPeriod,
-        },
-      },
-    ],
-    {
-      staleTime: 0,
-    }
-  );
+
+  if (!releases.length) {
+    return null;
+  }
 
   const markLine = MarkLine({
     animation: false,