feat(trace-eap-waterfall): Adding support for occurrences

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

@@ -99,8 +99,8 @@ function NewTraceDetailsSpanDetail(props: SpanDetailProps) {
 
   const profileId = props.event.contexts.profile?.profile_id || '';
   const issues = useMemo(() => {
-    return [...props.node.errors, ...props.node.occurences];
-  }, [props.node.errors, props.node.occurences]);
+    return [...props.node.errors, ...props.node.occurrences];
+  }, [props.node.errors, props.node.occurrences]);
 
   const {projects} = useProjects();
   const project = projects.find(p => p.id === props.event.projectID);
@@ -299,7 +299,7 @@ function NewTraceDetailsSpanDetail(props: SpanDetailProps) {
   }
 
   function renderSpanErrorMessage() {
-    const hasErrors = props.node.errors.size > 0 || props.node.occurences.size > 0;
+    const hasErrors = props.node.errors.size > 0 || props.node.occurrences.size > 0;
 
     if (!hasErrors || isGapSpan(props.node.value)) {
       return null;

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

@@ -189,24 +189,39 @@ export function IssuesTraceWaterfall(props: IssuesTraceWaterfallProps) {
           }
         }
 
-        for (const p of n.occurences) {
-          if (p.event_id === props.event.eventID) {
+        for (const o of n.occurrences) {
+          if (o.event_id === props.event.eventID) {
             return true;
           }
         }
       }
-      if (isSpanNode(n) || isEAPSpanNode(n)) {
-        const spanId = 'span_id' in n.value ? n.value.span_id : n.value.event_id;
-        if (spanId === props.event.eventID) {
+      if (isSpanNode(n)) {
+        if (n.value.span_id === props.event.eventID) {
           return true;
         }
         for (const e of n.errors) {
           if (e.event_id === props.event.eventID) {
             return true;
           }
         }
-        for (const p of n.occurences) {
-          if (p.event_id === props.event.eventID) {
+        for (const o of n.occurrences) {
+          if (o.event_id === props.event.eventID) {
+            return true;
+          }
+        }
+      }
+
+      if (isEAPSpanNode(n)) {
+        if (n.value.event_id === props.event.eventID) {
+          return true;
+        }
+        for (const e of n.errors) {
+          if (e.event_id === props.event.eventID) {
+            return true;
+          }
+        }
+        for (const o of n.occurrences) {
+          if (o.event_id === props.event.occurrence?.id) {
             return true;
           }
         }
@@ -232,7 +247,7 @@ export function IssuesTraceWaterfall(props: IssuesTraceWaterfallProps) {
         if (
           isTraceErrorNode(props.tree.list[start]!) ||
           node.errors.size > 0 ||
-          node.occurences.size > 0
+          node.occurrences.size > 0
         ) {
           preserveNodes.push(props.tree.list[start]!);
           break;
@@ -244,7 +259,7 @@ export function IssuesTraceWaterfall(props: IssuesTraceWaterfallProps) {
         if (
           isTraceErrorNode(props.tree.list[start]!) ||
           node.errors.size > 0 ||
-          node.occurences.size > 0
+          node.occurrences.size > 0
         ) {
           preserveNodes.push(props.tree.list[start]!);
           break;

static/app/views/performance/newTraceDetails/traceDrawer/details/autogroup/parentAutogroup.tsx

@@ -22,8 +22,8 @@ export function ParentAutogroupNodeDetails({
 }: TraceTreeNodeDetailsProps<ParentAutogroupNode>) {
   const theme = useTheme();
   const issues = useMemo(() => {
-    return [...node.errors, ...node.occurences];
-  }, [node.errors, node.occurences]);
+    return [...node.errors, ...node.occurrences];
+  }, [node.errors, node.occurrences]);
 
   const parentTransaction = TraceTree.ParentTransaction(node);
 

static/app/views/performance/newTraceDetails/traceDrawer/details/autogroup/siblingAutogroup.tsx

@@ -22,8 +22,8 @@ export function SiblingAutogroupNodeDetails({
 }: TraceTreeNodeDetailsProps<SiblingAutogroupNode>) {
   const theme = useTheme();
   const issues = useMemo(() => {
-    return [...node.errors, ...node.occurences];
-  }, [node.errors, node.occurences]);
+    return [...node.errors, ...node.occurrences];
+  }, [node.errors, node.occurrences]);
 
   const parentTransaction = TraceTree.ParentTransaction(node);
 

static/app/views/performance/newTraceDetails/traceDrawer/details/issues/issues.tsx

@@ -309,10 +309,10 @@ export function IssueList({issues, node, organization}: IssueListProps) {
   }, [node, node.errors.size]);
 
   const uniqueOccurences = useMemo(() => {
-    const unique: TraceTree.TraceOccurence[] = [];
+    const unique: TraceTree.TraceOccurrence[] = [];
     const seenIssues: Set<number> = new Set();
 
-    for (const issue of node.occurences) {
+    for (const issue of node.occurrences) {
       if (seenIssues.has(issue.issue_id)) {
         continue;
       }
@@ -323,7 +323,7 @@ export function IssueList({issues, node, organization}: IssueListProps) {
     return unique;
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [node, node.occurences.size]);
+  }, [node, node.occurrences.size]);
 
   const uniqueIssues = useMemo(() => {
     return [...uniqueOccurences, ...uniqueErrorIssues.sort(sortIssuesByLevel)];
@@ -384,7 +384,7 @@ function IssueListHeader({
 }: {
   errorIssues: TraceTree.TraceErrorIssue[];
   node: TraceTreeNode<TraceTree.NodeValue>;
-  occurences: TraceTree.TraceOccurence[];
+  occurences: TraceTree.TraceOccurrence[];
 }) {
   const [singular, plural] = useMemo((): [string, string] => {
     const label = [t('Issue'), t('Issues')] as [string, string];

static/app/views/performance/newTraceDetails/traceDrawer/details/span/index.tsx

@@ -281,8 +281,8 @@ export function SpanNodeDetails({
   const hasNewTraceUi = useHasTraceNewUi();
   const {projects} = useProjects();
   const issues = useMemo(() => {
-    return [...node.errors, ...node.occurences];
-  }, [node.errors, node.occurences]);
+    return [...node.errors, ...node.occurrences];
+  }, [node.errors, node.occurrences]);
 
   const project = projects.find(proj => proj.slug === node.event?.projectSlug);
   const profileMeta = getProfileMeta(node.event) || '';

static/app/views/performance/newTraceDetails/traceDrawer/details/transaction/index.tsx

@@ -149,8 +149,8 @@ export function TransactionNodeDetails({
 }: TraceTreeNodeDetailsProps<TraceTreeNode<TraceTree.Transaction>>) {
   const {projects} = useProjects();
   const issues = useMemo(() => {
-    return [...node.errors, ...node.occurences];
-  }, [node.errors, node.occurences]);
+    return [...node.errors, ...node.occurrences];
+  }, [node.errors, node.occurrences]);
   const {
     data: event,
     isError,

static/app/views/performance/newTraceDetails/traceDrawer/tabs/trace/generalInfo.tsx

@@ -58,10 +58,10 @@ export function GeneralInfo(props: GeneralInfoProps) {
       return [];
     }
 
-    const unique: TraceTree.TraceOccurence[] = [];
+    const unique: TraceTree.TraceOccurrence[] = [];
     const seenIssues: Set<number> = new Set();
 
-    for (const issue of traceNode.occurences) {
+    for (const issue of traceNode.occurrences) {
       if (seenIssues.has(issue.issue_id)) {
         continue;
       }

static/app/views/performance/newTraceDetails/traceDrawer/tabs/trace/index.tsx

@@ -46,10 +46,10 @@ export function TraceDetails(props: TraceDetailsProps) {
       return [];
     }
 
-    return [...props.node.errors, ...props.node.occurences];
+    return [...props.node.errors, ...props.node.occurrences];
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.node, props.node?.errors.size, props.node?.occurences.size]);
+  }, [props.node, props.node?.errors.size, props.node?.occurrences.size]);
 
   if (!props.node) {
     return null;

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

@@ -209,6 +209,6 @@ export function getPageloadTransactionChildCount(
 
 export function isTraceOccurence(
   issue: TraceTree.TraceIssue
-): issue is TraceTree.TraceOccurence {
+): issue is TraceTree.TraceOccurrence {
   return 'issue_id' in issue && issue.event_type !== 'error';
 }

static/app/views/performance/newTraceDetails/traceHeader/meta.tsx

@@ -101,10 +101,10 @@ export function Meta(props: MetaProps) {
       return [];
     }
 
-    const unique: TraceTree.TraceOccurence[] = [];
+    const unique: TraceTree.TraceOccurrence[] = [];
     const seenIssues: Set<number> = new Set();
 
-    for (const issue of traceNode.occurences) {
+    for (const issue of traceNode.occurrences) {
       if (seenIssues.has(issue.issue_id)) {
         continue;
       }

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

@@ -62,7 +62,8 @@ function mockSpansResponse(
 
 function hasErrors(n: TraceTreeNode<any>): boolean {
   return (
-    (isTraceErrorNode(n) || n.errors.size > 0 || n.occurences.size > 0) && !isTraceNode(n)
+    (isTraceErrorNode(n) || n.errors.size > 0 || n.occurrences.size > 0) &&
+    !isTraceNode(n)
   );
 }
 

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

@@ -1,4 +1,5 @@
 import type {Client} from 'sentry/api';
+import type {Event} from 'sentry/types/event';
 import type {Organization} from 'sentry/types/organization';
 import type {TraceMetaQueryResults} from 'sentry/views/performance/newTraceDetails/traceApi/useTraceMeta';
 import {
@@ -55,7 +56,7 @@ export class IssuesTraceTree extends TraceTree {
 
   static ExpandToEvent(
     tree: IssuesTraceTree,
-    eventId: string,
+    event: Event,
     options: {
       api: Client;
       organization: Organization;
@@ -64,21 +65,25 @@ export class IssuesTraceTree extends TraceTree {
   ): Promise<void> {
     const node = TraceTree.Find(tree.root, n => {
       if (isTraceErrorNode(n) || isEAPErrorNode(n)) {
-        return n.value.event_id === eventId;
+        return n.value.event_id === event.eventID;
       }
       if (isTransactionNode(n) || isEAPSpanNode(n)) {
-        if (n.value.event_id === eventId) {
+        if (n.value.event_id === event.eventID) {
           return true;
         }
 
         for (const e of n.errors) {
-          if (e.event_id === eventId) {
+          if (e.event_id === event.eventID) {
             return true;
           }
         }
 
-        for (const p of n.occurences) {
-          if (p.event_id === eventId) {
+        for (const o of n.occurrences) {
+          if (isTransactionNode(n)) {
+            if (o.event_id === event.eventID) {
+              return true;
+            }
+          } else if (o.event_id === event.occurrence?.id) {
             return true;
           }
         }

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

@@ -19,6 +19,7 @@ import {
   assertEAPSpanNode,
   assertTransactionNode,
   makeEAPError,
+  makeEAPOccurrence,
   makeEAPSpan,
   makeEAPTrace,
   makeEventTransaction,
@@ -188,6 +189,21 @@ const eapTraceWithErrors = makeEAPTrace([
   }),
 ]);
 
+const eapTraceWithOccurences = makeEAPTrace([
+  makeEAPSpan({
+    event_id: 'eap-span-1',
+    is_transaction: true,
+    occurrences: [],
+    children: [
+      makeEAPSpan({
+        event_id: 'eap-span-2',
+        is_transaction: false,
+        occurrences: [makeEAPOccurrence({event_id: 'eap-occurence-1'})],
+      }),
+    ],
+  }),
+]);
+
 const eapTraceWithOrphanErrors = makeEAPTrace([
   makeEAPError({
     event_id: 'eap-error-1',
@@ -252,7 +268,7 @@ describe('TraceTree', () => {
         }),
         traceMetadata
       );
-      expect(tree.root.children[0]!.children[0]!.occurences.size).toBe(1);
+      expect(tree.root.children[0]!.children[0]!.occurrences.size).toBe(1);
     });
 
     it('adds transaction profile to node', () => {
@@ -584,6 +600,18 @@ describe('TraceTree', () => {
       expect(eapSpan?.errors.size).toBe(1);
     });
 
+    it('adds eap occurences to tree nodes', () => {
+      const tree = TraceTree.FromTrace(eapTraceWithOccurences, traceMetadata);
+
+      expect(tree.root.children[0]!.occurrences.size).toBe(1);
+
+      const eapTransaction = findEAPSpanByEventId(tree, 'eap-span-1');
+      const eapSpan = findEAPSpanByEventId(tree, 'eap-span-2');
+
+      expect(eapTransaction?.occurrences.size).toBe(1);
+      expect(eapSpan?.occurrences.size).toBe(1);
+    });
+
     it('initializes expanded based on is_transaction property', () => {
       const tree = TraceTree.FromTrace(
         makeEAPTrace([