better

packages/grafana-data/src/field/fieldState.ts

@@ -62,11 +62,32 @@ export function cacheFieldDisplayNames(frames: DataFrame[]) {
 /**
  *
  * moves each field's config.custom.hideFrom to field.state.hideFrom
- * and mutates orgiginal field.config.custom.hideFrom to one with explicit overrides only, (without the ad-hoc stateful __system override from legend toggle)
+ * and sets field.config.custom.hideFrom to one with explicit overrides only, (without the ad-hoc stateful __system override from legend toggle)
  */
 export function decoupleHideFromState(frames: DataFrame[], fieldConfig: FieldConfigSource) {
-  frames.forEach((frame) => {
-    frame.fields.forEach((field) => {
+  return frames.map((frame) => {
+    const frameCopy: DataFrame = { ...frame };
+
+    frameCopy.fields = frame.fields.map((field) => {
+      const fieldCopy: Field = {
+        ...field,
+        state: {
+          ...field.state,
+          hideFrom: {
+            ...(field.state?.hideFrom ?? { legend: false, tooltip: false, viz: false }),
+          },
+        },
+        config: {
+          ...field.config,
+          custom: {
+            ...field.config.custom,
+            hideFrom: {
+              ...field.config.custom?.hideFrom,
+            },
+          },
+        },
+      };
+
       const hideFrom = {
         legend: false,
         tooltip: false,
@@ -75,7 +96,7 @@ export function decoupleHideFromState(frames: DataFrame[], fieldConfig: FieldCon
       };
 
       // with ad hoc __system override applied
-      const hideFromState = field.config.custom?.hideFrom;
+      const hideFromState = fieldCopy.config.custom?.hideFrom;
 
       fieldConfig.overrides.forEach((o) => {
         if ('__systemRef' in o) {
@@ -93,16 +114,20 @@ export function decoupleHideFromState(frames: DataFrame[], fieldConfig: FieldCon
         }
       });
 
-      field.state = {
-        ...field.state,
+      fieldCopy.state = {
+        ...fieldCopy.state,
         hideFrom: {
           ...hideFromState,
         },
       };
 
       // original with perm overrides
-      field.config.custom.hideFrom = hideFrom;
+      fieldCopy.config.custom.hideFrom = hideFrom;
+
+      return fieldCopy;
     });
+
+    return frameCopy;
   });
 }
 

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

@@ -33,7 +33,6 @@ 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;
@@ -204,10 +203,9 @@ export class GraphNG extends Component<GraphNGProps, GraphNGState> {
   }
 
   componentDidUpdate(prevProps: GraphNGProps) {
-    const { frames, structureRev, timeZone, cursorSync, propsToDiff, hideFromVizStates } = this.props;
+    const { frames, structureRev, timeZone, cursorSync, propsToDiff } = this.props;
 
-    const propsChanged =
-      !sameProps(prevProps, this.props, propsToDiff) || hideFromVizStates !== prevProps.hideFromVizStates;
+    const propsChanged = !sameProps(prevProps, this.props, propsToDiff);
 
     if (
       frames !== prevProps.frames ||

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

@@ -62,7 +62,7 @@ export function prepSeries(
   }
 
   cacheFieldDisplayNames(frames);
-  decoupleHideFromState(frames, fieldConfig);
+  frames = decoupleHideFromState(frames, fieldConfig);
 
   let frame: DataFrame | undefined = { ...frames[0] };
 

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

@@ -44,13 +44,10 @@ 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, 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 frames = useMemo(
+    () => prepareGraphableFields(data.series, fieldConfig, config.theme2, timeRange),
+    [data.series, fieldConfig, timeRange]
+  );
 
   const timezones = useMemo(() => getTimezones(options.timezone, timeZone), [options.timezone, timeZone]);
   const suggestions = useMemo(() => {
@@ -86,7 +83,6 @@ export const TimeSeriesPanel = ({
     <TimeSeries
       frames={frames}
       structureRev={data.structureRev}
-      hideFromVizStates={hideFromVizStates}
       timeRange={timeRange}
       timeZone={timezones}
       width={width}

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

@@ -85,7 +85,7 @@ export function prepareGraphableFields(
   }
 
   cacheFieldDisplayNames(series);
-  decoupleHideFromState(series, fieldConfig);
+  series = decoupleHideFromState(series, fieldConfig);
 
   let useNumericX = xNumFieldIdx != null;
 

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

@@ -43,7 +43,7 @@ export function prepSeries(
   fieldConfig: FieldConfigSource
 ) {
   cacheFieldDisplayNames(frames);
-  decoupleHideFromState(frames, fieldConfig);
+  frames = decoupleHideFromState(frames, fieldConfig);
 
   let series: XYSeries[] = [];