feat(explore): Add loading indicator to multi query mode (#89783)

Drop the `isProgressivelyLoading` prop for now and apply the new loading
UI for multi query mode chart footers similarly to
#89774

It just passes along all the info that the old confidence footer had and
also passes a `dataScanned` prop for the final message for users that
have sampled storage

Author: narsaynorath

static/app/views/explore/multiQueryMode/queryRow.tsx

@@ -6,7 +6,6 @@ import {LazyRender} from 'sentry/components/lazyRender';
 import {IconDelete} from 'sentry/icons/iconDelete';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import {defined} from 'sentry/utils';
 import useOrganization from 'sentry/utils/useOrganization';
 import {Mode} from 'sentry/views/explore/contexts/pageParamsContext/mode';
 import {useCompareAnalytics} from 'sentry/views/explore/hooks/useAnalytics';
@@ -114,11 +113,7 @@ export function QueryRow({query: queryParts, index, totalQueryRows}: Props) {
             query={queryParts}
             timeseriesResult={timeseriesResult}
             canUsePreviousResults={canUsePreviousResults}
-            isProgressivelyLoading={
-              organization.features.includes('visibility-explore-progressive-loading') &&
-              defined(timeseriesSamplingMode) &&
-              timeseriesSamplingMode !== SAMPLING_MODE.BEST_EFFORT
-            }
+            samplingMode={timeseriesSamplingMode}
           />
           <MultiQueryTable
             confidences={[]}

static/app/views/explore/multiQueryMode/queryVisualizations/chart.tsx

@@ -26,10 +26,10 @@ import {Line} from 'sentry/views/dashboards/widgets/timeSeriesWidget/plottables/
 import {TimeSeriesWidgetVisualization} from 'sentry/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization';
 import {Widget} from 'sentry/views/dashboards/widgets/widget/widget';
 import {EXPLORE_CHART_TYPE_OPTIONS} from 'sentry/views/explore/charts';
-import {ConfidenceFooter} from 'sentry/views/explore/charts/confidenceFooter';
-import {getProgressiveLoadingIndicator} from 'sentry/views/explore/components/progressiveLoadingIndicator';
+import {WidgetExtrapolationFooter} from 'sentry/views/explore/charts/widgetExtrapolationFooter';
 import {Mode} from 'sentry/views/explore/contexts/pageParamsContext/mode';
 import {useChartInterval} from 'sentry/views/explore/hooks/useChartInterval';
+import type {SamplingMode} from 'sentry/views/explore/hooks/useProgressiveQuery';
 import {useAddCompareQueryToDashboard} from 'sentry/views/explore/multiQueryMode/hooks/useAddCompareQueryToDashboard';
 import {DEFAULT_TOP_EVENTS} from 'sentry/views/explore/multiQueryMode/hooks/useMultiQueryTimeseries';
 import {
@@ -49,7 +49,7 @@ export interface MultiQueryChartProps {
   mode: Mode;
   query: ReadableExploreQueryParts;
   timeseriesResult: ReturnType<typeof useSortedTimeSeries>;
-  isProgressivelyLoading?: boolean;
+  samplingMode?: SamplingMode;
 }
 
 export const EXPLORE_CHART_GROUP = 'multi-query-charts_group';
@@ -60,7 +60,7 @@ export function MultiQueryModeChart({
   mode,
   timeseriesResult,
   canUsePreviousResults,
-  isProgressivelyLoading,
+  samplingMode,
 }: MultiQueryChartProps) {
   const theme = useTheme();
 
@@ -133,7 +133,10 @@ export function MultiQueryModeChart({
   ]);
 
   const {data, error, loading} = getSeries();
-  const {sampleCount, isSampled} = determineSeriesSampleCountAndIsSampled(data, isTopN);
+  const {sampleCount, isSampled, dataScanned} = determineSeriesSampleCountAndIsSampled(
+    data,
+    isTopN
+  );
 
   const visualizationType =
     queryParts.chartType === ChartType.LINE
@@ -169,9 +172,20 @@ export function MultiQueryModeChart({
         key={index}
         height={CHART_HEIGHT}
         Title={Title}
-        TitleBadges={[getProgressiveLoadingIndicator(isProgressivelyLoading)]}
         Visualization={<TimeSeriesWidgetVisualization.LoadingPlaceholder />}
         revealActions="always"
+        Footer={
+          organization.features.includes('visibility-explore-progressive-loading') && (
+            <WidgetExtrapolationFooter
+              samplingMode={undefined}
+              sampleCount={0}
+              isSampled={null}
+              confidence={undefined}
+              topEvents={undefined}
+              dataScanned={undefined}
+            />
+          )
+        }
       />
     );
   }
@@ -259,7 +273,6 @@ export function MultiQueryModeChart({
       key={index}
       height={CHART_HEIGHT}
       Title={Title}
-      TitleBadges={[getProgressiveLoadingIndicator(isProgressivelyLoading)]}
       Actions={[
         <Tooltip
           key="visualization"
@@ -324,11 +337,13 @@ export function MultiQueryModeChart({
         />
       }
       Footer={
-        <ConfidenceFooter
+        <WidgetExtrapolationFooter
           sampleCount={sampleCount}
-          confidence={confidence}
           isSampled={isSampled}
+          confidence={confidence}
           topEvents={isTopN ? numSeries : undefined}
+          dataScanned={dataScanned}
+          samplingMode={samplingMode}
         />
       }
     />