Replace toggle-switch and fix CSS (#245)

vizro-core/changelog.d/20240103_170310_huong_li_nguyen_replace_selected_components.md

@@ -0,0 +1,47 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Highlights ✨
+
+- A bullet item for the Highlights ✨ category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Removed
+
+- A bullet item for the Removed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Added
+
+- A bullet item for the Added category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Changed
+
+- A bullet item for the Changed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+
+### Fixed
+
+- Add CSS for `dmc.Switch` and fix CSS when toggle-switch is turned on ([#244](https://github.com/mckinsey/vizro/pull/244))
+
+<!--
+### Security
+
+- A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->

vizro-core/pyproject.toml

@@ -22,7 +22,6 @@ dependencies = [
   "dash_bootstrap_components",
   "pandas",
   "pydantic>=1.10.13",  # must be synced with pre-commit mypy hook manually
-  "dash_daq",
   "dash_mantine_components",
   "ipython>=8.10.0",  # not directly required, pinned by Snyk to avoid a vulnerability: https://app.snyk.io/vuln/SNYK-PYTHON-IPYTHON-3318382
   "numpy>=1.22.2",  # not directly required, pinned by Snyk to avoid a vulnerability: https://security.snyk.io/vuln/SNYK-PYTHON-NUMPY-2321970

vizro-core/snyk/requirements.txt

@@ -2,7 +2,6 @@ dash>=2.14.1
 dash_bootstrap_components
 pandas
 pydantic>=1.10.13
-dash_daq
 dash_mantine_components
 ipython>=8.10.0
 numpy>=1.22.2

vizro-core/src/vizro/actions/_callback_mapping/_callback_mapping_utils.py

@@ -154,7 +154,7 @@ def _get_action_callback_inputs(action_id: ModelID) -> Dict[str, Any]:
             if "filter_interaction" in include_inputs
             else []
         ),
-        "theme_selector": State("theme_selector", "on") if "theme_selector" in include_inputs else [],
+        "theme_selector": State("theme_selector", "checked") if "theme_selector" in include_inputs else [],
     }
     return action_input_mapping
 

vizro-core/src/vizro/models/_components/graph.py

@@ -102,5 +102,5 @@ def build(self):
     def _update_theme(fig: go.Figure, theme_selector: bool):
         # Basically the same as doing fig.update_layout(template="vizro_light/dark") but works for both the call in
         # self.__call__ and in the update_graph_theme callback.
-        fig["layout"]["template"] = themes.dark if theme_selector else themes.light
+        fig["layout"]["template"] = themes.light if theme_selector else themes.dark
         return fig

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

@@ -7,7 +7,7 @@
 
 import dash
 import dash_bootstrap_components as dbc
-import dash_daq as daq
+import dash_mantine_components as dmc
 from dash import ClientsideFunction, Input, Output, clientside_callback, get_relative_path, html
 
 try:
@@ -115,7 +115,7 @@ def build(self):
         clientside_callback(
             ClientsideFunction(namespace="clientside", function_name="update_dashboard_theme"),
             Output("dashboard_container_outer", "className"),
-            Input("theme_selector", "on"),
+            Input("theme_selector", "checked"),
         )
 
         return html.Div(
@@ -135,8 +135,12 @@ def _get_page_divs(self, page: Page) -> _PageDivsType:
         )
 
         settings = html.Div(
-            daq.BooleanSwitch(
-                id="theme_selector", on=self.theme == "vizro_dark", persistence=True, persistence_type="session"
+            dmc.Switch(
+                id="theme_selector",
+                checked=self.theme == "vizro_light",
+                persistence=True,
+                persistence_type="session",
+                className="toggle-switch",
             ),
             id="settings",
         )

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

@@ -163,7 +163,7 @@ def _update_graph_theme(self):
 
             @callback(
                 [Output(component.id, "figure", allow_duplicate=True) for component in themed_components],
-                Input("theme_selector", "on"),
+                Input("theme_selector", "checked"),
                 prevent_initial_call="initial_duplicate",
             )
             def update_graph_theme(theme_selector: bool):

vizro-core/src/vizro/static/css/toggle.css

@@ -1,48 +1,43 @@
-/* Toggle Container */
-#theme_selector .jAjsxw {
+.toggle-switch {
   width: 32px;
 }
 
-/* Toggle */
-#theme_selector .gJuplL,
-#theme_selector .cmSQpo {
-  background: var(--fill-subtle);
-  border: 1px solid var(--border-enabled);
-  border-radius: 16px;
-  display: flex;
-  flex-shrink: 0;
-  height: 16px;
+#page-container .mantine-Switch-track {
+  min-width: 32px;
   width: 32px;
+  height: 16px;
+  background-color: var(--fill-subtle);
+  border-radius: 16px;
+  border: 1px solid var(--border-enabled);
+}
+
+#page-container .mantine-Switch-track:focus {
+  border: 2px solid var(--focus-focus);
 }
 
-#theme_selector .gJuplL:active,
-#theme_selector .cmSQpo:active {
-  background: var(--fill-high-emphasis);
+#page-container .mantine-Switch-input {
+  margin: 0;
 }
 
-#theme_selector .gJuplL:focus,
-#theme_selector .cmSQpo:focus {
-  border: 2px solid var(--focus-focus);
+#page-container .mantine-Switch-trackLabel {
+  margin: 0;
+  width: 32px;
+  height: 16px;
 }
 
-/* Switch */
-#theme_selector .dlqMgb,
-#theme_selector .igrnnx {
-  background: var(--fill-medium-emphasis);
+#page-container .mantine-Switch-thumb {
   border: none;
-  border-radius: 10px;
-  flex-shrink: 0;
-  height: 10px;
-  transform: translateX(1px);
   width: 10px;
+  height: 10px;
+  background-color: var(--fill-medium-emphasis);
 }
 
-#theme_selector .igrnnx {
-  transform: translateX(16px);
+#page-container input:checked + * > .mantine-11dx59s {
+  left: calc(100% - 12px);
+  background: var(--text-contrast-primary);
 }
 
-#theme_selector .dlqMgb:active,
-#theme_selector .igrnnx:active {
-  background: var(--fill-contrast-hover-selected);
-  border: 1px solid var(--border-contrast-selected);
+#page-container input:checked + * > .mantine-69c9zd {
+  background: var(--text-primary);
+  border-color: var(--border-enabled);
 }

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

@@ -1,3 +1,3 @@
-export function _update_dashboard_theme(on) {
-  return on ? "vizro_dark" : "vizro_light";
+export function _update_dashboard_theme(checked) {
+  return checked ? "vizro_light" : "vizro_dark";
 }

vizro-core/tests/js/models/dashboard.test.js

@@ -1,6 +1,6 @@
 import { _update_dashboard_theme } from "../../../src/vizro/static/js/models/dashboard.js";
 
-test("true returns vizro_dark and false vizro_light", () => {
-  expect(_update_dashboard_theme(true)).toBe("vizro_dark");
-  expect(_update_dashboard_theme(false)).toBe("vizro_light");
+test("true returns vizro_light and false vizro_dark", () => {
+  expect(_update_dashboard_theme(true)).toBe("vizro_light");
+  expect(_update_dashboard_theme(false)).toBe("vizro_dark");
 });

vizro-core/tests/unit/vizro/actions/_callback_mapping/test_get_action_callback_mapping.py

@@ -127,7 +127,7 @@ def action_callback_inputs_expected():
                 "derived_viewport_data": dash.State("underlying_table_id", "derived_viewport_data"),
             },
         ],
-        "theme_selector": dash.State("theme_selector", "on"),
+        "theme_selector": dash.State("theme_selector", "checked"),
     }
 
 

vizro-core/tests/unit/vizro/actions/test_filter_action.py

@@ -49,8 +49,8 @@ def callback_context_filter_continent(request):
                 "parameters": [],
                 "theme_selector": CallbackTriggerDict(
                     id="theme_selector",
-                    property="on",
-                    value=True,
+                    property="checked",
+                    value=False,
                     str_id="theme_selector",
                     triggered=False,
                 ),
@@ -88,8 +88,8 @@ def callback_context_filter_continent_and_pop(request):
                 "parameters": [],
                 "theme_selector": CallbackTriggerDict(
                     id="theme_selector",
-                    property="on",
-                    value=True,
+                    property="checked",
+                    value=False,
                     str_id="theme_selector",
                     triggered=False,
                 ),

vizro-core/tests/unit/vizro/actions/test_filter_interaction_action.py

@@ -74,8 +74,8 @@ def callback_context_filter_interaction(request):
                 "parameters": [],
                 "theme_selector": CallbackTriggerDict(
                     id="theme_selector",
-                    property="on",
-                    value=True,
+                    property="checked",
+                    value=False,
                     str_id="theme_selector",
                     triggered=False,
                 ),

vizro-core/tests/unit/vizro/actions/test_on_page_load_action.py

@@ -80,8 +80,8 @@ def callback_context_on_page_load(request):
                 ],
                 "theme_selector": CallbackTriggerDict(
                     id="theme_selector",
-                    property="on",
-                    value=template == "vizro_dark",
+                    property="checked",
+                    value=template == "vizro_light",
                     str_id="theme_selector",
                     triggered=False,
                 ),

vizro-core/tests/unit/vizro/actions/test_parameter_action.py

@@ -68,8 +68,8 @@ def callback_context_parameter_y(request):
                 ],
                 "theme_selector": CallbackTriggerDict(
                     id="theme_selector",
-                    property="on",
-                    value=True,
+                    property="checked",
+                    value=False,
                     str_id="theme_selector",
                     triggered=False,
                 ),
@@ -100,8 +100,8 @@ def callback_context_parameter_hover_data(request):
                 ],
                 "theme_selector": CallbackTriggerDict(
                     id="theme_selector",
-                    property="on",
-                    value=True,
+                    property="checked",
+                    value=False,
                     str_id="theme_selector",
                     triggered=False,
                 ),
@@ -139,8 +139,8 @@ def callback_context_parameter_y_and_x(request):
                 ],
                 "theme_selector": CallbackTriggerDict(
                     id="theme_selector",
-                    property="on",
-                    value=True,
+                    property="checked",
+                    value=False,
                     str_id="theme_selector",
                     triggered=False,
                 ),

vizro-core/tests/unit/vizro/models/_components/test_graph.py

@@ -115,8 +115,8 @@ def test_update_theme_inside_callback(self, standard_px_chart, template):
                 "external": {
                     "theme_selector": CallbackTriggerDict(
                         id="theme_selector",
-                        property="on",
-                        value=template == "vizro_dark",
+                        property="checked",
+                        value=template == "vizro_light",
                         str_id="theme_selector",
                         triggered=False,
                     )