feat(metrics): Separate aggregate and equation panels

Render aggregate queries and equations in their own sortable sections on
the refreshed metrics tab. This keeps each panel group visually distinct
while preserving the drag state needed for section-local reordering.

Co-Authored-By: Codex <noreply@openai.com>

Author: nsdeschenes

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

@@ -15,8 +15,13 @@ import {
 
 import type {DatePageFilterProps} from 'sentry/components/pageFilters/date/datePageFilter';
 import {trackAnalytics} from 'sentry/utils/analytics';
+import {EQUATION_PREFIX} from 'sentry/utils/discover/fields';
 import {MetricsTabContent} from 'sentry/views/explore/metrics/metricsTab';
 import {MultiMetricsQueryParamsProvider} from 'sentry/views/explore/metrics/multiMetricsQueryParams';
+import {
+  VisualizeEquation,
+  VisualizeFunction,
+} from 'sentry/views/explore/queryParams/visualize';
 
 jest.mock('sentry/utils/analytics');
 const trackAnalyticsMock = jest.mocked(trackAnalytics);
@@ -613,6 +618,65 @@ describe('MetricsTabContent', () => {
     expect(screen.getByText('Add Equation')).toBeInTheDocument();
   });
 
+  it('renders aggregate and equation panels in separate sections in refresh layout', async () => {
+    const orgWithFeatures = OrganizationFixture({
+      features: [
+        'tracemetrics-enabled',
+        'tracemetrics-equations-in-explore',
+        'tracemetrics-ui-refresh',
+      ],
+    });
+    MockApiClient.addMockResponse({
+      url: `/organizations/${orgWithFeatures.slug}/events/`,
+      method: 'GET',
+      body: {data: []},
+    });
+
+    render(
+      <ProviderWrapper>
+        <MetricsTabContent datePageFilterProps={datePageFilterProps} />
+      </ProviderWrapper>,
+      {
+        organization: orgWithFeatures,
+        initialRouterConfig: {
+          location: {
+            pathname: '/organizations/:orgId/explore/metrics/',
+            query: {
+              start: '2025-04-10T14%3A37%3A55',
+              end: '2025-04-10T20%3A04%3A51',
+              metric: [
+                JSON.stringify({
+                  metric: {name: 'bar', type: 'distribution'},
+                  query: '',
+                  aggregateFields: [
+                    new VisualizeFunction('p50(value,bar,distribution,-)').serialize(),
+                  ],
+                  aggregateSortBys: [],
+                  mode: 'samples',
+                }),
+                JSON.stringify({
+                  metric: {name: '', type: ''},
+                  query: '',
+                  aggregateFields: [new VisualizeEquation(EQUATION_PREFIX).serialize()],
+                  aggregateSortBys: [],
+                  mode: 'samples',
+                }),
+              ],
+              title: 'Test Title',
+            },
+          },
+          route: '/organizations/:orgId/explore/metrics/',
+        },
+      }
+    );
+
+    const aggregateSection = await screen.findByTestId('aggregate-metric-panels');
+    const equationSection = screen.getByTestId('equation-metric-panels');
+
+    expect(within(aggregateSection).getAllByTestId('metric-panel')).toHaveLength(1);
+    expect(within(equationSection).getAllByTestId('metric-panel')).toHaveLength(1);
+  });
+
   it('disables both Add Metric and Add Equation buttons when the maximum number of metric queries is reached', async () => {
     const metricQueryWithGroupBy = JSON.stringify({
       metric: {name: 'bar', type: 'distribution'},

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

@@ -3,6 +3,7 @@ import {SortableContext, verticalListSortingStrategy} from '@dnd-kit/sortable';
 import styled from '@emotion/styled';
 
 import {Container, Flex, Stack} from '@sentry/scraps/layout';
+import {Separator} from '@sentry/scraps/separator';
 
 import * as Layout from 'sentry/components/layouts/thirds';
 import type {DatePageFilterProps} from 'sentry/components/pageFilters/date/datePageFilter';
@@ -42,6 +43,7 @@ import {
   FilterBarWithSaveAsContainer,
   StyledPageFilterBar,
 } from 'sentry/views/explore/metrics/styles';
+import {isVisualizeEquation} from 'sentry/views/explore/queryParams/visualize';
 export const METRICS_CHART_GROUP = 'metrics-charts-group';
 
 type MetricsTabProps = {
@@ -218,8 +220,19 @@ function MetricsTabBodySection() {
     isMetricOptionsEmpty,
   });
   const references = useMetricReferences();
-  const {sortableItems, sensors, onDragStart, onDragEnd, onDragCancel, isDragging} =
-    useSortableMetricQueries();
+  const aggregateMetricQueries = useSortableMetricQueries({
+    predicate: metricQuery =>
+      !isVisualizeEquation(metricQuery.queryParams.visualizes[0]!),
+  });
+  const equationMetricQueries = useSortableMetricQueries({
+    predicate: metricQuery => isVisualizeEquation(metricQuery.queryParams.visualizes[0]!),
+  });
+  const isDragging =
+    aggregateMetricQueries.isDragging || equationMetricQueries.isDragging;
+  const showSectionSeparator =
+    isDragging &&
+    aggregateMetricQueries.sortableItems.length > 0 &&
+    equationMetricQueries.sortableItems.length > 0;
 
   // Cannot add metric queries beyond Z
   const isAddMetricDisabled =
@@ -231,41 +244,27 @@ function MetricsTabBodySection() {
       <ExploreContentSection>
         <Stack>
           <WidgetSyncContextProvider groupName={METRICS_CHART_GROUP}>
-            <DndContext
-              sensors={sensors}
-              collisionDetection={closestCenter}
-              onDragStart={onDragStart}
-              onDragEnd={onDragEnd}
-              onDragCancel={onDragCancel}
-            >
-              <SortableContext
-                items={sortableItems}
-                strategy={verticalListSortingStrategy}
-              >
-                {sortableItems.map(({id, metricQuery}, index) => {
-                  return (
-                    <MetricsQueryParamsProvider
-                      key={id}
-                      queryParams={metricQuery.queryParams}
-                      setQueryParams={metricQuery.setQueryParams}
-                      traceMetric={metricQuery.metric}
-                      setTraceMetric={metricQuery.setTraceMetric}
-                      removeMetric={metricQuery.removeMetric}
-                    >
-                      <SortableMetricPanel
-                        sortableId={id}
-                        traceMetric={metricQuery.metric}
-                        queryIndex={index}
-                        queryLabel={metricQuery.label ?? ''}
-                        references={references}
-                        isAnyDragging={isDragging}
-                        canDrag={sortableItems.length > 1}
-                      />
-                    </MetricsQueryParamsProvider>
-                  );
-                })}
-              </SortableContext>
-            </DndContext>
+            <SortableMetricPanelSection
+              dataTestId="aggregate-metric-panels"
+              sortableQueries={aggregateMetricQueries}
+              references={references}
+              isAnyDragging={isDragging}
+            />
+            {showSectionSeparator ? (
+              <Container paddingBottom="xl">
+                <Separator
+                  orientation="horizontal"
+                  border="primary"
+                  data-test-id="metric-section-separator"
+                />
+              </Container>
+            ) : null}
+            <SortableMetricPanelSection
+              dataTestId="equation-metric-panels"
+              sortableQueries={equationMetricQueries}
+              references={references}
+              isAnyDragging={isDragging}
+            />
             <Flex gap="sm" direction="row">
               <ToolbarVisualizeAddChart
                 add={addMetricQuery}
@@ -319,6 +318,63 @@ function MetricsTabBodySection() {
   );
 }
 
+interface SortableMetricPanelSectionProps {
+  dataTestId: string;
+  isAnyDragging: boolean;
+  references: Set<string>;
+  sortableQueries: ReturnType<typeof useSortableMetricQueries>;
+}
+
+function SortableMetricPanelSection({
+  dataTestId,
+  sortableQueries,
+  references,
+  isAnyDragging,
+}: SortableMetricPanelSectionProps) {
+  const {sortableItems, sensors, onDragStart, onDragEnd, onDragCancel} = sortableQueries;
+
+  if (!sortableItems.length) {
+    return null;
+  }
+
+  return (
+    <Stack data-test-id={dataTestId}>
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragStart={onDragStart}
+        onDragEnd={onDragEnd}
+        onDragCancel={onDragCancel}
+      >
+        <SortableContext items={sortableItems} strategy={verticalListSortingStrategy}>
+          {sortableItems.map(({id, metricQuery, index}) => {
+            return (
+              <MetricsQueryParamsProvider
+                key={id}
+                queryParams={metricQuery.queryParams}
+                setQueryParams={metricQuery.setQueryParams}
+                traceMetric={metricQuery.metric}
+                setTraceMetric={metricQuery.setTraceMetric}
+                removeMetric={metricQuery.removeMetric}
+              >
+                <SortableMetricPanel
+                  sortableId={id}
+                  traceMetric={metricQuery.metric}
+                  queryIndex={index}
+                  queryLabel={metricQuery.label ?? ''}
+                  references={references}
+                  isAnyDragging={isAnyDragging}
+                  canDrag={sortableItems.length > 1}
+                />
+              </MetricsQueryParamsProvider>
+            );
+          })}
+        </SortableContext>
+      </DndContext>
+    </Stack>
+  );
+}
+
 const MetricsQueryBuilderContainer = styled(Container)`
   padding: ${p => p.theme.space.xl};
   background-color: ${p => p.theme.tokens.background.primary};