From 87100e72d6a51bcc5f82e93cef280d9aea078ece Mon Sep 17 00:00:00 2001 From: Leon Sorokin Date: Mon, 25 Nov 2024 09:34:41 -0600 Subject: [PATCH] better --- packages/grafana-data/src/field/fieldState.ts | 39 +++++++++++++++---- .../app/core/components/GraphNG/GraphNG.tsx | 6 +-- public/app/plugins/panel/barchart/utils.ts | 2 +- .../panel/timeseries/TimeSeriesPanel.tsx | 12 ++---- public/app/plugins/panel/timeseries/utils.ts | 2 +- public/app/plugins/panel/xychart/utils.ts | 2 +- 6 files changed, 41 insertions(+), 22 deletions(-) diff --git a/packages/grafana-data/src/field/fieldState.ts b/packages/grafana-data/src/field/fieldState.ts index 3ddaebbda63..311ad1d4344 100644 --- a/packages/grafana-data/src/field/fieldState.ts +++ b/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; }); } diff --git a/public/app/core/components/GraphNG/GraphNG.tsx b/public/app/core/components/GraphNG/GraphNG.tsx index 88b4b5048bf..f8c18c0d3e9 100644 --- a/public/app/core/components/GraphNG/GraphNG.tsx +++ b/public/app/core/components/GraphNG/GraphNG.tsx @@ -33,7 +33,6 @@ export type PropDiffFn = {}> = (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 { } 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 || diff --git a/public/app/plugins/panel/barchart/utils.ts b/public/app/plugins/panel/barchart/utils.ts index d6cf592062e..de867503429 100644 --- a/public/app/plugins/panel/barchart/utils.ts +++ b/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] }; diff --git a/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx b/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx index 1854542fd59..766b222e928 100644 --- a/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx +++ b/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 = ({