Make layout children a list

mckinsey · Jan 20, 2025 · 0e5c86b · 0e5c86b
1 parent 7205e85
commit 0e5c86b
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 18 deletions.
diff --git a/.stylelintignore b/.stylelintignore
@@ -1,2 +1,3 @@
 **/static/css/vizro-bootstrap.min.css
 **/static/css/vizro-bootstrap.min.css.map
+**/static/css/mantine_dates.css
diff --git a/vizro-core/examples/dev/app.py b/vizro-core/examples/dev/app.py
@@ -827,6 +827,6 @@ def multiple_cards(data_frame: pd.DataFrame, n_rows: Optional[int] = 1) -> html.
         target="_blank",
         className="anchor-container",
     )
-    app.dash.layout.children = [app.dash.layout.children, banner]
+    app.dash.layout.children.append(banner)
     server = app.dash.server
     app.run()
diff --git a/vizro-core/src/vizro/_vizro.py b/vizro-core/src/vizro/_vizro.py
@@ -8,7 +8,6 @@
 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

diff --git a/vizro-core/src/vizro/models/_dashboard.py b/vizro-core/src/vizro/models/_dashboard.py
@@ -172,8 +172,12 @@ def build(self):
                 dash.page_container,
             ],
         )
+
+        # children=[layout] as a list rather than children=layout, so that app.dash.layout.children.append works to
+        # easily add things to the Dash layout. In future we might have a neater function for patching components into
+        # the Dash layout in which case this could change.
         return dmc.MantineProvider(
-            layout,
+            children=[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"},
         )

diff --git a/vizro-core/tests/unit/vizro/models/test_dashboard.py b/vizro-core/tests/unit/vizro/models/test_dashboard.py
@@ -277,21 +277,23 @@ def test_dashboard_build(self, vizro_app, page_1, page_2):
         )
 
         expected_dashboard_container = dmc.MantineProvider(
-            html.Div(
-                id="dashboard-container",
-                children=[
-                    html.Div(id="vizro_version", children=vizro.__version__, hidden=True),
-                    dcc.Store(
-                        id="vizro_themes",
-                        data={
-                            "vizro_dark": dashboard_vizro_dark,
-                            "vizro_light": dashboard_vizro_light,
-                        },
-                    ),
-                    ActionLoop._create_app_callbacks(),
-                    dash.page_container,
-                ],
-            ),
+            children=[
+                html.Div(
+                    id="dashboard-container",
+                    children=[
+                        html.Div(id="vizro_version", children=vizro.__version__, hidden=True),
+                        dcc.Store(
+                            id="vizro_themes",
+                            data={
+                                "vizro_dark": dashboard_vizro_dark,
+                                "vizro_light": dashboard_vizro_light,
+                            },
+                        ),
+                        ActionLoop._create_app_callbacks(),
+                        dash.page_container,
+                    ],
+                )
+            ],
             theme={"primaryColor": "gray"},
         )
         assert_component_equal(dashboard.build(), expected_dashboard_container)