Provide CSS ID to outer div containers

vizro-core/changelog.d/20231014_171921_huong_li_nguyen_provide_id_to_outer_containers.md

@@ -0,0 +1,41 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Removed
+
+- A bullet item for the Removed category.
+
+-->
+
+### Added
+
+- Provide ID to unique outer HTML divs on page ([#111](https://github.com/mckinsey/vizro/pull/111))
+
+<!--
+### Changed
+
+- A bullet item for the Changed category.
+
+-->
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category.
+
+-->
+<!--
+### Fixed
+
+- A bullet item for the Fixed category.
+
+-->
+<!--
+### Security
+
+- A bullet item for the Security category.
+
+-->

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

@@ -103,7 +103,7 @@ def build(self):
         self._update_theme()
 
         return dbc.Container(
-            id="dashboard_container",
+            id="dashboard_container_outer",
             children=[
                 html.Div(id=f"vizro_version_{vizro.__version__}"),
                 ActionLoop._create_app_callbacks(),
@@ -117,7 +117,7 @@ def build(self):
     def _update_theme():
         clientside_callback(
             ClientsideFunction(namespace="clientside", function_name="update_dashboard_theme"),
-            Output("dashboard_container", "className"),
+            Output("dashboard_container_outer", "className"),
             Input("theme_selector", "on"),
         )
 

vizro-core/src/vizro/models/_navigation/_accordion.py

@@ -76,7 +76,7 @@ def _get_accordion_container(self, accordion_items, accordion_buttons):
                 html.Hr(),
             ],
             className="nav_panel",
-            id=f"{self.id}_outer",
+            id="nav_panel_outer",
         )
 
     def _create_accordion(self, active_page_id):

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

@@ -161,8 +161,7 @@ def _create_theme_switch():
     @staticmethod
     def _create_control_panel(controls_content):
         control_panel = html.Div(
-            children=[*controls_content, html.Hr()],
-            className="control_panel",
+            children=[*controls_content, html.Hr()], className="control_panel", id="control_panel_outer"
         )
         return control_panel if controls_content else None
 
@@ -185,6 +184,7 @@ def _create_component_container(self, components_content):
                 className="component_container_grid",
             ),
             className="component_container",
+            id="component_container_outer",
         )
         return component_container
 
@@ -196,23 +196,23 @@ def _arrange_containers(page_title, theme_switch, nav_panel, control_panel, comp
         """
         _, dashboard = next(model_manager._items_with_type(Dashboard))
         dashboard_title = (
-            html.Div(children=[html.H2(dashboard.title), html.Hr()], className="dashboard_title_outer")
+            html.Div(
+                children=[html.H2(dashboard.title), html.Hr()], className="dashboard_title", id="dashboard_title_outer"
+            )
             if dashboard.title
             else None
         )
 
         header_elements = [page_title, theme_switch]
         left_side_elements = [dashboard_title, nav_panel, control_panel]
-        header = html.Div(
-            children=header_elements,
-            className="header",
+        header = html.Div(children=header_elements, className="header", id="header_outer")
+        left_side = (
+            html.Div(children=left_side_elements, className="left_side", id="left_side_outer")
+            if any(left_side_elements)
+            else None
         )
-        left_side = html.Div(children=left_side_elements, className="left_side") if any(left_side_elements) else None
         right_side_elements = [header, component_container]
-        right_side = html.Div(
-            children=right_side_elements,
-            className="right_side",
-        )
+        right_side = html.Div(children=right_side_elements, className="right_side", id="right_side_outer")
         return left_side, right_side
 
     def _make_page_layout(self, controls_content, components_content):

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

@@ -86,7 +86,7 @@
   width: 336px;
 }
 
-.dashboard_title_outer {
+.dashboard_title {
   display: flex;
   flex-direction: column;
   width: 100%;

vizro-core/tests/unit/vizro/models/_navigation/conftest.py

@@ -55,7 +55,7 @@ def accordion_from_page_as_list():
             html.Hr(),
         ],
         className="nav_panel",
-        id="accordion_list_outer",
+        id="nav_panel_outer",
     )
     return accordion
 
@@ -93,6 +93,6 @@ def accordion_from_pages_as_dict():
             html.Hr(),
         ],
         className="nav_panel",
-        id="accordion_dict_outer",
+        id="nav_panel_outer",
     )
     return accordion

vizro-core/tests/unit/vizro/models/test_dashboard.py

@@ -17,7 +17,7 @@
 @pytest.fixture()
 def dashboard_container():
     return dbc.Container(
-        id="dashboard_container",
+        id="dashboard_container_outer",
         children=[
             html.Div(id=f"vizro_version_{vizro.__version__}"),
             ActionLoop._create_app_callbacks(),