From 42c5db4ac317e5013b6510cc0e30c6e21cb3ed1b Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Thu, 18 Mar 2021 13:15:55 +0000
Subject: [PATCH] GraphNG: Fix tooltip series color for multi data frame
 scenario (#32098) (#32103)

(cherry picked from commit b0d7e3dbee9ef11b8524b4a399065f49d11754e1)

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>
---
 .../Graph/GraphTooltip/SeriesTable.tsx        | 12 ++++-
 .../src/components/uPlot/PlotLegend.tsx       |  5 ++
 .../uPlot/plugins/TooltipPlugin.tsx           | 52 ++++++++-----------
 3 files changed, 38 insertions(+), 31 deletions(-)

diff --git a/packages/grafana-ui/src/components/Graph/GraphTooltip/SeriesTable.tsx b/packages/grafana-ui/src/components/Graph/GraphTooltip/SeriesTable.tsx
index 4687acd991b..629bd24c557 100644
--- a/packages/grafana-ui/src/components/Graph/GraphTooltip/SeriesTable.tsx
+++ b/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}`}
+          />
+        );
       })}
     </>
   );
diff --git a/packages/grafana-ui/src/components/uPlot/PlotLegend.tsx b/packages/grafana-ui/src/components/uPlot/PlotLegend.tsx
index 0e5918b529f..efda6fe8726 100644
--- a/packages/grafana-ui/src/components/uPlot/PlotLegend.tsx
+++ b/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 {
diff --git a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx
index d577505c384..be5c2cdb23b 100644
--- a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx
+++ b/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} />;