[Feat] Update to use dmc 0.15.1 (#924)

Signed-off-by: Li Nguyen <[email protected]>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Li Nguyen <[email protected]>
Co-authored-by: Antony Milne <[email protected]>

vizro-core/examples/dev/app.py

@@ -820,13 +820,13 @@ def multiple_cards(data_frame: pd.DataFrame, n_rows: Optional[int] = 1) -> html.
 
 if __name__ == "__main__":
     app = Vizro().build(dashboard)
-    app.dash.layout.children.append(
-        dbc.NavLink(
-            ["Made with ", html.Img(src=get_asset_url("logo.svg"), id="banner", alt="Vizro logo"), "vizro"],
-            href="https://github.com/mckinsey/vizro",
-            target="_blank",
-            className="anchor-container",
-        )
+
+    banner = dbc.NavLink(
+        ["Made with ", html.Img(src=get_asset_url("logo.svg"), id="banner", alt="Vizro logo"), "vizro"],
+        href="https://github.com/mckinsey/vizro",
+        target="_blank",
+        className="anchor-container",
     )
+    app.dash.layout.children = [app.dash.layout.children, banner]
     server = app.dash.server
     app.run()

vizro-core/examples/scratch_dev/app.py

@@ -1,43 +1,22 @@
 """Dev app to try things out."""
 
-import dash_bootstrap_components as dbc
-
-import vizro.models as vm
 from vizro import Vizro
+import vizro.models as vm
 import vizro.plotly.express as px
 
-
-from typing import Literal
-
-gapminder = px.data.gapminder()
-
-
-class NumberInput(vm.VizroBaseModel):
-    type: Literal["number_input"] = "number_input"
-
-    def build(self):
-        return (
-            dbc.Input(
-                id="number-input",
-                type="number",
-                min=0,
-                max=10,
-                step=1,
-                value=5,
-                debounce=True,
-            ),
-        )
-
-
-vm.Page.add_type("components", NumberInput)
+stocks = px.data.stocks(datetimes=True)
 
 page = vm.Page(
-    title="Charts UI",
+    title="Page",
     components=[
-        NumberInput(),
-        vm.Graph(figure=px.box(gapminder, x="year", y="gdpPercap", color="continent")),
+        vm.Graph(
+            figure=px.line(stocks, x="date", y="GOOG", title="Stocks Data"),
+        ),
+    ],
+    controls=[
+        vm.Filter(column="GOOG"),
+        vm.Filter(column="date", selector=vm.DatePicker(title="Date Picker (Stocks - date)")),
     ],
-    controls=[vm.Filter(column="year")],
 )
 
 dashboard = vm.Dashboard(pages=[page])

vizro-core/pyproject.toml

@@ -21,7 +21,7 @@ dependencies = [
   "pandas>=2",
   "plotly>=5.12.0",
   "pydantic>=1.10.16",  # must be synced with pre-commit mypy hook manually
-  "dash_mantine_components<0.13.0",  # 0.13.0 is not compatible with 0.12,
+  "dash_mantine_components~=0.15.1",
   "flask_caching>=2",
   "wrapt>=1",
   "black",

vizro-core/src/vizro/_vizro.py

@@ -8,6 +8,7 @@
 from typing import TYPE_CHECKING, TypedDict, cast
 
 import dash
+import dash_mantine_components as dmc
 import plotly.io as pio
 from dash.development.base_component import ComponentRegistry
 from flask_caching import SimpleCache
@@ -17,6 +18,9 @@
 from vizro.managers import data_manager, model_manager
 from vizro.models import Dashboard, Filter
 
+# this can be removed when Dash uses React 18 as a default (likely V3.0 https://github.com/plotly/dash/pull/3093)
+dash._dash_renderer._set_react_version("18.2.0")
+
 logger = logging.getLogger(__name__)
 
 if TYPE_CHECKING:
@@ -49,6 +53,13 @@ def __init__(self, **kwargs):
             use_pages=True,
         )
 
+        # Ensure external_stylesheets is a list and append the additional stylesheet
+        external_stylesheets = self.dash.config.external_stylesheets
+        self.dash.config.external_stylesheets = (
+            external_stylesheets if isinstance(external_stylesheets, list) else [external_stylesheets]
+        )
+        self.dash.config.external_stylesheets.append(dmc.styles.DATES)
+
         # When Vizro is used as a framework, we want to include the library and framework resources.
         # Dash serves resources in the order 1. external_stylesheets/scripts; 2. library resources from the
         # ComponentRegistry; 3. resources added by append_css/scripts.

vizro-core/src/vizro/models/_components/form/date_picker.py

@@ -1,15 +1,14 @@
 from typing import Literal, Optional, Union
 
 import dash_mantine_components as dmc
-from dash import ClientsideFunction, Input, Output, State, clientside_callback, dcc, html
+from dash import html
 
 try:
     from pydantic.v1 import Field, PrivateAttr, validator
 except ImportError:  # pragma: no cov
     from pydantic import Field, PrivateAttr, validator
 
 
-import datetime
 from datetime import date
 
 import dash_bootstrap_components as dbc
@@ -42,6 +41,7 @@ class DatePicker(VizroBaseModel):
     max: Optional[date] = Field(None, description="End date for date picker.")
     value: Optional[Union[list[date], date]] = Field(None, description="Default date for date picker")
     title: str = Field("", description="Title to be displayed.")
+
     range: bool = Field(True, description="Boolean flag for displaying range picker.")
     actions: list[Action] = []
 
@@ -55,57 +55,24 @@ class DatePicker(VizroBaseModel):
 
     def build(self):
         init_value = self.value or ([self.min, self.max] if self.range else self.min)  # type: ignore[list-item]
-        date_range_picker_kwargs = {"allowSingleDateInRange": True} if self.range else {}
-
-        output = [
-            Output(self.id, "value"),
-            Output(f"{self.id}_input_store", "data"),
-        ]
-        inputs = [
-            Input(self.id, "value"),
-            State(f"{self.id}_input_store", "data"),
-        ]
-
-        clientside_callback(
-            ClientsideFunction(namespace="date_picker", function_name="update_date_picker_values"),
-            output=output,
-            inputs=inputs,
-        )
-        # clientside callback is required as a workaround when the date-picker is overflowing its parent container
-        # if there is not enough space. Caused by another workaround for this issue:
-        # https://github.com/snehilvj/dash-mantine-components/issues/219
-        clientside_callback(
-            ClientsideFunction(namespace="date_picker", function_name="update_date_picker_position"),
-            output=Output(self.id, "dropdownPosition"),
-            inputs=Input(self.id, "n_clicks"),
-        )
-
-        date_picker_class = dmc.DateRangePicker if self.range else dmc.DatePicker
 
-        # dropdownPosition must be set to bottom-start as a workaround for issue:
-        # https://github.com/snehilvj/dash-mantine-components/issues/219
-        # clearable must be set to False as a workaround for issue:
-        # https://github.com/snehilvj/dash-mantine-components/issues/212
-        # maxDate must be increased by one day, and later on disabledDates must be set as maxDate + 1 day
-        # as a workaround for issue: https://github.com/snehilvj/dash-mantine-components/issues/230
-        date_picker = date_picker_class(
+        date_picker = dmc.DatePickerInput(
             id=self.id,
             minDate=self.min,
             value=init_value,
-            maxDate=self.max + datetime.timedelta(days=1) if self.max else None,
+            maxDate=self.max,
             persistence=True,
             persistence_type="session",
-            dropdownPosition="bottom-start",
-            clearable=False,
-            disabledDates=self.max + datetime.timedelta(days=1) if self.max else None,
+            type="range" if self.range else "default",
+            allowSingleDateInRange=True,
             className="datepicker",
-            **date_range_picker_kwargs,
+            # removes the default red color for  weekend days
+            styles={"day": {"color": "var(--mantine-color-text"}},
         )
 
         return html.Div(
             children=[
                 dbc.Label(children=self.title, html_for=self.id) if self.title else None,
                 date_picker,
-                dcc.Store(id=f"{self.id}_input_store", storage_type="session", data=init_value),
             ],
         )

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

@@ -8,6 +8,7 @@
 
 import dash
 import dash_bootstrap_components as dbc
+import dash_mantine_components as dmc
 import plotly.io as pio
 from dash import (
     ClientsideFunction,
@@ -156,7 +157,7 @@ def build(self):
                 State("collapsable-left-side", "is_open"),
             )
 
-        return html.Div(
+        layout = html.Div(
             id="dashboard-container",
             children=[
                 html.Div(id="vizro_version", children=vizro.__version__, hidden=True),
@@ -171,6 +172,11 @@ def build(self):
                 dash.page_container,
             ],
         )
+        return dmc.MantineProvider(
+            layout,
+            # Use the `theme` to style all Mantine components with a Vizro theme. For more info see https://www.dash-mantine-components.com/components/mantineprovider
+            theme={"primaryColor": "gray"},
+        )
 
     def _validate_logos(self):
         logo_img = self._infer_image(filename="logo")

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

@@ -1,8 +1,10 @@
 function update_dashboard_theme(theme_selector_checked) {
-  document.documentElement.setAttribute(
-    "data-bs-theme",
-    theme_selector_checked ? "light" : "dark",
-  );
+  const theme = theme_selector_checked ? "light" : "dark";
+
+  // Update theme attributes for Bootstrap and Mantine
+  document.documentElement.setAttribute("data-bs-theme", theme);
+  document.documentElement.setAttribute("data-mantine-color-scheme", theme);
+
   return window.dash_clientside.no_update;
 }