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/types.tsx

@@ -1,6 +1,31 @@
+import type {MutableRefObject} from 'react';
+
+import type {ReactEchartsRef} from 'sentry/types/echarts';
 import type {ReleaseMetaBasic} from 'sentry/types/release';
 
-export type Bucket = {
+export interface ChartRendererProps {
+  /**
+   * This needs to be passed as a `ref` to the chart being rendered. The chart
+   * needs to forward the ref to ECharts component.
+   */
+  chartRef:
+    | MutableRefObject<ReactEchartsRef | null>
+    | ((e: ReactEchartsRef | null) => void);
+  /**
+   * The ending Date object of the release group to render
+   */
+  end: Date;
+  /**
+   * The list of releases in the current release group to render
+   */
+  releases: ReleaseMetaBasic[];
+  /**
+   * The starting Date object of the release group to render
+   */
+  start: Date;
+}
+
+export interface Bucket {
   end: number;
   releases: ReleaseMetaBasic[];
   start: number;
@@ -9,4 +34,4 @@ export type Bucket = {
   // e.g. the max timestamp we show on the x-axis is 3:30, but data at that
   // point represents data from [3:30, now (final)]
   final?: number;
-};
+}

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,
@@ -31,7 +31,10 @@ import {
   BUBBLE_SERIES_ID,
 } from 'sentry/views/dashboards/widgets/timeSeriesWidget/releaseBubbles/constants';
 import {createReleaseBubbleHighlighter} from 'sentry/views/dashboards/widgets/timeSeriesWidget/releaseBubbles/createReleaseBubbleHighlighter';
-import type {Bucket} from 'sentry/views/dashboards/widgets/timeSeriesWidget/releaseBubbles/types';
+import type {
+  Bucket,
+  ChartRendererProps,
+} from 'sentry/views/dashboards/widgets/timeSeriesWidget/releaseBubbles/types';
 import {createReleaseBuckets} from 'sentry/views/dashboards/widgets/timeSeriesWidget/releaseBubbles/utils/createReleaseBuckets';
 import {ReleasesDrawer} from 'sentry/views/releases/drawer/releasesDrawer';
 
@@ -42,11 +45,7 @@ interface CreateReleaseBubbleMouseListenersParams {
     renderer: DrawerConfig['renderer'],
     options: DrawerConfig['options']
   ) => void;
-  chartRenderer?: (rendererProps: {
-    end: Date;
-    releases: ReleaseMetaBasic[];
-    start: Date;
-  }) => ReactElement;
+  chartRenderer?: (rendererProps: ChartRendererProps) => ReactElement;
 }
 
 /**
@@ -322,26 +321,44 @@ ${t('Click to expand')}
 }
 
 interface UseReleaseBubblesParams {
-  chartRef: React.RefObject<ReactEchartsRef | null>;
+  /**
+   * The whitespace around the bubbles.
+   */
   bubblePadding?: number;
+  /**
+   * The size (height) of the bubble
+   */
   bubbleSize?: number;
-  chartRenderer?: (rendererProps: {
-    end: Date;
-    releases: ReleaseMetaBasic[];
-    start: Date;
-  }) => ReactElement;
+  /**
+   * This is a callback function that is used in ReleasesDrawer when rendering
+   * the chart inside of the drawer.
+   */
+  chartRenderer?: (rendererProps: ChartRendererProps) => ReactElement;
+  /**
+   * Number of desired bubbles/buckets to create
+   */
+  desiredBuckets?: number;
+  /**
+   * The maximum/latest timestamp of the chart's timeseries
+   */
   maxTime?: number;
+  /**
+   * The minimum/earliest timestamp of the chart's timeseries
+   */
   minTime?: number;
+  /**
+   * List of releases that will be grouped
+   */
   releases?: ReleaseMetaBasic[];
 }
 export function useReleaseBubbles({
-  chartRef,
   chartRenderer,
   releases,
   minTime,
   maxTime,
   bubbleSize = 4,
   bubblePadding = 2,
+  desiredBuckets = 10,
 }: UseReleaseBubblesParams) {
   const organization = useOrganization();
   const {openDrawer} = useDrawer();
@@ -355,13 +372,28 @@ 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 &&
       minTime &&
       maxTime &&
-      createReleaseBuckets(minTime, maxTime, releasesMaxTime, releases)) ||
+      createReleaseBuckets({
+        minTime,
+        maxTime,
+        finalTime: releasesMaxTime,
+        releases,
+        desiredBuckets,
+      })) ||
     [];
 
   if (!releases || !buckets.length) {
@@ -377,7 +409,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/releaseBubbles/utils/createReleaseBuckets.spec.tsx

@@ -11,13 +11,13 @@ describe('createReleaseBuckets', () => {
   ])(
     'creates correct # of buckets for timeSeries with [min, max] of [%d, %d] and %d desired buckets',
     (minTime, maxTime, desiredBuckets, expectedBuckets) => {
-      const buckets = createReleaseBuckets(
+      const buckets = createReleaseBuckets({
         minTime,
         maxTime,
-        Date.now() + 120391, // Shouldn't affect buckets
-        [],
-        desiredBuckets
-      );
+        finalTime: Date.now() + 120391, // Shouldn't affect buckets
+        releases: [],
+        desiredBuckets,
+      });
       expect(buckets).toHaveLength(expectedBuckets);
     }
   );
@@ -27,7 +27,7 @@ describe('createReleaseBuckets', () => {
     const maxTime = Date.now() + 12 * 1000 + 2235;
     const finalTime = maxTime + 9999;
 
-    const buckets = createReleaseBuckets(minTime, maxTime, finalTime, []);
+    const buckets = createReleaseBuckets({minTime, maxTime, finalTime, releases: []});
     expect(buckets).toEqual([
       {start: 1508208080000, end: 1508208081424, releases: []},
       {start: 1508208081424, end: 1508208082848, releases: []},
@@ -102,7 +102,7 @@ describe('createReleaseBuckets', () => {
       },
     ];
 
-    const buckets = createReleaseBuckets(minTime, maxTime, finalTime, releases);
+    const buckets = createReleaseBuckets({minTime, maxTime, finalTime, releases});
 
     expect(buckets).toEqual([
       {

static/app/views/dashboards/widgets/timeSeriesWidget/releaseBubbles/utils/createReleaseBuckets.tsx

@@ -19,13 +19,21 @@ import type {Bucket} from 'sentry/views/dashboards/widgets/timeSeriesWidget/rele
 //
 // where only the first bucket's starting timestamp is inclusive.
 //
-export function createReleaseBuckets(
-  minTime: number | undefined,
-  maxTime: number | undefined,
-  finalTime: number,
-  releases: ReleaseMetaBasic[],
-  desiredBuckets = 10
-): Bucket[] {
+interface CreateReleaseBucketsParams {
+  finalTime: number;
+  maxTime: number | undefined;
+  minTime: number | undefined;
+  releases: ReleaseMetaBasic[];
+  desiredBuckets?: number;
+}
+
+export function createReleaseBuckets({
+  minTime,
+  maxTime,
+  finalTime,
+  releases,
+  desiredBuckets = 10,
+}: CreateReleaseBucketsParams): Bucket[] {
   const buckets: Bucket[] = [];
 
   if (!minTime || !maxTime) {

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);
       }
     },
     [