feat(trace-eap-waterfall): Rendering vitals in eap trace waterfall (#90879)

We still don't have scores for eap measurements loading, but that should
work once the backend changes are merged:
<img width="1244" alt="Screenshot 2025-05-05 at 11 04 38 AM"
src="https://github.com/user-attachments/assets/02c97b55-32dd-46db-804f-292fa54424ba"
/>

---------

Co-authored-by: Abdullah Khan <abdullahkhan@PG9Y57YDXQ.local>

Author: Abdkhan14

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

@@ -19,7 +19,7 @@ import type {Organization} from 'sentry/types/organization';
 import type {PlatformKey, Project} from 'sentry/types/project';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {formatTraceDuration} from 'sentry/utils/duration/formatTraceDuration';
-import {WEB_VITAL_DETAILS} from 'sentry/utils/performance/vitals/constants';
+import {VITAL_DETAILS} from 'sentry/utils/performance/vitals/constants';
 import {replayPlayerTimestampEmitter} from 'sentry/utils/replays/replayPlayerTimestampEmitter';
 import useApi from 'sentry/utils/useApi';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -426,14 +426,14 @@ export function Trace({
           ? trace.indicators.map((indicator, i) => {
               const status =
                 indicator.score === undefined
-                  ? 'none'
+                  ? 'None'
                   : STATUS_TEXT[scoreToStatus(indicator.score)];
-              const webvital = indicator.label.toLowerCase() as WebVitals;
+              const vital = indicator.type as WebVitals;
 
               const defaultFormatter = (value: number) =>
                 getFormattedDuration(value / 1000);
               const formatter =
-                WEB_VITALS_METERS_CONFIG[webvital]?.formatter ?? defaultFormatter;
+                WEB_VITALS_METERS_CONFIG[vital]?.formatter ?? defaultFormatter;
 
               return (
                 <Fragment key={i}>
@@ -445,9 +445,10 @@ export function Trace({
                     <Tooltip
                       title={
                         <div>
-                          {WEB_VITAL_DETAILS[`measurements.${webvital}`]?.name}
+                          {VITAL_DETAILS[`measurements.${vital}`]?.name}
                           <br />
-                          {formatter(indicator.measurement.value)} - {status}
+                          {formatter(indicator.measurement.value)}
+                          {status !== 'None' && ` - ${status}`}
                         </div>
                       }
                     >
@@ -951,6 +952,19 @@ const TraceStylingWrapper = styled('div')`
       }
     }
 
+    &.None {
+      color: ${p => p.theme.subText};
+      border: 1px solid ${p => p.theme.border};
+
+      &.light {
+        background-color: rgb(245 245 245);
+      }
+
+      &.dark {
+        background-color: rgb(60 59 59);
+      }
+    }
+
     &.Meh {
       color: ${p => p.theme.yellow400};
       border: 1px solid ${p => p.theme.yellow300};

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

@@ -75,7 +75,7 @@ export function TraceContextPanel({
         </TraceLinksNavigationContainer>
       )}
 
-      <VitalMetersContainer id={TraceContextSectionKeys.WEB_VITALS}>
+      <VitalMetersContainer id={TraceContextSectionKeys.VITALS}>
         <TraceContextVitals rootEventResults={rootEventResults} tree={tree} logs={logs} />
       </VitalMetersContainer>
       {hasTags && rootEventResults.data && (

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

@@ -2,6 +2,7 @@ import styled from '@emotion/styled';
 
 import {Tooltip} from 'sentry/components/core/tooltip';
 import {space} from 'sentry/styles/space';
+import {defined} from 'sentry/utils';
 import getDuration from 'sentry/utils/duration/getDuration';
 import {VITAL_DETAILS} from 'sentry/utils/performance/vitals/constants';
 import type {Vital} from 'sentry/utils/performance/vitals/types';
@@ -18,7 +19,13 @@ import {
   STATUS_TEXT,
 } from 'sentry/views/insights/browser/webVitals/utils/scoreToStatus';
 import type {TraceRootEventQueryResults} from 'sentry/views/performance/newTraceDetails/traceApi/useTraceRootEvent';
+import {isTraceItemDetailsResponse} from 'sentry/views/performance/newTraceDetails/traceApi/utils';
+import {isEAPTraceNode} from 'sentry/views/performance/newTraceDetails/traceGuards';
 import type {TraceTree} from 'sentry/views/performance/newTraceDetails/traceModels/traceTree';
+import {
+  TRACE_VIEW_MOBILE_VITALS,
+  TRACE_VIEW_WEB_VITALS,
+} from 'sentry/views/performance/newTraceDetails/traceModels/traceTree.measurements';
 import {useTraceContextSections} from 'sentry/views/performance/newTraceDetails/useTraceContextSections';
 
 type Props = {
@@ -29,18 +36,31 @@ type Props = {
 
 export function TraceContextVitals({rootEventResults, tree, logs}: Props) {
   const {hasVitals} = useTraceContextSections({tree, rootEventResults, logs});
+  const traceNode = tree.root.children[0];
 
-  if (!hasVitals) {
+  // TODO Abdullah Khan: Ignoring loading/error states for now
+  if (!hasVitals || !rootEventResults.data || !traceNode) {
     return null;
   }
 
-  const allVitals = Array.from(tree.vitals.values()).flat();
-  return allVitals.map(vital => {
+  const vitalsToDisplay = tree.vital_types.has('web')
+    ? TRACE_VIEW_WEB_VITALS
+    : TRACE_VIEW_MOBILE_VITALS;
+
+  const isEAPTrace = isEAPTraceNode(traceNode);
+  const collectedVitals =
+    isEAPTrace && tree.vital_types.has('mobile')
+      ? getMobileVitalsFromRootEventResults(rootEventResults.data)
+      : Array.from(tree.vitals.values()).flat();
+
+  return vitalsToDisplay.map(vitalKey => {
     const vitalDetails =
-      VITAL_DETAILS[`measurements.${vital.key}` as keyof typeof VITAL_DETAILS];
+      VITAL_DETAILS[`measurements.${vitalKey}` as keyof typeof VITAL_DETAILS];
+    const vital = collectedVitals.find(v => v.key === vitalKey);
+
     return (
       <VitalPill
-        key={vital?.key}
+        key={vitalKey}
         vital={vitalDetails}
         score={vital?.score}
         meterValue={vital?.measurement.value}
@@ -49,6 +69,31 @@ export function TraceContextVitals({rootEventResults, tree, logs}: Props) {
   });
 }
 
+function getMobileVitalsFromRootEventResults(
+  data: TraceRootEventQueryResults['data']
+): TraceTree.CollectedVital[] {
+  if (!data || !isTraceItemDetailsResponse(data)) {
+    return [];
+  }
+
+  return data.attributes
+    .map(attribute => {
+      const vitalKey = attribute.name.replace('measurements.', '');
+      if (
+        TRACE_VIEW_MOBILE_VITALS.includes(vitalKey) &&
+        typeof attribute.value === 'number'
+      ) {
+        return {
+          key: vitalKey,
+          measurement: {value: attribute.value},
+          score: undefined,
+        };
+      }
+      return undefined;
+    })
+    .filter(defined);
+}
+
 function defaultVitalValueFormatter(vital: Vital, value: number) {
   if (vital?.type === 'duration') {
     return getDuration(value / 1000, 2, true);
@@ -106,7 +151,7 @@ const VitalPillContainer = styled('div')`
   flex-grow: 1;
   max-width: 20%;
   height: 30px;
-  margin-bottom: ${space(1)};
+  margin: ${space(1)} 0;
 `;
 
 const VitalPillName = styled('div')<{status: PerformanceScore}>`

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

@@ -1,3 +1,4 @@
+import type {Measurement} from 'sentry/types/event';
 import type {TraceSplitResults} from 'sentry/utils/performance/quickTrace/types';
 
 import {MissingInstrumentationNode} from './traceModels/missingInstrumentationNode';
@@ -212,3 +213,19 @@ export function isTraceOccurence(
 ): issue is TraceTree.TraceOccurrence {
   return 'issue_id' in issue && issue.event_type !== 'error';
 }
+
+export function isEAPMeasurementValue(
+  value: number | Measurement | undefined
+): value is number {
+  return value !== undefined && typeof value === 'number';
+}
+
+export function isEAPMeasurements(
+  value: Record<string, Measurement> | Record<string, number> | undefined
+): value is Record<string, number> {
+  if (value === undefined) {
+    return false;
+  }
+
+  return Object.values(value).every(isEAPMeasurementValue);
+}

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

@@ -13,15 +13,15 @@ import {useTraceContextSections} from 'sentry/views/performance/newTraceDetails/
 
 export const enum TraceContextSectionKeys {
   TAGS = 'trace-context-tags',
-  WEB_VITALS = 'trace-context-web-vitals',
+  VITALS = 'trace-context-web-vitals',
   LOGS = 'trace-context-logs',
   PROFILES = 'trace-context-profiles',
   SUMMARY = 'trace-context-summary',
 }
 
 const sectionLabels: Partial<Record<TraceContextSectionKeys, string>> = {
   [TraceContextSectionKeys.TAGS]: t('Tags'),
-  [TraceContextSectionKeys.WEB_VITALS]: t('Web Vitals'),
+  [TraceContextSectionKeys.VITALS]: t('Vitals'),
   [TraceContextSectionKeys.LOGS]: t('Logs'),
   [TraceContextSectionKeys.PROFILES]: t('Profiles'),
   [TraceContextSectionKeys.SUMMARY]: t('Summary'),
@@ -78,10 +78,7 @@ function ScrollToSectionLinks({
     <StyledScrollCarousel gap={1} aria-label={t('Jump to:')}>
       <div aria-hidden>{t('Jump to:')}</div>
       {hasVitals && (
-        <SectionLink
-          sectionKey={TraceContextSectionKeys.WEB_VITALS}
-          location={location}
-        />
+        <SectionLink sectionKey={TraceContextSectionKeys.VITALS} location={location} />
       )}
       {hasTags && (
         <SectionLink sectionKey={TraceContextSectionKeys.TAGS} location={location} />