feat(trace-eap-waterfall): Fixing link to profile from trace drawer

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

@@ -1,8 +1,13 @@
+import {useMemo} from 'react';
+
 import {ExternalLink} from 'sentry/components/core/link';
+import LoadingError from 'sentry/components/loadingError';
+import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {t, tct} from 'sentry/locale';
 import type {EventTransaction} from 'sentry/types/event';
 import type {Project} from 'sentry/types/project';
 import useProjects from 'sentry/utils/useProjects';
+import {useTransaction} from 'sentry/views/performance/newTraceDetails/traceApi/useTransaction';
 import {getCustomInstrumentationLink} from 'sentry/views/performance/newTraceDetails/traceConfigurations';
 import {ProfilePreview} from 'sentry/views/performance/newTraceDetails/traceDrawer/details/profiling/profilePreview';
 import type {TraceTreeNodeDetailsProps} from 'sentry/views/performance/newTraceDetails/traceDrawer/tabs/traceTreeNodeDetails';
@@ -59,22 +64,41 @@ function EAPMissingInstrumentationNodeDetails({
 }) {
   const {node} = props;
   const previous = node.previous as TraceTreeNode<TraceTree.EAPSpan>;
-  const parentEAPTransaction = TraceTree.ParentEAPTransaction(previous);
 
-  const project = parentEAPTransaction
-    ? projects.find(proj => proj.slug === parentEAPTransaction.value.project_slug)
-    : undefined;
-  const profileId = parentEAPTransaction?.value.profile_id || '';
-  const profilerId = parentEAPTransaction?.value.profiler_id || '';
+  const {
+    data: eventTransaction = null,
+    isLoading: isEventTransactionLoading,
+    isError: isEventTransactionError,
+  } = useTransaction({
+    event_id: previous.value.transaction_id,
+    organization: props.organization,
+    project_slug: previous.value.project_slug,
+  });
+
+  const profileMeta = useMemo(
+    () => getProfileMeta(eventTransaction) || '',
+    [eventTransaction]
+  );
+
+  if (isEventTransactionLoading) {
+    return <LoadingIndicator />;
+  }
+
+  if (isEventTransactionError) {
+    return <LoadingError message={t('Failed to fetch span details')} />;
+  }
+
+  const project = projects.find(proj => proj.slug === eventTransaction?.projectSlug);
+  const profileContext = eventTransaction?.contexts?.profile ?? {};
 
   return (
     <BaseMissingInstrumentationNodeDetails
       {...props}
-      profileMeta={profileId}
+      profileMeta={profileMeta}
       project={project}
-      event={null}
-      profileId={profileId}
-      profilerId={profilerId}
+      event={eventTransaction}
+      profileId={profileContext.profile_id}
+      profilerId={profileContext.profiler_id}
     />
   );
 }
@@ -137,7 +161,7 @@ function BaseMissingInstrumentationNodeDetails({
                   profileID={profileId}
                   profilerID={profilerId}
                   event={event}
-                  node={node}
+                  missingInstrumentationNode={node}
                 />
               </ProfileGroupProvider>
             )}

static/app/views/performance/newTraceDetails/traceDrawer/details/profiling/profilePreview.tsx

@@ -36,7 +36,7 @@ import {useProfiles} from 'sentry/views/profiling/profilesProvider';
 
 interface SpanProfileProps {
   event: Readonly<EventTransaction> | null;
-  node: MissingInstrumentationNode;
+  missingInstrumentationNode: MissingInstrumentationNode;
   profileID: string | undefined;
   profilerID: string | undefined;
   project: Project | undefined;
@@ -47,7 +47,7 @@ export function ProfilePreview({
   profileID,
   profilerID,
   event,
-  node,
+  missingInstrumentationNode,
 }: SpanProfileProps) {
   const profiles = useProfiles();
   const profileGroup = useProfileGroup();
@@ -56,9 +56,8 @@ export function ProfilePreview({
   const [canvasView, setCanvasView] = useState<CanvasView<FlamegraphModel> | null>(null);
 
   const spanThreadId = useMemo(() => {
-    const value = node.previous.value ?? node.next.value ?? null;
-    return 'data' in value ? value.data?.['thread.id'] : null;
-  }, [node]);
+    return event?.contexts?.trace?.data?.['thread.id'] ?? null;
+  }, [event]);
 
   const profile = useMemo(() => {
     if (defined(spanThreadId)) {
@@ -75,10 +74,12 @@ export function ProfilePreview({
   }, [profileGroup.profiles, profileGroup.activeProfileIndex, spanThreadId]);
 
   const transactionHasProfile = useMemo(() => {
-    return isEAPSpanNode(node.previous)
-      ? (TraceTree.ParentEAPTransaction(node)?.profiles?.length ?? 0) > 0
-      : (TraceTree.ParentTransaction(node)?.profiles?.length ?? 0) > 0;
-  }, [node]);
+    return isEAPSpanNode(missingInstrumentationNode.previous)
+      ? (TraceTree.ParentEAPTransaction(missingInstrumentationNode)?.profiles?.length ??
+          0) > 0
+      : (TraceTree.ParentTransaction(missingInstrumentationNode)?.profiles?.length ?? 0) >
+          0;
+  }, [missingInstrumentationNode]);
 
   const flamegraph = useMemo(() => {
     if (!transactionHasProfile || !profile) {
@@ -89,8 +90,8 @@ export function ProfilePreview({
   }, [transactionHasProfile, profile]);
 
   const target = useMemo(() => {
-    if (defined(project?.slug)) {
-      if (defined(profileID)) {
+    if (project?.slug) {
+      if (profileID) {
         // we want to try to go straight to the same config view as the preview
         const query = canvasView?.configView
           ? {
@@ -110,7 +111,7 @@ export function ProfilePreview({
         });
       }
 
-      if (defined(event) && defined(profilerID)) {
+      if (event && profilerID) {
         const query = {
           eventId: event.id,
           tid: spanThreadId,
@@ -149,11 +150,11 @@ export function ProfilePreview({
   const startTimestamp = profile?.timestamp ?? event?.startTimestamp;
   const relativeStartTimestamp =
     transactionHasProfile && defined(startTimestamp)
-      ? node.value.start_timestamp - startTimestamp
+      ? missingInstrumentationNode.value.start_timestamp - startTimestamp
       : 0;
   const relativeStopTimestamp =
     transactionHasProfile && defined(startTimestamp)
-      ? node.value.timestamp - startTimestamp
+      ? missingInstrumentationNode.value.timestamp - startTimestamp
       : flamegraph.configSpace.width;
 
   function handleGoToProfile() {
@@ -167,7 +168,7 @@ export function ProfilePreview({
     <TextBlock>{t('Or, see if profiling can provide more context on this:')}</TextBlock>
   );
 
-  if (defined(target) && transactionHasProfile) {
+  if (target && transactionHasProfile) {
     return (
       <FlamegraphThemeProvider>
         {message}