AdHocFiltersCombobox: Collapse filter combobox

[Sergej-Vlasov]

Filters UI collapse functionality

Implementation in grafana/grafana grafana/grafana#98411

Screen.Recording.2024-11-08.at.11.24.49.mov

CONSIDERATIONS:

1. This is not entirely accurate when there are more variables on the same line (due to filter box growing) see in depth explanation -> AdHocFiltersCombobox: Collapse filters to save space #962

2. Perhaps worth adding extra setting collapseThreshold or have collapseFilters as boolean | number to allow more fine grain control on what pixel width to start collapse due to above

📦 Published PR as canary version: 5.36.1--canary.961.12544951331.0

✨ Test out this PR locally via:

npm install @grafana/[email protected]
npm install @grafana/[email protected]
# or 
yarn add @grafana/[email protected]
yarn add @grafana/[email protected]

[torkelo]

I think something like this is really needed

[Sergej-Vlasov]

@torkelo will clean up and finalise this over the next few days. This behaviour will be controlled via variable setting collapseFilters.

[ivanortegaalba]

The first thing that comes to my mind is: Shouldn't this be something to control from the component rather than the variable declaration?

This is pure UI behavior. It is weird to create a SceneObject variable to represent the AdHoc filter and indicate that it is collapsible. Have you considered any other approach that allows you to configure this in the variables control, for example?

[Sergej-Vlasov]

I decided to go with this implementation because it does not involve any major design changes and offers persistence between reloads. Other approaches would struggle with persistence especially when this is opt in behaviour.