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 MutableRefObject, type ReactElement, useCallback, useRef} from 'react';
 import {type Theme, useTheme} from '@emotion/react';
 import type {
   CustomSeriesOption,
@@ -43,6 +43,9 @@ interface CreateReleaseBubbleMouseListenersParams {
     options: DrawerConfig['options']
   ) => void;
   chartRenderer?: (rendererProps: {
+    chartRef:
+      | MutableRefObject<ReactEchartsRef | null>
+      | ((e: ReactEchartsRef | null) => void);
     end: Date;
     releases: ReleaseMetaBasic[];
     start: Date;
@@ -322,10 +325,12 @@ ${t('Click to expand')}
 }
 
 interface UseReleaseBubblesParams {
-  chartRef: React.RefObject<ReactEchartsRef | null>;
   bubblePadding?: number;
   bubbleSize?: number;
   chartRenderer?: (rendererProps: {
+    chartRef:
+      | MutableRefObject<ReactEchartsRef | null>
+      | ((e: ReactEchartsRef | null) => void);
     end: Date;
     releases: ReleaseMetaBasic[];
     start: Date;
@@ -335,7 +340,6 @@ interface UseReleaseBubblesParams {
   releases?: ReleaseMetaBasic[];
 }
 export function useReleaseBubbles({
-  chartRef,
   chartRenderer,
   releases,
   minTime,
@@ -355,7 +359,16 @@ export function useReleaseBubbles({
   const releasesMaxTime = defined(selection.datetime.end)
     ? new Date(selection.datetime.end).getTime()
     : Date.now();
+  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 &&
@@ -377,7 +390,7 @@ export function useReleaseBubbles({
   const totalBubblePaddingY = bubblePadding * 2;
 
   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

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