feat(dashboards-eap): Add extrapolation message to viewer

static/app/components/modals/widgetViewerModal.tsx

@@ -29,7 +29,7 @@ import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {PageFilters, SelectValue} from 'sentry/types/core';
 import type {Series} from 'sentry/types/echarts';
-import type {Organization} from 'sentry/types/organization';
+import type {Confidence, Organization} from 'sentry/types/organization';
 import type {User} from 'sentry/types/user';
 import {defined} from 'sentry/utils';
 import {trackAnalytics} from 'sentry/utils/analytics';
@@ -110,6 +110,7 @@ export interface WidgetViewerModalOptions {
   organization: Organization;
   widget: Widget;
   widgetLegendState: WidgetLegendSelectionState;
+  confidence?: Confidence;
   dashboardCreator?: User;
   dashboardFilters?: DashboardFilters;
   dashboardPermissions?: DashboardPermissions;
@@ -195,6 +196,7 @@ function WidgetViewerModal(props: Props) {
     widgetLegendState,
     dashboardPermissions,
     dashboardCreator,
+    confidence,
   } = props;
   const location = useLocation();
   const {projects} = useProjects();
@@ -852,6 +854,8 @@ function WidgetViewerModal(props: Props) {
                 expandNumbers
                 noPadding
                 widgetLegendState={widgetLegendState}
+                showConfidenceWarning={widget.widgetType === WidgetType.SPANS}
+                confidence={confidence}
               />
             ) : (
               <MemoizedWidgetCardChartContainer
@@ -870,6 +874,7 @@ function WidgetViewerModal(props: Props) {
                 expandNumbers
                 noPadding
                 widgetLegendState={widgetLegendState}
+                showConfidenceWarning={widget.widgetType === WidgetType.SPANS}
               />
             )}
           </Container>

static/app/views/dashboards/detail.tsx

@@ -292,8 +292,14 @@ class DashboardDetail extends Component<Props, State> {
       location,
       router,
     } = this.props;
-    const {seriesData, tableData, pageLinks, totalIssuesCount, seriesResultsType} =
-      this.state;
+    const {
+      seriesData,
+      tableData,
+      pageLinks,
+      totalIssuesCount,
+      seriesResultsType,
+      confidence,
+    } = this.state;
     if (isWidgetViewerPath(location.pathname)) {
       const widget =
         defined(widgetId) &&
@@ -358,6 +364,7 @@ class DashboardDetail extends Component<Props, State> {
               return;
             }
           },
+          confidence,
         });
         trackAnalytics('dashboards_views.widget_viewer.open', {
           organization,

static/app/views/dashboards/widgetCard/genericWidgetQueries.tsx

@@ -34,6 +34,7 @@ function getReferrer(displayType: DisplayType) {
 }
 
 export type OnDataFetchedProps = {
+  confidence?: Confidence;
   pageLinks?: string;
   tableResults?: TableDataWithTitle[];
   timeseriesResults?: Series[];

static/app/views/dashboards/widgetCard/index.tsx

@@ -14,7 +14,7 @@ import {space} from 'sentry/styles/space';
 import type {PageFilters} from 'sentry/types/core';
 import type {Series} from 'sentry/types/echarts';
 import type {WithRouterProps} from 'sentry/types/legacyReactRouter';
-import type {Organization} from 'sentry/types/organization';
+import type {Confidence, Organization} from 'sentry/types/organization';
 import {defined} from 'sentry/utils';
 import {getFormattedDate} from 'sentry/utils/dates';
 import type {TableDataWithTitle} from 'sentry/utils/discover/discoverQuery';
@@ -31,7 +31,7 @@ import withSentryRouter from 'sentry/utils/withSentryRouter';
 import {DASHBOARD_CHART_GROUP} from 'sentry/views/dashboards/dashboard';
 import {useDiscoverSplitAlert} from 'sentry/views/dashboards/discoverSplitAlert';
 import {MetricWidgetCard} from 'sentry/views/dashboards/metrics/widgetCard';
-import {WidgetCardChartContainer} from 'sentry/views/dashboards/widgetCard/widgetCardChartContainer';
+import WidgetCardChartContainer from 'sentry/views/dashboards/widgetCard/widgetCardChartContainer';
 
 import type {DashboardFilters, Widget} from '../types';
 import {DisplayType, OnDemandExtractionState, WidgetType} from '../types';
@@ -94,6 +94,7 @@ type Props = WithRouterProps & {
 };
 
 type Data = {
+  confidence?: Confidence;
   pageLinks?: string;
   tableResults?: TableDataWithTitle[];
   timeseriesResults?: Series[];
@@ -110,7 +111,7 @@ function WidgetCard(props: Props) {
       props.onDataFetched(newData.tableResults);
     }
 
-    setData(newData);
+    setData(prevData => ({...prevData, ...newData}));
   };
 
   const {
@@ -186,6 +187,7 @@ function WidgetCard(props: Props) {
         tableData: data?.tableResults,
         seriesResultsType: data?.timeseriesResultsTypes,
         totalIssuesCount: data?.totalIssuesCount,
+        confidence: data?.confidence,
       });
 
       props.router.push({

static/app/views/dashboards/widgetCard/spansWidgetQueries.tsx

@@ -57,16 +57,19 @@ function SpansWidgetQueries({
   const [confidence, setConfidence] = useState<Confidence | null>(null);
 
   const afterFetchSeriesData = (result: SeriesResult) => {
+    let seriesConfidence;
     if (isMultiSeriesStats(result)) {
       const dedupedYAxes = dedupeArray(widget.queries[0]?.aggregates ?? []);
       const seriesMap = transformToSeriesMap(result, dedupedYAxes);
       const series = dedupedYAxes.flatMap(yAxis => seriesMap[yAxis]).filter(defined);
-      const seriesConfidence = combineConfidenceForSeries(series);
-      setConfidence(seriesConfidence);
+      seriesConfidence = combineConfidenceForSeries(series);
     } else {
-      const seriesConfidence = determineSeriesConfidence(result);
-      setConfidence(seriesConfidence);
+      seriesConfidence = determineSeriesConfidence(result);
     }
+    setConfidence(seriesConfidence);
+    onDataFetched?.({
+      confidence: seriesConfidence,
+    });
   };
 
   return getDynamicText({

static/app/views/dashboards/widgetCard/widgetCardDataLoader.tsx

@@ -40,6 +40,7 @@ type Props = {
       | 'timeseriesResults'
       | 'timeseriesResultsTypes'
       | 'totalIssuesCount'
+      | 'confidence'
     >
   ) => void;
   onWidgetSplitDecision?: (splitDecision: WidgetType) => void;

static/app/views/dashboards/widgetViewer/widgetViewerContext.tsx

@@ -1,17 +1,20 @@
 import {createContext} from 'react';
 
 import type {Series} from 'sentry/types/echarts';
+import type {Confidence} from 'sentry/types/organization';
 import type {TableDataWithTitle} from 'sentry/utils/discover/discoverQuery';
 import type {AggregationOutputType} from 'sentry/utils/discover/fields';
 
 export type WidgetViewerContextProps = {
   setData: (data: {
+    confidence?: Confidence;
     pageLinks?: string;
     seriesData?: Series[];
     seriesResultsType?: Record<string, AggregationOutputType>;
     tableData?: TableDataWithTitle[];
     totalIssuesCount?: string;
   }) => void;
+  confidence?: Confidence;
   pageLinks?: string;
   seriesData?: Series[];
   seriesResultsType?: Record<string, AggregationOutputType>;