fix(tracemetrics): Format aggregate header cell in widget viewer (#105664)

Currently, the table in the widget viewer renders with the long format
of the axis value. This creates a header title mapping so we can display
a more user-friendly name in the table.

e.g. instead of `p50(value,metric_name,distribution,-)` we'll only
display `p50(metric_name)`

Author: narsaynorath

static/app/components/modals/widgetViewerModal.tsx

@@ -1048,9 +1048,7 @@ function ViewerTableV2({
   const aliases = decodeColumnAliases(
     tableColumns,
     tableWidget.queries[selectedQueryIndex]?.fieldAliases ?? [],
-    tableWidget.widgetType === WidgetType.ISSUE
-      ? datasetConfig?.getFieldHeaderMap?.()
-      : {}
+    datasetConfig?.getFieldHeaderMap?.(tableWidget.queries[selectedQueryIndex]) ?? {}
   );
 
   // Inject any prettified function names that aren't currently aliased into the aliases

static/app/views/dashboards/datasetConfig/traceMetrics.tsx

@@ -164,13 +164,13 @@ function useTraceMetricsSearchBarDataProvider(
 
 export function formatTraceMetricsFunction(
   valueToParse: string,
-  defaultValue: string | ReactNode = ''
+  defaultValue?: string | ReactNode
 ) {
   const parsedFunction = parseFunction(valueToParse);
   if (parsedFunction) {
     return `${parsedFunction.name}(${parsedFunction.arguments[1] ?? '…'})`;
   }
-  return defaultValue;
+  return defaultValue ?? valueToParse;
 }
 
 export const TraceMetricsConfig: DatasetConfig<
@@ -259,6 +259,17 @@ export const TraceMetricsConfig: DatasetConfig<
   getCustomFieldRenderer: (field, meta, _organization) => {
     return getFieldRenderer(field, meta, false);
   },
+  getFieldHeaderMap: widgetQuery => {
+    return (
+      widgetQuery?.aggregates.reduce(
+        (acc, aggregate) => {
+          acc[aggregate] = formatTraceMetricsFunction(aggregate) as string;
+          return acc;
+        },
+        {} as Record<string, string>
+      ) ?? {}
+    );
+  },
 };
 
 function getPrimaryFieldOptions(