GraphNG: Fix tooltip series color for multi data frame scenario (#32098)

packages/grafana-ui/src/components/Graph/GraphTooltip/SeriesTable.tsx

@@ -75,8 +75,16 @@ export const SeriesTable: React.FC<SeriesTableProps> = ({ timestamp, series }) =
           {timestamp}
         </div>
       )}
-      {series.map((s) => {
-        return <SeriesTableRow isActive={s.isActive} label={s.label} color={s.color} value={s.value} key={s.label} />;
+      {series.map((s, i) => {
+        return (
+          <SeriesTableRow
+            isActive={s.isActive}
+            label={s.label}
+            color={s.color}
+            value={s.value}
+            key={`${s.label}-${i}`}
+          />
+        );
       })}
     </>
   );

packages/grafana-ui/src/components/uPlot/PlotLegend.tsx

@@ -55,6 +55,11 @@ export const PlotLegend: React.FC<PlotLegendProps> = ({
       }
 
       const field = data[fieldIndex.frameIndex]?.fields[fieldIndex.fieldIndex];
+
+      if (!field) {
+        return undefined;
+      }
+
       const label = getFieldDisplayName(field, data[fieldIndex.frameIndex]!);
 
       return {

packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx

@@ -78,38 +78,32 @@ export const TooltipPlugin: React.FC<TooltipPluginProps> = ({ mode = 'single', t
         }
 
         if (mode === 'multi') {
+          let series: SeriesTableRowProps[] = [];
           const plotSeries = plotContext.getSeries();
 
-          let series: SeriesTableRowProps[] = [];
-
-          let frames = otherProps.data;
-
-          for (let i = 0; i < frames.length; i++) {
-            let fields = frames[i].fields;
-
-            for (let j = 0; j < fields.length; j++) {
-              let f = fields[j];
-
-              // skipping xField, time fields, non-numeric, and hidden fields
-              if (
-                f === xField ||
-                f.type === FieldType.time ||
-                f.type !== FieldType.number ||
-                f.config.custom?.hideFrom?.tooltip
-              ) {
-                continue;
-              }
-
-              series.push({
-                // TODO: align with uPlot typings
-                color: (plotSeries[j].stroke as any)!(),
-                label: getFieldDisplayName(f, otherProps.data[i]),
-                value: formattedValueToString(f.display!(f.values.get(focusedPointIdx!))),
-                isActive: originFieldIndex
-                  ? originFieldIndex.frameIndex === i && originFieldIndex.fieldIndex === j
-                  : false,
-              });
+          for (let i = 0; i < plotSeries.length; i++) {
+            const dataFrameFieldIndex = graphContext.mapSeriesIndexToDataFrameFieldIndex(i);
+            const frame = otherProps.data[dataFrameFieldIndex.frameIndex];
+            const field = otherProps.data[dataFrameFieldIndex.frameIndex].fields[dataFrameFieldIndex.fieldIndex];
+            if (
+              field === xField ||
+              field.type === FieldType.time ||
+              field.type !== FieldType.number ||
+              field.config.custom?.hideFrom?.tooltip
+            ) {
+              continue;
             }
+
+            series.push({
+              // TODO: align with uPlot typings
+              color: (plotSeries[i].stroke as any)!(),
+              label: getFieldDisplayName(field, frame),
+              value: formattedValueToString(field.display!(field.values.get(focusedPointIdx!))),
+              isActive: originFieldIndex
+                ? dataFrameFieldIndex.frameIndex === originFieldIndex.frameIndex &&
+                  dataFrameFieldIndex.fieldIndex === originFieldIndex.fieldIndex
+                : false,
+            });
           }
 
           tooltip = <SeriesTable series={series} timestamp={xVal} />;