update hidden fields style

packages/grafana-ui/src/components/VizTooltip/VizTooltipColorIndicator.tsx

@@ -3,7 +3,7 @@ import { css, cx } from '@emotion/css';
 import { FALLBACK_COLOR, GrafanaTheme2 } from '@grafana/data';
 import { LineStyle } from '@grafana/schema';
 
-import { useStyles2 } from '../../themes/ThemeContext';
+import { useStyles2, useTheme2 } from '../../themes/ThemeContext';
 import { SeriesIcon } from '../VizLegend/SeriesIcon';
 
 import { ColorIndicator, DEFAULT_COLOR_INDICATOR } from './types';
@@ -19,6 +19,7 @@ interface Props {
   colorIndicator?: ColorIndicator;
   position?: ColorIndicatorPosition;
   lineStyle?: LineStyle;
+  isHidden?: boolean; // for hidden metadata
 }
 
 export type ColorIndicatorStyles = ReturnType<typeof getStyles>;
@@ -28,8 +29,19 @@ export const VizTooltipColorIndicator = ({
   colorIndicator = DEFAULT_COLOR_INDICATOR,
   position = ColorIndicatorPosition.Leading,
   lineStyle,
+  isHidden,
 }: Props) => {
   const styles = useStyles2(getStyles);
+  const theme = useTheme2();
+
+  if (isHidden) {
+    return (
+      <div
+        style={{ border: `1px solid ${color}`, borderRadius: theme.shape.radius.pill }}
+        className={cx(position === ColorIndicatorPosition.Leading ? styles.leading : styles.trailing, styles.container)}
+      />
+    );
+  }
 
   if (colorIndicator === ColorIndicator.series) {
     return (
@@ -89,4 +101,10 @@ const getStyles = (theme: GrafanaTheme2) => ({
     borderRadius: theme.shape.radius.circle,
     minWidth: '12px',
   }),
+  container: css({
+    marginRight: '8px',
+    display: 'inline-block',
+    width: '14px',
+    height: '4px',
+  }),
 });

packages/grafana-ui/src/components/VizTooltip/VizTooltipContent.tsx

@@ -34,7 +34,7 @@ export const VizTooltipContent = ({
 
   return (
     <div className={styles.wrapper} style={scrollableStyle}>
-      {items.map(({ label, value, color, colorIndicator, colorPlacement, isActive, lineStyle }, i) => (
+      {items.map(({ label, value, color, colorIndicator, colorPlacement, isActive, lineStyle, isHidden }, i) => (
         <VizTooltipRow
           key={i}
           label={label}
@@ -47,6 +47,7 @@ export const VizTooltipContent = ({
           isPinned={isPinned}
           lineStyle={lineStyle}
           showValueScroll={!scrollable}
+          isHidden={isHidden}
         />
       ))}
       {children}

packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx

@@ -18,6 +18,7 @@ interface VizTooltipRowProps extends Omit<VizTooltipItem, 'value'> {
   marginRight?: string;
   isPinned: boolean;
   showValueScroll?: boolean;
+  isHidden?: boolean; // for hidden series
 }
 
 enum LabelValueTypes {
@@ -41,6 +42,7 @@ export const VizTooltipRow = ({
   isPinned,
   lineStyle,
   showValueScroll,
+  isHidden,
 }: VizTooltipRowProps) => {
   const styles = useStyles2(getStyles, justify, marginRight);
 
@@ -132,7 +134,12 @@ export const VizTooltipRow = ({
       {(color || label) && (
         <div className={styles.valueWrapper}>
           {color && colorPlacement === ColorPlacement.first && (
-            <VizTooltipColorIndicator color={color} colorIndicator={colorIndicator} lineStyle={lineStyle} />
+            <VizTooltipColorIndicator
+              color={color}
+              colorIndicator={colorIndicator}
+              lineStyle={lineStyle}
+              isHidden={isHidden}
+            />
           )}
           {!isPinned ? (
             <div className={cx(styles.label, isActive && styles.activeSeries)}>{label}</div>

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

@@ -27,6 +27,7 @@ export interface VizTooltipItem {
   colorPlacement?: ColorPlacement;
   isActive?: boolean;
   lineStyle?: LineStyle;
+  isHidden?: boolean;
 
   // internal/tmp for sorting
   numeric?: number;

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

@@ -80,7 +80,8 @@ export const getContentItems = (
   mode: TooltipDisplayMode,
   sortOrder: SortOrder,
   fieldFilter = (field: Field) => true,
-  hideZeros = false
+  hideZeros = false,
+  _restFields?: Field[]
 ): VizTooltipItem[] => {
   let rows: VizTooltipItem[] = [];
 
@@ -129,15 +130,7 @@ export const getContentItems = (
         ? Number.MIN_SAFE_INTEGER
         : Number.MAX_SAFE_INTEGER;
 
-    const colorMode = getFieldColorModeForField(field);
+    const { colorIndicator, colorPlacement } = getIndicatorAndPlacement(field);
-
-    let colorIndicator = ColorIndicator.series;
-    let colorPlacement = ColorPlacement.first;
-
-    if (colorMode.isByValue) {
-      colorIndicator = ColorIndicator.value;
-      colorPlacement = ColorPlacement.trailing;
-    }
 
     rows.push({
       label: field.state?.displayName ?? field.name,
@@ -151,6 +144,23 @@ 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]!]);
+
+      rows.push({
+        label: field.state?.displayName ?? field.name,
+        value: formattedValueToString(display),
+        color: FALLBACK_COLOR,
+        colorIndicator,
+        colorPlacement,
+        lineStyle: field.config.custom?.lineStyle,
+        isHidden: true,
+      });
+    }
+  });
+
   if (sortOrder !== SortOrder.None && rows.length > 1) {
     const cmp = allNumeric ? numberCmp : stringCmp;
     const mult = sortOrder === SortOrder.Descending ? -1 : 1;
@@ -159,3 +169,17 @@ export const getContentItems = (
 
   return rows;
 };
+
+const getIndicatorAndPlacement = (field: Field) => {
+  const colorMode = getFieldColorModeForField(field);
+
+  let colorIndicator = ColorIndicator.series;
+  let colorPlacement = ColorPlacement.first;
+
+  if (colorMode.isByValue) {
+    colorIndicator = ColorIndicator.value;
+    colorPlacement = ColorPlacement.trailing;
+  }
+
+  return { colorIndicator, colorPlacement };
+};

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

@@ -12,7 +12,6 @@ import {
 } from '@grafana/ui/internal';
 
 import { getFieldActions } from '../status-history/utils';
-import { fmt } from '../xychart/utils';
 
 import { isTooltipScrollable } from './utils';
 
@@ -68,18 +67,10 @@ export const TimeSeriesTooltip = ({
     mode,
     sortOrder,
     (field) => field.type === FieldType.number || field.type === FieldType.enum,
-    hideZeros
+    hideZeros,
+    _rest
   );
 
-  _rest?.forEach((field) => {
-    if (!field.config.custom?.hideFrom?.tooltip) {
-      contentItems.push({
-        label: field.state?.displayName ?? field.name,
-        value: fmt(field, field.values[dataIdxs[0]!]),
-      });
-    }
-  });
-
   let footer: ReactNode;
 
   if (seriesIdx != null) {