StateTimeline: Fix series hidden from tooltip when hideFrom.viz: true

packages/grafana-ui/src/components/VizTooltip/utils.ts

@@ -148,18 +148,26 @@ export const getContentItems = (
 
   _restFields?.forEach((field) => {
     if (!field.config.custom?.hideFrom?.tooltip) {
-      const { colorIndicator, colorPlacement } = getIndicatorAndPlacement(field);
-      const display = field.display!(field.values[dataIdxs[0]!]);
+      const valueIdx = dataIdxs[seriesIdx ?? 0];
 
-      rows.push({
-        label: field.state?.displayName ?? field.name,
-        value: formattedValueToString(display),
-        color: FALLBACK_COLOR,
-        colorIndicator,
-        colorPlacement,
-        lineStyle: field.config.custom?.lineStyle,
-        isHiddenFromViz: true,
-      });
+      if (valueIdx != null) {
+        const value = field.values[valueIdx];
+
+        if (value != null) {
+          const display = field.display!(value);
+          const { colorIndicator, colorPlacement } = getIndicatorAndPlacement(field);
+
+          rows.push({
+            label: field.state?.displayName ?? field.name,
+            value: formattedValueToString(display),
+            color: FALLBACK_COLOR,
+            colorIndicator,
+            colorPlacement,
+            lineStyle: field.config.custom?.lineStyle,
+            isHiddenFromViz: true,
+          });
+        }
+      }
     }
   });
 

public/app/core/components/GraphNG/GraphNG.tsx

@@ -48,14 +48,6 @@ export interface GraphNGProps extends Themeable2 {
   dataLinkPostProcessor?: DataLinkPostProcessor;
   cursorSync?: DashboardCursorSync;
 
-  // Remove fields that are hidden from the visualization before rendering
-  // The fields will still be available for other things like data links
-  // this is a temporary hack that only works when:
-  // 1. renderLegend (above) does not render <PlotLegend>
-  // 2. does not have legend series toggle
-  // 3. passes through all fields required for link/action gen (including those with hideFrom.viz)
-  omitHideFromViz?: boolean;
-
   /**
    * needed for propsToDiff to re-init the plot & config
    * this is a generic approach to plot re-init, without having to specify which panel-level options
@@ -179,15 +171,6 @@ export class GraphNG extends Component<GraphNGProps, GraphNGState> {
         };
       }
 
-      if (props.omitHideFromViz) {
-        const nonHiddenFields = alignedFrameFinal.fields.filter((field) => field.config.custom?.hideFrom?.viz !== true);
-        alignedFrameFinal = {
-          ...alignedFrameFinal,
-          fields: nonHiddenFields,
-          length: nonHiddenFields.length,
-        };
-      }
-
       let config = this.state?.config;
 
       if (withConfig) {

public/app/core/components/TimelineChart/TimelineChart.tsx

@@ -6,7 +6,7 @@ import { UPlotConfigBuilder, VizLayout, VizLegend, VizLegendItem } from '@grafan
 
 import { GraphNG, GraphNGProps } from '../GraphNG/GraphNG';
 
-import { preparePlotConfigBuilder, TimelineMode } from './utils';
+import { getSeriesAndRest, preparePlotConfigBuilder, TimelineMode } from './utils';
 
 /**
  * @alpha
@@ -46,8 +46,11 @@ export const TimelineChart = (props: TimelineProps) => {
 
   const prepConfig = useCallback(
     (alignedFrame: DataFrame, allFrames: DataFrame[], getTimeRange: () => TimeRange) => {
+
+      const { seriesFrame } = getSeriesAndRest(alignedFrame);
+
       return preparePlotConfigBuilder({
-        frame: alignedFrame,
+        frame: seriesFrame,
         getTimeRange,
         allFrames: frames,
         ...props,
@@ -56,7 +59,7 @@ export const TimelineChart = (props: TimelineProps) => {
         timeZones: Array.isArray(timeZone) ? timeZone : [timeZone],
 
         // When there is only one row, use the full space
-        rowHeight: alignedFrame.fields.length > 2 ? rowHeight : 1,
+        rowHeight: seriesFrame.fields.length > 2 ? rowHeight : 1,
         getValueColor: getValueColor,
 
         hoverMulti: tooltip?.mode === TooltipDisplayMode.Multi,
@@ -94,7 +97,6 @@ export const TimelineChart = (props: TimelineProps) => {
       prepConfig={prepConfig}
       propsToDiff={propsToDiff}
       renderLegend={renderLegend}
-      omitHideFromViz={true}
     />
   );
 };

public/app/core/components/TimelineChart/utils.ts

@@ -731,3 +731,26 @@ export function fmtDuration(milliSeconds: number): string {
                     : '0'
   ).trim();
 }
+
+export function getSeriesAndRest(alignedFrame: DataFrame) {
+  const seriesFields: Field[] = [];
+  const restFields: Field[] = [];
+
+  alignedFrame.fields.forEach((field) => {
+    if (field.config.custom?.hideFrom?.viz) {
+      restFields.push(field);
+    } else {
+      seriesFields.push(field);
+    }
+  });
+
+  const seriesFrame: DataFrame = {
+    ...alignedFrame,
+    fields: seriesFields,
+  };
+
+  return {
+    seriesFrame: seriesFrame,
+    restFields: restFields,
+  };
+}

public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx

@@ -13,6 +13,7 @@ import {
 import { TimeRange2, TooltipHoverMode } from '@grafana/ui/internal';
 import { TimelineChart } from 'app/core/components/TimelineChart/TimelineChart';
 import {
+  getSeriesAndRest,
   prepareTimelineFields,
   prepareTimelineLegendItems,
   TimelineMode,
@@ -94,10 +95,13 @@ export const StateTimelinePanel = ({
         cursorSync={cursorSync}
       >
         {(builder, alignedFrame) => {
+          // TODO: refactor frame prep not to do this here, should be memod at panel level once GraphNG is dissolved
+          const { seriesFrame, restFields } = getSeriesAndRest(alignedFrame);
+
           return (
             <>
               {cursorSync !== DashboardCursorSync.Off && (
-                <EventBusPlugin config={builder} eventBus={eventBus} frame={alignedFrame} />
+                <EventBusPlugin config={builder} eventBus={eventBus} frame={seriesFrame} />
               )}
               {options.tooltip.mode !== TooltipDisplayMode.None && (
                 <TooltipPlugin2
@@ -109,7 +113,7 @@ export const StateTimelinePanel = ({
                   syncMode={cursorSync}
                   syncScope={eventsScope}
                   getDataLinks={(seriesIdx, dataIdx) =>
-                    alignedFrame.fields[seriesIdx].getLinks?.({ valueRowIndex: dataIdx }) ?? []
+                    seriesFrame.fields[seriesIdx].getLinks?.({ valueRowIndex: dataIdx }) ?? []
                   }
                   render={(u, dataIdxs, seriesIdx, isPinned, dismiss, timeRange2, viaSync, dataLinks) => {
                     if (enableAnnotationCreation && timeRange2 != null) {
@@ -127,7 +131,7 @@ export const StateTimelinePanel = ({
 
                     return (
                       <StateTimelineTooltip
-                        series={alignedFrame}
+                        series={seriesFrame}
                         dataIdxs={dataIdxs}
                         seriesIdx={seriesIdx}
                         mode={viaSync ? TooltipDisplayMode.Multi : options.tooltip.mode}
@@ -140,13 +144,14 @@ export const StateTimelinePanel = ({
                         replaceVariables={replaceVariables}
                         dataLinks={dataLinks}
                         canExecuteActions={userCanExecuteActions}
+                        _rest={restFields}
                       />
                     );
                   }}
                   maxWidth={options.tooltip.maxWidth}
                 />
               )}
-              {alignedFrame.fields[0].config.custom?.axisPlacement !== AxisPlacement.Hidden && (
+              {seriesFrame.fields[0].config.custom?.axisPlacement !== AxisPlacement.Hidden && (
                 <AnnotationsPlugin2
                   replaceVariables={replaceVariables}
                   annotations={data.annotations ?? []}

public/app/plugins/panel/state-timeline/StateTimelineTooltip.tsx

@@ -35,6 +35,7 @@ export const StateTimelineTooltip = ({
   maxHeight,
   replaceVariables,
   dataLinks,
+  _rest,
 }: StateTimelineTooltipProps) => {
   const pluginContext = usePluginContext();
   const xField = series.fields[0];
@@ -45,7 +46,17 @@ export const StateTimelineTooltip = ({
 
   mode = isPinned ? TooltipDisplayMode.Single : mode;
 
-  const contentItems = getContentItems(series.fields, xField, dataIdxs, seriesIdx, mode, sortOrder);
+  const contentItems = getContentItems(
+    series.fields,
+    xField,
+    dataIdxs,
+    seriesIdx,
+    mode,
+    sortOrder,
+    undefined,
+    undefined,
+    _rest
+  );
   let endTime = null;
 
   // append duration in single mode

public/app/plugins/panel/status-history/StatusHistoryPanel.tsx

@@ -14,6 +14,7 @@ import {
 import { TimeRange2, TooltipHoverMode } from '@grafana/ui/internal';
 import { TimelineChart } from 'app/core/components/TimelineChart/TimelineChart';
 import {
+  getSeriesAndRest,
   prepareTimelineFields,
   prepareTimelineLegendItems,
   TimelineMode,
@@ -110,10 +111,13 @@ export const StatusHistoryPanel = ({
         cursorSync={cursorSync}
       >
         {(builder, alignedFrame) => {
+          // TODO: refactor frame prep not to do this here, should be memod at panel level once GraphNG is dissolved
+          const { seriesFrame, restFields } = getSeriesAndRest(alignedFrame);
+
           return (
             <>
               {cursorSync !== DashboardCursorSync.Off && (
-                <EventBusPlugin config={builder} eventBus={eventBus} frame={alignedFrame} />
+                <EventBusPlugin config={builder} eventBus={eventBus} frame={seriesFrame} />
               )}
               {options.tooltip.mode !== TooltipDisplayMode.None && (
                 <TooltipPlugin2
@@ -125,7 +129,7 @@ export const StatusHistoryPanel = ({
                   syncMode={cursorSync}
                   syncScope={eventsScope}
                   getDataLinks={(seriesIdx, dataIdx) =>
-                    alignedFrame.fields[seriesIdx].getLinks?.({ valueRowIndex: dataIdx }) ?? []
+                    seriesFrame.fields[seriesIdx].getLinks?.({ valueRowIndex: dataIdx }) ?? []
                   }
                   render={(u, dataIdxs, seriesIdx, isPinned, dismiss, timeRange2, viaSync, dataLinks) => {
                     if (enableAnnotationCreation && timeRange2 != null) {
@@ -143,7 +147,7 @@ export const StatusHistoryPanel = ({
 
                     return (
                       <StateTimelineTooltip
-                        series={alignedFrame}
+                        series={seriesFrame}
                         dataIdxs={dataIdxs}
                         seriesIdx={seriesIdx}
                         mode={viaSync ? TooltipDisplayMode.Multi : options.tooltip.mode}
@@ -156,13 +160,14 @@ export const StatusHistoryPanel = ({
                         replaceVariables={replaceVariables}
                         dataLinks={dataLinks}
                         canExecuteActions={userCanExecuteActions}
+                        _rest={restFields}
                       />
                     );
                   }}
                   maxWidth={options.tooltip.maxWidth}
                 />
               )}
-              {alignedFrame.fields[0].config.custom?.axisPlacement !== AxisPlacement.Hidden && (
+              {seriesFrame.fields[0].config.custom?.axisPlacement !== AxisPlacement.Hidden && (
                 <AnnotationsPlugin2
                   replaceVariables={replaceVariables}
                   annotations={data.annotations ?? []}