feat: Add configurable query identifiers for Mixed Timeseries charts (#34406)

Co-authored-by: Claude <noreply@anthropic.com>

superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts

@@ -212,6 +212,7 @@ export default function transformProps(
     sortSeriesAscendingB,
     timeGrainSqla,
     percentageThreshold,
+    showQueryIdentifiers = false,
     metrics = [],
     metricsB = [],
   }: EchartsMixedTimeseriesFormData = { ...DEFAULT_FORM_DATA, ...formData };
@@ -395,10 +396,17 @@ export default function transformProps(
     const seriesName = inverted[entryName] || entryName;
     const colorScaleKey = getOriginalSeries(seriesName, array);
 
-    let displayName = `${entryName} (Query A)`;
+    let displayName: string;
 
     if (groupby.length > 0) {
-      displayName = `${MetricDisplayNameA} (Query A), ${entryName}`;
+      // When we have groupby, format as "metric, dimension"
+      const metricPart = showQueryIdentifiers
+        ? `${MetricDisplayNameA} (Query A)`
+        : MetricDisplayNameA;
+      displayName = `${metricPart}, ${entryName}`;
+    } else {
+      // When no groupby, format as just the entry name with optional query identifier
+      displayName = showQueryIdentifiers ? `${entryName} (Query A)` : entryName;
     }
 
     const seriesFormatter = getFormatter(
@@ -453,10 +461,17 @@ export default function transformProps(
     const seriesName = `${seriesEntry} (1)`;
     const colorScaleKey = getOriginalSeries(seriesEntry, array);
 
-    let displayName = `${entryName} (Query B)`;
+    let displayName: string;
 
     if (groupbyB.length > 0) {
-      displayName = `${MetricDisplayNameB} (Query B), ${entryName}`;
+      // When we have groupby, format as "metric, dimension"
+      const metricPart = showQueryIdentifiers
+        ? `${MetricDisplayNameB} (Query B)`
+        : MetricDisplayNameB;
+      displayName = `${metricPart}, ${entryName}`;
+    } else {
+      // When no groupby, format as just the entry name with optional query identifier
+      displayName = showQueryIdentifiers ? `${entryName} (Query B)` : entryName;
     }
 
     const seriesFormatter = getFormatter(
@@ -696,14 +711,13 @@ export default function transformProps(
         zoomable,
       ),
       // @ts-ignore
-      data: rawSeriesA
-        .concat(rawSeriesB)
+      data: series
         .filter(
           entry =>
             extractForecastSeriesContext((entry.name || '') as string).type ===
             ForecastSeriesEnum.Observation,
         )
-        .map(entry => entry.name || '')
+        .map(entry => entry.id || entry.name || '')
         .concat(extractAnnotationLabels(annotationLayers, annotationData)),
     },
     series: dedupSeries(reorderForecastSeries(series) as SeriesOption[]),