ref(platform-insights): Make duration chart loadable (#92094)

Make the duration chart loadable in the releases drawer.

- part of [TET-379: Make widgets re-usable in releases
drawer](https://linear.app/getsentry/issue/TET-379/make-widgets-re-usable-in-releases-drawer)

Author: ArthurKnaus

static/app/components/charts/chartWidgetLoader-unmocked-imports.spec.tsx

@@ -2,6 +2,7 @@
 import fs from 'node:fs';
 // eslint-disable-next-line import/no-nodejs-modules
 import path from 'node:path';
+import {TimeSeriesFixture} from 'sentry-fixture/discoverSeries';
 
 import {render, screen, waitFor} from 'sentry-test/reactTestingLibrary';
 
@@ -10,6 +11,12 @@ import {TimeSeriesWidgetVisualization} from 'sentry/views/dashboards/widgets/tim
 import type {ChartId} from './chartWidgetLoader';
 import {ChartWidgetLoader} from './chartWidgetLoader';
 
+function mockDiscoverSeries(seriesName: string) {
+  return TimeSeriesFixture({
+    seriesName,
+  });
+}
+
 // Mock this component so it doesn't yell at us for no plottables
 jest.mock(
   'sentry/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization',
@@ -146,6 +153,14 @@ jest.mock(
   })
 );
 jest.mock('sentry/views/insights/common/queries/useDiscoverSeries', () => ({
+  useEAPSeries: jest.fn(() => ({
+    data: {
+      'avg(span.duration)': mockDiscoverSeries('avg(span.duration)'),
+      'p95(span.duration)': mockDiscoverSeries('p95(span.duration)'),
+    },
+    isPending: false,
+    error: null,
+  })),
   useMetricsSeries: jest.fn(() => ({
     data: {
       'performance_score(measurements.score.lcp)': {

static/app/components/charts/chartWidgetLoader.tsx

@@ -155,6 +155,10 @@ const CHART_MAP = {
     import(
       'sentry/views/insights/common/components/widgets/httpDomainSummaryDurationChartWidget'
     ),
+  overviewApiLatencyChartWidget: () =>
+    import(
+      'sentry/views/insights/common/components/widgets/overviewApiLatencyChartWidget'
+    ),
 } satisfies Record<string, () => Promise<{default: React.FC<LoadableChartWidgetProps>}>>;
 
 /**

static/app/views/insights/pages/platform/shared/durationWidget.tsx renamed to static/app/views/insights/common/components/widgets/overviewApiLatencyChartWidget.tsx

@@ -8,6 +8,7 @@ import {TimeSeriesWidgetVisualization} from 'sentry/views/dashboards/widgets/tim
 import {Widget} from 'sentry/views/dashboards/widgets/widget/widget';
 import {Mode} from 'sentry/views/explore/contexts/pageParamsContext/mode';
 import {ChartType} from 'sentry/views/insights/common/components/chart';
+import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
 import {useEAPSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
 import {convertSeriesToTimeseries} from 'sentry/views/insights/common/utils/convertSeriesToTimeseries';
 import {Referrer} from 'sentry/views/insights/pages/platform/laravel/referrers';
@@ -18,11 +19,13 @@ import {ModalChartContainer} from 'sentry/views/insights/pages/platform/shared/s
 import {Toolbar} from 'sentry/views/insights/pages/platform/shared/toolbar';
 import {useTransactionNameQuery} from 'sentry/views/insights/pages/platform/shared/useTransactionNameQuery';
 
-export function DurationWidget() {
+export default function OverviewApiLatencyChartWidget(props: LoadableChartWidgetProps) {
   const organization = useOrganization();
   const {query} = useTransactionNameQuery();
-  const pageFilterChartParams = usePageFilterChartParams();
-  const releaseBubbleProps = useReleaseBubbleProps();
+  const pageFilterChartParams = usePageFilterChartParams({
+    pageFilters: props.pageFilters,
+  });
+  const releaseBubbleProps = useReleaseBubbleProps(props);
 
   const fullQuery = `span.op:http.server ${query}`.trim();
 
@@ -33,7 +36,8 @@ export function DurationWidget() {
       yAxis: ['avg(span.duration)', 'p95(span.duration)'],
       referrer: Referrer.DURATION_CHART,
     },
-    Referrer.DURATION_CHART
+    Referrer.DURATION_CHART,
+    props.pageFilters
   );
 
   const plottables = useMemo(() => {
@@ -52,6 +56,7 @@ export function DurationWidget() {
       isEmpty={isEmpty}
       VisualizationType={TimeSeriesWidgetVisualization}
       visualizationProps={{
+        id: 'overviewApiLatencyChartWidget',
         plottables,
         ...releaseBubbleProps,
       }}

static/app/views/insights/common/queries/useDiscoverSeries.ts

@@ -66,9 +66,15 @@ export const useEAPSeries = <
     | string[],
 >(
   options: UseMetricsSeriesOptions<Fields> = {},
-  referrer: string
+  referrer: string,
+  pageFilters?: PageFilters
 ) => {
-  return useDiscoverSeries<Fields>(options, DiscoverDatasets.SPANS_EAP_RPC, referrer);
+  return useDiscoverSeries<Fields>(
+    options,
+    DiscoverDatasets.SPANS_EAP_RPC,
+    referrer,
+    pageFilters
+  );
 };
 
 export const useMetricsSeries = <Fields extends MetricsProperty[]>(

static/app/views/insights/pages/backend/backendOverviewPage.tsx

@@ -25,6 +25,7 @@ import {limitMaxPickableDays} from 'sentry/views/explore/utils';
 import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLayout';
 import {ToolRibbon} from 'sentry/views/insights/common/components/ribbon';
 import {STARRED_SEGMENT_TABLE_QUERY_KEY} from 'sentry/views/insights/common/components/tableCells/starredSegmentCell';
+import OverviewApiLatencyChartWidget from 'sentry/views/insights/common/components/widgets/overviewApiLatencyChartWidget';
 import {useEAPSpans} from 'sentry/views/insights/common/queries/useDiscover';
 import {useOnboardingProject} from 'sentry/views/insights/common/queries/useOnboardingProject';
 import {useInsightsEap} from 'sentry/views/insights/common/utils/useEap';
@@ -56,7 +57,6 @@ import {
   useIsNextJsInsightsEnabled,
 } from 'sentry/views/insights/pages/platform/nextjs/features';
 import {NewNextJsExperienceButton} from 'sentry/views/insights/pages/platform/nextjs/newNextjsExperienceToggle';
-import {DurationWidget} from 'sentry/views/insights/pages/platform/shared/durationWidget';
 import {IssuesWidget} from 'sentry/views/insights/pages/platform/shared/issuesWidget';
 import {TrafficWidget} from 'sentry/views/insights/pages/platform/shared/trafficWidget';
 import {TransactionNameSearchBar} from 'sentry/views/insights/pages/transactionNameSearchBar';
@@ -243,7 +243,7 @@ function EAPBackendOverviewPage() {
                       trafficSeriesName={t('Requests')}
                       baseQuery={'span.op:http.server'}
                     />
-                    <DurationWidget />
+                    <OverviewApiLatencyChartWidget />
                   </StackedWidgetWrapper>
                 </ModuleLayout.Third>
                 <ModuleLayout.TwoThirds>

static/app/views/insights/pages/platform/laravel/index.tsx

@@ -3,10 +3,10 @@ import {useEffect} from 'react';
 import {t} from 'sentry/locale';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import useOrganization from 'sentry/utils/useOrganization';
+import OverviewApiLatencyChartWidget from 'sentry/views/insights/common/components/widgets/overviewApiLatencyChartWidget';
 import {CachesWidget} from 'sentry/views/insights/pages/platform/laravel/cachesWidget';
 import {JobsWidget} from 'sentry/views/insights/pages/platform/laravel/jobsWidget';
 import {QueriesWidget} from 'sentry/views/insights/pages/platform/laravel/queriesWidget';
-import {DurationWidget} from 'sentry/views/insights/pages/platform/shared/durationWidget';
 import {IssuesWidget} from 'sentry/views/insights/pages/platform/shared/issuesWidget';
 import {PlatformLandingPageLayout} from 'sentry/views/insights/pages/platform/shared/layout';
 import {PathsTable} from 'sentry/views/insights/pages/platform/shared/pathsTable';
@@ -34,7 +34,7 @@ export function LaravelOverviewPage() {
           />
         </WidgetGrid.Position1>
         <WidgetGrid.Position2>
-          <DurationWidget />
+          <OverviewApiLatencyChartWidget />
         </WidgetGrid.Position2>
         <WidgetGrid.Position3>
           <IssuesWidget />

static/app/views/insights/pages/platform/laravel/utils.tsx

@@ -2,14 +2,18 @@ import {useMemo} from 'react';
 
 import {type Fidelity, getInterval} from 'sentry/components/charts/utils';
 import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilters/parse';
+import type {PageFilters} from 'sentry/types/core';
 import usePageFilters from 'sentry/utils/usePageFilters';
 
 export function usePageFilterChartParams({
   granularity = 'spans',
+  pageFilters,
 }: {
   granularity?: Fidelity;
+  pageFilters?: PageFilters;
 } = {}) {
-  const {selection} = usePageFilters();
+  const pageFilterContext = usePageFilters();
+  const selection = pageFilters || pageFilterContext.selection;
 
   const normalizedDateTime = useMemo(
     () => normalizeDateTimeParams(selection.datetime),

static/app/views/insights/pages/platform/nextjs/index.tsx

@@ -8,10 +8,10 @@ import {trackAnalytics} from 'sentry/utils/analytics';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
+import OverviewApiLatencyChartWidget from 'sentry/views/insights/common/components/widgets/overviewApiLatencyChartWidget';
 import {DeadRageClicksWidget} from 'sentry/views/insights/pages/platform/nextjs/deadRageClickWidget';
 import SSRTreeWidget from 'sentry/views/insights/pages/platform/nextjs/ssrTreeWidget';
 import {WebVitalsWidget} from 'sentry/views/insights/pages/platform/nextjs/webVitalsWidget';
-import {DurationWidget} from 'sentry/views/insights/pages/platform/shared/durationWidget';
 import {IssuesWidget} from 'sentry/views/insights/pages/platform/shared/issuesWidget';
 import {PlatformLandingPageLayout} from 'sentry/views/insights/pages/platform/shared/layout';
 import {PagesTable} from 'sentry/views/insights/pages/platform/shared/pagesTable';
@@ -97,7 +97,7 @@ export function NextJsOverviewPage({
           />
         </WidgetGrid.Position1>
         <WidgetGrid.Position2>
-          <DurationWidget />
+          <OverviewApiLatencyChartWidget />
         </WidgetGrid.Position2>
         <WidgetGrid.Position3>
           <IssuesWidget />

static/app/views/insights/pages/platform/shared/getReleaseBubbleProps.tsx

@@ -1,8 +1,11 @@
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import {useReleaseStats} from 'sentry/utils/useReleaseStats';
+import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
 
-export function useReleaseBubbleProps() {
+type Params = Pick<LoadableChartWidgetProps, 'showReleaseAs'>;
+
+export function useReleaseBubbleProps(params?: Params) {
   const organization = useOrganization();
   const pageFilters = usePageFilters();
 
@@ -14,6 +17,6 @@ export function useReleaseBubbleProps() {
     })) ?? [];
 
   return organization.features.includes('release-bubbles-ui')
-    ? ({releases, showReleaseAs: 'bubble'} as const)
+    ? ({releases, showReleaseAs: params?.showReleaseAs ?? 'bubble'} as const)
     : {};
 }

tests/js/fixtures/discoverSeries.ts

@@ -0,0 +1,30 @@
+import type {DiscoverSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
+
+export function TimeSeriesFixture(params: Partial<DiscoverSeries> = {}): DiscoverSeries {
+  return {
+    seriesName: 'avg(span.duration)',
+    data: [
+      {
+        name: '2025-03-24T15:00:00-04:00',
+        value: 100,
+      },
+      {
+        name: '2025-03-24T15:30:00-04:00',
+        value: 161,
+      },
+      {
+        name: '2025-03-24T16:00:00-04:00',
+        value: 474,
+      },
+    ],
+    meta: {
+      fields: {
+        'avg(span.duration)': 'duration',
+      },
+      units: {
+        'avg(span.duration)': 'ms',
+      },
+    },
+    ...params,
+  };
+}