analytics(explore-attr-breakdowns): Adding attributebreakdownsMode field to querytype 'samples' (#104005)

Co-authored-by: Abdullah Khan <[email protected]>

Author: Abdkhan14

static/app/utils/analytics/tracingEventMap.tsx

@@ -52,6 +52,7 @@ export type TracingEventParameters = {
     version: 2;
     visualizes: BaseVisualize[];
     visualizes_count: number;
+    attribute_breakdowns_mode?: 'breakdowns' | 'cohort_comparison';
   };
   'trace.explorer.schema_hints_click': {
     source: 'list' | 'drawer';

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

@@ -11,6 +11,7 @@ import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import type {TimeSeries} from 'sentry/views/dashboards/widgets/common/types';
+import {useChartSelection} from 'sentry/views/explore/components/attributeBreakdowns/chartSelectionContext';
 import {useLogsAutoRefreshEnabled} from 'sentry/views/explore/contexts/logs/logsAutoRefreshContext';
 import {Mode} from 'sentry/views/explore/contexts/pageParamsContext/mode';
 import {formatSort} from 'sentry/views/explore/contexts/pageParamsContext/sortBys';
@@ -40,6 +41,8 @@ import {
 import type {useSortedTimeSeries} from 'sentry/views/insights/common/queries/useSortedTimeSeries';
 import {usePerformanceSubscriptionDetails} from 'sentry/views/performance/newTraceDetails/traceTypeWarnings/usePerformanceSubscriptionDetails';
 
+import {Tab, type useTab} from './useTab';
+
 const {info, fmt} = Sentry.logger;
 
 interface UseTrackAnalyticsProps {
@@ -54,11 +57,13 @@ interface UseTrackAnalyticsProps {
   spansTableResult: SpansTableResult;
   timeseriesResult: ReturnType<typeof useSortedTimeSeries>;
   visualizes: readonly Visualize[];
+  attributeBreakdownsMode?: 'breakdowns' | 'cohort_comparison';
   title?: string;
   tracesTableResult?: TracesTableResult;
 }
 
 function useTrackAnalytics({
+  attributeBreakdownsMode,
   queryType,
   aggregatesTableResult,
   spansTableResult,
@@ -229,6 +234,7 @@ function useTrackAnalytics({
       interval,
       gave_seer_consent: gaveSeerConsent,
       version: 2,
+      attribute_breakdowns_mode: attributeBreakdownsMode,
     });
 
     info(fmt`trace.explorer.metadata:
@@ -246,6 +252,7 @@ function useTrackAnalytics({
       has_exceeded_performance_usage_limit: ${String(hasExceededPerformanceUsageLimit)}
       page_source: ${page_source}
       gave_seer_consent: ${gaveSeerConsent}
+      attribute_breakdowns_mode: ${attributeBreakdownsMode}
     `);
   }, [
     dataset,
@@ -268,6 +275,7 @@ function useTrackAnalytics({
     timeseriesResult.isPending,
     title,
     visualizes,
+    attributeBreakdownsMode,
   ]);
 
   const tracesTableResultDefined = defined(tracesTableResult);
@@ -358,6 +366,7 @@ export function useAnalytics({
   tracesTableResult,
   timeseriesResult,
   interval,
+  tab,
 }: Pick<
   UseTrackAnalyticsProps,
   | 'queryType'
@@ -366,14 +375,24 @@ export function useAnalytics({
   | 'tracesTableResult'
   | 'timeseriesResult'
   | 'interval'
->) {
+> & {
+  tab: ReturnType<typeof useTab>[0];
+}) {
   const dataset = useSpansDataset();
   const title = useQueryParamsTitle();
   const query = useQueryParamsQuery();
   const fields = useQueryParamsFields();
   const visualizes = useQueryParamsVisualizes();
   const topEvents = useTopEvents();
   const isTopN = topEvents ? topEvents > 0 : false;
+  const {chartSelection} = useChartSelection();
+
+  const attributeBreakdownsMode =
+    tab === Tab.ATTRIBUTE_BREAKDOWNS
+      ? chartSelection
+        ? 'cohort_comparison'
+        : 'breakdowns'
+      : undefined;
 
   return useTrackAnalytics({
     queryType,
@@ -389,6 +408,7 @@ export function useAnalytics({
     interval,
     page_source: 'explore',
     isTopN,
+    attributeBreakdownsMode,
   });
 }
 

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

@@ -144,19 +144,21 @@ export function SpansTabContent({datePageFilterProps}: SpanTabProps) {
 
   return (
     <Fragment>
-      <ExploreBodySearch>
-        <SpanTabSearchSection datePageFilterProps={datePageFilterProps} />
-      </ExploreBodySearch>
-      <ExploreBodyContent>
-        <SpanTabControlSection
-          organization={organization}
-          controlSectionExpanded={controlSectionExpanded}
-        />
-        <SpanTabContentSection
-          setControlSectionExpanded={setControlSectionExpanded}
-          controlSectionExpanded={controlSectionExpanded}
-        />
-      </ExploreBodyContent>
+      <ChartSelectionProvider>
+        <ExploreBodySearch>
+          <SpanTabSearchSection datePageFilterProps={datePageFilterProps} />
+        </ExploreBodySearch>
+        <ExploreBodyContent>
+          <SpanTabControlSection
+            organization={organization}
+            controlSectionExpanded={controlSectionExpanded}
+          />
+          <SpanTabContentSection
+            setControlSectionExpanded={setControlSectionExpanded}
+            controlSectionExpanded={controlSectionExpanded}
+          />
+        </ExploreBodyContent>
+      </ChartSelectionProvider>
     </Fragment>
   );
 }
@@ -425,6 +427,7 @@ function SpanTabContentSection({
   const [interval] = useChartInterval();
 
   useAnalytics({
+    tab,
     queryType,
     aggregatesTableResult,
     spansTableResult,
@@ -491,32 +494,30 @@ function SpanTabContentSection({
         position="top"
         margin={-8}
       >
-        <ChartSelectionProvider>
-          <ExploreCharts
-            confidences={confidences}
-            query={query}
-            extrapolate={extrapolate}
-            timeseriesResult={timeseriesResult}
-            visualizes={visualizes}
-            setVisualizes={setVisualizes}
-            samplingMode={timeseriesSamplingMode}
-            setTab={setTab}
-            rawSpanCounts={rawSpanCounts}
-          />
-          <ExploreTables
-            aggregatesTableResult={aggregatesTableResult}
-            spansTableResult={spansTableResult}
-            tracesTableResult={tracesTableResult}
-            confidences={confidences}
-            tab={tab}
-            setTab={(newTab: Mode | Tab) => {
-              if (newTab === Mode.AGGREGATE) {
-                setControlSectionExpanded(true);
-              }
-              setTab(newTab);
-            }}
-          />
-        </ChartSelectionProvider>
+        <ExploreCharts
+          confidences={confidences}
+          query={query}
+          extrapolate={extrapolate}
+          timeseriesResult={timeseriesResult}
+          visualizes={visualizes}
+          setVisualizes={setVisualizes}
+          samplingMode={timeseriesSamplingMode}
+          setTab={setTab}
+          rawSpanCounts={rawSpanCounts}
+        />
+        <ExploreTables
+          aggregatesTableResult={aggregatesTableResult}
+          spansTableResult={spansTableResult}
+          tracesTableResult={tracesTableResult}
+          confidences={confidences}
+          tab={tab}
+          setTab={(newTab: Mode | Tab) => {
+            if (newTab === Mode.AGGREGATE) {
+              setControlSectionExpanded(true);
+            }
+            setTab(newTab);
+          }}
+        />
       </TourElement>
     </ExploreContentSection>
   );