Enable logo for dashboard

vizro-core/examples/default/app.py

@@ -515,6 +515,7 @@ def create_home_page():
 
 
 dashboard = vm.Dashboard(
+    title="My Dashboard",
     pages=[
         create_home_page(),
         create_variable_analysis(),
@@ -527,7 +528,7 @@ def create_home_page():
             "Analysis": ["Homepage", "Variable Analysis", "Relationship Analysis", "Country Analysis"],
             "Summary": ["Continent Summary"],
         },
-        nav_selector=vm.NavBar(),
+        #    nav_selector=vm.NavBar(),
     ),
 )
 

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

@@ -1,13 +1,15 @@
 from __future__ import annotations
 
 import logging
+import os
 from functools import partial
-from typing import TYPE_CHECKING, List, Literal, Optional, cast
+from pathlib import Path
+from typing import TYPE_CHECKING, List, Literal, Optional, TypedDict, cast
 
 import dash
 import dash_bootstrap_components as dbc
 import dash_daq as daq
-from dash import ClientsideFunction, Input, Output, clientside_callback, get_relative_path, html
+from dash import ClientsideFunction, Input, Output, clientside_callback, get_asset_url, get_relative_path, html
 
 try:
     from pydantic.v1 import Field, validator
@@ -28,6 +30,19 @@
 logger = logging.getLogger(__name__)
 
 
+class PageDivs(TypedDict):
+    """Stores all relevant containers for simplified access when re-arranging containers on page."""
+
+    logo: html.Div
+    dashboard_title: html.Div
+    theme_switch: daq.BooleanSwitch
+    page_title: html.H2
+    nav_bar: html.Div
+    nav_panel: html.Div
+    control_panel: html.Div
+    components: html.Div
+
+
 class Dashboard(VizroBaseModel):
     """Vizro Dashboard to be used within [`Vizro`][vizro._vizro.Vizro.build].
 
@@ -95,12 +110,22 @@ def build(self):
             fluid=True,
         )
 
-    def _make_page_layout(self, page: Page):
+    # LN: Better to split up? So it's easier for people to re-arrange and just get the relevant containers
+    def _get_page_divs(self, page: Page) -> PageDivs:
         # Identical across pages
+        # TODO: Implement proper way of automatically pulling file called logo in assets folder (should support svg, png and it shouldn't matter where it's placed in the assets folder)
+        logo_image = self._infer_image(basename="logo")
+        logo = (
+            html.Div([html.Img(src=get_asset_url(logo_image), className="logo-img")], className="logo", id="logo")
+            # TODO: Implement condition check if image can be found/not found
+            if logo_image
+            else html.Div(id="logo", hidden=True)
+        )
+
         dashboard_title = (
-            html.Div(children=[html.H2(self.title), html.Hr()], className="dashboard_title", id="dashboard_title_outer")
+            html.Div(children=[html.H2(self.title)], id="dashboard-title")
             if self.title
-            else html.Div(hidden=True, id="dashboard_title_outer")
+            else html.Div(id="dashboard-title", hidden=True)
         )
         theme_switch = daq.BooleanSwitch(
             id="theme_selector", on=self.theme == "vizro_dark", persistence=True, persistence_type="session"
@@ -109,26 +134,63 @@ def _make_page_layout(self, page: Page):
         # Shared across pages but slightly differ in content. These could possibly be done by a clientside
         # callback instead.
         page_title = html.H2(children=page.title, id="page_title")
-        navigation: _NavBuildType = cast(Navigation, self.navigation).build(active_page_id=page.id)
-        nav_bar = navigation["nav_bar_outer"]
-        nav_panel = navigation["nav_panel_outer"]
+        nav_content: _NavBuildType = cast(Navigation, self.navigation).build(active_page_id=page.id)
+        nav_bar = nav_content["nav_bar_outer"]
+        nav_panel = nav_content["nav_panel_outer"]
 
         # Different across pages
         page_content: _PageBuildType = page.build()
         control_panel = page_content["control_panel_outer"]
-        component_container = page_content["component_container_outer"]
-
-        # Arrangement
-        header = html.Div(children=[page_title, theme_switch], className="header", id="header_outer")
-        nav_control_elements = [dashboard_title, nav_panel, control_panel]
-        nav_control_panel = (
-            html.Div(nav_control_elements, className="nav_control_panel")
-            if any(not getattr(element, "hidden", False) for element in nav_control_elements)
-            else None
+        components = page_content["component_container_outer"]
+        return {
+            "logo": logo,
+            "dashboard_title": dashboard_title,
+            "theme_switch": theme_switch,
+            "page_title": page_title,
+            "nav_bar": nav_bar,
+            "nav_panel": nav_panel,
+            "control_panel": control_panel,
+            "components": components,
+        }
+
+    # LN: Shall we split up into _arrange_left_side and _arrange_right_side or just one function for arrangement?
+    def _arrange_left_side(self, page_divs: PageDivs):
+        left_header_divs = [page_divs["dashboard_title"]]
+        left_sidebar_divs = [page_divs["nav_bar"]]
+
+        if getattr(page_divs["nav_bar"], "hidden", False) is False:
+            left_sidebar_divs.insert(0, page_divs["logo"])
+        else:
+            left_header_divs.insert(0, page_divs["logo"])
+
+        # LN: Shall we actually just provide the same className and id to the divs to simplify things?
+        left_header = (
+            html.Div(children=left_header_divs, className="left-header", id="left-header")
+            if any(not getattr(div, "hidden", False) for div in left_header_divs)
+            else html.Div(hidden=True, id="left-header")
         )
+        left_main_divs = [left_header, page_divs["nav_panel"], page_divs["control_panel"]]
+        left_sidebar = (
+            html.Div(children=left_sidebar_divs, className="left-sidebar", id="left-sidebar")
+            if any(not getattr(div, "hidden", False) for div in left_sidebar_divs)
+            else html.Div(hidden=True, id="left-sidebar")
+        )
+        left_main = (
+            html.Div(left_main_divs, className="left-main", id="left-main")
+            if any(not getattr(div, "hidden", False) for div in left_main_divs)
+            else html.Div(hidden=True, id="left-main")
+        )
+        return html.Div(children=[left_sidebar, left_main], className="left_side", id="left_side_outer")
+
+    def _arrange_right_side(self, page_divs: PageDivs):
+        right_header = html.Div(children=[page_divs["page_title"], page_divs["theme_switch"]], className="right-header")
+        right_main = page_divs["components"]
+        return html.Div(children=[right_header, right_main], className="right_side", id="right_side_outer")
 
-        left_side = html.Div(children=[nav_bar, nav_control_panel], className="left_side", id="left_side_outer")
-        right_side = html.Div(children=[header, component_container], className="right_side", id="right_side_outer")
+    def _make_page_layout(self, page: Page):
+        page_divs = self._get_page_divs(page=page)
+        left_side = self._arrange_left_side(page_divs=page_divs)
+        right_side = self._arrange_right_side(page_divs=page_divs)
         return html.Div([left_side, right_side], className="page_container", id="page_container_outer")
 
     @staticmethod
@@ -152,3 +214,12 @@ def _make_page_404_layout():
             ],
             className="page_error_container",
         )
+
+    def _infer_image(self, basename: str):
+        valid_extensions = [".apng", ".avif", ".gif", ".jpeg", ".jpg", ".png", ".svg", ".webp"]
+        assets_folder = Path(dash.get_app().config.assets_folder)
+
+        if assets_folder.is_dir():
+            for path in Path(assets_folder).rglob(f"{basename}.*"):
+                if path.suffix in valid_extensions:
+                    return str(path.relative_to(assets_folder))

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

@@ -46,6 +46,6 @@ def build(self, *, active_page_id=None) -> _NavBuildType:
             # e.g. nav_selector is Accordion and nav_selector.build returns single html.Div with id="nav_panel_outer".
             # This will make it match the case e.g. nav_selector is NavBar and nav_selector.build returns html.Div
             # containing children with id="nav_bar_outer" and id="nav_panel_outer"
-            nav_selector = html.Div([html.Div(className="hidden", id="nav_bar_outer"), nav_selector])
+            nav_selector = html.Div([html.Div(hidden=True, id="nav_bar_outer"), nav_selector])
 
         return nav_selector

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

@@ -42,8 +42,7 @@
   overflow-anchor: none;
   background-color: inherit;
   letter-spacing: -0.014px;
-  padding: 16px 8px;
-  height: 56px;
+  padding: var(--spacing-02);
 }
 
 .accordion-button:not(.collapsed) {
@@ -79,7 +78,6 @@
   display: flex;
   flex-direction: column;
   overflow-x: hidden;
-  margin-top: -10px;
 }
 
 .accordion-item-header {

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

@@ -5,7 +5,7 @@
   width: 100vw;
 }
 
-.nav_control_panel {
+.left-main {
   align-items: flex-start;
   background: var(--surfaces-bg-02);
   display: flex;
@@ -14,7 +14,7 @@
   padding: 40px 32px 0 32px;
   width: 352px;
   overflow: auto;
-  gap: var(--spacing-08);
+  gap: var(--spacing-06);
 }
 
 .left_side {
@@ -31,14 +31,25 @@
   width: 100%;
 }
 
-.header {
+.right-header {
   align-items: baseline;
   display: flex;
   flex-direction: row;
   height: 32px;
   justify-content: space-between;
 }
 
+.left-header {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  gap: 8px;
+}
+
+.left-header:not(:empty) {
+  border-bottom: 1px solid var(--border-subtle-alpha-01);
+}
+
 .component_container {
   display: flex;
   height: 100%;
@@ -58,6 +69,7 @@
 }
 
 .nav_panel:not(:empty) {
+  padding-bottom: 8px;
   border-bottom: 1px solid var(--border-subtle-alpha-01);
 }
 
@@ -108,17 +120,12 @@
 .nav-bar {
   display: inline-flex;
   flex-direction: column;
-  width: 64px;
-  padding-top: 26px;
   align-items: center;
-  background-color: var(--surfaces-bg-02);
-  border-right: 1px solid var(--border-subtle-alpha-01);
+  gap: 40px;
 }
 
 .icon-button {
-  background-color: var(--surfaces-bg-02);
   width: 100%;
-  height: 64px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -156,3 +163,23 @@ div.dashboard_container .custom-tooltip {
   box-shadow: var(--box-shadow-elevation-tooltip-hover);
   white-space: pre-wrap;
 }
+
+.left-sidebar {
+  display: flex;
+  flex-direction: column;
+  width: 64px;
+  padding-top: 40px;
+  background-color: var(--surfaces-bg-02);
+  border-right: 1px solid var(--border-subtle-alpha-01);
+  gap: 40px;
+}
+
+.logo {
+  display: flex;
+  justify-content: center;
+}
+
+.logo-img {
+  width: 32px;
+  height: 32px;
+}

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

@@ -86,7 +86,7 @@ def test_default_nav_selector(self, pages, request):
         built_navigation = navigation.build(active_page_id="Page 1")
         assert_component_equal(
             built_navigation["nav_bar_outer"],
-            html.Div(className="hidden", id="nav_bar_outer"),
+            html.Div(hidden=True, id="nav_bar_outer"),
             keys_to_strip={"children"},
         )
         assert_component_equal(

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

@@ -157,4 +157,4 @@ def test_page_build_left_side_removed(standard_px_chart):
     page = vm.Page(title="Single Page", components=[vm.Graph(id="scatter_chart", figure=standard_px_chart)])
     dashboard = vm.Dashboard(pages=[page])
     dashboard.pre_build()
-    assert "className='nav_control_panel'" not in str(page.build())
+    assert "className='left-main'" not in str(page.build())