feat(trace): Add pinnable attribute column to trace waterfall

static/app/views/explore/components/traceItemAttributes/attributesTree.tsx

@@ -78,6 +78,9 @@ interface AttributesTreeProps<
   columnCount?: number;
   config?: AttributesTreeRowConfig;
   getAdjustedAttributeKey?: (attribute: TraceItemResponseAttribute) => string;
+  // If provided, renders the returned node immediately after the attribute key
+  // (e.g. an icon indicating the attribute's state). Return null for no suffix.
+  getAttributeKeySuffix?: (content: AttributesTreeContent) => React.ReactNode;
   getCustomActions?: (content: AttributesTreeContent) => MenuItemProps[];
 }
 
@@ -102,6 +105,7 @@ interface AttributesTreeRowProps<
   attributeKey: string;
   content: AttributesTreeContent;
   config?: AttributesTreeRowConfig;
+  getAttributeKeySuffix?: (content: AttributesTreeContent) => React.ReactNode;
   getCustomActions?: (content: AttributesTreeContent) => MenuItemProps[];
   isLast?: boolean;
   spacerCount?: number;
@@ -172,6 +176,7 @@ function getAttributesTreeRows<RendererExtra extends RenderFunctionBaggage>({
   isLast = false,
   config = {},
   getCustomActions,
+  getAttributeKeySuffix,
 }: AttributesTreeRowProps<RendererExtra> &
   AttributesFieldRender<RendererExtra> & {
     uniqueKey: string;
@@ -189,6 +194,7 @@ function getAttributesTreeRows<RendererExtra extends RenderFunctionBaggage>({
         config,
         rendererExtra,
         getCustomActions,
+        getAttributeKeySuffix,
       });
       return rows.concat(branchRows);
     },
@@ -206,6 +212,7 @@ function getAttributesTreeRows<RendererExtra extends RenderFunctionBaggage>({
       isLast={isLast}
       config={config}
       getCustomActions={getCustomActions}
+      getAttributeKeySuffix={getAttributeKeySuffix}
     />,
     ...subtreeRows,
   ];
@@ -223,6 +230,7 @@ function AttributesTreeColumns<RendererExtra extends RenderFunctionBaggage>({
   config = {},
   getCustomActions,
   getAdjustedAttributeKey,
+  getAttributeKeySuffix,
 }: AttributesTreeColumnsProps<RendererExtra>) {
   const assembledColumns = useMemo(() => {
     if (!attributes) {
@@ -253,6 +261,7 @@ function AttributesTreeColumns<RendererExtra extends RenderFunctionBaggage>({
         rendererExtra: renderExtra,
         config,
         getCustomActions,
+        getAttributeKeySuffix,
       })
     );
 
@@ -299,6 +308,7 @@ function AttributesTreeColumns<RendererExtra extends RenderFunctionBaggage>({
     config,
     getCustomActions,
     getAdjustedAttributeKey,
+    getAttributeKeySuffix,
   ]);
 
   return <Fragment>{assembledColumns}</Fragment>;
@@ -328,12 +338,14 @@ function AttributesTreeRow<RendererExtra extends RenderFunctionBaggage>({
   isLast = false,
   config = {},
   getCustomActions,
+  getAttributeKeySuffix,
   ...props
 }: AttributesTreeRowProps<RendererExtra>) {
   const theme = useTheme();
   const originalAttribute = content.originalAttribute;
   const hasErrors = false; // No error handling in this simplified version
   const hasStem = !isLast && isEmptyObject(content.subtree);
+  const keySuffix = getAttributeKeySuffix?.(content);
 
   if (!originalAttribute) {
     return (
@@ -372,6 +384,7 @@ function AttributesTreeRow<RendererExtra extends RenderFunctionBaggage>({
           data-test-id={`tree-key-${content.originalAttribute?.original_attribute_key}`}
         >
           {attributeKey}
+          {keySuffix}
         </TreeKey>
       </TreeKeyTrunk>
       <TreeValueTrunk>

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

@@ -51,6 +51,10 @@ import {
 import {TraceStateProvider} from './traceState/traceStateProvider';
 import {ErrorsOnlyWarnings} from './traceTypeWarnings/errorsOnlyWarnings';
 import {TraceMetaDataHeader} from './traceHeader';
+import {
+  getTraceAdditionalAttributes,
+  useTracePinnedAttribute,
+} from './tracePinnedAttribute';
 import {useInitialTraceMetricData} from './useInitialTraceMetricData';
 import {useTraceEventView} from './useTraceEventView';
 import {useTraceQueryParams} from './useTraceQueryParams';
@@ -137,16 +141,19 @@ function TraceViewImplInner({traceSlug}: {traceSlug: string}) {
     metaMetricsCount === undefined ? metricsData : {count: metaMetricsCount};
   const hideTraceWaterfallIfEmpty = (logsData?.length ?? 0) > 0;
 
+  const {pinnedAttribute} = useTracePinnedAttribute();
+  // Request the pinned attribute only when the trace endpoint does not already
+  // return it. Sorted for a stable react-query key so toggling unrelated state
+  // never triggers a refetch.
+  const additionalAttributes = useMemo(
+    () => getTraceAdditionalAttributes(pinnedAttribute),
+    [pinnedAttribute]
+  );
+
   const trace = useTrace({
     traceSlug,
     timestamp: queryParams.timestamp,
-    additionalAttributes: [
-      'thread.id',
-      'tags[performance.timeOrigin,number]',
-      'gen_ai.operation.type',
-      'http.response.status_code',
-      'span.status',
-    ],
+    additionalAttributes,
   });
   const tree = useTraceTree({traceSlug, trace, replay: null});