feat(span-tree): Instrument toggle interactions on span tree (#41975)

static/app/components/events/interfaces/spans/spanBar.tsx

@@ -52,6 +52,7 @@ import {
 } from 'sentry/utils/performance/quickTrace/quickTraceContext';
 import {QuickTraceEvent, TraceError} from 'sentry/utils/performance/quickTrace/types';
 import {isTraceFull} from 'sentry/utils/performance/quickTrace/utils';
+import {PerformanceInteraction} from 'sentry/utils/performanceForSentry';
 
 import * as AnchorLinkManager from './anchorLinkManager';
 import {
@@ -461,6 +462,7 @@ class SpanBar extends Component<SpanBarProps, SpanBarState> {
               return;
             }
 
+            PerformanceInteraction.startInteraction('SpanTreeToggle', 1000 * 10);
             this.props.toggleSpanTree();
           }}
         >

static/app/components/events/interfaces/spans/spanGroupBar.tsx

@@ -24,6 +24,7 @@ import {
 import {toPercent} from 'sentry/components/performance/waterfall/utils';
 import {EventTransaction} from 'sentry/types/event';
 import {defined} from 'sentry/utils';
+import {PerformanceInteraction} from 'sentry/utils/performanceForSentry';
 
 import * as AnchorLinkManager from './anchorLinkManager';
 import * as DividerHandlerManager from './dividerHandlerManager';
@@ -221,7 +222,13 @@ export function SpanGroupBar(props: Props) {
                         width: `calc(${toPercent(dividerPosition)} - 0.5px)`,
                         paddingTop: 0,
                       }}
-                      onClick={() => props.toggleSpanGroup()}
+                      onClick={() => {
+                        PerformanceInteraction.startInteraction(
+                          'SpanTreeToggle',
+                          1000 * 10
+                        );
+                        props.toggleSpanGroup();
+                      }}
                       ref={spanTitleRef}
                     >
                       <RowTitleContainer ref={generateContentSpanBarRef()}>

static/app/components/events/interfaces/spans/spanTree.tsx

@@ -9,6 +9,7 @@ import {pickBarColor} from 'sentry/components/performance/waterfall/utils';
 import {t, tct} from 'sentry/locale';
 import {Organization} from 'sentry/types';
 import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
+import {CustomerProfiler} from 'sentry/utils/performanceForSentry';
 
 import {DragManagerChildrenProps} from './dragManager';
 import {ScrollbarManagerChildrenProps, withScrollbarManager} from './scrollbarManager';
@@ -349,38 +350,41 @@ class SpanTree extends Component<PropType> {
         }
 
         acc.spanTree.push(
-          <SpanBar
-            key={key}
-            organization={organization}
-            event={waterfallModel.event}
-            spanBarColor={spanBarColor}
-            spanBarType={spanBarType}
-            span={span}
-            showSpanTree={!waterfallModel.hiddenSpanSubTrees.has(getSpanID(span))}
-            numOfSpanChildren={numOfSpanChildren}
-            trace={waterfallModel.parsedTrace}
-            generateBounds={generateBounds}
-            toggleSpanTree={this.toggleSpanTree(getSpanID(span))}
-            treeDepth={treeDepth}
-            continuingTreeDepths={continuingTreeDepths}
-            spanNumber={spanNumber}
-            isLast={isLast}
-            isRoot={isRoot}
-            showEmbeddedChildren={payload.showEmbeddedChildren}
-            toggleEmbeddedChildren={payload.toggleEmbeddedChildren}
-            toggleSiblingSpanGroup={toggleSiblingSpanGroup}
-            fetchEmbeddedChildrenState={payload.fetchEmbeddedChildrenState}
-            toggleSpanGroup={toggleSpanGroup}
-            numOfSpans={numOfSpans}
-            groupType={groupType}
-            groupOccurrence={payload.groupOccurrence}
-            isEmbeddedTransactionTimeAdjusted={payload.isEmbeddedTransactionTimeAdjusted}
-            onWheel={onWheel}
-            generateContentSpanBarRef={generateContentSpanBarRef}
-            markSpanOutOfView={markSpanOutOfView}
-            markSpanInView={markSpanInView}
-            storeSpanBar={storeSpanBar}
-          />
+          <CustomerProfiler id="SpanBar" key={key}>
+            <SpanBar
+              organization={organization}
+              event={waterfallModel.event}
+              spanBarColor={spanBarColor}
+              spanBarType={spanBarType}
+              span={span}
+              showSpanTree={!waterfallModel.hiddenSpanSubTrees.has(getSpanID(span))}
+              numOfSpanChildren={numOfSpanChildren}
+              trace={waterfallModel.parsedTrace}
+              generateBounds={generateBounds}
+              toggleSpanTree={this.toggleSpanTree(getSpanID(span))}
+              treeDepth={treeDepth}
+              continuingTreeDepths={continuingTreeDepths}
+              spanNumber={spanNumber}
+              isLast={isLast}
+              isRoot={isRoot}
+              showEmbeddedChildren={payload.showEmbeddedChildren}
+              toggleEmbeddedChildren={payload.toggleEmbeddedChildren}
+              toggleSiblingSpanGroup={toggleSiblingSpanGroup}
+              fetchEmbeddedChildrenState={payload.fetchEmbeddedChildrenState}
+              toggleSpanGroup={toggleSpanGroup}
+              numOfSpans={numOfSpans}
+              groupType={groupType}
+              groupOccurrence={payload.groupOccurrence}
+              isEmbeddedTransactionTimeAdjusted={
+                payload.isEmbeddedTransactionTimeAdjusted
+              }
+              onWheel={onWheel}
+              generateContentSpanBarRef={generateContentSpanBarRef}
+              markSpanOutOfView={markSpanOutOfView}
+              markSpanInView={markSpanInView}
+              storeSpanBar={storeSpanBar}
+            />
+          </CustomerProfiler>
         );
 
         // If this is an embedded span tree, we will manually mark these spans as in view.

static/app/components/events/interfaces/spans/traceView.tsx

@@ -4,7 +4,6 @@ import {Observer} from 'mobx-react';
 import EmptyStateWarning from 'sentry/components/emptyStateWarning';
 import {t} from 'sentry/locale';
 import {Organization} from 'sentry/types';
-import {CustomerProfiler} from 'sentry/utils/performanceForSentry';
 
 import * as CursorGuideHandler from './cursorGuideHandler';
 import * as DividerHandlerManager from './dividerHandlerManager';
@@ -91,20 +90,18 @@ class TraceView extends PureComponent<Props> {
                             {this.renderHeader(dragProps)}
                             <Observer>
                               {() => (
-                                <CustomerProfiler id="SpanTree">
-                                  <SpanTree
-                                    traceViewRef={this.traceViewRef}
-                                    dragProps={dragProps}
-                                    organization={organization}
-                                    waterfallModel={waterfallModel}
-                                    filterSpans={waterfallModel.filterSpans}
-                                    spans={waterfallModel.getWaterfall({
-                                      viewStart: dragProps.viewWindowStart,
-                                      viewEnd: dragProps.viewWindowEnd,
-                                    })}
-                                    focusedSpanIds={waterfallModel.focusedSpanIds}
-                                  />
-                                </CustomerProfiler>
+                                <SpanTree
+                                  traceViewRef={this.traceViewRef}
+                                  dragProps={dragProps}
+                                  organization={organization}
+                                  waterfallModel={waterfallModel}
+                                  filterSpans={waterfallModel.filterSpans}
+                                  spans={waterfallModel.getWaterfall({
+                                    viewStart: dragProps.viewWindowStart,
+                                    viewEnd: dragProps.viewWindowEnd,
+                                  })}
+                                  focusedSpanIds={waterfallModel.focusedSpanIds}
+                                />
                               )}
                             </Observer>
                           </ScrollbarManager.Provider>