GraphNG: Fix tooltip displaying wrong or no data (#32312)

packages/grafana-ui/src/components/GraphNG/GraphNG.tsx

@@ -188,6 +188,7 @@ class UnthemedGraphNG extends React.Component<GraphNGProps, GraphNGState> {
         value={{
           mapSeriesIndexToDataFrameFieldIndex: this.mapSeriesIndexToDataFrameFieldIndex,
           dimFields: this.state.dimFields,
+          data: this.state.alignedDataFrame,
         }}
       >
         <VizLayout width={width} height={height} legend={this.renderLegend()}>

packages/grafana-ui/src/components/GraphNG/hooks.ts

@@ -6,6 +6,7 @@ import React, { useCallback, useContext } from 'react';
 interface GraphNGContextType {
   mapSeriesIndexToDataFrameFieldIndex: (index: number) => DataFrameFieldIndex;
   dimFields: XYFieldMatchers;
+  data: DataFrame;
 }
 
 /** @alpha */
@@ -16,30 +17,25 @@ export const GraphNGContext = React.createContext<GraphNGContextType>({} as Grap
  * Exposes API for data frame inspection in Plot plugins
  */
 export const useGraphNGContext = () => {
-  const graphCtx = useContext<GraphNGContextType>(GraphNGContext);
+  const { data, dimFields, mapSeriesIndexToDataFrameFieldIndex } = useContext<GraphNGContextType>(GraphNGContext);
 
-  const getXAxisField = useCallback(
+  const getXAxisField = useCallback(() => {
-    (data: DataFrame[]) => {
+    const xFieldMatcher = dimFields.x;
-      const xFieldMatcher = graphCtx.dimFields.x;
+    let xField: Field | null = null;
-      let xField: Field | null = null;
 
-      for (let i = 0; i < data.length; i++) {
+    for (let j = 0; j < data.fields.length; j++) {
-        const frame = data[i];
+      if (xFieldMatcher(data.fields[j], data, [data])) {
-        for (let j = 0; j < frame.fields.length; j++) {
+        xField = data.fields[j];
-          if (xFieldMatcher(frame.fields[j], frame, data)) {
+        break;
-            xField = frame.fields[j];
-            break;
-          }
-        }
       }
+    }
 
-      return xField;
+    return xField;
-    },
+  }, [data, dimFields]);
-    [graphCtx]
-  );
 
   return {
-    ...graphCtx,
+    dimFields,
+    mapSeriesIndexToDataFrameFieldIndex,
     getXAxisField,
   };
 };

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

@@ -29,7 +29,7 @@ export const TooltipPlugin: React.FC<TooltipPluginProps> = ({ mode = 'single', t
   const plotContext = usePlotContext();
   const graphContext = useGraphNGContext();
 
-  let xField = graphContext.getXAxisField(otherProps.data);
+  let xField = graphContext.getXAxisField();
   if (!xField) {
     return null;
   }
@@ -60,8 +60,9 @@ export const TooltipPlugin: React.FC<TooltipPluginProps> = ({ mode = 'single', t
         if (mode === 'single' && originFieldIndex !== null) {
           const field = otherProps.data[originFieldIndex.frameIndex].fields[originFieldIndex.fieldIndex];
           const plotSeries = plotContext.getSeries();
-
           const fieldFmt = field.display || getDisplayProcessor({ field, timeZone });
+          const value = fieldFmt(plotContext.data[focusedSeriesIdx!][focusedPointIdx]);
+
           tooltip = (
             <SeriesTable
               series={[
@@ -69,7 +70,7 @@ export const TooltipPlugin: React.FC<TooltipPluginProps> = ({ mode = 'single', t
                   // TODO: align with uPlot typings
                   color: (plotSeries[focusedSeriesIdx!].stroke as any)(),
                   label: getFieldDisplayName(field, otherProps.data[originFieldIndex.frameIndex]),
-                  value: fieldFmt(field.values.get(focusedPointIdx)).text,
+                  value: value ? formattedValueToString(value) : null,
                 },
               ]}
               timestamp={xVal}
@@ -94,11 +95,13 @@ export const TooltipPlugin: React.FC<TooltipPluginProps> = ({ mode = 'single', t
               continue;
             }
 
+            const value = field.display!(plotContext.data[i][focusedPointIdx]);
+
             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!))),
+              value: value ? formattedValueToString(value) : null,
               isActive: originFieldIndex
                 ? dataFrameFieldIndex.frameIndex === originFieldIndex.frameIndex &&
                   dataFrameFieldIndex.fieldIndex === originFieldIndex.fieldIndex

public/app/plugins/panel/timeseries/plugins/ContextMenuPlugin.tsx

@@ -102,7 +102,7 @@ export const ContextMenuView: React.FC<ContextMenuProps> = ({
     onClose();
   });
 
-  const xField = graphContext.getXAxisField(data);
+  const xField = graphContext.getXAxisField();
 
   if (!xField) {
     return null;