From debf8c0045d72cc760c3f09ac9d37886fdb1013e Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Fri, 29 Nov 2024 09:56:05 +0100 Subject: [PATCH 01/12] Replace switch --- .../src/vizro/models/_components/ag_grid.py | 2 +- .../src/vizro/models/_components/graph.py | 2 +- vizro-core/src/vizro/models/_dashboard.py | 17 +++++++---------- .../tests/unit/vizro/models/test_dashboard.py | 8 +++----- 4 files changed, 12 insertions(+), 17 deletions(-) diff --git a/vizro-core/src/vizro/models/_components/ag_grid.py b/vizro-core/src/vizro/models/_components/ag_grid.py index 25c8aef18..0ef0e26cf 100644 --- a/vizro-core/src/vizro/models/_components/ag_grid.py +++ b/vizro-core/src/vizro/models/_components/ag_grid.py @@ -119,7 +119,7 @@ def build(self): clientside_callback( ClientsideFunction(namespace="dashboard", function_name="update_ag_grid_theme"), Output(self._input_component_id, "className"), - Input("theme_selector", "checked"), + Input("theme-selector", "value"), ) return dcc.Loading( diff --git a/vizro-core/src/vizro/models/_components/graph.py b/vizro-core/src/vizro/models/_components/graph.py index 1250a2992..8772975c6 100644 --- a/vizro-core/src/vizro/models/_components/graph.py +++ b/vizro-core/src/vizro/models/_components/graph.py @@ -168,7 +168,7 @@ def build(self): output=[Output(self.id, "figure"), Output(self.id, "style")], inputs=[ Input(self.id, "figure"), - Input("theme_selector", "checked"), + Input("theme-selector", "value"), State("vizro_themes", "data"), ], prevent_initial_call=True, diff --git a/vizro-core/src/vizro/models/_dashboard.py b/vizro-core/src/vizro/models/_dashboard.py index 4b3b0e66a..2fd7c7b00 100644 --- a/vizro-core/src/vizro/models/_dashboard.py +++ b/vizro-core/src/vizro/models/_dashboard.py @@ -8,7 +8,6 @@ import dash import dash_bootstrap_components as dbc -import dash_mantine_components as dmc import plotly.io as pio from dash import ( ClientsideFunction, @@ -142,7 +141,7 @@ def build(self): ClientsideFunction(namespace="dashboard", function_name="update_dashboard_theme"), # This currently doesn't do anything, but we need to define an Output such that the callback is triggered. Output("dashboard-container", "className"), - Input("theme_selector", "checked"), + Input("theme-selector", "value"), ) left_side_div_present = any([len(self.pages) > 1, self.pages[0].controls]) if left_side_div_present: @@ -197,12 +196,11 @@ def _get_page_divs(self, page: Page) -> _PageDivsType: else html.H2(id="dashboard-title", hidden=True) ) settings = html.Div( - children=dmc.Switch( - id="theme_selector", - checked=self.theme == "vizro_light", + children=dbc.Switch( + id="theme-selector", + value=self.theme == "vizro_light", persistence=True, persistence_type="session", - className="toggle-switch", ), id="settings", ) @@ -311,12 +309,11 @@ def _make_page_404_layout(self): [ # Theme switch is added such that the 404 page has the same theme as the user-selected one. html.Div( - children=dmc.Switch( - id="theme_selector", - checked=self.theme == "vizro_light", + children=dbc.Switch( + id="theme-selector", + value=self.theme == "vizro_light", persistence=True, persistence_type="session", - className="toggle-switch", ), id="settings", ), diff --git a/vizro-core/tests/unit/vizro/models/test_dashboard.py b/vizro-core/tests/unit/vizro/models/test_dashboard.py index e7bd42016..670550349 100644 --- a/vizro-core/tests/unit/vizro/models/test_dashboard.py +++ b/vizro-core/tests/unit/vizro/models/test_dashboard.py @@ -2,7 +2,6 @@ import dash import dash_bootstrap_components as dbc -import dash_mantine_components as dmc import plotly.io as pio import pytest from asserts import assert_component_equal @@ -245,12 +244,11 @@ def test_make_page_404_layout(self, page_1, vizro_app): expected = html.Div( [ html.Div( - children=dmc.Switch( - id="theme_selector", - checked=False, + children=dbc.Switch( + id="theme-selector", + value=False, persistence=True, persistence_type="session", - className="toggle-switch", ), id="settings", ), From 80835df5aaad2ca80a9df540ba19686f9df68b4c Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Fri, 29 Nov 2024 09:56:10 +0100 Subject: [PATCH 02/12] Remove CSS --- vizro-core/src/vizro/static/css/toggle.css | 43 ---------------------- 1 file changed, 43 deletions(-) delete mode 100644 vizro-core/src/vizro/static/css/toggle.css diff --git a/vizro-core/src/vizro/static/css/toggle.css b/vizro-core/src/vizro/static/css/toggle.css deleted file mode 100644 index 2759aa182..000000000 --- a/vizro-core/src/vizro/static/css/toggle.css +++ /dev/null @@ -1,43 +0,0 @@ -.toggle-switch { - width: 32px; -} - -#dashboard-container .mantine-Switch-track { - background-color: var(--fill-subtle); - border: 1px solid var(--border-enabled); - border-radius: 16px; - height: 16px; - min-width: 32px; - width: 32px; -} - -#dashboard-container .mantine-Switch-track:focus { - border: 2px solid var(--focus); -} - -#dashboard-container .mantine-Switch-input { - margin: 0; -} - -#dashboard-container .mantine-Switch-trackLabel { - height: 16px; - margin: 0; - width: 32px; -} - -#dashboard-container .mantine-Switch-thumb { - background-color: var(--fill-secondary); - border: none; - height: 10px; - width: 10px; -} - -#dashboard-container input:checked + * > .mantine-11dx59s { - background: var(--text-primary-inverted); - left: calc(100% - 12px); -} - -#dashboard-container input:checked + * > .mantine-69c9zd { - background: var(--text-primary); - border-color: var(--border-enabled); -} From 641ed9187f75daa3a724145bfc015407d01a452c Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Fri, 29 Nov 2024 09:58:25 +0100 Subject: [PATCH 03/12] Add changelog --- ...9_095703_huong_li_nguyen_replace_switch.md | 48 +++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 vizro-core/changelog.d/20241129_095703_huong_li_nguyen_replace_switch.md diff --git a/vizro-core/changelog.d/20241129_095703_huong_li_nguyen_replace_switch.md b/vizro-core/changelog.d/20241129_095703_huong_li_nguyen_replace_switch.md new file mode 100644 index 000000000..ac2b99367 --- /dev/null +++ b/vizro-core/changelog.d/20241129_095703_huong_li_nguyen_replace_switch.md @@ -0,0 +1,48 @@ + + + + + + +### Changed + +- Replace `dmc.Switch` with `dbc.Switch` and change CSS selectors accordingly. ([#1](https://github.com/mckinsey/vizro/pull/1)) + + + + + From bb6c73416d7d4ac2266fdee6bc32c9bd94d6122b Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Fri, 29 Nov 2024 08:59:10 +0000 Subject: [PATCH 04/12] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- .../20241129_095703_huong_li_nguyen_replace_switch.md | 1 - 1 file changed, 1 deletion(-) diff --git a/vizro-core/changelog.d/20241129_095703_huong_li_nguyen_replace_switch.md b/vizro-core/changelog.d/20241129_095703_huong_li_nguyen_replace_switch.md index ac2b99367..ea49ab19d 100644 --- a/vizro-core/changelog.d/20241129_095703_huong_li_nguyen_replace_switch.md +++ b/vizro-core/changelog.d/20241129_095703_huong_li_nguyen_replace_switch.md @@ -27,7 +27,6 @@ Uncomment the section that is right (remove the HTML comment wrapper). - Replace `dmc.Switch` with `dbc.Switch` and change CSS selectors accordingly. ([#1](https://github.com/mckinsey/vizro/pull/1)) - + + + + + + + + diff --git a/vizro-core/tests/unit/vizro/models/test_dashboard.py b/vizro-core/tests/unit/vizro/models/test_dashboard.py index 670550349..7d9ca5f08 100644 --- a/vizro-core/tests/unit/vizro/models/test_dashboard.py +++ b/vizro-core/tests/unit/vizro/models/test_dashboard.py @@ -243,35 +243,20 @@ def test_make_page_404_layout(self, page_1, vizro_app): # vizro_app fixture is needed to avoid mocking out get_relative_path. expected = html.Div( [ - html.Div( - children=dbc.Switch( - id="theme-selector", - value=False, - persistence=True, - persistence_type="session", - ), - id="settings", + dbc.Switch( + id="theme-selector", + value=False, + persistence=True, + persistence_type="session", ), html.Img(), - html.Div( - [ - html.Div( - [ - html.H3("This page could not be found.", className="heading-3-600"), - html.P("Make sure the URL you entered is correct."), - ], - className="error-text-container", - ), - dbc.Button("Take me home", href="/"), - ], - className="error-content-container", - ), + html.H3("This page could not be found."), + html.P("Make sure the URL you entered is correct."), + dbc.Button(children="Take me home", href="/", className="mt-4"), ], - className="page-error-container", + className="d-flex flex-column align-items-center justify-content-center min-vh-100", ) - - # Strip out src since it's too long to be worth comparing and just comes directly - # from reading a file. + # Strip out src since it's too long to be worth comparing and just comes directly from reading a file. assert_component_equal(vm.Dashboard(pages=[page_1])._make_page_404_layout(), expected, keys_to_strip={"src"})