feat(trace): autogroup links (#68948)

The span-id, txn-id links we generate are sometimes not representative
of the final tree because of features like autogrouping. This means that
a span-id, txn-id link should really be span-id, ag-id, txn-id. When
this happens, perform a fallback scan to try and find the node in the
hidden part of the tree and expand it.

Author: JonasBa

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

@@ -25,7 +25,7 @@ export function isSpanNode(
 export function isTransactionNode(
   node: TraceTreeNode<TraceTree.NodeValue>
 ): node is TraceTreeNode<TraceTree.Transaction> {
-  return !!(node.value && 'transaction' in node.value);
+  return !!(node.value && 'transaction' in node.value) && !isAutogroupedNode(node);
 }
 
 export function isParentAutogroupedNode(

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

@@ -773,7 +773,15 @@ export class TraceTree {
         throw new Error('Parent node is missing, this should be unreachable code');
       }
 
+      const index = node.parent.children.indexOf(node);
+      node.parent.children[index] = autoGroupedNode;
+
+      autoGroupedNode.head.parent = autoGroupedNode;
       autoGroupedNode.groupCount = groupMatchCount + 1;
+      autoGroupedNode.space = [
+        start * autoGroupedNode.multiplier,
+        (end - start) * autoGroupedNode.multiplier,
+      ];
 
       for (const error of errors) {
         autoGroupedNode.errors.add(error);
@@ -783,18 +791,10 @@ export class TraceTree {
         autoGroupedNode.performance_issues.add(performanceIssue);
       }
 
-      autoGroupedNode.space = [
-        start * autoGroupedNode.multiplier,
-        (end - start) * autoGroupedNode.multiplier,
-      ];
-
       for (const c of tail.children) {
         c.parent = autoGroupedNode;
         queue.push(c);
       }
-
-      const index = node.parent.children.indexOf(node);
-      node.parent.children[index] = autoGroupedNode;
     }
   }
 
@@ -1144,7 +1144,34 @@ export class TraceTree {
 
       // We are at the last path segment (the node that the user clicked on)
       // and we should scroll the view to this node.
-      const index = tree.list.findIndex(node => node === current);
+      let index = current ? tree.list.findIndex(node => node === current) : -1;
+
+      // We have found the node, yet it is somehow not in the visible tree.
+      // This means that the path we were given did not match the current tree.
+      // This sometimes happens when we receive external links like span-x, txn-y
+      // however the resulting tree looks like span-x, autogroup, txn-y. In this case,
+      // we should expand the autogroup node and try to find the node again.
+      if (current && index === -1) {
+        let parent_node = current.parent;
+        while (parent_node) {
+          // Transactions break autogrouping chains, so we can stop here
+          if (isTransactionNode(parent_node)) {
+            break;
+          }
+          if (isAutogroupedNode(parent_node)) {
+            tree.expand(parent_node, true);
+            index = current ? tree.list.findIndex(node => node === current) : -1;
+            // This is very wasteful as it performs O(n^2) search each time we expand a node...
+            // In most cases though, we should be operating on a tree with sub 10k elements and hopefully
+            // a low autogrouped node count.
+            if (index !== -1) {
+              break;
+            }
+          }
+          parent_node = parent_node.parent;
+        }
+      }
+
       if (index === -1) {
         throw new Error(`Couldn't find node in list ${scrollQueue.join(',')}`);
       }
@@ -1730,10 +1757,16 @@ export class TraceTreeNode<T extends TraceTree.NodeValue = TraceTree.NodeValue>
     while (queue.length > 0) {
       const next = queue.pop()!;
 
-      if (predicate(next)) return next;
+      if (predicate(next)) {
+        return next;
+      }
 
-      for (const child of next.children) {
-        queue.push(child);
+      if (isParentAutogroupedNode(next)) {
+        queue.push(next.head);
+      } else {
+        for (const child of next.children) {
+          queue.push(child);
+        }
       }
     }
 
@@ -1859,12 +1892,6 @@ export class NoDataNode extends TraceTreeNode<null> {
 
 // Generates a ID of the tree node based on its type
 function nodeToId(n: TraceTreeNode<TraceTree.NodeValue>): TraceTree.NodePath {
-  if (isTransactionNode(n)) {
-    return `txn-${n.value.event_id}`;
-  }
-  if (isSpanNode(n)) {
-    return `span-${n.value.span_id}`;
-  }
   if (isAutogroupedNode(n)) {
     if (isParentAutogroupedNode(n)) {
       return `ag-${n.head.value.span_id}`;
@@ -1876,6 +1903,12 @@ function nodeToId(n: TraceTreeNode<TraceTree.NodeValue>): TraceTree.NodePath {
       }
     }
   }
+  if (isTransactionNode(n)) {
+    return `txn-${n.value.event_id}`;
+  }
+  if (isSpanNode(n)) {
+    return `span-${n.value.span_id}`;
+  }
   if (isTraceNode(n)) {
     return `trace-root`;
   }
@@ -2082,7 +2115,6 @@ function findInTreeFromSegment(
     if (type === 'txn' && isTransactionNode(node)) {
       return node.value.event_id === id;
     }
-
     if (type === 'span' && isSpanNode(node)) {
       return node.value.span_id === id;
     }

static/app/views/performance/newTraceDetails/traceRenderers/virtualizedViewManager.spec.tsx

@@ -299,7 +299,7 @@ describe('VirtualizedViewManger', () => {
     });
   });
 
-  describe('scrollToPath', () => {
+  describe('expandToPath', () => {
     const organization = OrganizationFixture();
     const api = new MockApiClient();
 
@@ -692,5 +692,53 @@ describe('VirtualizedViewManger', () => {
 
       expect(result?.node).toBe(tree.list[2]);
     });
+
+    describe('error handling', () => {
+      it('scrolls to child span of sibling autogrouped node when path is missing autogrouped node', async () => {
+        manager.list = makeList();
+        const tree = makeSingleTransactionTree();
+
+        MockApiClient.addMockResponse({
+          url: EVENT_REQUEST_URL,
+          method: 'GET',
+          body: makeEvent({}, makeSiblingAutogroupedSpans()),
+        });
+
+        const result = await TraceTree.ExpandToPath(
+          tree,
+          ['span-middle_span', 'txn-event_id'],
+          () => void 0,
+          {
+            api: api,
+            organization,
+          }
+        );
+
+        expect(result).toBeTruthy();
+      });
+
+      it('scrolls to child span of parent autogrouped node when path is missing autogrouped node', async () => {
+        manager.list = makeList();
+        const tree = makeSingleTransactionTree();
+
+        MockApiClient.addMockResponse({
+          url: EVENT_REQUEST_URL,
+          method: 'GET',
+          body: makeEvent({}, makeParentAutogroupSpans()),
+        });
+
+        const result = await TraceTree.ExpandToPath(
+          tree,
+          ['span-middle_span', 'txn-event_id'],
+          () => void 0,
+          {
+            api: api,
+            organization,
+          }
+        );
+
+        expect(result).toBeTruthy();
+      });
+    });
   });
 });