feat(starfish): consolidates and reduces the amount of unnecessary calls in span summary (#52235)

Consolidates and reduces the amount of unnecessary calls in span
summary. Also fixes scenarios where ephemeral state changes (especially
to page filter) would cause re-requests.

static/app/views/starfish/queries/useSpanMetrics.tsx

@@ -36,7 +36,7 @@ export const useSpanMetrics = (
     referrer,
   });
 
-  return {...result, data: result?.data[0] ?? {}};
+  return {...result, data: result?.data?.[0] ?? {}};
 };
 
 function getEventView(

static/app/views/starfish/queries/useSpanTransactionMetrics.tsx

@@ -38,6 +38,7 @@ export const useSpanTransactionMetrics = (
     eventView,
     initialData: [],
     enabled: Boolean(span),
+    referrer: _referrer,
   });
 };
 

static/app/views/starfish/queries/useTransactions.tsx

@@ -34,6 +34,9 @@ export function useTransactions(eventIDs: string[], referrer = 'use-transactions
     referrer,
     options: {
       enabled,
+      refetchOnWindowFocus: false,
+      retry: false,
+      staleTime: Infinity,
     },
   });
   const data = (response.data?.data ?? []) as unknown as Transaction[];

static/app/views/starfish/utils/useSpansQuery.tsx

@@ -12,6 +12,7 @@ import {
 } from 'sentry/utils/discover/genericDiscoverQuery';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
+import usePageFilters from 'sentry/utils/usePageFilters';
 import {TrackResponse} from 'sentry/views/starfish/utils/trackResponse';
 
 export const DATE_FORMAT = 'YYYY-MM-DDTHH:mm:ssZ';
@@ -36,12 +37,15 @@ export function useSpansQuery<T = any[]>({
     ? useWrappedDiscoverTimeseriesQuery
     : useWrappedDiscoverQuery;
 
+  const {isReady: pageFiltersReady} = usePageFilters();
+
   if (eventView) {
     const response = queryFunction<T>({
       eventView,
       initialData,
       limit,
-      enabled,
+      // We always want to wait until the pageFilters are ready to prevent clobbering requests
+      enabled: (enabled || enabled === undefined) && pageFiltersReady,
       referrer,
       cursor,
     });
@@ -93,6 +97,8 @@ export function useWrappedDiscoverTimeseriesQuery<T>({
     options: {
       enabled,
       refetchOnWindowFocus: false,
+      retry: false,
+      staleTime: Infinity,
     },
     referrer,
   });
@@ -136,6 +142,8 @@ export function useWrappedDiscoverQuery<T>({
     options: {
       enabled,
       refetchOnWindowFocus: false,
+      retry: false,
+      staleTime: Infinity,
     },
   });
 

static/app/views/starfish/views/spanSummaryPage/index.tsx

@@ -26,8 +26,8 @@ import {SpanDescription} from 'sentry/views/starfish/components/spanDescription'
 import DurationCell from 'sentry/views/starfish/components/tableCells/durationCell';
 import ThroughputCell from 'sentry/views/starfish/components/tableCells/throughputCell';
 import {TimeSpentCell} from 'sentry/views/starfish/components/tableCells/timeSpentCell';
-import {SpanMeta, useSpanMeta} from 'sentry/views/starfish/queries/useSpanMeta';
-import {useSpanMetrics} from 'sentry/views/starfish/queries/useSpanMetrics';
+import {SpanMeta} from 'sentry/views/starfish/queries/useSpanMeta';
+import {SpanMetrics, useSpanMetrics} from 'sentry/views/starfish/queries/useSpanMetrics';
 import {useSpanMetricsSeries} from 'sentry/views/starfish/queries/useSpanMetricsSeries';
 import {SpanMetricsFields} from 'sentry/views/starfish/types';
 import formatThroughput from 'sentry/views/starfish/utils/chartValueFormatters/formatThroughput';
@@ -66,23 +66,15 @@ function SpanSummaryPage({params, location}: Props) {
     queryFilter['transaction.method'] = endpointMethod;
   }
 
-  const {data: spanMetas, isLoading: isSpanMetaLoading} = useSpanMeta(
-    groupId,
-    queryFilter,
-    'span-summary-page-span-meta'
-  );
-  // TODO: Span meta might in theory return more than one row! In that case, we
-  // need to indicate in the UI that more than one set of meta corresponds to
-  // the span group
-  const span = {
-    group: groupId,
-    ...spanMetas?.[0],
-  };
-
-  const {data: spanMetrics} = useSpanMetrics(
+  const {data: spanMetrics, isLoading: isSpanMetricsLoading} = useSpanMetrics(
     {group: groupId},
     queryFilter,
     [
+      'span.op',
+      'span.description',
+      'span.action',
+      'span.domain',
+      'count()',
       'sps()',
       `sum(${SPAN_SELF_TIME})`,
       `p95(${SPAN_SELF_TIME})`,
@@ -91,6 +83,8 @@ function SpanSummaryPage({params, location}: Props) {
     'span-summary-page-metrics'
   );
 
+  const span = Object.assign({group: groupId}, spanMetrics as SpanMetrics & SpanMeta);
+
   const {isLoading: areSpanMetricsSeriesLoading, data: spanMetricsSeriesData} =
     useSpanMetricsSeries(
       {group: groupId},
@@ -138,11 +132,11 @@ function SpanSummaryPage({params, location}: Props) {
         <PageErrorProvider>
           <Layout.Header>
             <Layout.HeaderContent>
-              {!isSpanMetaLoading && <Breadcrumbs crumbs={crumbs} />}
+              {!isSpanMetricsLoading && <Breadcrumbs crumbs={crumbs} />}
               <Layout.Title>
                 {endpointMethod && endpoint
                   ? `${endpointMethod} ${endpoint}`
-                  : !isSpanMetaLoading && title}
+                  : !isSpanMetricsLoading && title}
               </Layout.Title>
             </Layout.HeaderContent>
           </Layout.Header>
@@ -190,7 +184,7 @@ function SpanSummaryPage({params, location}: Props) {
                       <DescriptionPanelBody>
                         <DescriptionContainer>
                           <DescriptionTitle>{spanDescriptionCardTitle}</DescriptionTitle>
-                          <SpanDescription spanMeta={spanMetas?.[0]} />
+                          <SpanDescription spanMeta={span} />
                         </DescriptionContainer>
                       </DescriptionPanelBody>
                     </Panel>

static/app/views/starfish/views/spanSummaryPage/sampleList/durationChart/index.tsx

@@ -54,7 +54,7 @@ function DurationChart({
 
   const {data: spanMetrics} = useSpanMetrics(
     {group: groupId},
-    {transactionName},
+    {transactionName, 'transaction.method': transactionMethod},
     [`p95(${SPAN_SELF_TIME})`, SPAN_OP],
     'span-summary-panel-samples-table-p95'
   );

static/app/views/starfish/views/spanSummaryPage/spanTransactionsTable.tsx

@@ -63,7 +63,7 @@ export function SpanTransactionsTable({
   const organization = useOrganization();
 
   const {
-    data: spanTransactionMetrics,
+    data: spanTransactionMetrics = [],
     meta,
     isLoading,
     pageLinks,
@@ -161,6 +161,7 @@ function TransactionCell({span, row, endpoint, endpointMethod, location}: CellPr
         to={`/starfish/${extractRoute(location) ?? 'spans'}/span/${encodeURIComponent(
           span.group
         )}?${qs.stringify({
+          ...location.query,
           endpoint,
           endpointMethod,
           transaction: row.transaction,