fix(tracemetrics): Metric panel title should use equation with label

narsaynorath · narsaynorath · commit 791cba4d7d46 · 2026-04-15T22:35:06.000-04:00
diff --git a/static/app/views/explore/metrics/equationBuilder/index.spec.tsx b/static/app/views/explore/metrics/equationBuilder/index.spec.tsx
@@ -55,7 +55,8 @@ describe('EquationBuilder', () => {
     expect(handleExpressionChange).toHaveBeenCalledWith(
       expect.objectContaining({
         text: 'count(value,metricA,distribution,none) * 2',
-      })
+      }),
+      'A * 2'
     );
   });
 });
diff --git a/static/app/views/explore/metrics/equationBuilder/index.tsx b/static/app/views/explore/metrics/equationBuilder/index.tsx
@@ -23,7 +23,7 @@ export function EquationBuilder({
   onReferenceLabelsChange,
 }: {
   expression: string;
-  handleExpressionChange: (expression: Expression) => void;
+  handleExpressionChange: (resolved: Expression, internalText: string) => void;
   onReferenceLabelsChange?: (labels: string[]) => void;
   referenceMap?: Record<string, string>;
 }) {
@@ -49,7 +49,10 @@ export function EquationBuilder({
     (newExpression: Expression) => {
       startTransition(() => {
         if (newExpression.isValid) {
-          handleExpressionChange(resolveExpression(newExpression, referenceMap));
+          handleExpressionChange(
+            resolveExpression(newExpression, referenceMap),
+            newExpression.text
+          );
         }
       });
     },
diff --git a/static/app/views/explore/metrics/metricGraph/index.tsx b/static/app/views/explore/metrics/metricGraph/index.tsx
@@ -57,6 +57,7 @@ interface MetricsGraphProps {
   additionalActions?: React.ReactNode;
   infoContentHidden?: boolean;
   isMetricOptionsEmpty?: boolean;
+  title?: string;
 }
 
 export function MetricsGraph({
@@ -65,6 +66,7 @@ export function MetricsGraph({
   additionalActions,
   infoContentHidden,
   isMetricOptionsEmpty,
+  title,
 }: MetricsGraphProps) {
   const metricQueries = useMultiMetricsQueryParams();
   const visualize = useMetricVisualize();
@@ -91,6 +93,7 @@ export function MetricsGraph({
       additionalActions={additionalActions}
       infoContentHidden={infoContentHidden}
       isMetricOptionsEmpty={isMetricOptionsEmpty}
+      title={title}
     />
   );
 }
@@ -110,6 +113,7 @@ function Graph({
   infoContentHidden,
   additionalActions,
   isMetricOptionsEmpty,
+  title,
 }: GraphProps) {
   const organization = useOrganization();
   const aggregate = visualize.yAxis;
@@ -178,8 +182,8 @@ function Graph({
     if (visualizes.length > 1) {
       return metricName;
     }
-    return metricLabel ?? prettifyAggregation(aggregate) ?? aggregate;
-  }, [aggregate, metricLabel, metricName, visualizes.length]);
+    return title ?? metricLabel ?? prettifyAggregation(aggregate) ?? aggregate;
+  }, [aggregate, metricLabel, metricName, visualizes.length, title]);
 
   const Title = <Widget.WidgetTitle title={chartTitle} />;
 
diff --git a/static/app/views/explore/metrics/metricPanel/index.tsx b/static/app/views/explore/metrics/metricPanel/index.tsx
@@ -18,6 +18,7 @@ import {
   getTraceSamplesTableFields,
   TraceSamplesTableColumns,
 } from 'sentry/views/explore/metrics/constants';
+import {unresolveExpression} from 'sentry/views/explore/metrics/equationBuilder/utils';
 import {useMetricAggregatesTable} from 'sentry/views/explore/metrics/hooks/useMetricAggregatesTable';
 import {useMetricSamplesTable} from 'sentry/views/explore/metrics/hooks/useMetricSamplesTable';
 import {useMetricTimeseries} from 'sentry/views/explore/metrics/hooks/useMetricTimeseries';
@@ -89,6 +90,13 @@ export function MetricPanel({
   const topEvents = useTopEvents();
   const visualize = useMetricVisualize();
 
+  const [title, setTitle] = useState<string | undefined>(() => {
+    if (isVisualizeEquation(visualize)) {
+      return unresolveExpression(visualize.expression.text, referenceMap);
+    }
+    return undefined;
+  });
+
   const areQueriesEnabled = isVisualizeFunction(visualize)
     ? Boolean(traceMetric.name) && !isMetricOptionsEmpty
     : isVisualizeEquation(visualize) && Boolean(visualize.expression.text);
@@ -143,6 +151,7 @@ export function MetricPanel({
                 dragAttributes={dragAttributes}
                 referencedMetricLabels={referencedMetricLabels}
                 onEquationLabelsChange={onEquationLabelsChange}
+                onTitleChange={setTitle}
               />
             </Container>
             {visualize.visible ? (
@@ -169,6 +178,7 @@ export function MetricPanel({
                       infoContentHidden={infoContentHidden}
                       setInfoContentHidden={setInfoContentHidden}
                       isMetricOptionsEmpty={isMetricOptionsEmpty}
+                      title={title}
                     />
                   </Container>
                 </Activity>
@@ -192,6 +202,7 @@ export function MetricPanel({
             infoContentHidden={infoContentHidden}
             setInfoContentHidden={setInfoContentHidden}
             isMetricOptionsEmpty={isMetricOptionsEmpty}
+            title={title}
           />
         ) : (
           <StackedOrientation
@@ -203,6 +214,7 @@ export function MetricPanel({
             infoContentHidden={infoContentHidden}
             setInfoContentHidden={setInfoContentHidden}
             isMetricOptionsEmpty={isMetricOptionsEmpty}
+            title={title}
           />
         )}
       </PanelBody>
diff --git a/static/app/views/explore/metrics/metricPanel/sideBySideOrientation.tsx b/static/app/views/explore/metrics/metricPanel/sideBySideOrientation.tsx
@@ -30,6 +30,7 @@ export function SideBySideOrientation({
   infoContentHidden,
   setInfoContentHidden,
   isMetricOptionsEmpty,
+  title,
 }: {
   infoContentHidden: boolean;
   isMetricOptionsEmpty: boolean;
@@ -38,6 +39,7 @@ export function SideBySideOrientation({
   setOrientation: (orientation: TableOrientation) => void;
   timeseriesResult: ReturnType<typeof useMetricTimeseries>['result'];
   traceMetric: TraceMetric;
+  title?: string;
 }) {
   const organization = useOrganization();
   const hasMetricsUIRefresh = canUseMetricsUIRefresh(organization);
@@ -52,6 +54,7 @@ export function SideBySideOrientation({
             timeseriesResult={timeseriesResult}
             orientation={orientation}
             isMetricOptionsEmpty={isMetricOptionsEmpty}
+            title={title}
           />
         </Container>
         <Container minWidth="0">
@@ -98,6 +101,7 @@ export function SideBySideOrientation({
           additionalActions={additionalActions}
           infoContentHidden={infoContentHidden}
           isMetricOptionsEmpty={isMetricOptionsEmpty}
+          title={title}
         />
       </div>
     );
@@ -114,6 +118,7 @@ export function SideBySideOrientation({
                 timeseriesResult={timeseriesResult}
                 orientation={orientation}
                 isMetricOptionsEmpty={isMetricOptionsEmpty}
+                title={title}
               />
             ),
             default: defaultSplit,
diff --git a/static/app/views/explore/metrics/metricPanel/stackedOrientation.tsx b/static/app/views/explore/metrics/metricPanel/stackedOrientation.tsx
@@ -19,6 +19,7 @@ export function StackedOrientation({
   infoContentHidden,
   setInfoContentHidden,
   isMetricOptionsEmpty,
+  title,
 }: {
   canChangeOrientation: boolean;
   infoContentHidden: boolean;
@@ -28,6 +29,7 @@ export function StackedOrientation({
   setOrientation: (orientation: TableOrientation) => void;
   timeseriesResult: ReturnType<typeof useMetricTimeseries>['result'];
   traceMetric: TraceMetric;
+  title?: string;
 }) {
   const additionalInfoTabActions = (
     <Flex direction="row">
@@ -50,6 +52,7 @@ export function StackedOrientation({
           timeseriesResult={timeseriesResult}
           orientation={orientation}
           isMetricOptionsEmpty={isMetricOptionsEmpty}
+          title={title}
         />
       </StackedGraphWrapper>
       <div>
diff --git a/static/app/views/explore/metrics/metricToolbar/index.tsx b/static/app/views/explore/metrics/metricToolbar/index.tsx
@@ -35,6 +35,7 @@ interface MetricToolbarProps {
   dragAttributes?: DraggableAttributes;
   dragListeners?: SyntheticListenerMap;
   onEquationLabelsChange?: (equationLabel: string, labels: string[]) => void;
+  onTitleChange?: (title: string) => void;
   referenceMap?: Record<string, string>;
   referencedMetricLabels?: Set<string>;
 }
@@ -47,6 +48,7 @@ export function MetricToolbar({
   dragAttributes,
   referencedMetricLabels,
   onEquationLabelsChange,
+  onTitleChange,
 }: MetricToolbarProps) {
   const organization = useOrganization();
   const breakpoints = useBreakpoints();
@@ -80,10 +82,11 @@ export function MetricToolbar({
   );
 
   const handleExpressionChange = useCallback(
-    (newExpression: Expression) => {
+    (newExpression: Expression, internalText: string) => {
       setVisualize(visualize.replace({yAxis: `${EQUATION_PREFIX}${newExpression.text}`}));
+      onTitleChange?.(internalText);
     },
-    [setVisualize, visualize]
+    [setVisualize, visualize, onTitleChange]
   );
 
   const dndGrid = dragListeners ? 'auto ' : '';
diff --git a/static/app/views/explore/metrics/metricsQueryParams.tsx b/static/app/views/explore/metrics/metricsQueryParams.tsx
@@ -160,7 +160,6 @@ export function useMetricLabel(): string {
   const {metric} = useTraceMetricContext();
 
   if (isVisualizeEquation(visualize)) {
-    // TODO: This should show the unresolved expression from the equation builder
     return visualize.expression.text;
   }
   if (isVisualizeFunction(visualize) && visualize.parsedFunction) {

Original file line number	Diff line number	Diff line change
`@@ -160,7 +160,6 @@ export function useMetricLabel(): string {`
`160`	`160`	`const {metric} = useTraceMetricContext();`
`161`	`161`
`162`	`162`	`if (isVisualizeEquation(visualize)) {`
`163`		`- // TODO: This should show the unresolved expression from the equation builder`
`164`	`163`	`return visualize.expression.text;`
`165`	`164`	`}`
`166`	`165`	`if (isVisualizeFunction(visualize) && visualize.parsedFunction) {`