feat(explore): Flatten visualize yaxes into multiple (#91664)

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.

Author: Zylphrex

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,
+        }),
       ],
     });
   });

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 {

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: [],