Enable automatic logo insertion (#248)

vizro-core/changelog.d/20240104_141852_huong_li_nguyen_enable_logo.md

@@ -0,0 +1,47 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Highlights ✨
+
+- A bullet item for the Highlights ✨ category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Removed
+
+- A bullet item for the Removed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+
+### Added
+
+- Enable automatic logo insertion into `page-header` container ([#248](https://github.com/mckinsey/vizro/pull/248))
+
+<!--
+### Changed
+
+- A bullet item for the Changed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Fixed
+
+- A bullet item for the Fixed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Security
+
+- A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->

vizro-core/examples/assets/css/images.css → vizro-core/examples/assets/css/custom.css

@@ -4,3 +4,8 @@ img[src*="#my-image"] {
   float: left;
   margin: 10px 25px;
 }
+
+#logo {
+  margin-left: -8px;
+  height: 40px;
+}

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

@@ -8,7 +8,7 @@
 import dash
 import dash_bootstrap_components as dbc
 import dash_mantine_components as dmc
-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
@@ -49,7 +49,8 @@ def _all_hidden(components: List[Component]):
         "nav-bar": html.Div,
         "nav-panel": html.Div,
         "control-panel": html.Div,
-        "components": html.Div,
+        "page-components": html.Div,
+        "logo": html.Div,
     },
 )
 
@@ -133,7 +134,6 @@ def _get_page_divs(self, page: Page) -> _PageDivsType:
         dashboard_title = (
             html.H2(self.title, id="dashboard-title") if self.title else html.H2(hidden=True, id="dashboard-title")
         )
-
         settings = html.Div(
             dmc.Switch(
                 id="theme_selector",
@@ -144,6 +144,9 @@ def _get_page_divs(self, page: Page) -> _PageDivsType:
             ),
             id="settings",
         )
+        logo_img = self._infer_image(filename="logo")
+        path_to_logo = get_asset_url(logo_img) if logo_img else None
+        logo = html.Img(src=path_to_logo, id="logo", hidden=not path_to_logo)
 
         # Shared across pages but slightly differ in content. These could possibly be done by a clientside
         # callback instead.
@@ -155,11 +158,12 @@ def _get_page_divs(self, page: Page) -> _PageDivsType:
         # Different across pages
         page_content: _PageBuildType = page.build()
         control_panel = page_content["control-panel"]
-        components = page_content["components"]
-        return html.Div([dashboard_title, settings, page_title, nav_bar, nav_panel, control_panel, components])
+        components = page_content["page-components"]
+        return html.Div([dashboard_title, settings, page_title, nav_bar, nav_panel, control_panel, components, logo])
 
     def _arrange_page_divs(self, page_divs: _PageDivsType):
-        page_header_divs = [page_divs["dashboard-title"]]
+        logo_title = [page_divs["logo"], page_divs["dashboard-title"]]
+        page_header_divs = [html.Div(logo_title, id="logo-and-title", hidden=_all_hidden(logo_title))]
         left_sidebar_divs = [page_divs["nav-bar"]]
         left_main_divs = [
             page_divs["nav-panel"],
@@ -168,17 +172,17 @@ def _arrange_page_divs(self, page_divs: _PageDivsType):
         right_header_divs = [page_divs["page-title"]]
 
         # Apply different container position logic based on condition
-        if self.title:
-            page_header_divs.append(page_divs["settings"])
-        else:
+        if _all_hidden(page_header_divs):
             right_header_divs.append(page_divs["settings"])
+        else:
+            page_header_divs.append(page_divs["settings"])
 
         left_sidebar = html.Div(left_sidebar_divs, id="left-sidebar", hidden=_all_hidden(left_sidebar_divs))
         left_main = html.Div(left_main_divs, id="left-main", hidden=_all_hidden(left_main_divs))
         left_side = html.Div([left_sidebar, left_main], id="left-side")
 
         right_header = html.Div(right_header_divs, id="right-header")
-        right_main = page_divs["components"]
+        right_main = page_divs["page-components"]
         right_side = html.Div([right_header, right_main], id="right-side")
 
         page_header = html.Div(page_header_divs, id="page-header", hidden=_all_hidden(page_header_divs))
@@ -211,7 +215,8 @@ def _make_page_404_layout():
             className="page_error_container",
         )
 
-    def _infer_image(self, filename: str):
+    @staticmethod
+    def _infer_image(filename: 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():

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

@@ -22,7 +22,7 @@
 # (e.g. html.Div) as well as TypedDict, but that's not possible, and Dash does not have typing support anyway. When
 # this type is used, the object is actually still a dash.development.base_component.Component, but this makes it easier
 # to see what contract the component fulfills by making the expected keys explicit.
-_PageBuildType = TypedDict("_PageBuildType", {"control-panel": html.Div, "components": html.Div})
+_PageBuildType = TypedDict("_PageBuildType", {"control-panel": html.Div, "page-components": html.Div})
 
 
 class Page(VizroBaseModel):
@@ -186,6 +186,6 @@ def _create_component_container(self, components_content):
                 ),
                 dcc.Store(id=f"{ON_PAGE_LOAD_ACTION_PREFIX}_trigger_{self.id}"),
             ],
-            id="components",
+            id="page-components",
         )
         return component_container

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

@@ -46,16 +46,17 @@
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  min-height: 64px;
+  height: 64px;
   padding: 0 32px;
   width: 100%;
+  min-height: 0;
 }
 
 #page-header:not(:empty) {
   border-bottom: 1px solid var(--border-subtle-alpha-01);
 }
 
-#components {
+#page-components {
   display: flex;
   height: 100%;
   overflow: auto;
@@ -182,10 +183,23 @@ div.dashboard_container .custom-tooltip {
 
 #page-main {
   display: flex;
+  flex: 1 1 0;
   flex-direction: row;
   height: calc(100% - 64px);
 }
 
 #dashboard-title {
   margin: 0;
 }
+
+#logo {
+  height: 100%;
+}
+
+#logo-and-title {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+  height: 100%;
+}

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

@@ -24,7 +24,7 @@
   border-color: var(--surfaces-bg-card);
 }
 
-#components::-webkit-scrollbar-thumb {
+#page-components::-webkit-scrollbar-thumb {
   border-color: var(--main-container-bg-color);
 }