feat(issues): Support performance issue trace previews (#87466)

Author: scttcper

static/app/views/performance/newTraceDetails/issuesTraceWaterfall.tsx

@@ -10,6 +10,7 @@ import {
 import styled from '@emotion/styled';
 import * as Sentry from '@sentry/react';
 
+import {getProblemSpansForSpanTree} from 'sentry/components/events/interfaces/performance/utils';
 import type {Event} from 'sentry/types/event';
 import type {Project} from 'sentry/types/project';
 import {trackAnalytics} from 'sentry/utils/analytics';
@@ -64,6 +65,22 @@ export function IssuesTraceWaterfall(props: IssuesTraceWaterfallProps) {
 
   const traceView = useMemo(() => new TraceViewModel(), []);
   const traceScheduler = useMemo(() => new TraceScheduler(), []);
+  const problemSpans = useMemo((): ReturnType<typeof getProblemSpansForSpanTree> => {
+    if (props.event.type === 'transaction') {
+      const result = getProblemSpansForSpanTree(props.event);
+      if (result.affectedSpanIds.length > 4) {
+        // Too many spans to focus on, instead let them click into the preview
+        // n+1 will have hundreds of affected spans
+        return {
+          affectedSpanIds: result.affectedSpanIds.slice(0, 4),
+          focusedSpanIds: result.focusedSpanIds.slice(0, 4),
+        };
+      }
+      return result;
+    }
+
+    return {affectedSpanIds: [], focusedSpanIds: []};
+  }, [props.event]);
 
   const projectsRef = useRef<Project[]>(projects);
   projectsRef.current = projects;
@@ -235,7 +252,28 @@ export function IssuesTraceWaterfall(props: IssuesTraceWaterfallProps) {
         }
       }
 
-      props.tree.collapseList(preserveNodes);
+      start = 0;
+      // Preserve affectedSpanIds
+      while (start < props.tree.list.length) {
+        const currentNode = props.tree.list[start]!;
+        if (
+          currentNode.value &&
+          'span_id' in currentNode.value &&
+          // Not already in the preserveNodes array
+          !preserveNodes.some(n => n === currentNode) &&
+          problemSpans.affectedSpanIds.includes(currentNode.value.span_id)
+        ) {
+          preserveNodes.push(currentNode);
+        }
+        start++;
+      }
+
+      // Performance issues are tighter to focus on the suspect spans (of which there may be many)
+      const numSurroundingNodes =
+        props.event.type === 'transaction'
+          ? PERFORMANCE_ISSUE_SURROUNDING_NODES
+          : TRACE_PREVIEW_SURROUNDING_NODES;
+      props.tree.collapseList(preserveNodes, numSurroundingNodes);
     }
 
     if (index === -1 || !node) {
@@ -283,6 +321,7 @@ export function IssuesTraceWaterfall(props: IssuesTraceWaterfallProps) {
     props.event,
     isLoadingSubscriptionDetails,
     hasExceededPerformanceUsageLimit,
+    problemSpans.affectedSpanIds,
   ]);
 
   useTraceTimelineChangeSync({
@@ -368,8 +407,10 @@ const IssuesPointerDisabled = styled('div')`
 const ROW_HEIGHT = 24;
 const MIN_ROW_COUNT = 1;
 const HEADER_HEIGHT = 38;
-const MAX_HEIGHT = 12 * ROW_HEIGHT + HEADER_HEIGHT;
+const MAX_HEIGHT = 24 * ROW_HEIGHT + HEADER_HEIGHT;
 const MAX_ROW_COUNT = Math.floor(MAX_HEIGHT / ROW_HEIGHT);
+const PERFORMANCE_ISSUE_SURROUNDING_NODES = 2;
+const TRACE_PREVIEW_SURROUNDING_NODES = 3;
 
 const IssuesTraceGrid = styled(TraceGrid)<{
   layout: 'drawer bottom' | 'drawer left' | 'drawer right';

static/app/views/performance/newTraceDetails/traceModels/__snapshots__/issuesTraceTree.spec.tsx.snap

@@ -51,3 +51,24 @@ trace root
   transaction 4 - transaction.op
 "
 `;
+
+exports[`IssuesTraceTree respects numSurroundingNodes parameter: custom surrounding nodes (2) 1`] = `
+"
+collapsed
+  transaction 2 - transaction.op
+  transaction 3 - transaction.op
+  transaction 4 - transaction.op
+  collapsed
+"
+`;
+
+exports[`IssuesTraceTree respects numSurroundingNodes parameter: default surrounding nodes (3) 1`] = `
+"
+collapsed
+  transaction 1 - transaction.op
+  transaction 2 - transaction.op
+  transaction 3 - transaction.op
+  transaction 4 - transaction.op
+  transaction 5 - transaction.op
+"
+`;

static/app/views/performance/newTraceDetails/traceModels/issuesTraceTree.spec.tsx

@@ -107,6 +107,26 @@ describe('IssuesTraceTree', () => {
     expect(tree.build().collapseList(errors).serialize()).toMatchSnapshot();
   });
 
+  it('respects numSurroundingNodes parameter', () => {
+    const tree = IssuesTraceTree.FromTrace(traceWithErrorInMiddle, {
+      meta: null,
+      replay: null,
+    });
+
+    const issues = IssuesTraceTree.FindAll(tree.root, hasErrors);
+
+    // Test with default value (3)
+    const defaultCollapsed = tree.build().collapseList(issues).serialize();
+
+    // Test with custom value (2)
+    const customCollapsed = tree.build().collapseList(issues, 2).serialize();
+
+    expect(defaultCollapsed).toMatchSnapshot('default surrounding nodes (3)');
+    expect(customCollapsed).toMatchSnapshot('custom surrounding nodes (2)');
+
+    expect(defaultCollapsed).not.toEqual(customCollapsed);
+  });
+
   describe('FromSpans', () => {
     const traceWithSpans = makeTrace({
       transactions: [

static/app/views/performance/newTraceDetails/traceModels/issuesTraceTree.tsx

@@ -92,7 +92,12 @@ export class IssuesTraceTree extends TraceTree {
     return Promise.resolve();
   }
 
-  collapseList(preserveLeafNodes: TraceTreeNode[]) {
+  /**
+   * Collapse the list of nodes to only include the preserveLeafNodes and the surrounding nodes.
+   * @param preserveLeafNodes - The nodes to preserve.
+   * @param numSurroundingNodes - The number of surrounding nodes to preserve.
+   */
+  collapseList(preserveLeafNodes: TraceTreeNode[], numSurroundingNodes = 3) {
     const preserveNodes = new Set(preserveLeafNodes);
 
     for (const node of preserveLeafNodes) {
@@ -108,18 +113,18 @@ export class IssuesTraceTree extends TraceTree {
         continue;
       }
 
-      // Preserve the previous 2 nodes
+      // Preserve the previous n nodes
       let i = Math.max(index - 1, 0);
-      while (i > index - 3) {
+      while (i > index - numSurroundingNodes) {
         if (this.list[i]) {
           preserveNodes.add(this.list[i]!);
         }
         i--;
       }
 
-      // Preserve the next 2 nodes
+      // Preserve the next n nodes
       let j = Math.min(index + 1, this.list.length - 1);
-      while (j < index + 3) {
+      while (j < index + numSurroundingNodes) {
         if (this.list[j]) {
           preserveNodes.add(this.list[j]!);
         }