progress

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

@@ -33,6 +33,7 @@ export type PropDiffFn<T extends Record<string, unknown> = {}> = (prev: T, next:
 export interface GraphNGProps extends Themeable2 {
   frames: DataFrame[];
   structureRev?: number; // a number that will change when the frames[] structure changes
+  hideFromVizStates?: string;
   width: number;
   height: number;
   timeRange: TimeRange;
@@ -175,7 +176,9 @@ export class GraphNG extends Component<GraphNGProps, GraphNGState> {
         };
       }
 
-      const nonHiddenFields = alignedFrameFinal.fields.filter((field) => field.config.custom?.hideFrom?.viz !== true);
+      const nonHiddenFields = alignedFrameFinal.fields.filter(
+        (field, i) => i === 0 || field.config.custom?.hideFrom?.viz !== true
+      );
       alignedFrameFinal = {
         ...alignedFrameFinal,
         fields: nonHiddenFields,
@@ -201,9 +204,10 @@ export class GraphNG extends Component<GraphNGProps, GraphNGState> {
   }
 
   componentDidUpdate(prevProps: GraphNGProps) {
-    const { frames, structureRev, timeZone, cursorSync, propsToDiff } = this.props;
+    const { frames, structureRev, timeZone, cursorSync, propsToDiff, hideFromVizStates } = this.props;
 
-    const propsChanged = !sameProps(prevProps, this.props, propsToDiff);
+    const propsChanged =
+      !sameProps(prevProps, this.props, propsToDiff) || hideFromVizStates !== prevProps.hideFromVizStates;
 
     if (
       frames !== prevProps.frames ||

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

@@ -497,7 +497,7 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn = ({
       barMaxWidth: customConfig.barMaxWidth,
       pointSize: customConfig.pointSize,
       spanNulls: customConfig.spanNulls || false,
-      show: !customConfig.hideFrom?.viz,
+      show: !customConfig.hideFrom?.viz && !field.state?.hideFrom?.viz,
       gradientMode: customConfig.gradientMode,
       thresholds: config.thresholds,
       hardMin: field.config.min,

public/app/plugins/panel/candlestick/CandlestickPanel.tsx

@@ -59,8 +59,8 @@ export const CandlestickPanel = ({
   const theme = useTheme2();
 
   const info = useMemo(() => {
-    return prepareCandlestickFields(data.series, options, theme, timeRange);
-  }, [data.series, options, theme, timeRange]);
+    return prepareCandlestickFields(data.series, fieldConfig, options, theme, timeRange);
+  }, [data.series, fieldConfig, options, theme, timeRange]);
 
   // temp range set for adding new annotation set by TooltipPlugin2, consumed by AnnotationPlugin2
   const [newAnnotationRange, setNewAnnotationRange] = useState<TimeRange2 | null>(null);

public/app/plugins/panel/candlestick/fields.ts

@@ -1,6 +1,7 @@
 import {
   DataFrame,
   Field,
+  FieldConfigSource,
   FieldType,
   getFieldDisplayName,
   GrafanaTheme2,
@@ -96,6 +97,7 @@ function findFieldOrAuto(frame: DataFrame, info: FieldPickerInfo, options: Candl
 
 export function prepareCandlestickFields(
   series: DataFrame[] | undefined,
+  fieldConfig: FieldConfigSource,
   options: Partial<Options>,
   theme: GrafanaTheme2,
   timeRange?: TimeRange
@@ -120,7 +122,7 @@ export function prepareCandlestickFields(
   const data: CandlestickData = { aligned, frame: aligned, names: {} };
 
   // Apply same filter as everything else in timeseries
-  const timeSeriesFrames = prepareGraphableFields([aligned], theme, timeRange);
+  const timeSeriesFrames = prepareGraphableFields([aligned], fieldConfig, theme, timeRange);
   if (!timeSeriesFrames) {
     return null;
   }

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

@@ -44,7 +44,14 @@ export const TimeSeriesPanel = ({
   // Vertical orientation is not available for users through config.
   // It is simplified version of horizontal time series panel and it does not support all plugins.
   const isVerticallyOriented = options.orientation === VizOrientation.Vertical;
-  const frames = useMemo(() => prepareGraphableFields(data.series, config.theme2, timeRange), [data.series, timeRange]);
+  const { frames, hideFromVizStates } = useMemo(() => {
+    let frames = prepareGraphableFields(data.series, fieldConfig, config.theme2, timeRange);
+    return {
+      frames,
+      hideFromVizStates: frames?.flatMap((fr) => fr.fields.flatMap((f) => Boolean(f.state?.hideFrom?.viz))).join(),
+    };
+  }, [data.series, fieldConfig, timeRange]);
+
   const timezones = useMemo(() => getTimezones(options.timezone, timeZone), [options.timezone, timeZone]);
   const suggestions = useMemo(() => {
     if (frames?.length && frames.every((df) => df.meta?.type === DataFrameType.TimeSeriesLong)) {
@@ -79,6 +86,7 @@ export const TimeSeriesPanel = ({
     <TimeSeries
       frames={frames}
       structureRev={data.structureRev}
+      hideFromVizStates={hideFromVizStates}
       timeRange={timeRange}
       timeZone={timezones}
       width={width}

public/app/plugins/panel/timeseries/utils.ts

@@ -7,7 +7,9 @@ import {
   isBooleanUnit,
   TimeRange,
   cacheFieldDisplayNames,
+  FieldConfigSource,
 } from '@grafana/data';
+import { decoupleHideFromState } from '@grafana/data/src/field/fieldState';
 import { convertFieldType } from '@grafana/data/src/transformations/transformers/convertFieldType';
 import { applyNullInsertThreshold } from '@grafana/data/src/transformations/transformers/nulls/nullInsertThreshold';
 import { nullToValue } from '@grafana/data/src/transformations/transformers/nulls/nullToValue';
@@ -72,6 +74,7 @@ function reEnumFields(frames: DataFrame[]): DataFrame[] {
  */
 export function prepareGraphableFields(
   series: DataFrame[],
+  fieldConfig: FieldConfigSource,
   theme: GrafanaTheme2,
   timeRange?: TimeRange,
   // numeric X requires a single frame where the first field is numeric
@@ -82,6 +85,7 @@ export function prepareGraphableFields(
   }
 
   cacheFieldDisplayNames(series);
+  decoupleHideFromState(series, fieldConfig);
 
   let useNumericX = xNumFieldIdx != null;
 

public/app/plugins/panel/trend/TrendPanel.tsx

@@ -80,8 +80,8 @@ export const TrendPanel = ({
       }
     }
 
-    return { frames: prepareGraphableFields(frames, config.theme2, undefined, xFieldIdx) };
-  }, [data.series, options.xField]);
+    return { frames: prepareGraphableFields(frames, fieldConfig, config.theme2, undefined, xFieldIdx) };
+  }, [data.series, fieldConfig, options.xField]);
 
   if (info.warning || !info.frames) {
     return (