[Feat] Add page-level reset controls button #1437

petar-qb · 2025-10-06T13:10:51Z

Closes https://github.com/McK-Internal/vizro-internal/issues/2191

Description

Draft PR opened without fixing/writing any tests or docs.

TODO

Screenshot

text-button

Screen.Recording.2025-10-06.at.15.47.32.mov

icon-button with tooltip

Screen.Recording.2025-10-06.at.15.49.51.mov

text-icon-button in control_panel or icon-with-tooltip in header (the current PR implementation)

Screen.Recording.2025-10-08.at.11.25.13.mov

Notice

I acknowledge and agree that, by checking this box and clicking "Submit Pull Request":
- I submit this contribution under the Apache 2.0 license and represent that I am entitled to do so on behalf of myself, my employer, or relevant third parties, as applicable.
- I certify that (a) this contribution is my original creation and / or (b) to the extent it is not my original creation, I am authorized to submit this contribution on behalf of the original creator(s) or their licensees.
- I certify that the use of this contribution as authorized by the Apache 2.0 license does not violate the intellectual property rights of anyone else.
- I have not referenced individuals, products or companies in any commits, directly or indirectly.
- I have not added data or restricted code in any commits, directly or indirectly.

vizro-core/src/vizro/models/_controls/filter.py

vizro-core/src/vizro/models/_controls/parameter.py

github-actions · 2025-10-06T13:15:22Z

View the example dashboards of the current commit live on PyCafe ☕ 🚀

Updated on: 2025-10-06 13:15:21 UTC
Commit: e598a93

Compare the examples using the commit's wheel file vs the latest released version:

petar-qb · 2025-10-06T13:18:04Z

vizro-core/src/vizro/models/_dashboard.py

+        vizro_controls_store_data = {
+            page.id: {
+                control.id: {
+                    "selectorId": control.selector.id,
+                    "originalValue": control.selector.value,
+                }
+                for control in cast(
+                    Iterable[ControlType],
+                    [*model_manager._get_models(Parameter, page), *model_manager._get_models(Filter, page)],
+                )
+            }
+            for page in self.pages
+        }
+


@antonymilne

I was able skip the page.id level of hierarchy and to move this to page.py (similarly how the page_id_store is added/handled), but I left it here on the dashboard level as this will be reused when someone starts working on the cross-page actions.

The vizro_controls_store structure will likely be adjusted later as we add more reset buttons (container-level, dashboard-level, figure-level) or cross-page actions. A flat structure is a strong candidate to avoid deep hierarchies.

Is the current structure where page.id is a top-level key done like this just so that reset_page_controls can easily look up all the controls on that page?

Yes exactly. However I think that the structure we be adjusted later to something like:

{ "control_1_id": { "selector_id": "selector_control_1_id", "page_id": "my_homepage", "parent_container_id": "container_id" "original_value": ["1", "2"], "current_value": ["1," "2", "3"], ... }, "control_2_id": ... }

I just refactored the code and switched to the format suggested in the previous comment. 😃

petar-qb · 2025-10-06T13:23:53Z

vizro-core/src/vizro/models/_dashboard.py

+        has_page_controls = bool(
+            [*model_manager._get_models(Parameter, page), *model_manager._get_models(Filter, page)]
+        )
+
        # Page header controls that appear on the right side of the header.
        header_controls = html.Div(
            id="header-controls",
            children=[
                dcc.Loading(
                    id="action-progress-indicator",
                    delay_show=300,
                    delay_hide=300,
                    custom_spinner=html.Span(
                        className="material-symbols-outlined progress-indicator",
                        # Keep "progress_activity" children so the CSS spinner can render/display correctly.
                        children="progress_activity",
                    ),
                    # Placeholder div is added as used as target from actions to show loading indicator.
                    children=html.Div(id="action-progress-indicator-placeholder"),
                ),
+                # Show reset button in header when page controls exist but control panel does not exist
+                reset_page_controls_btn if has_page_controls and _all_hidden(control_panel) else None,
                dbc.Switch(
                    id="theme-selector",
                    value=self.theme == "vizro_light",
                    persistence=True,
                    persistence_type="session",
                ),
            ],
        )

        # Apply different container position logic based on condition
        if _all_hidden(header_left_content + header_right_content):
            page_header_content.append(header_controls)
        else:
            header_right_content.append(header_controls)

+        # Show reset button in the control panel when page controls and control panel exist
+        if has_page_controls and not _all_hidden(control_panel):
+            control_panel.children.append(reset_page_controls_btn)
+


This code covers all the cases when:

controls exist in the controls panel => reset button is in the control panel

controls exist but hidden => reset button is in the header (page/dashboard depending on whether the dashboard header exist)

there's no controls on the page => reset button is not added

petar-qb · 2025-10-06T13:24:36Z

vizro-core/src/vizro/models/_page.py

+        )
+
+        if page_controls:
+            # TODO-AV2 D: Think about merging this with the URL callback when start working on cross-page actions.


The comment added so i can be cross linked.

linked here -> https://github.com/McK-Internal/vizro-internal/issues/2054

antonymilne

Wow, this looks great! Definitely it gets the preliminary "carry on as planned" from me 👍 The code looks really nice and simple overall and not too horribly hacky like we had worried. Great scratch_dev app for testing everything too 💯

Please could you quickly update https://github.com/McK-Internal/vizro-internal/issues/1719 to briefly explain what the approach is here and what alternatives we dismissed and why (can be very rough notes).

On the styles: I like the rectangular text button but maybe also with the icon in it - what does that look like?

I'm not a big fan of the button moving next to the theme switcher but if others prefer it then it's ok. The alternative would be to keep the button in the same place and just have a big empty left sidebar for it which is also not great I know. If we do move the button next to the theme switcher then maybe in that case I would make it just a circular button with icon so it's more in scale with the theme switcher. wdyt now we have a real live example to look at @huong-li-nguyen? Happy to go with whatever you prefer here.

Should we explain this feature in docs?

Yes, just a couple of sentences in controls.md should be good, no need for anything else.

Should I adjust all docs screenshots so they contain reset button?

No, that is just too painful.

vizro-core/src/vizro/static/js/models/page.js

antonymilne · 2025-10-07T16:07:22Z

vizro-core/src/vizro/models/_dashboard.py

+        vizro_controls_store_data = {
+            page.id: {
+                control.id: {
+                    "selectorId": control.selector.id,
+                    "originalValue": control.selector.value,
+                }
+                for control in cast(
+                    Iterable[ControlType],
+                    [*model_manager._get_models(Parameter, page), *model_manager._get_models(Filter, page)],
+                )
+            }
+            for page in self.pages
+        }
+


Is the current structure where page.id is a top-level key done like this just so that reset_page_controls can easily look up all the controls on that page?

petar-qb · 2025-10-08T09:39:31Z

I'm not a big fan of the button moving next to the theme switcher but if others prefer it then it's ok. The alternative would be to keep the button in the same place and just have a big empty left sidebar for it which is also not great I know. If we do move the button next to the theme switcher then maybe in that case I would make it just a circular button with icon so it's more in scale with the theme switcher. wdyt now we have a real live example to look at @huong-li-nguyen? Happy to go with whatever you prefer here.

I just pushed some changes and you can see how it looks like now in the third screen-recording in the PR description. So, the current implementation adds:

(if controls and control_panel) an icon-text-button without a tooltip (as it's obvious from the button text what happens) to the control_panel
(if controls and not control_panel) clickable icon with a tooltip to the header

I like the current solution. What do you think @huong-li-nguyen?

petar-qb · 2025-10-08T09:48:20Z

The only thing I’m currently uncertain about is whether we should commit to adding the reset button by default without an easy way of removing it. We plan (not immediately but it should be an ultimate goal) to expand the reset-controls functionality beyond the page level by adding it to the dashboard, container, control, and source figure levels.

However, making it a default behaviour (“set in stone”) might feel too intrusive for Vizro users, even now when it’s only applied at the page level.

I’d recommend an opt-in / opt-out approach instead, so users can easily enable or disable the button at different levels.

Here’s my suggested API design:

vm.Dashboard(show_reset_controls_button: bool = False)
vm.Page(show_reset_controls_button: bool = True)  # Maybe even set it to False by default.. or not
vm.Container(show_reset_controls_button: bool = False)
vm.Graph(show_reset_controls_button: bool = False)
vm.Filter(show_reset_control_button: bool = False)

In that case I would expose additional vm.Page argument and default it to False/True depending on what we agree.

I'd love to get you opinions on this: @antonymilne @huong-li-nguyen @Joseph-Perkins 🙏

petar-qb · 2025-10-08T13:18:29Z

vizro-core/src/vizro/models/_controls/_controls_utils.py

        )
+
+
+def set_selector_default_value(control_selector: SelectorType) -> None:


Another approach to calculating selectors' default values:

During the creation of vizro_controls_store (dashboard.build), calculate the default value for all selectors using get_dict_options_and_default and other relevant methods for min/max.

Implement a getter property (e.g get_default_value) for all selectors to access their current value.

NB: Default selector values cannot be calculated during the initialisation phase because options/min/max could be determined in the Filter.pre_build phase.

I found the current implementation good enough but we should rethink the solution when we deal with the https://github.com/McK-Internal/vizro-internal/issues/1554

petar-qb added 10 commits October 3, 2025 09:23

PoC

77f3dda

Minor

953241b

Fix that vizro_controls_store gets proper default value instead of None

350e1be

Half of refactoring

9c42278

Add page_id_store per page

6cffa40

Minor

92a6887

Minor

6b30b1f

Lint

e9bb526

Minor

0e8c96c

add changelog file

e598a93

petar-qb self-assigned this Oct 6, 2025

petar-qb commented Oct 6, 2025

View reviewed changes

vizro-core/src/vizro/models/_controls/filter.py Outdated Show resolved Hide resolved

petar-qb commented Oct 6, 2025

View reviewed changes

vizro-core/src/vizro/models/_controls/parameter.py Outdated Show resolved Hide resolved

petar-qb commented Oct 6, 2025

View reviewed changes

Extract set_selector_default_value to _controls_utils.py

713f92c

antonymilne reviewed Oct 7, 2025

View reviewed changes

Adjust reset-button

ff24be9

Adjust vizro_controls_store and refactor the reset_page_controls cb

62018d3

petar-qb commented Oct 8, 2025

View reviewed changes

		)


		def set_selector_default_value(control_selector: SelectorType) -> None:

[Feat] Add page-level reset controls button #1437

Are you sure you want to change the base?

[Feat] Add page-level reset controls button #1437

Uh oh!

Conversation

petar-qb commented Oct 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

TODO

Screenshot

Notice

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Oct 6, 2025

View the example dashboards of the current commit live on PyCafe ☕ 🚀

vizro-core/examples/scratch_dev

vizro-core/examples/dev/

vizro-core/examples/visual-vocabulary/

vizro-core/examples/tutorial/

Uh oh!

petar-qb Oct 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

antonymilne left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

petar-qb commented Oct 8, 2025

Uh oh!

petar-qb commented Oct 8, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

petar-qb commented Oct 6, 2025 •

edited

Loading

petar-qb Oct 6, 2025 •

edited

Loading