Use hideFrom in GraphNG to hide fields if value is defined. Remove other filtering from timeline chart

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

@@ -167,7 +167,9 @@ export class GraphNG extends Component<GraphNGProps, GraphNGState> {
         // filter join field and fields.y
         alignedFrameFinal = {
           ...alignedFrame,
-          fields: alignedFrame.fields.filter((field, i) => i === 0 || fields.y(field, alignedFrame, [alignedFrame])),
+          fields: alignedFrame.fields
+            .filter((field, i) => i === 0 || fields.y(field, alignedFrame, [alignedFrame]))
+            .filter((field) => field.config.custom?.hideFrom?.viz !== true),
         };
       }
 

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

@@ -8,6 +8,7 @@ import {
   DataFrame,
   fieldMatchers,
   FieldMatcherID,
+  FieldConfigSource,
 } from '@grafana/data';
 import { LegendDisplayMode, VizLegendOptions } from '@grafana/schema';
 
@@ -33,6 +34,12 @@ describe('prepare timeline graph', () => {
       to: dateTime(3),
     },
   };
+
+  const fieldConfig: FieldConfigSource = {
+    defaults: {},
+    overrides: [],
+  };
+
   it('errors with no time fields', () => {
     const frames = [
       toDataFrame({
@@ -42,7 +49,7 @@ describe('prepare timeline graph', () => {
         ],
       }),
     ];
-    const info = prepareTimelineFields(frames, true, timeRange, theme);
+    const info = prepareTimelineFields(frames, true, timeRange, theme, fieldConfig);
     expect(info.warn).toEqual('Data does not have a time field');
   });
 
@@ -55,7 +62,7 @@ describe('prepare timeline graph', () => {
         ],
       }),
     ];
-    const info = prepareTimelineFields(frames, true, timeRange, theme);
+    const info = prepareTimelineFields(frames, true, timeRange, theme, fieldConfig);
     expect(info.warn).toEqual('No graphable fields');
   });
 
@@ -68,7 +75,7 @@ describe('prepare timeline graph', () => {
         ],
       }),
     ];
-    const info = prepareTimelineFields(frames, true, timeRange, theme);
+    const info = prepareTimelineFields(frames, true, timeRange, theme, fieldConfig);
     expect(info.warn).toBeUndefined();
 
     const out = info.frames![0];
@@ -97,7 +104,7 @@ describe('prepare timeline graph', () => {
         ],
       }),
     ];
-    const result = prepareTimelineFields(frames, true, timeRange, theme);
+    const result = prepareTimelineFields(frames, true, timeRange, theme, fieldConfig);
     expect(result.frames?.[0].fields[0].values).toEqual([1, 2, 3, 4]);
   });
 
@@ -154,7 +161,7 @@ describe('prepare timeline graph', () => {
       }),
     ];
 
-    const info = prepareTimelineFields(frames, true, timeRange2, theme);
+    const info = prepareTimelineFields(frames, true, timeRange2, theme, fieldConfig);
 
     let joined = preparePlotFrame(
       info.frames!,
@@ -245,7 +252,7 @@ describe('prepare timeline graph', () => {
       }),
     ];
 
-    const info = prepareTimelineFields(frames, true, timeRange2, theme);
+    const info = prepareTimelineFields(frames, true, timeRange2, theme, fieldConfig);
 
     let joined = preparePlotFrame(
       info.frames!,

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

@@ -18,7 +18,9 @@ import {
   outerJoinDataFrames,
   ValueMapping,
   ThresholdsConfig,
+  FieldConfigSource,
 } from '@grafana/data';
+import { decoupleHideFromState } from '@grafana/data/src/field/fieldState';
 import { maybeSortFrame, NULL_RETAIN } from '@grafana/data/src/transformations/transformers/joinDataFrames';
 import { applyNullInsertThreshold } from '@grafana/data/src/transformations/transformers/nulls/nullInsertThreshold';
 import { nullToValue } from '@grafana/data/src/transformations/transformers/nulls/nullToValue';
@@ -296,13 +298,15 @@ export function prepareTimelineFields(
   series: DataFrame[] | undefined,
   mergeValues: boolean,
   timeRange: TimeRange,
-  theme: GrafanaTheme2
+  theme: GrafanaTheme2,
+  fieldConfig: FieldConfigSource
 ): { frames?: DataFrame[]; warn?: string } {
   if (!series?.length) {
     return { warn: 'No data in response' };
   }
 
   cacheFieldDisplayNames(series);
+  decoupleHideFromState(series, fieldConfig);
 
   let hasTimeseries = false;
   const frames: DataFrame[] = [];
@@ -375,9 +379,6 @@ export function prepareTimelineFields(
 
     const fields: Field[] = [];
     for (let field of frame.fields) {
-      if (field.config.custom?.hideFrom?.viz) {
-        continue;
-      }
       switch (field.type) {
         case FieldType.time:
           isTimeseries = true;

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

@@ -104,6 +104,7 @@ export const StateTimelinePanel = ({
   height,
   replaceVariables,
   onChangeTimeRange,
+  fieldConfig,
 }: TimelinePanelProps) => {
   const theme = useTheme2();
 
@@ -113,8 +114,8 @@ export const StateTimelinePanel = ({
   const cursorSync = sync?.() ?? DashboardCursorSync.Off;
 
   const { frames, warn } = useMemo(
-    () => prepareTimelineFields(data.series, options.mergeValues ?? true, timeRange, theme),
-    [data.series, options.mergeValues, timeRange, theme]
+    () => prepareTimelineFields(data.series, options.mergeValues ?? true, timeRange, theme, fieldConfig),
+    [data.series, options.mergeValues, timeRange, theme, fieldConfig]
   );
 
   const { paginatedFrames, paginationRev, paginationElement, paginationHeight } = usePagination(

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

@@ -31,6 +31,7 @@ export const StatusHistoryPanel = ({
   height,
   replaceVariables,
   onChangeTimeRange,
+  fieldConfig,
 }: TimelinePanelProps) => {
   const theme = useTheme2();
 
@@ -42,8 +43,8 @@ export const StatusHistoryPanel = ({
   const enableAnnotationCreation = Boolean(canAddAnnotations && canAddAnnotations());
 
   const { frames, warn } = useMemo(
-    () => prepareTimelineFields(data.series, false, timeRange, theme),
-    [data.series, timeRange, theme]
+    () => prepareTimelineFields(data.series, false, timeRange, theme, fieldConfig),
+    [data.series, timeRange, theme, fieldConfig]
   );
 
   const legendItems = useMemo(