feat: Choose the least granular defaults (#87218)

Choose less granular defaults and track percentage of empty buckets in
timeseries

Author: shruthilayaj

static/app/utils/analytics/tracingEventMap.tsx

@@ -16,6 +16,7 @@ export type TracingEventParameters = {
     confidences: string[];
     dataset: string;
     has_exceeded_performance_usage_limit: boolean | null;
+    interval: string;
     page_source: 'explore' | 'compare';
     query_status: 'success' | 'error' | 'pending';
     result_length: number;
@@ -26,6 +27,7 @@ export type TracingEventParameters = {
     user_queries_count: number;
     visualizes: BaseVisualize[];
     visualizes_count: number;
+    empty_buckets_percentage?: number[];
   };
   'trace.load.empty_state': {
     source: TraceWaterFallSource;

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

@@ -7,6 +7,7 @@ import {dedupeArray} from 'sentry/utils/dedupeArray';
 import {DiscoverDatasets} from 'sentry/utils/discover/types';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import useOrganization from 'sentry/utils/useOrganization';
+import type {TimeSeries} from 'sentry/views/dashboards/widgets/common/types';
 import {
   useExploreDataset,
   useExploreFields,
@@ -37,10 +38,12 @@ export function useTrackAnalytics({
   fields,
   visualizes,
   page_source,
+  interval,
 }: {
   aggregatesTableResult: AggregatesTableResult;
   dataset: DiscoverDatasets;
   fields: string[];
+  interval: string;
   page_source: 'explore' | 'compare';
   query: string;
   queryType: 'aggregate' | 'samples' | 'traces';
@@ -95,9 +98,11 @@ export function useTrackAnalytics({
       })),
       visualizes_count: visualizes.length,
       title: title || '',
+      empty_buckets_percentage: computeEmptyBuckets(visualizes, timeseriesResult.data),
       confidences: computeConfidence(visualizes, timeseriesResult.data),
       has_exceeded_performance_usage_limit: hasExceededPerformanceUsageLimit,
       page_source,
+      interval,
     });
 
     info(
@@ -135,6 +140,7 @@ export function useTrackAnalytics({
     isLoadingSubscriptionDetails,
     query_status,
     page_source,
+    interval,
   ]);
 
   useEffect(() => {
@@ -162,9 +168,11 @@ export function useTrackAnalytics({
       visualizes,
       visualizes_count: visualizes.length,
       title: title || '',
+      empty_buckets_percentage: computeEmptyBuckets(visualizes, timeseriesResult.data),
       confidences: computeConfidence(visualizes, timeseriesResult.data),
       has_exceeded_performance_usage_limit: hasExceededPerformanceUsageLimit,
       page_source,
+      interval,
     });
 
     info(fmt`trace.explorer.metadata:
@@ -198,6 +206,7 @@ export function useTrackAnalytics({
     isLoadingSubscriptionDetails,
     query_status,
     page_source,
+    interval,
   ]);
 
   const tracesTableResultDefined = defined(tracesTableResult);
@@ -240,9 +249,11 @@ export function useTrackAnalytics({
       visualizes,
       visualizes_count: visualizes.length,
       title: title || '',
+      empty_buckets_percentage: computeEmptyBuckets(visualizes, timeseriesResult.data),
       confidences: computeConfidence(visualizes, timeseriesResult.data),
       has_exceeded_performance_usage_limit: hasExceededPerformanceUsageLimit,
       page_source,
+      interval,
     });
   }, [
     organization,
@@ -262,6 +273,7 @@ export function useTrackAnalytics({
     query_status,
     page_source,
     tracesTableResultDefined,
+    interval,
   ]);
 }
 
@@ -271,8 +283,10 @@ export function useAnalytics({
   spansTableResult,
   tracesTableResult,
   timeseriesResult,
+  interval,
 }: {
   aggregatesTableResult: AggregatesTableResult;
+  interval: string;
   queryType: 'aggregate' | 'samples' | 'traces';
   spansTableResult: SpansTableResult;
   timeseriesResult: ReturnType<typeof useSortedTimeSeries>;
@@ -295,6 +309,7 @@ export function useAnalytics({
     query,
     fields,
     visualizes,
+    interval,
     page_source: 'explore',
   });
 }
@@ -306,9 +321,11 @@ export function useCompareAnalytics({
   aggregatesTableResult,
   spansTableResult,
   timeseriesResult,
+  interval,
 }: {
   aggregatesTableResult: AggregatesTableResult;
   index: number;
+  interval: string;
   query: ReadableExploreQueryParts;
   queryType: 'aggregate' | 'samples' | 'traces';
   spansTableResult: SpansTableResult;
@@ -334,6 +351,7 @@ export function useCompareAnalytics({
     query,
     fields,
     visualizes,
+    interval,
     page_source: 'compare',
   });
 }
@@ -348,3 +366,26 @@ function computeConfidence(
     return String(combineConfidenceForSeries(series));
   });
 }
+
+export function computeEmptyBucketsForSeries(series: Pick<TimeSeries, 'data'>): number {
+  let emptyBucketsForSeries = 0;
+  for (const item of series.data) {
+    if (item.value === 0 || item.value === null) {
+      emptyBucketsForSeries += 1;
+    }
+  }
+  return Math.floor((emptyBucketsForSeries / series.data.length) * 100);
+}
+
+function computeEmptyBuckets(
+  visualizes: Visualize[],
+  data: ReturnType<typeof useSortedTimeSeries>['data']
+) {
+  return visualizes.flatMap(visualize => {
+    const dedupedYAxes = dedupeArray(visualize.yAxes);
+    return dedupedYAxes
+      .flatMap(yAxis => data[yAxis])
+      .filter(defined)
+      .map(computeEmptyBucketsForSeries);
+  });
+}

static/app/views/explore/hooks/useChartInterval.spec.tsx

@@ -29,10 +29,10 @@ describe('useChartInterval', function () {
       {value: '12h', label: '12 hours'},
       {value: '1d', label: '1 day'},
     ]);
-    expect(chartInterval).toBe('3h'); // default
+    expect(chartInterval).toBe('1d'); // default
 
-    await act(() => setChartInterval('1d'));
-    expect(chartInterval).toBe('1d');
+    await act(() => setChartInterval('3h'));
+    expect(chartInterval).toBe('3h');
 
     // Update page filters to change interval options
     await act(() =>

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

@@ -58,8 +58,8 @@ function useChartIntervalImpl({
     return decodedInterval &&
       intervalOptions.some(option => option.value === decodedInterval)
       ? decodedInterval
-      : // Default to the second option so we're not defaulting to the smallest option
-        intervalOptions[1]!.value;
+      : // Default to the largest option
+        intervalOptions[intervalOptions.length - 1]!.value;
   }, [location.query.interval, intervalOptions]);
 
   const setInterval = useCallback(

static/app/views/explore/multiQueryMode/content.spec.tsx

@@ -376,7 +376,7 @@ describe('MultiQueryModeContent', function () {
           query: expect.objectContaining({
             dataset: 'spans',
             field: [],
-            interval: '1h',
+            interval: '1d',
             orderby: undefined,
             project: ['2'],
             query: '!transaction.span_id:00',
@@ -427,7 +427,7 @@ describe('MultiQueryModeContent', function () {
             dataset: 'spans',
             excludeOther: 0,
             field: ['span.op', 'avg(span.duration)'],
-            interval: '1h',
+            interval: '1d',
             orderby: '-avg_span_duration',
             project: ['2'],
             query: '!transaction.span_id:00',
@@ -566,9 +566,9 @@ describe('MultiQueryModeContent', function () {
 
     const section = screen.getByTestId('section-visualization-0');
     expect(
-      await within(section).findByRole('button', {name: '1 hour'})
+      await within(section).findByRole('button', {name: '1 day'})
     ).toBeInTheDocument();
-    await userEvent.click(within(section).getByRole('button', {name: '1 hour'}));
+    await userEvent.click(within(section).getByRole('button', {name: '1 day'}));
     await userEvent.click(within(section).getByRole('option', {name: '30 minutes'}));
     expect(router.push).toHaveBeenCalledWith({
       pathname: '/traces/compare',

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

@@ -8,6 +8,7 @@ import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {Mode} from 'sentry/views/explore/contexts/pageParamsContext/mode';
 import {useCompareAnalytics} from 'sentry/views/explore/hooks/useAnalytics';
+import {useChartInterval} from 'sentry/views/explore/hooks/useChartInterval';
 import {
   useMultiQueryTableAggregateMode,
   useMultiQueryTableSampleMode,
@@ -58,13 +59,16 @@ export function QueryRow({query: queryParts, index, totalQueryRows}: Props) {
     enabled: true,
   });
 
+  const [interval] = useChartInterval();
+
   useCompareAnalytics({
     aggregatesTableResult,
     index,
     query: queryParts,
     spansTableResult,
     timeseriesResult,
     queryType: mode === Mode.AGGREGATE ? 'aggregate' : 'samples',
+    interval,
   });
 
   return (

static/app/views/explore/spans/spansTab.tsx

@@ -44,6 +44,7 @@ import {
   useSpanTags,
 } from 'sentry/views/explore/contexts/spanTagsContext';
 import {useAnalytics} from 'sentry/views/explore/hooks/useAnalytics';
+import {useChartInterval} from 'sentry/views/explore/hooks/useChartInterval';
 import {useExploreAggregatesTable} from 'sentry/views/explore/hooks/useExploreAggregatesTable';
 import {useExploreSpansTable} from 'sentry/views/explore/hooks/useExploreSpansTable';
 import {useExploreTimeseries} from 'sentry/views/explore/hooks/useExploreTimeseries';
@@ -140,13 +141,15 @@ export function SpansTabContentImpl({
   );
 
   const [expanded, setExpanded] = useState(true);
+  const [interval] = useChartInterval();
 
   useAnalytics({
     queryType,
     aggregatesTableResult,
     spansTableResult,
     tracesTableResult,
     timeseriesResult,
+    interval,
   });
 
   const resultsLength =