ok use context

Author: billyvg

static/app/views/app/index.tsx

@@ -36,6 +36,7 @@ import type {InstallWizardProps} from 'sentry/views/admin/installWizard';
 import {AsyncSDKIntegrationContextProvider} from 'sentry/views/app/asyncSDKIntegrationProvider';
 import LastKnownRouteContextProvider from 'sentry/views/lastKnownRouteContextProvider';
 import {OrganizationContextProvider} from 'sentry/views/organizationContext';
+import {ReleasesDrawerProvider} from 'sentry/views/releases/drawer/releasesDrawerContext';
 import RouteAnalyticsContextProvider from 'sentry/views/routeAnalyticsContextProvider';
 
 type Props = {
@@ -257,13 +258,15 @@ function App({children, params}: Props) {
           {renderOrganizationContextProvider(
             <AsyncSDKIntegrationContextProvider>
               <GlobalFeedbackForm>
-                <GlobalDrawer>
-                  <MainContainer tabIndex={-1} ref={mainContainerRef}>
-                    <GlobalModal onClose={handleModalClose} />
-                    <Indicators className="indicators-container" />
-                    <ErrorBoundary>{renderBody()}</ErrorBoundary>
-                  </MainContainer>
-                </GlobalDrawer>
+                <ReleasesDrawerProvider>
+                  <GlobalDrawer>
+                    <MainContainer tabIndex={-1} ref={mainContainerRef}>
+                      <GlobalModal onClose={handleModalClose} />
+                      <Indicators className="indicators-container" />
+                      <ErrorBoundary>{renderBody()}</ErrorBoundary>
+                    </MainContainer>
+                  </GlobalDrawer>
+                </ReleasesDrawerProvider>
               </GlobalFeedbackForm>
             </AsyncSDKIntegrationContextProvider>
           )}

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

@@ -0,0 +1,35 @@
+import {createContext, type ReactElement, useCallback, useMemo, useRef} from 'react';
+
+import type {ChartRendererProps} from 'sentry/views/releases/releaseBubbles/types';
+
+type ChartRenderer = (props: ChartRendererProps) => ReactElement;
+
+export const ReleasesDrawerContext = createContext<{
+  getChart: (id: string) => ChartRenderer | undefined;
+  registerChart: (id: string, chartRenderer: ChartRenderer) => void;
+}>({
+  getChart: () => undefined,
+  registerChart: () => {},
+});
+
+export function ReleasesDrawerProvider({children}: {children: ReactElement}) {
+  const chartMapRef = useRef(new Map<string, ChartRenderer>());
+
+  const registerChart = useCallback(
+    (id: string, chartRenderer: ChartRenderer) => {
+      console.log('registering chart in provider: ', id);
+      chartMapRef.current.set(id, chartRenderer);
+    },
+    [chartMapRef]
+  );
+  const getChart = useCallback((id: string) => chartMapRef.current.get(id), []);
+  const context = useMemo(
+    () => ({
+      registerChart,
+      getChart,
+    }),
+    [getChart, registerChart]
+  );
+
+  return <ReleasesDrawerContext value={context}>{children}</ReleasesDrawerContext>;
+}

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

@@ -24,10 +24,7 @@ import {Widget} from 'sentry/views/dashboards/widgets/widget/widget';
 import type {ChartRendererProps} from 'sentry/views/releases/releaseBubbles/types';
 
 type ChartRenderer = (props: ChartRendererProps) => ReactElement;
-import {
-  ReleasesDrawerContext,
-  ReleasesDrawerProvider,
-} from 'sentry/views/releases/drawer/releasesDrawerContext';
+import {ReleasesDrawerContext} from 'sentry/views/releases/drawer/releasesDrawerContext';
 
 import {ReleaseDrawerTable} from './releasesDrawerTable';
 
@@ -118,7 +115,7 @@ export function ReleasesDrawerList({
       end: endTs ? new Date(endTs).toISOString() : null,
     },
   });
-  // const {getChart} = useContext(ReleasesDrawerContext);
+  const {getChart} = useContext(ReleasesDrawerContext);
   const chartRef = useRef<ReactEchartsRef | null>(null);
 
   const handleMouseOverRelease = useCallback((release: string) => {
@@ -151,9 +148,8 @@ export function ReleasesDrawerList({
       label: t('Releases'),
     },
   ];
-  const chartRenderer = charts.get(String(location.query.rdChartId));
-  // const chartRenderer = charts[String(location.query.rdChartId)];
-  // const chartRenderer = getChart(String(location.query.rdChartId));
+  // const chartRenderer = charts.get(String(location.query.rdChartId));
+  const chartRenderer = getChart(String(location.query.rdChartId));
 
   return (
     <EventDrawerContainer>

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

@@ -403,8 +403,8 @@ export function useReleaseBubbles({
   const theme = useTheme();
   const {options} = useUser();
   const {selection} = usePageFilters();
-  const {cleanup, charts, registerChart} = useReleasesDrawer();
-  // const {registerChart} = useContext(ReleasesDrawerContext);
+  const {cleanup, charts, registerChart: registerChartHook} = useReleasesDrawer();
+  const {registerChart} = useContext(ReleasesDrawerContext);
   // `maxTime` refers to the max time on x-axis for charts.
   // There may be the need to include releases that are > maxTime (e.g. in the
   // case of relative date selection). This is used for the tooltip to show the