ref(ui): Change useReleaseMarkLineSeries to use useReleaseStats hook

Author: billyvg

static/app/components/charts/baseChart.tsx

@@ -10,6 +10,7 @@ import {css, Global, useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 import type {
   AxisPointerComponentOption,
+  CustomSeriesOption,
   ECharts,
   EChartsOption,
   GridComponentOption,
@@ -137,7 +138,7 @@ export interface BaseChartProps {
    * Additional Chart Series
    * This is to pass series to BaseChart bypassing the wrappers like LineChart, AreaChart etc.
    */
-  additionalSeries?: LineSeriesOption[];
+  additionalSeries?: Array<CustomSeriesOption | SeriesOption>;
   /**
    * If true, ignores height value and auto-scales chart to fit container height.
    */

static/app/views/dashboards/widgets/timeSeriesWidget/releaseBubbles/useReleaseBubbles.tsx

@@ -1,4 +1,4 @@
-import type {ReactElement} from 'react';
+import {type ReactElement, useCallback, useRef} from 'react';
 import {type Theme, useTheme} from '@emotion/react';
 import type {
   CustomSeriesOption,
@@ -294,7 +294,7 @@ ${t('Click to expand')}
 }
 
 interface UseReleaseBubblesParams {
-  chartRef: React.RefObject<ReactEchartsRef | null>;
+  bubblePadding?: {x: number; y: number};
   bubbleSize?: number;
   chartRenderer?: (rendererProps: {
     end: Date;
@@ -306,7 +306,6 @@ interface UseReleaseBubblesParams {
   releases?: ReleaseMetaBasic[];
 }
 export function useReleaseBubbles({
-  chartRef,
   chartRenderer,
   releases,
   minTime,
@@ -317,7 +316,15 @@ export function useReleaseBubbles({
   const {openDrawer} = useDrawer();
   const theme = useTheme();
   const {options} = useUser();
+  const chartRef = useRef<ReactEchartsRef | null>(null);
   const hasReleaseBubbles = organization.features.includes('release-bubbles-ui');
+  const handleChartRef = useCallback((e: ReactEchartsRef | null) => {
+    chartRef.current = e;
+
+    if (e?.getEchartsInstance) {
+      createReleaseBubbleHighlighter(e.getEchartsInstance());
+    }
+  }, []);
   const buckets =
     (hasReleaseBubbles &&
       releases?.length &&
@@ -337,7 +344,7 @@ export function useReleaseBubbles({
   }
 
   return {
-    createReleaseBubbleHighlighter,
+    createReleaseBubbleHighlighter: handleChartRef,
 
     /**
      * An object map of ECharts event handlers. These should be spread onto a Chart component

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

@@ -111,7 +111,6 @@ export function TimeSeriesWidgetVisualization(props: TimeSeriesWidgetVisualizati
     releaseBubbleXAxis,
     releaseBubbleGrid,
   } = useReleaseBubbles({
-    chartRef,
     chartRenderer: ({start: trimStart, end: trimEnd}) => {
       return (
         <TimeSeriesWidgetVisualization
@@ -162,7 +161,7 @@ export function TimeSeriesWidgetVisualization(props: TimeSeriesWidgetVisualizati
       registerWithWidgetSyncContext(echartsInstance);
 
       if (hasReleaseBubblesSeries) {
-        createReleaseBubbleHighlighter(echartsInstance);
+        createReleaseBubbleHighlighter(e);
       }
     },
     [

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

@@ -25,7 +25,9 @@ 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 {useReleaseBubbles} from 'sentry/views/dashboards/widgets/timeSeriesWidget/releaseBubbles/useReleaseBubbles';
 import {useIssueDetails} from 'sentry/views/issueDetails/streamline/context';
 import {useCurrentEventMarklineSeries} from 'sentry/views/issueDetails/streamline/hooks/useEventMarkLineSeries';
 import useFlagSeries from 'sentry/views/issueDetails/streamline/hooks/useFlagSeries';
@@ -79,6 +81,7 @@ export function EventGraph({group, event, ...styleProps}: EventGraphProps) {
   const config = getConfigForIssueType(group, group.project);
   const {dispatch} = useIssueDetails();
   const {currentTab} = useGroupDetailsRoute();
+  const hasReleaseBubblesSeries = organization.features.includes('release-bubbles-ui');
 
   const {
     data: groupStats = {},
@@ -176,7 +179,43 @@ export function EventGraph({group, event, ...styleProps}: EventGraphProps) {
     event,
     group,
   });
-  const releaseSeries = useReleaseMarkLineSeries({group});
+
+  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 ? [] : releases,
+  });
+
+  const {
+    createReleaseBubbleHighlighter,
+    releaseBubbleEventHandlers,
+    releaseBubbleSeries,
+    releaseBubbleXAxis,
+    releaseBubbleGrid,
+  } = useReleaseBubbles({
+    minTime: eventSeries.length && (eventSeries[0]!.name as number),
+    maxTime: eventSeries.length && (eventSeries[eventSeries.length - 1]!.name as number),
+    bubbleSize: 4,
+    bubblePadding: {
+      x: 1,
+      y: 2,
+    },
+    releases,
+  });
   const flagSeries = useFlagSeries({
     query: {
       start: eventView.start,
@@ -249,7 +288,7 @@ export function EventGraph({group, event, ...styleProps}: EventGraphProps) {
       seriesData.push(currentEventSeries as BarChartSeries);
     }
 
-    if (releaseSeries.markLine) {
+    if (releaseSeries?.markLine) {
       seriesData.push(releaseSeries as BarChartSeries);
     }
 
@@ -363,8 +402,11 @@ export function EventGraph({group, event, ...styleProps}: EventGraphProps) {
       </SummaryContainer>
       <ChartContainer role="figure">
         <BarChart
+          {...releaseBubbleEventHandlers}
+          ref={createReleaseBubbleHighlighter}
           height={100}
           series={series}
+          additionalSeries={releaseBubbleSeries ? [releaseBubbleSeries] : []}
           legend={legend}
           onLegendSelectChanged={onLegendSelectChanged}
           showTimeInTooltip
@@ -373,6 +415,7 @@ export function EventGraph({group, event, ...styleProps}: EventGraphProps) {
             right: 8,
             top: 20,
             bottom: 0,
+            ...releaseBubbleGrid,
           }}
           tooltip={{
             formatAxisLabel: (
@@ -404,6 +447,9 @@ export function EventGraph({group, event, ...styleProps}: EventGraphProps) {
               },
             },
           }}
+          xAxis={{
+            ...releaseBubbleXAxis,
+          }}
           {...chartZoomProps}
         />
       </ChartContainer>

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,