From 895d98a7ae667f31746c4eba75e8b35fda52d371 Mon Sep 17 00:00:00 2001 From: Victor Marin Date: Tue, 31 Mar 2026 19:33:08 +0300 Subject: [PATCH 1/4] when filters is added in new layouts, hide the label --- .../AdHocFiltersComboboxRenderer.tsx | 15 ++++++++++++++- .../adhoc/controller/AdHocFiltersController.ts | 1 + .../controller/AdHocFiltersVariableController.ts | 3 ++- 3 files changed, 17 insertions(+), 2 deletions(-) diff --git a/packages/scenes/src/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersComboboxRenderer.tsx b/packages/scenes/src/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersComboboxRenderer.tsx index 5a7bc7592..64d45569b 100644 --- a/packages/scenes/src/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersComboboxRenderer.tsx +++ b/packages/scenes/src/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersComboboxRenderer.tsx @@ -19,7 +19,8 @@ interface Props { } export const AdHocFiltersComboboxRenderer = memo(function AdHocFiltersComboboxRenderer({ controller }: Props) { - const { originFilters, filters, readOnly, collapsible, valueRecommendations, enableGroupBy } = controller.useState(); + const { originFilters, filters, readOnly, collapsible, valueRecommendations, enableGroupBy, hideLabel } = + controller.useState(); const styles = useStyles2(getStyles); const theme = useTheme2(); const [collapsed, setCollapsed] = useState(true); @@ -90,6 +91,12 @@ export const AdHocFiltersComboboxRenderer = memo(function AdHocFiltersComboboxRe > {!readOnly && valueRecommendations && } + {hideLabel && ( + + {t('grafana-scenes.variables.adhoc-filters-combobox-renderer.filters-label', 'Filters:')} + + )} + {adhocFiltersToRender.map((filter, index) => ( ({ backgroundColor: theme.colors.border.weak, flexShrink: 0, }), + filtersLabel: css({ + ...theme.typography.bodySmall, + fontWeight: theme.typography.fontWeightBold, + color: theme.colors.text.primary, + whiteSpace: 'nowrap', + }), groupByLabel: css({ ...theme.typography.bodySmall, fontWeight: theme.typography.fontWeightBold, diff --git a/packages/scenes/src/variables/adhoc/controller/AdHocFiltersController.ts b/packages/scenes/src/variables/adhoc/controller/AdHocFiltersController.ts index 846b5ea71..06b3d37b6 100644 --- a/packages/scenes/src/variables/adhoc/controller/AdHocFiltersController.ts +++ b/packages/scenes/src/variables/adhoc/controller/AdHocFiltersController.ts @@ -22,6 +22,7 @@ export interface AdHocFiltersControllerState { valueRecommendations?: AdHocFiltersRecommendations; drilldownRecommendationsEnabled?: boolean; enableGroupBy?: boolean; + hideLabel?: boolean; } /** diff --git a/packages/scenes/src/variables/adhoc/controller/AdHocFiltersVariableController.ts b/packages/scenes/src/variables/adhoc/controller/AdHocFiltersVariableController.ts index 95a2999e7..31ff01a65 100644 --- a/packages/scenes/src/variables/adhoc/controller/AdHocFiltersVariableController.ts +++ b/packages/scenes/src/variables/adhoc/controller/AdHocFiltersVariableController.ts @@ -1,4 +1,4 @@ -import { SelectableValue } from '@grafana/data'; +import { SelectableValue, VariableHide } from '@grafana/data'; import { AdHocFilterWithLabels, AdHocFiltersVariable } from '../AdHocFiltersVariable'; import { AdHocFiltersController, AdHocFiltersControllerState } from './AdHocFiltersController'; import { getQueryController } from '../../../core/sceneGraph/getQueryController'; @@ -28,6 +28,7 @@ export class AdHocFiltersVariableController implements AdHocFiltersController { valueRecommendations: this.model.getRecommendations(), drilldownRecommendationsEnabled: state.drilldownRecommendationsEnabled, enableGroupBy: state.enableGroupBy, + hideLabel: state.hide === VariableHide.hideLabel, }; } From 083884db8a790064ad34982607a426e90c203a7d Mon Sep 17 00:00:00 2001 From: Victor Marin Date: Tue, 31 Mar 2026 19:38:15 +0300 Subject: [PATCH 2/4] hide this alltogether if groupBy is not enabled --- .../adhoc/AdHocFiltersCombobox/AdHocFiltersComboboxRenderer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/scenes/src/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersComboboxRenderer.tsx b/packages/scenes/src/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersComboboxRenderer.tsx index 64d45569b..df5de1bb0 100644 --- a/packages/scenes/src/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersComboboxRenderer.tsx +++ b/packages/scenes/src/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersComboboxRenderer.tsx @@ -91,7 +91,7 @@ export const AdHocFiltersComboboxRenderer = memo(function AdHocFiltersComboboxRe > {!readOnly && valueRecommendations && } - {hideLabel && ( + {enableGroupBy && hideLabel && ( {t('grafana-scenes.variables.adhoc-filters-combobox-renderer.filters-label', 'Filters:')} From 2e936bebd35efd760f146cb369fe84ef5f16bc68 Mon Sep 17 00:00:00 2001 From: Victor Marin Date: Tue, 31 Mar 2026 21:35:56 +0300 Subject: [PATCH 3/4] i18n --- packages/scenes/src/locales/en-US/grafana-scenes.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/scenes/src/locales/en-US/grafana-scenes.json b/packages/scenes/src/locales/en-US/grafana-scenes.json index 2fc1b1b64..eba178e48 100644 --- a/packages/scenes/src/locales/en-US/grafana-scenes.json +++ b/packages/scenes/src/locales/en-US/grafana-scenes.json @@ -112,6 +112,7 @@ "collapse": "Collapse", "collapse-filters": "Collapse filters", "expand-filters": "Expand filters", + "filters-label": "Filters:", "group-by-label": "Group by:", "show-more-filters_one": "Show {{count}} more filters", "show-more-filters_other": "Show {{count}} more filters", From 1b818ad17516d0f07668e171d03fd8980ba1bf30 Mon Sep 17 00:00:00 2001 From: Victor Marin Date: Thu, 2 Apr 2026 16:56:34 +0300 Subject: [PATCH 4/4] fix and use actual variable label --- .../AdHocFiltersComboboxRenderer.tsx | 9 ++++++--- .../variables/adhoc/controller/AdHocFiltersController.ts | 1 + .../adhoc/controller/AdHocFiltersVariableController.ts | 1 + 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/scenes/src/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersComboboxRenderer.tsx b/packages/scenes/src/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersComboboxRenderer.tsx index 26ea53a1a..b39608184 100644 --- a/packages/scenes/src/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersComboboxRenderer.tsx +++ b/packages/scenes/src/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersComboboxRenderer.tsx @@ -28,6 +28,7 @@ export const AdHocFiltersComboboxRenderer = memo(function AdHocFiltersComboboxRe valueRecommendations, enableGroupBy, hideLabel, + variableLabel, groupByRestorable, } = controller.useState(); const styles = useStyles2(getStyles); @@ -102,8 +103,10 @@ export const AdHocFiltersComboboxRenderer = memo(function AdHocFiltersComboboxRe {!readOnly && valueRecommendations && } {enableGroupBy && hideLabel && ( - - {t('grafana-scenes.variables.adhoc-filters-combobox-renderer.filters-label', 'Filters:')} + + {variableLabel + ? `${variableLabel}:` + : t('grafana-scenes.variables.adhoc-filters-combobox-renderer.filters-label', 'Filters:')} )} @@ -112,7 +115,7 @@ export const AdHocFiltersComboboxRenderer = memo(function AdHocFiltersComboboxRe // that the input is announced before focussing on the pills diff --git a/packages/scenes/src/variables/adhoc/controller/AdHocFiltersController.ts b/packages/scenes/src/variables/adhoc/controller/AdHocFiltersController.ts index eab6c3d90..39b16cf42 100644 --- a/packages/scenes/src/variables/adhoc/controller/AdHocFiltersController.ts +++ b/packages/scenes/src/variables/adhoc/controller/AdHocFiltersController.ts @@ -23,6 +23,7 @@ export interface AdHocFiltersControllerState { drilldownRecommendationsEnabled?: boolean; enableGroupBy?: boolean; hideLabel?: boolean; + variableLabel?: string; groupByRestorable?: boolean; } diff --git a/packages/scenes/src/variables/adhoc/controller/AdHocFiltersVariableController.ts b/packages/scenes/src/variables/adhoc/controller/AdHocFiltersVariableController.ts index 60e463487..514f626cb 100644 --- a/packages/scenes/src/variables/adhoc/controller/AdHocFiltersVariableController.ts +++ b/packages/scenes/src/variables/adhoc/controller/AdHocFiltersVariableController.ts @@ -30,6 +30,7 @@ export class AdHocFiltersVariableController implements AdHocFiltersController { drilldownRecommendationsEnabled: state.drilldownRecommendationsEnabled, enableGroupBy: state.enableGroupBy, hideLabel: state.hide === VariableHide.hideLabel, + variableLabel: state.label, groupByRestorable: this.model.isGroupByRestorable(), }; }