feat(explore): Update insufficient samples warning (#82132)

Zylphrex · web-flow · commit b372cd5a6eae · 2024-12-17T09:30:21.000-05:00
Simplify the designs a little by using the chart footer only instead of
an alert on the top of the page.
diff --git a/static/app/views/explore/charts/index.tsx b/static/app/views/explore/charts/index.tsx
@@ -20,7 +20,6 @@ import {
   prettifyParsedFunction,
 } from 'sentry/utils/discover/fields';
 import {DiscoverDatasets} from 'sentry/utils/discover/types';
-import {formatPercentage} from 'sentry/utils/number/formatPercentage';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import usePrevious from 'sentry/utils/usePrevious';
@@ -353,24 +352,31 @@ export function ExploreCharts({query, setConfidence, setError}: ExploreChartsPro
               />
               {dataset === DiscoverDatasets.SPANS_EAP_RPC && (
                 <ChartFooter>
-                  {defined(extrapolationMetaResults.data?.[0]?.['count_sample()']) &&
-                  defined(
-                    extrapolationMetaResults.data?.[0]?.['avg_sample(sampling_rate)']
-                  )
-                    ? tct(
-                        '*[sampleCount] samples extrapolated with an average sampling rate of [sampleRate]',
-                        {
+                  {!defined(extrapolationMetaResults.data?.[0]?.['count_sample()'])
+                    ? t('* Extrapolated from \u2026')
+                    : resultConfidence === 'low'
+                      ? tct('* Extrapolated from [insufficientSamples]', {
+                          insufficientSamples: (
+                            <Tooltip
+                              title={t(
+                                'Boost accuracy by shortening the date range, increasing the time interval or removing extra filters.'
+                              )}
+                            >
+                              <InsufficientSamples>
+                                {t('insufficient samples')}
+                              </InsufficientSamples>
+                            </Tooltip>
+                          ),
+                        })
+                      : tct('* Extrapolated from [sampleCount] samples', {
                           sampleCount: (
                             <Count
-                              value={extrapolationMetaResults.data[0]['count_sample()']}
+                              value={
+                                extrapolationMetaResults.data?.[0]?.['count_sample()']
+                              }
                             />
                           ),
-                          sampleRate: formatPercentage(
-                            extrapolationMetaResults.data[0]['avg_sample(sampling_rate)']
-                          ),
-                        }
-                      )
-                    : t('foo')}
+                        })}
                 </ChartFooter>
               )}
             </ChartPanel>
@@ -401,7 +407,7 @@ function useExtrapolationMeta({
     const discoverQuery: NewQuery = {
       id: undefined,
       name: 'Explore - Extrapolation Meta',
-      fields: ['count_sample()', 'avg_sample(sampling_rate)', 'min(sampling_rate)'],
+      fields: ['count_sample()', 'min(sampling_rate)'],
       query: search.formatString(),
       version: 2,
       dataset,
@@ -455,3 +461,7 @@ const ChartFooter = styled('div')`
   margin-top: ${space(1.5)};
   margin-bottom: 0;
 `;
+
+const InsufficientSamples = styled('span')`
+  text-decoration: underline dotted ${p => p.theme.gray300};
+`;
diff --git a/static/app/views/explore/content.tsx b/static/app/views/explore/content.tsx
@@ -114,13 +114,6 @@ function ExploreContentImpl({}: ExploreContentProps) {
             </Layout.HeaderActions>
           </Layout.Header>
           <Body>
-            {confidence === 'low' && (
-              <ConfidenceAlert type="warning" showIcon>
-                {t(
-                  'Your low sample count may impact the accuracy of this extrapolation. Edit your query or increase your sample rate.'
-                )}
-              </ConfidenceAlert>
-            )}
             <TopSection>
               <StyledPageFilterBar condensed>
                 <ProjectPageFilter />
@@ -225,11 +218,6 @@ const Body = styled(Layout.Body)`
   }
 `;
 
-const ConfidenceAlert = styled(Alert)`
-  grid-column: 1/3;
-  margin: 0;
-`;
-
 const TopSection = styled('div')`
   display: grid;
   gap: ${space(2)};
