From 63bb88ce5e33b9d571bb72d3fcfb7b6c79a9d018 Mon Sep 17 00:00:00 2001
From: Tony Xiao <txiao@sentry.io>
Date: Wed, 14 May 2025 16:32:20 -0400
Subject: [PATCH] feat(explore): Flatten visualize yaxes into multiple

There are still places where we have multiple y axes in a visualize. This
flattens them into multiple visualizes at render time. A migration will follow
in the future to fix all of them.
---
 .../contexts/pageParamsContext/index.spec.tsx | 18 ++++++++++--
 .../contexts/pageParamsContext/visualizes.tsx | 28 ++++++++++++-------
 .../explore/hooks/useAddToDashboard.spec.tsx  |  3 +-
 3 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/static/app/views/explore/contexts/pageParamsContext/index.spec.tsx b/static/app/views/explore/contexts/pageParamsContext/index.spec.tsx
index a60894510a9957..34766fa33e9f35 100644
--- a/static/app/views/explore/contexts/pageParamsContext/index.spec.tsx
+++ b/static/app/views/explore/contexts/pageParamsContext/index.spec.tsx
@@ -322,10 +322,14 @@ describe('PageParamsProvider', function () {
       query: '',
       sortBys: [{field: 'max(span.duration)', kind: 'desc'}],
       visualizes: [
-        new Visualize(['min(span.self_time)', 'max(span.duration)'], {
+        new Visualize(['min(span.self_time)'], {
           label: 'A',
           chartType: ChartType.AREA,
         }),
+        new Visualize(['max(span.duration)'], {
+          label: 'B',
+          chartType: ChartType.AREA,
+        }),
       ],
     });
   });
@@ -352,10 +356,14 @@ describe('PageParamsProvider', function () {
       query: '',
       sortBys: [{field: 'min(span.self_time)', kind: 'desc'}],
       visualizes: [
-        new Visualize(['min(span.self_time)', 'max(span.duration)'], {
+        new Visualize(['min(span.self_time)'], {
           label: 'A',
           chartType: ChartType.AREA,
         }),
+        new Visualize(['max(span.duration)'], {
+          label: 'B',
+          chartType: ChartType.AREA,
+        }),
       ],
     });
   });
@@ -421,10 +429,14 @@ describe('PageParamsProvider', function () {
       sortBys: [{field: 'count(span.self_time)', kind: 'asc'}],
       visualizes: [
         new Visualize(['count(span.self_time)'], {label: 'A', chartType: ChartType.AREA}),
-        new Visualize(['avg(span.duration)', 'avg(span.self_time)'], {
+        new Visualize(['avg(span.duration)'], {
           label: 'B',
           chartType: ChartType.LINE,
         }),
+        new Visualize(['avg(span.self_time)'], {
+          label: 'C',
+          chartType: ChartType.LINE,
+        }),
       ],
     });
   });
diff --git a/static/app/views/explore/contexts/pageParamsContext/visualizes.tsx b/static/app/views/explore/contexts/pageParamsContext/visualizes.tsx
index f87455c45cfef0..da0d4dae0ac3c5 100644
--- a/static/app/views/explore/contexts/pageParamsContext/visualizes.tsx
+++ b/static/app/views/explore/contexts/pageParamsContext/visualizes.tsx
@@ -86,18 +86,26 @@ export function getVisualizesFromLocation(
 ): Visualize[] {
   const rawVisualizes = decodeList(location.query.visualize);
 
-  const result: Visualize[] = rawVisualizes
+  const visualizes: Visualize[] = [];
+
+  const baseVisualizes: BaseVisualize[] = rawVisualizes
     .map(raw => parseVisualizes(raw, organization))
-    .filter(defined)
-    .filter(parsed => parsed.yAxes.length > 0)
-    .map((parsed, i) => {
-      return new Visualize(parsed.yAxes, {
-        label: String.fromCharCode(65 + i), // starts from 'A'
-        chartType: parsed.chartType,
-      });
-    });
+    .filter(defined);
+
+  let i = 0;
+  for (const visualize of baseVisualizes) {
+    for (const yAxis of visualize.yAxes) {
+      visualizes.push(
+        new Visualize([yAxis], {
+          label: String.fromCharCode(65 + i), // starts from 'A',
+          chartType: visualize.chartType,
+        })
+      );
+      i++;
+    }
+  }
 
-  return result.length ? result : defaultVisualizes();
+  return visualizes.length ? visualizes : defaultVisualizes();
 }
 
 function parseVisualizes(raw: string, organization: Organization): BaseVisualize | null {
diff --git a/static/app/views/explore/hooks/useAddToDashboard.spec.tsx b/static/app/views/explore/hooks/useAddToDashboard.spec.tsx
index e71e62dea369a8..af8518bb9c0310 100644
--- a/static/app/views/explore/hooks/useAddToDashboard.spec.tsx
+++ b/static/app/views/explore/hooks/useAddToDashboard.spec.tsx
@@ -245,9 +245,8 @@ describe('AddToDashboardButton', () => {
           queries: [
             {
               aggregates: [
+                // because the visualizes get flattend, we only take the first y axis
                 'avg(span.duration)',
-                'max(span.duration)',
-                'min(span.duration)',
               ],
               columns: [],
               fields: [],