fix(spans): Factor any embedded transactions' trace bounds into the span view's trace bounds (#27977)

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

@@ -53,6 +53,7 @@ type PropType = {
   trace: ParsedTraceType;
   event: EventTransaction;
   operationNameFilters: ActiveOperationFilter;
+  rootSpan: RawSpanType;
 };
 
 type State = {
@@ -440,6 +441,7 @@ class TraceViewHeader extends React.Component<PropType, State> {
                 <ActualMinimap
                   trace={this.props.trace}
                   dividerPosition={dividerPosition}
+                  rootSpan={this.props.rootSpan}
                 />
                 <CursorGuideHandler.Consumer>
                   {({
@@ -508,9 +510,10 @@ class TraceViewHeader extends React.Component<PropType, State> {
 class ActualMinimap extends React.PureComponent<{
   trace: ParsedTraceType;
   dividerPosition: number;
+  rootSpan: RawSpanType;
 }> {
   renderRootSpan(): React.ReactNode {
-    const {trace} = this.props;
+    const {trace, rootSpan} = this.props;
 
     const generateBounds = boundsGenerator({
       traceStartTimestamp: trace.traceStartTimestamp,
@@ -519,15 +522,6 @@ class ActualMinimap extends React.PureComponent<{
       viewEnd: 1,
     });
 
-    const rootSpan: RawSpanType = {
-      trace_id: trace.traceID,
-      span_id: trace.rootSpanID,
-      start_timestamp: trace.traceStartTimestamp,
-      timestamp: trace.traceEndTimestamp,
-      op: trace.op,
-      data: {},
-    };
-
     return this.renderSpan({
       spanNumber: 0,
       generateBounds,

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

@@ -14,6 +14,7 @@ import {
   RawSpanType,
   SpanChildrenLookupType,
   SpanType,
+  TraceBound,
   TreeDepthType,
 } from './types';
 import {
@@ -180,6 +181,8 @@ class SpanTreeModel {
     spanGrouping: EnhancedSpan[] | undefined;
     toggleSpanGroup: (() => void) | undefined;
     showSpanGroup: boolean;
+    addTraceBounds: (bounds: TraceBound) => void;
+    removeTraceBounds: (eventSlug: string) => void;
   }): EnhancedProcessedSpanType[] => {
     const {
       operationNameFilters,
@@ -195,6 +198,8 @@ class SpanTreeModel {
       spanGrouping,
       toggleSpanGroup,
       showSpanGroup,
+      addTraceBounds,
+      removeTraceBounds,
     } = props;
     let {treeDepth, continuingTreeDepths} = props;
 
@@ -257,7 +262,10 @@ class SpanTreeModel {
       continuingTreeDepths,
       fetchEmbeddedChildrenState: this.fetchEmbeddedChildrenState,
       showEmbeddedChildren: this.showEmbeddedChildren,
-      toggleEmbeddedChildren: this.toggleEmbeddedChildren,
+      toggleEmbeddedChildren: this.toggleEmbeddedChildren({
+        addTraceBounds,
+        removeTraceBounds,
+      }),
       toggleSpanGroup:
         spanGroupingCriteria && toggleSpanGroup && !showSpanGroup
           ? toggleSpanGroup
@@ -323,6 +331,8 @@ class SpanTreeModel {
                 ? this.showSpanGroup
                 : showSpanGroup
               : false,
+            addTraceBounds,
+            removeTraceBounds,
           })
         );
 
@@ -428,18 +438,47 @@ class SpanTreeModel {
     return [wrappedSpan, ...descendants];
   };
 
-  toggleEmbeddedChildren = (props: {orgSlug: string; eventSlug: string}) => {
-    this.showEmbeddedChildren = !this.showEmbeddedChildren;
-    this.fetchEmbeddedChildrenState = 'idle';
+  toggleEmbeddedChildren =
+    ({
+      addTraceBounds,
+      removeTraceBounds,
+    }: {
+      addTraceBounds: (bounds: TraceBound) => void;
+      removeTraceBounds: (eventSlug: string) => void;
+    }) =>
+    (props: {orgSlug: string; eventSlug: string}) => {
+      this.showEmbeddedChildren = !this.showEmbeddedChildren;
+      this.fetchEmbeddedChildrenState = 'idle';
+
+      if (!this.showEmbeddedChildren) {
+        if (this.embeddedChildren.length > 0) {
+          this.embeddedChildren.forEach(child => {
+            removeTraceBounds(child.generateTraceBounds().spanId);
+          });
+        }
+      }
 
-    if (this.showEmbeddedChildren && this.embeddedChildren.length === 0) {
-      return this.fetchEmbeddedTransactions(props);
-    }
+      if (this.showEmbeddedChildren) {
+        if (this.embeddedChildren.length === 0) {
+          return this.fetchEmbeddedTransactions({...props, addTraceBounds});
+        }
+        this.embeddedChildren.forEach(child => {
+          addTraceBounds(child.generateTraceBounds());
+        });
+      }
 
-    return Promise.resolve(undefined);
-  };
+      return Promise.resolve(undefined);
+    };
 
-  fetchEmbeddedTransactions({orgSlug, eventSlug}: {orgSlug: string; eventSlug: string}) {
+  fetchEmbeddedTransactions({
+    orgSlug,
+    eventSlug,
+    addTraceBounds,
+  }: {
+    orgSlug: string;
+    eventSlug: string;
+    addTraceBounds: (bounds: TraceBound) => void;
+  }) {
     const url = `/organizations/${orgSlug}/events/${eventSlug}/`;
 
     this.fetchEmbeddedChildrenState = 'loading_embedded_transactions';
@@ -466,6 +505,7 @@ class SpanTreeModel {
 
           this.embeddedChildren = [parsedRootSpan];
           this.fetchEmbeddedChildrenState = 'idle';
+          addTraceBounds(parsedRootSpan.generateTraceBounds());
         })
       )
       .catch(
@@ -479,6 +519,14 @@ class SpanTreeModel {
   toggleSpanGroup = () => {
     this.showSpanGroup = !this.showSpanGroup;
   };
+
+  generateTraceBounds = (): TraceBound => {
+    return {
+      spanId: this.span.span_id,
+      traceStartTimestamp: this.span.start_timestamp,
+      traceEndTimestamp: this.span.timestamp,
+    };
+  };
 }
 
 export default SpanTreeModel;

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

@@ -38,6 +38,7 @@ class TraceView extends PureComponent<Props> {
             event={waterfallModel.event}
             virtualScrollBarContainerRef={this.virtualScrollBarContainerRef}
             operationNameFilters={waterfallModel.operationNameFilters}
+            rootSpan={waterfallModel.rootSpan.span}
           />
         );
       }}

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

@@ -176,3 +176,9 @@ export type SpanFuseOptions = {
   distance: number;
   maxPatternLength: number;
 };
+
+export type TraceBound = {
+  spanId: string;
+  traceStartTimestamp: number;
+  traceEndTimestamp: number;
+};

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

@@ -15,6 +15,7 @@ import {
   ParsedTraceType,
   RawSpanType,
   SpanFuseOptions,
+  TraceBound,
 } from './types';
 import {boundsGenerator, generateRootSpan, getSpanID, parseTrace} from './utils';
 
@@ -32,6 +33,7 @@ class WaterfallModel {
   filterSpans: FilterSpans | undefined = undefined;
   searchQuery: string | undefined = undefined;
   hiddenSpanGroups: Set<string>;
+  traceBounds: Array<TraceBound>;
 
   constructor(event: Readonly<EventTransaction>) {
     this.event = event;
@@ -45,6 +47,10 @@ class WaterfallModel {
       true
     );
 
+    // Track the trace bounds of the current transaction and the trace bounds of
+    // any embedded transactions
+    this.traceBounds = [this.rootSpan.generateTraceBounds()];
+
     this.indexSearch(this.parsedTrace, rootSpan);
 
     // Set of span IDs whose sub-trees should be hidden. This is used for the
@@ -52,6 +58,7 @@ class WaterfallModel {
     this.hiddenSpanGroups = new Set();
 
     makeObservable(this, {
+      parsedTrace: observable,
       rootSpan: observable,
 
       // operation names filtering
@@ -68,6 +75,11 @@ class WaterfallModel {
       // span group toggling
       hiddenSpanGroups: observable,
       toggleSpanGroup: action,
+
+      // trace bounds
+      traceBounds: observable,
+      addTraceBounds: action,
+      removeTraceBounds: action,
     });
   }
 
@@ -205,6 +217,52 @@ class WaterfallModel {
     this.hiddenSpanGroups.add(spanID);
   };
 
+  addTraceBounds = (traceBound: TraceBound) => {
+    this.traceBounds.push(traceBound);
+
+    this.parsedTrace = {
+      ...this.parsedTrace,
+      ...this.getTraceBounds(),
+    };
+  };
+
+  removeTraceBounds = (spanId: string) => {
+    this.traceBounds = this.traceBounds.filter(bound => bound.spanId !== spanId);
+
+    // traceBounds must always be non-empty
+    if (this.traceBounds.length === 0) {
+      this.traceBounds = [this.rootSpan.generateTraceBounds()];
+    }
+
+    this.parsedTrace = {
+      ...this.parsedTrace,
+      ...this.getTraceBounds(),
+    };
+  };
+
+  getTraceBounds = () => {
+    // traceBounds must always be non-empty
+    if (this.traceBounds.length === 0) {
+      this.traceBounds = [this.rootSpan.generateTraceBounds()];
+    }
+
+    return this.traceBounds.reduce(
+      (acc, bounds) => {
+        return {
+          traceStartTimestamp: Math.min(
+            acc.traceStartTimestamp,
+            bounds.traceStartTimestamp
+          ),
+          traceEndTimestamp: Math.max(acc.traceEndTimestamp, bounds.traceEndTimestamp),
+        };
+      },
+      {
+        traceStartTimestamp: this.traceBounds[0].traceStartTimestamp,
+        traceEndTimestamp: this.traceBounds[0].traceEndTimestamp,
+      }
+    );
+  };
+
   generateBounds = ({
     viewStart,
     viewEnd,
@@ -213,8 +271,7 @@ class WaterfallModel {
     viewEnd: number; // in [0, 1]
   }) => {
     return boundsGenerator({
-      traceStartTimestamp: this.parsedTrace.traceStartTimestamp,
-      traceEndTimestamp: this.parsedTrace.traceEndTimestamp,
+      ...this.getTraceBounds(),
       viewStart,
       viewEnd,
     });
@@ -247,6 +304,8 @@ class WaterfallModel {
       spanGrouping: undefined,
       toggleSpanGroup: undefined,
       showSpanGroup: false,
+      addTraceBounds: this.addTraceBounds,
+      removeTraceBounds: this.removeTraceBounds,
     });
   };
 }

tests/js/spec/components/events/interfaces/spans/spanTreeModel.spec.tsx

@@ -331,11 +331,20 @@ describe('SpanTreeModel', () => {
       spanGrouping: undefined,
       toggleSpanGroup: undefined,
       showSpanGroup: false,
+      addTraceBounds: () => {},
+      removeTraceBounds: () => {},
     });
 
     expect(spans).toEqual(fullWaterfall);
 
-    const promise = spanTreeModel.toggleEmbeddedChildren({
+    let mockAddTraceBounds = jest.fn();
+    let mockRemoveTraceBounds = jest.fn();
+
+    // embed a child transaction
+    let promise = spanTreeModel.toggleEmbeddedChildren({
+      addTraceBounds: mockAddTraceBounds,
+      removeTraceBounds: mockRemoveTraceBounds,
+    })({
       orgSlug: 'sentry',
       eventSlug: 'project:19c403a10af34db2b7d93ad669bb51ed',
     });
@@ -345,6 +354,8 @@ describe('SpanTreeModel', () => {
 
     await promise;
 
+    expect(mockAddTraceBounds).toHaveBeenCalled();
+    expect(mockRemoveTraceBounds).not.toHaveBeenCalled();
     expect(spanTreeModel.fetchEmbeddedChildrenState).toBe('idle');
 
     spans = spanTreeModel.getSpansList({
@@ -364,6 +375,8 @@ describe('SpanTreeModel', () => {
       spanGrouping: undefined,
       toggleSpanGroup: undefined,
       showSpanGroup: false,
+      addTraceBounds: () => {},
+      removeTraceBounds: () => {},
     });
 
     const fullWaterfallExpected: EnhancedProcessedSpanType[] = [...fullWaterfall];
@@ -418,11 +431,56 @@ describe('SpanTreeModel', () => {
       }
     );
 
+    fullWaterfallExpected[0] = {
+      ...fullWaterfallExpected[0],
+    };
     assert(fullWaterfallExpected[0].type === 'span');
     fullWaterfallExpected[0].numOfSpanChildren += 1;
     fullWaterfallExpected[0].showEmbeddedChildren = true;
 
     expect(spans).toEqual(fullWaterfallExpected);
+
+    mockAddTraceBounds = jest.fn();
+    mockRemoveTraceBounds = jest.fn();
+
+    // un-embed a child transaction
+    promise = spanTreeModel.toggleEmbeddedChildren({
+      addTraceBounds: mockAddTraceBounds,
+      removeTraceBounds: mockRemoveTraceBounds,
+    })({
+      orgSlug: 'sentry',
+      eventSlug: 'project:19c403a10af34db2b7d93ad669bb51ed',
+    });
+    expect(spanTreeModel.fetchEmbeddedChildrenState).toBe('idle');
+
+    await promise;
+
+    expect(mockAddTraceBounds).not.toHaveBeenCalled();
+    expect(mockRemoveTraceBounds).toHaveBeenCalled();
+    expect(spanTreeModel.fetchEmbeddedChildrenState).toBe('idle');
+
+    spans = spanTreeModel.getSpansList({
+      operationNameFilters: {
+        type: 'no_filter',
+      },
+      generateBounds,
+      treeDepth: 0,
+      isLastSibling: true,
+      continuingTreeDepths: [],
+      hiddenSpanGroups: new Set(),
+      spanGroups: new Set(),
+      filterSpans: undefined,
+      previousSiblingEndTimestamp: undefined,
+      event,
+      isOnlySibling: true,
+      spanGrouping: undefined,
+      toggleSpanGroup: undefined,
+      showSpanGroup: false,
+      addTraceBounds: () => {},
+      removeTraceBounds: () => {},
+    });
+
+    expect(spans).toEqual(fullWaterfall);
   });
 
   it('toggleEmbeddedChildren - error state', async () => {
@@ -432,6 +490,9 @@ describe('SpanTreeModel', () => {
     const spanTreeModel = new SpanTreeModel(rootSpan, parsedTrace.childSpans, api);
 
     const promise = spanTreeModel.toggleEmbeddedChildren({
+      addTraceBounds: () => {},
+      removeTraceBounds: () => {},
+    })({
       orgSlug: 'sentry',
       eventSlug: 'project:broken',
     });