feat(trace-eap-waterfall): Cleaning up trace context sections (#90091)

- Only rendering contexts when we have data to populate them with. 
- Disabled collapse persistence for the context sections.

---------

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

Author: Abdkhan14

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

@@ -122,6 +122,7 @@ function TraceViewImpl({traceSlug}: {traceSlug: string}) {
                   tree={tree}
                   rootEvent={rootEvent}
                   onScrollToNode={traceWaterfallScroll.onScrollToNode}
+                  logs={logsTableData.logsData?.data}
                 />
               )}
             </TraceInnerLayout>

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

@@ -1,4 +1,3 @@
-import {useCallback} from 'react';
 import styled from '@emotion/styled';
 
 import Feature from 'sentry/components/acl/feature';
@@ -9,6 +8,7 @@ import type {EventTransaction} from 'sentry/types/event';
 import type {UseApiQueryResult} from 'sentry/utils/queryClient';
 import type RequestError from 'sentry/utils/requestError/requestError';
 import useOrganization from 'sentry/utils/useOrganization';
+import type {OurLogsResponseItem} from 'sentry/views/explore/logs/types';
 import type {SectionKey} from 'sentry/views/issueDetails/streamline/context';
 import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection';
 import {TraceContextProfiles} from 'sentry/views/performance/newTraceDetails/traceContextProfiles';
@@ -18,28 +18,21 @@ import {TraceLinkNavigationButton} from 'sentry/views/performance/newTraceDetail
 import type {TraceTree} from 'sentry/views/performance/newTraceDetails/traceModels/traceTree';
 import type {TraceTreeNode} from 'sentry/views/performance/newTraceDetails/traceModels/traceTreeNode';
 import {TraceViewLogsSection} from 'sentry/views/performance/newTraceDetails/traceOurlogs';
+import {useTraceContextSections} from 'sentry/views/performance/newTraceDetails/useTraceContextSections';
 
 type Props = {
+  logs: OurLogsResponseItem[] | undefined;
   onScrollToNode: (node: TraceTreeNode<TraceTree.NodeValue>) => void;
   rootEvent: UseApiQueryResult<EventTransaction, RequestError>;
   tree: TraceTree;
 };
 
-export function TraceContextPanel({tree, rootEvent, onScrollToNode}: Props) {
-  const renderTags = useCallback(() => {
-    if (!rootEvent.data) {
-      return null;
-    }
-
-    return (
-      <EventTagsTree
-        event={rootEvent.data}
-        meta={rootEvent.data._meta}
-        projectSlug={rootEvent.data.projectSlug ?? ''}
-        tags={rootEvent.data.tags ?? []}
-      />
-    );
-  }, [rootEvent.data]);
+export function TraceContextPanel({tree, rootEvent, onScrollToNode, logs}: Props) {
+  const {hasProfiles, hasLogs, hasTags} = useTraceContextSections({
+    tree,
+    rootEvent,
+    logs,
+  });
 
   const organization = useOrganization();
   const showLinkedTraces = organization?.features.includes('trace-view-linked-traces');
@@ -71,23 +64,35 @@ export function TraceContextPanel({tree, rootEvent, onScrollToNode}: Props) {
       )}
 
       <VitalMetersContainer id={TraceContextSectionKeys.WEB_VITALS}>
-        <TraceContextVitals tree={tree} />
+        <TraceContextVitals rootEvent={rootEvent} tree={tree} logs={logs} />
       </VitalMetersContainer>
-      <ContextRow>
-        <FoldSection
-          sectionKey={TraceContextSectionKeys.TAGS as string as SectionKey}
-          title={t('Tags')}
-        >
-          {renderTags()}
-        </FoldSection>
-      </ContextRow>
-      <ContextRow>
-        <TraceContextProfiles tree={tree} onScrollToNode={onScrollToNode} />
-      </ContextRow>
-      <Feature features={['ourlogs-enabled']}>
+      {hasTags && rootEvent.data && (
+        <ContextRow>
+          <FoldSection
+            sectionKey={TraceContextSectionKeys.TAGS as string as SectionKey}
+            title={t('Tags')}
+            disableCollapsePersistence
+          >
+            <EventTagsTree
+              event={rootEvent.data}
+              meta={rootEvent.data._meta}
+              projectSlug={rootEvent.data.projectSlug ?? ''}
+              tags={rootEvent.data.tags}
+            />
+          </FoldSection>
+        </ContextRow>
+      )}
+      {hasProfiles && (
         <ContextRow>
-          <TraceViewLogsSection />
+          <TraceContextProfiles tree={tree} onScrollToNode={onScrollToNode} />
         </ContextRow>
+      )}
+      <Feature features={['ourlogs-enabled']}>
+        {hasLogs && (
+          <ContextRow>
+            <TraceViewLogsSection />
+          </ContextRow>
+        )}
       </Feature>
     </Container>
   );
@@ -121,5 +126,8 @@ const TraceLinksNavigationContainer = styled('div')`
   display: flex;
   justify-content: space-between;
   flex-direction: row;
-  margin: ${space(1)} 0;
+
+  &:not(:empty) {
+    margin-top: ${space(1)};
+  }
 `;

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

@@ -1,13 +1,10 @@
-import EmptyStateWarning from 'sentry/components/emptyStateWarning';
-import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {t} from 'sentry/locale';
 import type {SectionKey} from 'sentry/views/issueDetails/streamline/context';
 import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection';
 import {TraceProfiles} from 'sentry/views/performance/newTraceDetails/traceDrawer/tabs/traceProfiles';
 import {TraceContextSectionKeys} from 'sentry/views/performance/newTraceDetails/traceHeader/scrollToSectionLinks';
 import type {TraceTree} from 'sentry/views/performance/newTraceDetails/traceModels/traceTree';
 import type {TraceTreeNode} from 'sentry/views/performance/newTraceDetails/traceModels/traceTreeNode';
-import {EmptyStateText} from 'sentry/views/traces/styles';
 
 export function TraceContextProfiles({
   tree,
@@ -16,24 +13,13 @@ export function TraceContextProfiles({
   onScrollToNode: (node: TraceTreeNode<TraceTree.NodeValue>) => void;
   tree: TraceTree;
 }) {
-  const hasProfiles = tree.profiled_events.size > 0;
-
   return (
     <FoldSection
       sectionKey={TraceContextSectionKeys.PROFILES as string as SectionKey}
       title={t('Profiles')}
+      disableCollapsePersistence
     >
-      {tree.type === 'loading' ? (
-        <LoadingIndicator />
-      ) : tree.type === 'trace' && hasProfiles ? (
-        <TraceProfiles tree={tree} onScrollToNode={onScrollToNode} />
-      ) : (
-        <EmptyStateWarning withIcon>
-          <EmptyStateText size="fontSizeExtraLarge">
-            {t('No profiles found')}
-          </EmptyStateText>
-        </EmptyStateWarning>
-      )}
+      <TraceProfiles tree={tree} onScrollToNode={onScrollToNode} />
     </FoldSection>
   );
 }

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

@@ -2,9 +2,13 @@ import styled from '@emotion/styled';
 
 import {Tooltip} from 'sentry/components/core/tooltip';
 import {space} from 'sentry/styles/space';
+import {EventTransaction} from 'sentry/types/event';
 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';
+import {UseApiQueryResult} from 'sentry/utils/queryClient';
+import RequestError from 'sentry/utils/requestError/requestError';
+import {OurLogsResponseItem} from 'sentry/views/explore/logs/types';
 import {VITAL_DESCRIPTIONS} from 'sentry/views/insights/browser/webVitals/components/webVitalDescription';
 import {WEB_VITALS_METERS_CONFIG} from 'sentry/views/insights/browser/webVitals/components/webVitalMeters';
 import type {WebVitals} from 'sentry/views/insights/browser/webVitals/types';
@@ -17,22 +21,18 @@ import {
   STATUS_TEXT,
 } from 'sentry/views/insights/browser/webVitals/utils/scoreToStatus';
 import type {TraceTree} from 'sentry/views/performance/newTraceDetails/traceModels/traceTree';
+import {useTraceContextSections} from 'sentry/views/performance/newTraceDetails/useTraceContextSections';
 
 type Props = {
+  logs: OurLogsResponseItem[] | undefined;
+  rootEvent: UseApiQueryResult<EventTransaction, RequestError>;
   tree: TraceTree;
 };
 
-export function treeHasValidVitals(tree: TraceTree) {
-  const allowedVitals = Object.keys(VITAL_DETAILS);
-  return Array.from(tree.vitals.values()).some(vitalGroup =>
-    vitalGroup.some(vital => allowedVitals.includes(`measurements.${vital.key}`))
-  );
-}
-
-export function TraceContextVitals({tree}: Props) {
-  const hasValidVitals = treeHasValidVitals(tree);
+export function TraceContextVitals({rootEvent, tree, logs}: Props) {
+  const {hasVitals} = useTraceContextSections({tree, rootEvent, logs});
 
-  if (!hasValidVitals) {
+  if (!hasVitals) {
     return null;
   }
 

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

@@ -241,7 +241,11 @@ export function TraceMetaDataHeader(props: TraceMetadataHeaderProps) {
             organization={props.organization}
           />
           <Flex>
-            <ScrollToSectionLinks tree={props.tree} />
+            <ScrollToSectionLinks
+              rootEvent={props.rootEventResults}
+              tree={props.tree}
+              logs={props.logs}
+            />
             <Projects projects={projects} logs={props.logs} tree={props.tree} />
           </Flex>
         </TraceHeaderComponents.HeaderRow>

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

@@ -5,9 +5,13 @@ import Feature from 'sentry/components/acl/feature';
 import {LinkButton} from 'sentry/components/core/button';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import type {EventTransaction} from 'sentry/types/event';
+import type {UseApiQueryResult} from 'sentry/utils/queryClient';
+import type RequestError from 'sentry/utils/requestError/requestError';
 import {useLocation} from 'sentry/utils/useLocation';
-import {treeHasValidVitals} from 'sentry/views/performance/newTraceDetails/traceContextVitals';
+import type {OurLogsResponseItem} from 'sentry/views/explore/logs/types';
 import type {TraceTree} from 'sentry/views/performance/newTraceDetails/traceModels/traceTree';
+import {useTraceContextSections} from 'sentry/views/performance/newTraceDetails/useTraceContextSections';
 
 export const enum TraceContextSectionKeys {
   TAGS = 'trace-context-tags',
@@ -54,29 +58,44 @@ function SectionLink({
   );
 }
 
-function ScrollToSectionLinks({tree}: {tree: TraceTree}) {
+function ScrollToSectionLinks({
+  rootEvent,
+  tree,
+  logs,
+}: {
+  logs: OurLogsResponseItem[];
+  rootEvent: UseApiQueryResult<EventTransaction, RequestError>;
+  tree: TraceTree;
+}) {
   const location = useLocation();
-  const hasValidVitals = treeHasValidVitals(tree);
-  const hasProfiles = tree.profiled_events.size > 0;
+  const {hasVitals, hasProfiles, hasLogs, hasTags} = useTraceContextSections({
+    tree,
+    rootEvent,
+    logs,
+  });
 
-  return (
+  return hasVitals || hasTags || hasProfiles || hasLogs ? (
     <Wrapper>
       <div aria-hidden>{t('Jump to:')}</div>
-      {hasValidVitals && (
+      {hasVitals && (
         <SectionLink
           sectionKey={TraceContextSectionKeys.WEB_VITALS}
           location={location}
         />
       )}
-      <SectionLink sectionKey={TraceContextSectionKeys.TAGS} location={location} />
+      {hasTags && (
+        <SectionLink sectionKey={TraceContextSectionKeys.TAGS} location={location} />
+      )}
       {hasProfiles && (
         <SectionLink sectionKey={TraceContextSectionKeys.PROFILES} location={location} />
       )}
       <Feature features={['ourlogs-enabled']}>
-        <SectionLink sectionKey={TraceContextSectionKeys.LOGS} location={location} />
+        {hasLogs && (
+          <SectionLink sectionKey={TraceContextSectionKeys.LOGS} location={location} />
+        )}
       </Feature>
     </Wrapper>
-  );
+  ) : null;
 }
 
 const Wrapper = styled('div')`

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

@@ -16,7 +16,9 @@ import {
   useSetLogsQuery,
 } from 'sentry/views/explore/contexts/logs/logsPageParams';
 import {LogsTable} from 'sentry/views/explore/logs/logsTable';
-import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection';
+import type {UseExploreLogsTableResult} from 'sentry/views/explore/logs/useLogsQuery';
+import type {SectionKey} from 'sentry/views/issueDetails/streamline/context';
+import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection';
 import {TraceContextSectionKeys} from 'sentry/views/performance/newTraceDetails/traceHeader/scrollToSectionLinks';
 
 type UseTraceViewLogsDataProps = {
@@ -40,26 +42,27 @@ export function TraceViewLogsDataProvider({
 }
 
 export function TraceViewLogsSection() {
+  const tableData = useLogsPageData();
+  if (!tableData?.logsData || tableData.logsData.data.length === 0) {
+    return null;
+  }
   return (
-    <InterimSection
-      key="logs"
-      type={TraceContextSectionKeys.LOGS}
+    <FoldSection
+      sectionKey={TraceContextSectionKeys.LOGS as string as SectionKey}
       title={t('Logs')}
       data-test-id="logs-data-section"
       initialCollapse={false}
+      disableCollapsePersistence
     >
-      <LogsSectionContent />
-    </InterimSection>
+      <LogsSectionContent tableData={tableData.logsData} />
+    </FoldSection>
   );
 }
 
-function LogsSectionContent() {
+function LogsSectionContent({tableData}: {tableData: UseExploreLogsTableResult}) {
   const setLogsQuery = useSetLogsQuery();
   const logsSearch = useLogsSearch();
-  const tableData = useLogsPageData();
-  if (!tableData?.logsData) {
-    return null;
-  }
+
   return (
     <Fragment>
       <SearchQueryBuilder
@@ -71,7 +74,7 @@ function LogsSectionContent() {
         onSearch={setLogsQuery}
       />
       <TableContainer>
-        <LogsTable tableData={tableData.logsData} showHeader={false} />
+        <LogsTable tableData={tableData} showHeader={false} />
       </TableContainer>
     </Fragment>
   );

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

@@ -0,0 +1,35 @@
+import {EventTransaction} from 'sentry/types/event';
+import {VITAL_DETAILS} from 'sentry/utils/performance/vitals/constants';
+import {UseApiQueryResult} from 'sentry/utils/queryClient';
+import RequestError from 'sentry/utils/requestError/requestError';
+import {OurLogsResponseItem} from 'sentry/views/explore/logs/types';
+import {TraceTree} from 'sentry/views/performance/newTraceDetails/traceModels/traceTree';
+
+export function useTraceContextSections({
+  tree,
+  rootEvent,
+  logs,
+}: {
+  logs: OurLogsResponseItem[] | undefined;
+  rootEvent: UseApiQueryResult<EventTransaction, RequestError>;
+  tree: TraceTree;
+}) {
+  const hasProfiles = tree.type === 'trace' && tree.profiled_events.size > 0;
+  const hasLogs = logs && logs?.length > 0;
+  const hasTags =
+    rootEvent.data &&
+    rootEvent.data.tags.length > 0 &&
+    !(tree.type === 'empty' && hasLogs); // We don't show tags for only logs trace views
+
+  const allowedVitals = Object.keys(VITAL_DETAILS);
+  const hasVitals = Array.from(tree.vitals.values()).some(vitalGroup =>
+    vitalGroup.some(vital => allowedVitals.includes(`measurements.${vital.key}`))
+  );
+
+  return {
+    hasProfiles,
+    hasLogs,
+    hasTags,
+    hasVitals,
+  };
+}