Revert "remove chartRenderer for now"

This reverts commit 9f6c709eb3d571e4b3190938df142fe6bc0a2467.

Author: billyvg

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

@@ -130,6 +130,22 @@ export function TimeSeriesWidgetVisualization(props: TimeSeriesWidgetVisualizati
     releaseBubbleXAxis,
     releaseBubbleGrid,
   } = useReleaseBubbles({
+    chartRenderer: ({start: trimStart, end: trimEnd, ref: chartRendererRef}) => {
+      return (
+        <DrawerWidgetWrapper>
+          <TimeSeriesWidgetVisualization
+            {...props}
+            ref={chartRendererRef}
+            disableReleaseNavigation
+            onZoom={() => {}}
+            plottables={props.plottables.map(plottable =>
+              plottable.constrain(trimStart, trimEnd)
+            )}
+            showReleaseAs="line"
+          />
+        </DrawerWidgetWrapper>
+      );
+    },
     minTime: earliestTimeStamp ? new Date(earliestTimeStamp).getTime() : undefined,
     maxTime: latestTimeStamp ? new Date(latestTimeStamp).getTime() : undefined,
     releases: hasReleaseBubbles
@@ -653,4 +669,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

@@ -277,6 +277,19 @@ export function EventGraph({
     releaseBubbleXAxis,
     releaseBubbleGrid,
   } = useReleaseBubbles({
+    chartRenderer: ({ref: chartRef}) => {
+      return (
+        <EventGraph
+          ref={chartRef}
+          group={group}
+          event={event}
+          showSummary={false}
+          showReleasesAs="line"
+          disableZoomNavigation
+          {...styleProps}
+        />
+      );
+    },
     alignInMiddle: true,
     legendSelected: legendSelected.Releases,
     desiredBuckets: eventSeries.length,

static/app/views/releases/drawer/releasesDrawerList.tsx

@@ -1,8 +1,10 @@
-import {useCallback, useRef} from 'react';
+import {Fragment, type ReactElement, useCallback, useRef} from 'react';
+import styled from '@emotion/styled';
 import type {SeriesOption} from 'echarts';
 import type {MarkLineOption} from 'echarts/types/dist/shared';
 import type {EChartsInstance} from 'echarts-for-react';
 
+import {DateTime} from 'sentry/components/dateTime';
 import {
   EventDrawerBody,
   EventDrawerContainer,
@@ -12,10 +14,16 @@ import {
   NavigationCrumbs,
 } from 'sentry/components/events/eventDrawer';
 import {t, tn} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
 import type {ReactEchartsRef, SeriesDataUnit} from 'sentry/types/echarts';
+import type {ReleaseMetaBasic} from 'sentry/types/release';
+import {useLocation} from 'sentry/utils/useLocation';
+import {useNavigate} from 'sentry/utils/useNavigate';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import {useReleaseStats} from 'sentry/utils/useReleaseStats';
 import {formatVersion} from 'sentry/utils/versions/formatVersion';
+import {Widget} from 'sentry/views/dashboards/widgets/widget/widget';
+import type {ChartRendererProps} from 'sentry/views/releases/releaseBubbles/types';
 
 import {ReleaseDrawerTable} from './releasesDrawerTable';
 
@@ -24,6 +32,14 @@ interface ReleasesDrawerListProps {
   environments: readonly string[];
   projects: readonly number[];
   startTs: number;
+  /**
+   * A renderer function that returns a chart. It is called with the trimmed
+   * list of releases and timeSeries. It currently uses the
+   * `TimeSeriesWidgetVisualization` components props. It's possible we change
+   * it to make the props more generic, e.g. pass start/end timestamps and do
+   * the series manipulation when we call the bubble hook.
+   */
+  chartRenderer?: (rendererProps: ChartRendererProps) => ReactElement;
 }
 
 type MarkLineDataCallbackFn = (item: SeriesDataUnit) => boolean;
@@ -82,9 +98,12 @@ const unhighlightMarkLines = createMarkLineUpdater({});
 export function ReleasesDrawerList({
   startTs,
   endTs,
+  chartRenderer,
   projects,
   environments,
 }: ReleasesDrawerListProps) {
+  const location = useLocation();
+  const navigate = useNavigate();
   const start = new Date(startTs);
   const end = new Date(endTs);
   const pageFilters = usePageFilters();
@@ -95,6 +114,18 @@ export function ReleasesDrawerList({
       end: endTs ? new Date(endTs).toISOString() : null,
     },
   });
+  const handleSelectRelease = useCallback(
+    (nextSelectedRelease: string, projectId: string) => {
+      navigate({
+        query: {
+          ...location.query,
+          release: nextSelectedRelease,
+          projectId,
+        },
+      });
+    },
+    [navigate, location.query]
+  );
   const chartRef = useRef<ReactEchartsRef | null>(null);
 
   const handleMouseOverRelease = useCallback((release: string) => {
@@ -137,6 +168,42 @@ export function ReleasesDrawerList({
         <Header>{title}</Header>
       </EventNavigator>
       <EventDrawerBody>
+        {chartRenderer ? (
+          <ChartContainer>
+            <Widget
+              Title={
+                <Fragment>
+                  {t('Releases from ')}
+                  <DateTime date={start} /> <span>{t('to')}</span> <DateTime date={end} />
+                </Fragment>
+              }
+              Visualization={chartRenderer?.({
+                ref: (e: ReactEchartsRef | null) => {
+                  chartRef.current = e;
+
+                  if (e) {
+                    // When chart is mounted, zoom the chart into the relevant
+                    // bucket
+                    e.getEchartsInstance().dispatchAction({
+                      type: 'dataZoom',
+                      batch: [
+                        {
+                          // data value at starting location
+                          startValue: startTs,
+                          // data value at ending location
+                          endValue: endTs,
+                        },
+                      ],
+                    });
+                  }
+                },
+                releases,
+                start,
+                end,
+              })}
+            />
+          </ChartContainer>
+        ) : null}
         <ReleaseDrawerTable
           projects={projects}
           environments={environments}
@@ -149,3 +216,7 @@ export function ReleasesDrawerList({
     </EventDrawerContainer>
   );
 }
+
+const ChartContainer = styled('div')`
+  margin-bottom: ${space(2)};
+`;

static/app/views/releases/releaseBubbles/useReleaseBubbles.tsx

@@ -1,4 +1,4 @@
-import {useCallback, useMemo, useRef} from 'react';
+import {type ReactElement, useMemo, useRef} from 'react';
 import {type Theme, useTheme} from '@emotion/react';
 import type {
   CustomSeriesOption,
@@ -256,6 +256,11 @@ interface UseReleaseBubblesParams {
    * The size (height) of the bubble
    */
   bubbleSize?: number;
+  /**
+   * This is a callback function that is used in ReleasesDrawer when rendering
+   * the chart inside of the drawer.
+   */
+  chartRenderer?: (rendererProps: ChartRendererProps) => ReactElement;
   datetime?: Parameters<typeof normalizeDateTimeParams>[0];
   /**
    * Number of desired bubbles/buckets to create
@@ -280,6 +285,7 @@ interface UseReleaseBubblesParams {
 }
 
 export function useReleaseBubbles({
+  chartRenderer,
   releases,
   minTime,
   maxTime,
@@ -592,9 +598,9 @@ export function useReleaseBubbles({
   return {
     connectReleaseBubbleChartRef: handleChartRef,
 
-    /**
-     * Series to append to a chart's existing `series`
-     */
+    //
+    // Series to append to a chart's existing `series`
+    //
     releaseBubbleSeries: ReleaseBubbleSeries({
       alignInMiddle,
       buckets,