Enable highlighting of active page button and refactor accordion.build()

vizro-core/changelog.d/20230928_143738_nadija_ratkusic_graca_highlight_active_accordion_item.md

@@ -13,12 +13,12 @@ Uncomment the section that is right (remove the HTML comment wrapper).
 
 ### Added
 
-- Add validator for `dashboard.navigation` to default to `Navigation()` if not provided ([#74](https://github.com/mckinsey/vizro/pull/74))
+- Add validator for `Dashboard.navigation` to default to `Navigation()` if not provided ([#74](https://github.com/mckinsey/vizro/pull/74))
 
 ### Changed
 
 - Move creation of `dash.page_registry` to `Dashboard.pre_build` ([#74](https://github.com/mckinsey/vizro/pull/74))
-- Change the collapsible default behavior and highlighting color of the selected accordion group ([#74](https://github.com/mckinsey/vizro/pull/74))
+- Change the default collapsible behavior and highlighting color of the selected accordion group ([#74](https://github.com/mckinsey/vizro/pull/74))
 
 <!--
 ### Deprecated

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

@@ -26,20 +26,23 @@ class Accordion(VizroBaseModel):
     _validate_pages = validator("pages", allow_reuse=True, always=True)(_validate_pages)
 
     @_log_call
-    def build(self, active_page_id):
+    def build(self, *, active_page_id=None):
         return self._create_accordion(active_page_id=active_page_id)
 
     def _create_accordion_buttons(self, pages, active_page_id):
         """Creates a button for each provided page that is registered."""
         accordion_buttons = []
         for page_id in pages:
-            page = dash.page_registry[page_id]
+            try:
+                page = dash.page_registry[page_id]
+            except KeyError:
+                raise KeyError(f"Page with ID {page_id} cannot be found. Please add the page to `Dashboard.pages`")
             accordion_buttons.append(
                 dbc.Button(
                     children=[page["name"]],
                     key=page["relative_path"],
                     className="accordion-item-button",
-                    active=True if active_page_id == page["module"] else False,
+                    active=page_id == active_page_id,
                     href=page["relative_path"],
                 )
             )

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

@@ -73,5 +73,5 @@ def _set_selector(self):
         self._selector = Accordion(pages=self.pages)
 
     @_log_call
-    def build(self, active_page_id):
+    def build(self, *, active_page_id=None):
         return self._selector.build(active_page_id=active_page_id)

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

@@ -1,6 +1,6 @@
 from __future__ import annotations
 
-from typing import List, Optional
+from typing import List, Optional, cast
 
 import dash_bootstrap_components as dbc
 import dash_daq as daq
@@ -12,7 +12,7 @@
 from vizro.actions import _on_page_load
 from vizro.managers import model_manager
 from vizro.managers._model_manager import DuplicateIDError
-from vizro.models import Action, Dashboard, Graph, Layout, VizroBaseModel
+from vizro.models import Action, Dashboard, Graph, Layout, Navigation, VizroBaseModel
 from vizro.models._action._actions_chain import ActionsChain, Trigger
 from vizro.models._models_utils import _log_call, get_unique_grid_component_ids
 
@@ -168,7 +168,7 @@ def _create_control_panel(controls_content):
 
     def _create_nav_panel(self):
         _, dashboard = next(model_manager._items_with_type(Dashboard))
-        return dashboard.navigation.build(active_page_id=self.id)  # type: ignore[union-attr]
+        return cast(Navigation, dashboard.navigation).build(active_page_id=self.id)
 
     def _create_component_container(self, components_content):
         component_container = html.Div(

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

@@ -61,7 +61,7 @@ def test_accordion_build_pages_as_dict(self, pages_as_dict, accordion_from_pages
         assert result == expected
 
     def test_accordion_build_single_page_accordion(self):
-        accordion = Accordion(pages=["Page 1"], id="single_accordion").build(active_page_id="Page 1")
+        accordion = Accordion(pages=["Page 1"], id="single_accordion").build()
         assert accordion is None
 
     def test_navigation_not_all_pages_included(self):

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

@@ -56,6 +56,6 @@ def test_navigation_build(self, pages):
         accordion = Accordion(pages=pages)
         navigation._selector.id = accordion.id
 
-        result = json.loads(json.dumps(navigation.build(active_page_id="Page 1"), cls=plotly.utils.PlotlyJSONEncoder))
-        expected = json.loads(json.dumps(accordion.build(active_page_id="Page 1"), cls=plotly.utils.PlotlyJSONEncoder))
+        result = json.loads(json.dumps(navigation.build(), cls=plotly.utils.PlotlyJSONEncoder))
+        expected = json.loads(json.dumps(accordion.build(), cls=plotly.utils.PlotlyJSONEncoder))
         assert result == expected

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

@@ -104,5 +104,5 @@ def test_page_build_left_side_removed(standard_px_chart):
     dashboard = vm.Dashboard(pages=[page])
     dashboard.pre_build()
     dashboard.navigation.pre_build()
-    assert ("className='left_side'" not in str(page.build())) is True
+    assert "className='left_side'" not in str(page.build())
     del dash.page_registry["Single Page"]