feat(tracemetrics): Add progressive loading to metrics page

static/app/views/explore/hooks/useExploreTimeseries.tsx

@@ -124,7 +124,7 @@ function useExploreTimeseriesImpl({
   };
 }
 
-function shouldTriggerHighAccuracy(
+export function shouldTriggerHighAccuracy(
   data: ReturnType<typeof useSortedTimeSeries>['data'],
   visualizes: readonly Visualize[],
   isTopN: boolean

static/app/views/explore/metrics/hooks/testUtils.tsx

@@ -0,0 +1,27 @@
+import type {ReactNode} from 'react';
+
+import {useLocation} from 'sentry/utils/useLocation';
+import useOrganization from 'sentry/utils/useOrganization';
+import {QueryParamsContextProvider} from 'sentry/views/explore/queryParams/context';
+import {getReadableQueryParamsFromLocation} from 'sentry/views/explore/spans/spansQueryParams';
+
+export function MockQueryParamsContextWrapper({
+  children,
+}: {
+  children: ReactNode;
+  extrapolate?: boolean;
+}) {
+  const location = useLocation();
+  const organization = useOrganization();
+  const queryParams = getReadableQueryParamsFromLocation(location, organization);
+  return (
+    <QueryParamsContextProvider
+      queryParams={queryParams}
+      setQueryParams={() => {}}
+      isUsingDefaultFields
+      shouldManageFields={false}
+    >
+      {children}
+    </QueryParamsContextProvider>
+  );
+}

static/app/views/explore/metrics/hooks/useMetricAggregatesTable.spec.tsx

@@ -0,0 +1,124 @@
+import {PageFilterStateFixture} from 'sentry-fixture/pageFilters';
+
+import {renderHookWithProviders, waitFor} from 'sentry-test/reactTestingLibrary';
+
+import usePageFilters from 'sentry/utils/usePageFilters';
+import {SAMPLING_MODE} from 'sentry/views/explore/hooks/useProgressiveQuery';
+import {MockQueryParamsContextWrapper} from 'sentry/views/explore/metrics/hooks/testUtils';
+import {useMetricAggregatesTable} from 'sentry/views/explore/metrics/hooks/useMetricAggregatesTable';
+
+jest.mock('sentry/utils/usePageFilters');
+
+describe('useMetricAggregatesTable', () => {
+  beforeEach(() => {
+    jest.mocked(usePageFilters).mockReturnValue(PageFilterStateFixture());
+    jest.clearAllMocks();
+  });
+
+  it('triggers the high accuracy request when there is no data and a partial scan', async () => {
+    const mockNormalRequestUrl = MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/events/',
+      body: {
+        data: [],
+        meta: {
+          dataScanned: 'partial',
+          fields: {},
+        },
+      },
+      method: 'GET',
+      match: [
+        function (_url: string, options: Record<string, any>) {
+          return options.query.sampling === SAMPLING_MODE.NORMAL;
+        },
+      ],
+    });
+    const mockHighAccuracyRequest = MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/events/',
+      match: [
+        function (_url: string, options: Record<string, any>) {
+          return options.query.sampling === SAMPLING_MODE.HIGH_ACCURACY;
+        },
+      ],
+      method: 'GET',
+    });
+    renderHookWithProviders(
+      () =>
+        useMetricAggregatesTable({
+          metricName: 'test metric',
+          limit: 100,
+          enabled: true,
+        }),
+      {
+        additionalWrapper: MockQueryParamsContextWrapper,
+      }
+    );
+
+    expect(mockNormalRequestUrl).toHaveBeenCalledTimes(1);
+    expect(mockNormalRequestUrl).toHaveBeenCalledWith(
+      '/organizations/org-slug/events/',
+      expect.objectContaining({
+        query: expect.objectContaining({
+          sampling: SAMPLING_MODE.NORMAL,
+        }),
+      })
+    );
+
+    await waitFor(() => {
+      expect(mockHighAccuracyRequest).toHaveBeenCalledTimes(1);
+    });
+    expect(mockHighAccuracyRequest).toHaveBeenCalledWith(
+      '/organizations/org-slug/events/',
+      expect.objectContaining({
+        query: expect.objectContaining({
+          sampling: SAMPLING_MODE.HIGH_ACCURACY,
+        }),
+      })
+    );
+  });
+
+  it('disables extrapolation', async () => {
+    const mockNonExtrapolatedRequest = MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/events/',
+      match: [
+        function (_url: string, options: Record<string, any>) {
+          return (
+            options.query.sampling === SAMPLING_MODE.HIGH_ACCURACY &&
+            options.query.disableAggregateExtrapolation === '1'
+          );
+        },
+      ],
+      method: 'GET',
+    });
+
+    renderHookWithProviders(
+      () =>
+        useMetricAggregatesTable({
+          metricName: 'test metric',
+          limit: 100,
+          enabled: true,
+        }),
+      {
+        additionalWrapper: MockQueryParamsContextWrapper,
+        initialRouterConfig: {
+          location: {
+            pathname: '/organizations/org-slug/explore/metrics/',
+            query: {
+              extrapolate: '0',
+            },
+          },
+        },
+      }
+    );
+
+    await waitFor(() => expect(mockNonExtrapolatedRequest).toHaveBeenCalledTimes(1));
+    expect(mockNonExtrapolatedRequest).toHaveBeenCalledWith(
+      '/organizations/org-slug/events/',
+      expect.objectContaining({
+        query: expect.objectContaining({
+          disableAggregateExtrapolation: '1',
+          sampling: SAMPLING_MODE.HIGH_ACCURACY,
+        }),
+      })
+    );
+  });
+});

static/app/views/explore/metrics/hooks/useMetricAggregatesTable.tsx

@@ -1,14 +1,20 @@
-import {useMemo} from 'react';
+import {useCallback, useMemo} from 'react';
 
 import type {NewQuery} from 'sentry/types/organization';
+import {defined} from 'sentry/utils';
 import EventView from 'sentry/utils/discover/eventView';
 import {DiscoverDatasets} from 'sentry/utils/discover/types';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import {formatSort} from 'sentry/views/explore/contexts/pageParamsContext/sortBys';
+import {
+  useProgressiveQuery,
+  type RPCQueryExtras,
+} from 'sentry/views/explore/hooks/useProgressiveQuery';
 import {useMetricVisualize} from 'sentry/views/explore/metrics/metricsQueryParams';
 import {
   useQueryParamsAggregateSortBys,
+  useQueryParamsExtrapolate,
   useQueryParamsGroupBys,
   useQueryParamsSearch,
 } from 'sentry/views/explore/queryParams/context';
@@ -18,6 +24,7 @@ interface UseMetricAggregatesTableOptions {
   enabled: boolean;
   limit: number;
   metricName: string;
+  queryExtras?: RPCQueryExtras;
 }
 
 interface MetricAggregatesTableResult {
@@ -30,14 +37,32 @@ export function useMetricAggregatesTable({
   enabled,
   limit,
   metricName,
+  queryExtras,
 }: UseMetricAggregatesTableOptions) {
-  return useMetricAggregatesTableImp({enabled, limit, metricName});
+  const extrapolate = useQueryParamsExtrapolate();
+  const canTriggerHighAccuracy = useCallback(
+    (result: ReturnType<typeof useMetricAggregatesTableImp>['result']) => {
+      const canGoToHigherAccuracyTier = result.meta?.dataScanned === 'partial';
+      const hasData = defined(result.data) && result.data.length > 0;
+      return !hasData && canGoToHigherAccuracyTier;
+    },
+    []
+  );
+  return useProgressiveQuery<typeof useMetricAggregatesTableImp>({
+    queryHookImplementation: useMetricAggregatesTableImp,
+    queryHookArgs: {enabled, limit, metricName, queryExtras},
+    queryOptions: {
+      canTriggerHighAccuracy,
+      disableExtrapolation: !extrapolate,
+    },
+  });
 }
 
 function useMetricAggregatesTableImp({
   enabled,
   limit,
   metricName,
+  queryExtras,
 }: UseMetricAggregatesTableOptions): MetricAggregatesTableResult {
   const {selection} = usePageFilters();
   const visualize = useMetricVisualize();
@@ -92,6 +117,7 @@ function useMetricAggregatesTableImp({
     limit,
     referrer: 'api.explore.metric-aggregates-table',
     trackResponseAnalytics: false,
+    queryExtras,
   });
 
   return useMemo(() => {

static/app/views/explore/metrics/hooks/useMetricSamplesTable.spec.tsx

@@ -0,0 +1,127 @@
+import {PageFilterStateFixture} from 'sentry-fixture/pageFilters';
+
+import {renderHookWithProviders, waitFor} from 'sentry-test/reactTestingLibrary';
+
+import usePageFilters from 'sentry/utils/usePageFilters';
+import {SAMPLING_MODE} from 'sentry/views/explore/hooks/useProgressiveQuery';
+import {MockQueryParamsContextWrapper} from 'sentry/views/explore/metrics/hooks/testUtils';
+import {useMetricSamplesTable} from 'sentry/views/explore/metrics/hooks/useMetricSamplesTable';
+
+jest.mock('sentry/utils/usePageFilters');
+
+describe('useMetricTimeseries', () => {
+  beforeEach(() => {
+    jest.mocked(usePageFilters).mockReturnValue(PageFilterStateFixture());
+    jest.clearAllMocks();
+  });
+
+  it('triggers the high accuracy request when there is no data and a partial scan', async () => {
+    const mockNormalRequestUrl = MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/events/',
+      body: {
+        data: [],
+        meta: {
+          dataScanned: 'partial',
+          fields: {},
+        },
+      },
+      method: 'GET',
+      match: [
+        function (_url: string, options: Record<string, any>) {
+          return options.query.sampling === SAMPLING_MODE.NORMAL;
+        },
+      ],
+    });
+    const mockHighAccuracyRequest = MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/events/',
+      match: [
+        function (_url: string, options: Record<string, any>) {
+          return options.query.sampling === SAMPLING_MODE.HIGH_ACCURACY;
+        },
+      ],
+      method: 'GET',
+    });
+    renderHookWithProviders(
+      () =>
+        useMetricSamplesTable({
+          metricName: 'test metric',
+          fields: [],
+          limit: 100,
+          ingestionDelaySeconds: 0,
+          enabled: true,
+        }),
+      {
+        additionalWrapper: MockQueryParamsContextWrapper,
+      }
+    );
+
+    expect(mockNormalRequestUrl).toHaveBeenCalledTimes(1);
+    expect(mockNormalRequestUrl).toHaveBeenCalledWith(
+      '/organizations/org-slug/events/',
+      expect.objectContaining({
+        query: expect.objectContaining({
+          sampling: SAMPLING_MODE.NORMAL,
+        }),
+      })
+    );
+
+    await waitFor(() => {
+      expect(mockHighAccuracyRequest).toHaveBeenCalledTimes(1);
+    });
+    expect(mockHighAccuracyRequest).toHaveBeenCalledWith(
+      '/organizations/org-slug/events/',
+      expect.objectContaining({
+        query: expect.objectContaining({
+          sampling: SAMPLING_MODE.HIGH_ACCURACY,
+        }),
+      })
+    );
+  });
+
+  it('disables extrapolation', async () => {
+    const mockNonExtrapolatedRequest = MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/events/',
+      match: [
+        function (_url: string, options: Record<string, any>) {
+          return (
+            options.query.sampling === SAMPLING_MODE.HIGH_ACCURACY &&
+            options.query.disableAggregateExtrapolation === '1'
+          );
+        },
+      ],
+      method: 'GET',
+    });
+
+    renderHookWithProviders(
+      () =>
+        useMetricSamplesTable({
+          metricName: 'test metric',
+          fields: [],
+          limit: 100,
+          enabled: true,
+        }),
+      {
+        additionalWrapper: MockQueryParamsContextWrapper,
+        initialRouterConfig: {
+          location: {
+            pathname: '/organizations/org-slug/explore/metrics/',
+            query: {
+              extrapolate: '0',
+            },
+          },
+        },
+      }
+    );
+
+    await waitFor(() => expect(mockNonExtrapolatedRequest).toHaveBeenCalledTimes(1));
+    expect(mockNonExtrapolatedRequest).toHaveBeenCalledWith(
+      '/organizations/org-slug/events/',
+      expect.objectContaining({
+        query: expect.objectContaining({
+          disableAggregateExtrapolation: '1',
+          sampling: SAMPLING_MODE.HIGH_ACCURACY,
+        }),
+      })
+    );
+  });
+});