Simplify using hook

Author: narsaynorath

static/app/views/explore/metrics/equationBuilder.tsx

@@ -122,18 +122,25 @@ export function EquationBuilder({
     }
   }, [referenceMap, internalExpression, handleExpressionChange]);
 
+  // Report which labels this equation references after unresolving.
+  // Cleans up on unmount so deleted equations don't block metric deletion.
+  useEffect(() => {
+    const expr = new Expression(internalExpression, references);
+    onReferenceLabelsChange?.(extractReferenceLabels(expr));
+    return () => {
+      onReferenceLabelsChange?.([]);
+    };
+  }, [internalExpression, references, onReferenceLabelsChange]);
+
   const handleInternalExpressionChange = useCallback(
     (newExpression: Expression) => {
       startTransition(() => {
         if (newExpression.isValid) {
-          // Report the labels from the pre-resolved expression so the
-          // caller knows exactly which labels (A, B, etc.) were typed.
-          onReferenceLabelsChange?.(extractReferenceLabels(newExpression));
           handleExpressionChange(resolveExpression(newExpression, referenceMap));
         }
       });
     },
-    [handleExpressionChange, onReferenceLabelsChange, referenceMap]
+    [handleExpressionChange, referenceMap]
   );
 
   return (

static/app/views/explore/metrics/hooks/useEquationReferencedLabels.tsx

@@ -0,0 +1,31 @@
+import {useCallback, useMemo, useState} from 'react';
+
+/**
+ * Tracks which metric labels (A, B, etc.) are referenced by equations.
+ * Each EquationBuilder reports its labels via onEquationLabelsChange after
+ * unresolving its expression. The aggregate set is derived from state.
+ */
+export function useEquationReferencedLabels() {
+  const [equationLabels, onEquationLabelsChangeState] = useState(
+    new Map<string, string[]>()
+  );
+
+  const onEquationLabelsChange = useCallback(
+    (equationLabel: string, labels: string[]) => {
+      onEquationLabelsChangeState(prev => new Map(prev).set(equationLabel, labels));
+    },
+    []
+  );
+
+  const referencedMetricLabels = useMemo(() => {
+    const set = new Set<string>();
+    for (const labels of equationLabels.values()) {
+      for (const label of labels) {
+        set.add(label);
+      }
+    }
+    return set;
+  }, [equationLabels]);
+
+  return {referencedMetricLabels, onEquationLabelsChange};
+}

static/app/views/explore/metrics/metricsTab.tsx

@@ -1,4 +1,4 @@
-import {Fragment, useCallback, useMemo, useState} from 'react';
+import {Fragment} from 'react';
 import {closestCenter, DndContext} from '@dnd-kit/core';
 import {SortableContext, verticalListSortingStrategy} from '@dnd-kit/sortable';
 import styled from '@emotion/styled';
@@ -23,6 +23,7 @@ import {
 import {ToolbarVisualizeAddChart} from 'sentry/views/explore/components/toolbar/toolbarVisualize';
 import {useMetricsAnalytics} from 'sentry/views/explore/hooks/useAnalytics';
 import {useMetricOptions} from 'sentry/views/explore/hooks/useMetricOptions';
+import {useEquationReferencedLabels} from 'sentry/views/explore/metrics/hooks/useEquationReferencedLabels';
 import {useMetricReferences} from 'sentry/views/explore/metrics/hooks/useMetricReferences';
 import {useSortableMetricQueries} from 'sentry/views/explore/metrics/hooks/useSortableMetricQueries';
 import {MetricPanel} from 'sentry/views/explore/metrics/metricPanel';
@@ -47,81 +48,6 @@ import {
 import {isVisualizeEquation} from 'sentry/views/explore/queryParams/visualize';
 export const METRICS_CHART_GROUP = 'metrics-charts-group';
 
-/**
- * Tracks which metric labels (A, B, etc.) are referenced by equations.
- *
- * On initial load, labels are precomputed by reverse-resolving each
- * equation's stored expression against the referenceMap. When the user
- * edits an equation, the EquationBuilder reports the exact labels that
- * were typed, which override the precomputed values for that equation.
- */
-function useEquationReferencedLabels() {
-  const metricQueries = useMultiMetricsQueryParams();
-  const referenceMap = useMetricReferences();
-
-  // User-reported labels from equation edits override precomputed values
-  const [userLabelsByEquation, setUserLabelsByEquation] = useState<
-    Map<string, readonly string[]>
-  >(() => new Map());
-
-  const onEquationLabelsChange = useCallback(
-    (equationLabel: string, labels: string[]) => {
-      setUserLabelsByEquation(prev => {
-        const current = prev.get(equationLabel);
-        if (
-          current?.length === labels.length &&
-          current.every((l, i) => l === labels[i])
-        ) {
-          return prev;
-        }
-        const next = new Map(prev);
-        next.set(equationLabel, labels);
-        return next;
-      });
-    },
-    []
-  );
-
-  const referencedMetricLabels = useMemo(() => {
-    // Build reverse map (function string → first label) for precomputation
-    const reversedReferenceMap: Record<string, string> = {};
-    for (const [label, functionString] of Object.entries(referenceMap)) {
-      if (!reversedReferenceMap[functionString]) {
-        reversedReferenceMap[functionString] = label;
-      }
-    }
-
-    const set = new Set<string>();
-    for (const q of metricQueries) {
-      const v = q.queryParams.visualizes[0];
-      if (!v || !isVisualizeEquation(v)) {
-        continue;
-      }
-
-      const eqLabel = q.label ?? '';
-      const userLabels = userLabelsByEquation.get(eqLabel);
-
-      if (userLabels) {
-        // Use user-reported labels (from explicit equation edits)
-        for (const label of userLabels) {
-          set.add(label);
-        }
-      } else {
-        // Precompute from stored expression via reverse-resolve
-        for (const token of v.expression.tokens) {
-          const referencedLabel = reversedReferenceMap[token.text];
-          if (referencedLabel) {
-            set.add(referencedLabel);
-          }
-        }
-      }
-    }
-    return set;
-  }, [metricQueries, referenceMap, userLabelsByEquation]);
-
-  return {referencedMetricLabels, onEquationLabelsChange};
-}
-
 type MetricsTabProps = {
   datePageFilterProps: DatePageFilterProps;
 };