feat(trace-eap-waterfall): Adding persistent toggle for trace format (#88390)

Initially it's set to `NON-EAP`.

<img width="1259" alt="Screenshot 2025-03-31 at 5 18 42 PM"
src="https://github.com/user-attachments/assets/4685518d-8aa0-4419-a527-74de5fef8a1c"
/>

---------

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

Author: Abdkhan14

static/app/components/events/interfaces/performance/eventTraceView.tsx

@@ -20,7 +20,7 @@ import {useIssuesTraceTree} from 'sentry/views/performance/newTraceDetails/trace
 import {useTrace} from 'sentry/views/performance/newTraceDetails/traceApi/useTrace';
 import {useTraceMeta} from 'sentry/views/performance/newTraceDetails/traceApi/useTraceMeta';
 import {useTraceRootEvent} from 'sentry/views/performance/newTraceDetails/traceApi/useTraceRootEvent';
-import {SwitchToNonEAPTraceButton} from 'sentry/views/performance/newTraceDetails/traceHeader';
+import {ToggleTraceFormatButton} from 'sentry/views/performance/newTraceDetails/traceHeader';
 import {TraceViewSources} from 'sentry/views/performance/newTraceDetails/traceHeader/breadcrumbs';
 import {
   loadTraceViewPreferences,
@@ -167,7 +167,7 @@ export function EventTraceView({group, event, organization}: EventTraceViewProps
       title={t('Trace Preview')}
       actions={
         <ButtonBar gap={1}>
-          <SwitchToNonEAPTraceButton location={location} organization={organization} />
+          <ToggleTraceFormatButton location={location} organization={organization} />
           <LinkButton
             size="xs"
             to={getTraceLinkForIssue(traceTarget)}

static/app/views/performance/newTraceDetails/traceApi/useTrace.tsx

@@ -15,6 +15,8 @@ import {decodeScalar} from 'sentry/utils/queryString';
 import type RequestError from 'sentry/utils/requestError/requestError';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
+import {useSyncedLocalStorageState} from 'sentry/utils/useSyncedLocalStorageState';
+import {TRACE_FORMAT_PREFERENCE_KEY} from 'sentry/views/performance/newTraceDetails/traceHeader';
 
 import type {TraceTree} from '../traceModels/traceTree';
 
@@ -47,14 +49,12 @@ export function getTraceQueryParams(
   pageEnd?: string;
   pageStart?: string;
   statsPeriod?: string;
-  trace_format?: string;
 } {
   const normalizedParams = normalizeDateTimeParams(query, {
     allowAbsolutePageDatetime: true,
   });
   const statsPeriod = decodeScalar(normalizedParams.statsPeriod);
   const demo = decodeScalar(normalizedParams.demo);
-  const trace_format = decodeScalar(normalizedParams.trace_format);
   const timestamp = options.timestamp ?? decodeScalar(normalizedParams.timestamp);
   let limit = options.limit ?? decodeScalar(normalizedParams.limit);
   if (typeof limit === 'string') {
@@ -88,7 +88,6 @@ export function getTraceQueryParams(
     timestamp: timestamp?.toString(),
     targetId,
     useSpans: 1,
-    trace_format,
   };
   for (const key in queryParams) {
     if (
@@ -212,19 +211,21 @@ export function useTrace(
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [options.limit, options.timestamp, query.trace_format]);
 
-  const {trace_format, ...queryParamsWithoutTraceFormat} = queryParams;
-
   const isDemoMode = Boolean(queryParams.demo);
+  const [storedTraceFormat] = useSyncedLocalStorageState(
+    TRACE_FORMAT_PREFERENCE_KEY,
+    'non-eap'
+  );
   const isEAPEnabled =
-    organization.features.includes('trace-spans-format') && trace_format !== 'non-eap';
+    organization.features.includes('trace-spans-format') && storedTraceFormat === 'eap';
   const hasValidTrace = Boolean(options.traceSlug && organization.slug);
 
   const demoTrace = useDemoTrace(queryParams.demo, organization);
 
   const traceQuery = useApiQuery<TraceSplitResults<TraceTree.Transaction>>(
     [
       `/organizations/${organization.slug}/events-trace/${options.traceSlug ?? ''}/`,
-      {query: queryParamsWithoutTraceFormat},
+      {query: queryParams},
     ],
     {
       staleTime: Infinity,
@@ -235,7 +236,7 @@ export function useTrace(
   const eapTraceQuery = useApiQuery<TraceTree.EAPTrace>(
     [
       `/organizations/${organization.slug}/trace/${options.traceSlug ?? ''}/`,
-      {query: {...queryParamsWithoutTraceFormat, project: -1}},
+      {query: {...queryParams, project: -1}},
     ],
     {
       staleTime: Infinity,

static/app/views/performance/newTraceDetails/traceApi/useTraceRootEvent.tsx

@@ -2,6 +2,8 @@ import type {EventTransaction} from 'sentry/types/event';
 import {isTraceSplitResult} from 'sentry/utils/performance/quickTrace/utils';
 import {useApiQuery} from 'sentry/utils/queryClient';
 import useOrganization from 'sentry/utils/useOrganization';
+import {useSyncedLocalStorageState} from 'sentry/utils/useSyncedLocalStorageState';
+import {TRACE_FORMAT_PREFERENCE_KEY} from 'sentry/views/performance/newTraceDetails/traceHeader';
 import type {TraceTree} from 'sentry/views/performance/newTraceDetails/traceModels/traceTree';
 
 export function useTraceRootEvent(trace: TraceTree.Trace | null) {
@@ -11,6 +13,10 @@ export function useTraceRootEvent(trace: TraceTree.Trace | null) {
       : trace[0]
     : null;
   const organization = useOrganization();
+  const [storedTraceFormat] = useSyncedLocalStorageState(
+    TRACE_FORMAT_PREFERENCE_KEY,
+    'non-eap'
+  );
 
   return useApiQuery<EventTransaction>(
     [
@@ -23,7 +29,11 @@ export function useTraceRootEvent(trace: TraceTree.Trace | null) {
     ],
     {
       staleTime: 0,
-      enabled: !!trace && !!root?.project_slug && !!root?.event_id,
+      enabled:
+        !!trace &&
+        !!root?.project_slug &&
+        !!root?.event_id &&
+        storedTraceFormat === 'non-eap',
     }
   );
 }

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

@@ -23,7 +23,7 @@ import type {UseApiQueryResult} from 'sentry/utils/queryClient';
 import type RequestError from 'sentry/utils/requestError/requestError';
 import {useFeedbackForm} from 'sentry/utils/useFeedbackForm';
 import {useLocation} from 'sentry/utils/useLocation';
-import {useNavigate} from 'sentry/utils/useNavigate';
+import {useSyncedLocalStorageState} from 'sentry/utils/useSyncedLocalStorageState';
 import {hasDatasetSelector} from 'sentry/views/dashboards/utils';
 import {ProjectsRenderer} from 'sentry/views/explore/tables/tracesTable/fieldRenderers';
 import {useModuleURLBuilder} from 'sentry/views/insights/common/utils/useModuleURL';
@@ -73,33 +73,31 @@ function FeedbackButton() {
   ) : null;
 }
 
-export function SwitchToNonEAPTraceButton({
-  location,
+export const TRACE_FORMAT_PREFERENCE_KEY = 'trace_format_preference';
+
+export function ToggleTraceFormatButton({
   organization,
 }: {
   location: Location;
   organization: Organization;
 }) {
-  const navigate = useNavigate();
-  const switchToNonEAPTrace = useCallback(() => {
-    navigate({
-      ...location,
-      query: {
-        ...location.query,
-        trace_format: 'non-eap',
-      },
-    });
-  }, [location, navigate]);
+  const [storedTraceFormat, setStoredTraceFormat] = useSyncedLocalStorageState(
+    TRACE_FORMAT_PREFERENCE_KEY,
+    'non-eap'
+  );
 
   return (
-    <Feature organization={organization} features="visibility-explore-admin">
+    <Feature organization={organization} features="trace-spans-format">
       <Button
-        disabled={location.query.trace_format === 'non-eap'}
         size="xs"
-        aria-label="non-eap-trace-btn"
-        onClick={switchToNonEAPTrace}
+        aria-label="toggle-trace-format-btn"
+        onClick={() => {
+          setStoredTraceFormat(storedTraceFormat === 'eap' ? 'non-eap' : 'eap');
+        }}
       >
-        {t('Switch to Non-EAP Trace')}
+        {storedTraceFormat === 'eap'
+          ? t('Switch to Non-EAP Trace')
+          : t('Switch to EAP Trace')}
       </Button>
     </Feature>
   );
@@ -123,7 +121,7 @@ function PlaceHolder({organization}: {organization: Organization}) {
             )}
           />
           <ButtonBar gap={1}>
-            <SwitchToNonEAPTraceButton location={location} organization={organization} />
+            <ToggleTraceFormatButton location={location} organization={organization} />
             <FeedbackButton />
           </ButtonBar>
         </HeaderRow>
@@ -308,7 +306,7 @@ export function TraceMetaDataHeader(props: TraceMetadataHeaderProps) {
             )}
           />
           <ButtonBar gap={1}>
-            <SwitchToNonEAPTraceButton
+            <ToggleTraceFormatButton
               location={location}
               organization={props.organization}
             />