From 68fe28f801f8d7dea2642e400d6d92c0cac69af2 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Fri, 22 Dec 2023 11:37:37 +0100 Subject: [PATCH 01/40] Move dashboard title up --- vizro-core/src/vizro/models/_dashboard.py | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/vizro-core/src/vizro/models/_dashboard.py b/vizro-core/src/vizro/models/_dashboard.py index a5c3736ef..9b4c4b73b 100644 --- a/vizro-core/src/vizro/models/_dashboard.py +++ b/vizro-core/src/vizro/models/_dashboard.py @@ -155,10 +155,9 @@ def _get_page_divs(self, page: Page) -> _PageDivsType: return html.Div([dashboard_title, settings, page_title, nav_bar, nav_panel, control_panel, components]) def _arrange_page_divs(self, page_divs: _PageDivsType): - left_header_divs = [page_divs["dashboard-title"]] + page_header_divs = [page_divs["dashboard-title"]] left_sidebar_divs = [page_divs["nav-bar"]] left_main_divs = [ - html.Div(left_header_divs, id="left-header", hidden=_all_hidden(left_header_divs)), page_divs["nav-panel"], page_divs["control-panel"], ] @@ -171,7 +170,9 @@ def _arrange_page_divs(self, page_divs: _PageDivsType): right_main = page_divs["components"] right_side = html.Div([right_header, right_main], id="right-side") - return html.Div([left_side, right_side], id="page-container") + page_header = html.Div(page_header_divs, id="page-header", hidden=_all_hidden(page_header_divs)) + page_main = html.Div([left_side, right_side], id="page-main") + return html.Div([page_header, page_main], id="page-container") def _make_page_layout(self, page: Page): page_divs = self._get_page_divs(page=page) From 8db733407d82417bde6fdfe29e32088a7a8ada37 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Fri, 22 Dec 2023 12:01:25 +0100 Subject: [PATCH 02/40] Update CSS --- vizro-core/src/vizro/static/css/layout.css | 31 ++++++++++++++----- .../src/vizro/static/css/scroll_bar.css | 2 +- 2 files changed, 24 insertions(+), 9 deletions(-) diff --git a/vizro-core/src/vizro/static/css/layout.css b/vizro-core/src/vizro/static/css/layout.css index bb1d577ab..d6c7fedc5 100644 --- a/vizro-core/src/vizro/static/css/layout.css +++ b/vizro-core/src/vizro/static/css/layout.css @@ -3,6 +3,7 @@ height: 100vh; overflow: hidden; width: 100vw; + flex-direction: column; } #left-main { @@ -11,8 +12,7 @@ flex: 0 0 auto; flex-direction: column; gap: var(--spacing-08); - overflow: auto; - padding: 40px 32px 0 32px; + padding: 32px 32px 0 32px; width: 352px; } @@ -27,8 +27,9 @@ display: flex; flex-direction: column; gap: var(--spacing-06); - padding: 40px 32px 32px; + padding: 32px; width: 100%; + overflow: auto; } #right-header { @@ -39,21 +40,25 @@ justify-content: space-between; } -#left-header { +#page-header { display: flex; flex-direction: row; - gap: 8px; width: 100%; + background-color: var(--surfaces-bg-02); + padding-left: 20px; + padding-right: 32px; + height: 64px; + justify-content: space-between; + align-items: center; } -#left-header:not(:empty) { +#page-header:not(:empty) { border-bottom: 1px solid var(--border-subtle-alpha-01); } #components { display: flex; height: 100%; - overflow: auto; width: 100%; } @@ -120,7 +125,6 @@ align-items: center; display: inline-flex; flex-direction: column; - padding-top: 26px; width: 64px; } @@ -170,8 +174,19 @@ div.dashboard_container .custom-tooltip { flex-direction: column; gap: 40px; width: 64px; + padding-top: 16px; } #page-container div[hidden] { display: none; } + +#page-main { + display: flex; + flex-direction: row; + height: calc(100vh - 64px); +} + +#dashboard-title { + margin: 0; +} diff --git a/vizro-core/src/vizro/static/css/scroll_bar.css b/vizro-core/src/vizro/static/css/scroll_bar.css index 8f504de1e..c0195fde5 100644 --- a/vizro-core/src/vizro/static/css/scroll_bar.css +++ b/vizro-core/src/vizro/static/css/scroll_bar.css @@ -24,7 +24,7 @@ border-color: var(--surfaces-bg-card); } -#components::-webkit-scrollbar-thumb { +#right-side::-webkit-scrollbar-thumb { border-color: var(--main-container-bg-color); } From ae1a689d52ec5988bd1f6d9885f404c630aca92c Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Fri, 22 Dec 2023 12:24:25 +0100 Subject: [PATCH 03/40] Move settings container conditionally --- vizro-core/src/vizro/models/_dashboard.py | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/vizro-core/src/vizro/models/_dashboard.py b/vizro-core/src/vizro/models/_dashboard.py index 9b4c4b73b..9aa1a1830 100644 --- a/vizro-core/src/vizro/models/_dashboard.py +++ b/vizro-core/src/vizro/models/_dashboard.py @@ -161,12 +161,16 @@ def _arrange_page_divs(self, page_divs: _PageDivsType): page_divs["nav-panel"], page_divs["control-panel"], ] + right_header_divs = [page_divs["page-title"]] + + # Apply different container position logic based on condition + page_header_divs.append(page_divs["settings"]) if self.title else right_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([page_divs["page-title"], page_divs["settings"]], id="right-header") + right_header = html.Div(right_header_divs, id="right-header") right_main = page_divs["components"] right_side = html.Div([right_header, right_main], id="right-side") From 93e6e564bf7da8a9413b767d98e62e6f44787a65 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Fri, 22 Dec 2023 12:24:29 +0100 Subject: [PATCH 04/40] Fix CSS --- vizro-core/src/vizro/static/css/layout.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/vizro-core/src/vizro/static/css/layout.css b/vizro-core/src/vizro/static/css/layout.css index d6c7fedc5..bf2c286e0 100644 --- a/vizro-core/src/vizro/static/css/layout.css +++ b/vizro-core/src/vizro/static/css/layout.css @@ -47,7 +47,7 @@ background-color: var(--surfaces-bg-02); padding-left: 20px; padding-right: 32px; - height: 64px; + min-height: 64px; justify-content: space-between; align-items: center; } @@ -184,7 +184,7 @@ div.dashboard_container .custom-tooltip { #page-main { display: flex; flex-direction: row; - height: calc(100vh - 64px); + height: 100%; } #dashboard-title { From d52db40349702bdb6c5823879f775cdb5c2f7af9 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Fri, 22 Dec 2023 12:24:54 +0100 Subject: [PATCH 05/40] Add dashboar title --- vizro-core/examples/default/app.py | 1 + 1 file changed, 1 insertion(+) diff --git a/vizro-core/examples/default/app.py b/vizro-core/examples/default/app.py index ca1df8a2e..341483139 100644 --- a/vizro-core/examples/default/app.py +++ b/vizro-core/examples/default/app.py @@ -550,6 +550,7 @@ def create_home_page(): dashboard = vm.Dashboard( + title="Vizro Demo", pages=[ create_home_page(), create_variable_analysis(), From 811bc1fec39a01a0363132ef83aec5eb5af95240 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Fri, 22 Dec 2023 13:33:38 +0100 Subject: [PATCH 06/40] Add POC for logo --- vizro-core/examples/assets/logo.svg | 3 +++ vizro-core/src/vizro/models/_dashboard.py | 20 ++++++++++++--- vizro-core/src/vizro/static/css/layout.css | 29 ++++++++++++++++------ 3 files changed, 40 insertions(+), 12 deletions(-) create mode 100644 vizro-core/examples/assets/logo.svg diff --git a/vizro-core/examples/assets/logo.svg b/vizro-core/examples/assets/logo.svg new file mode 100644 index 000000000..0904b87de --- /dev/null +++ b/vizro-core/examples/assets/logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/vizro-core/src/vizro/models/_dashboard.py b/vizro-core/src/vizro/models/_dashboard.py index 9aa1a1830..1de1e5d62 100644 --- a/vizro-core/src/vizro/models/_dashboard.py +++ b/vizro-core/src/vizro/models/_dashboard.py @@ -8,7 +8,7 @@ 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 @@ -50,6 +50,7 @@ def _all_hidden(components: List[Component]): "nav-panel": html.Div, "control-panel": html.Div, "components": html.Div, + "logo": html.Img, }, ) @@ -130,6 +131,12 @@ def build(self): def _get_page_divs(self, page: Page) -> _PageDivsType: # Identical across pages + logo_img = self._infer_image(filename="logo") + logo = ( + html.Img(src=get_asset_url(logo_img), id="logo") + if logo_img + else html.Img(id="logo", hidden=True) + ) dashboard_title = ( html.H2(self.title, id="dashboard-title") if self.title else html.H2(hidden=True, id="dashboard-title") ) @@ -141,6 +148,7 @@ def _get_page_divs(self, page: Page) -> _PageDivsType: id="settings", ) + # Shared across pages but slightly differ in content. These could possibly be done by a clientside # callback instead. page_title = html.H2(page.title, id="page-title") @@ -152,10 +160,12 @@ def _get_page_divs(self, page: Page) -> _PageDivsType: 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]) + 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"]] + logo_title_div = html.Div(logo_title, id="logo-and-title", hidden=_all_hidden(logo_title)) + page_header_divs = [logo_title_div] left_sidebar_divs = [page_divs["nav-bar"]] left_main_divs = [ page_divs["nav-panel"], @@ -164,7 +174,9 @@ def _arrange_page_divs(self, page_divs: _PageDivsType): right_header_divs = [page_divs["page-title"]] # Apply different container position logic based on condition - page_header_divs.append(page_divs["settings"]) if self.title else right_header_divs.append(page_divs["settings"]) + right_header_divs.append(page_divs["settings"]) if _all_hidden(logo_title) 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)) diff --git a/vizro-core/src/vizro/static/css/layout.css b/vizro-core/src/vizro/static/css/layout.css index bf2c286e0..d79d33b92 100644 --- a/vizro-core/src/vizro/static/css/layout.css +++ b/vizro-core/src/vizro/static/css/layout.css @@ -1,9 +1,9 @@ #page-container { display: flex; + flex-direction: column; height: 100vh; overflow: hidden; width: 100vw; - flex-direction: column; } #left-main { @@ -27,9 +27,9 @@ display: flex; flex-direction: column; gap: var(--spacing-06); + overflow: auto; padding: 32px; width: 100%; - overflow: auto; } #right-header { @@ -41,15 +41,15 @@ } #page-header { + align-items: center; + background-color: var(--surfaces-bg-02); display: flex; flex-direction: row; - width: 100%; - background-color: var(--surfaces-bg-02); + justify-content: space-between; + min-height: 64px; padding-left: 20px; padding-right: 32px; - min-height: 64px; - justify-content: space-between; - align-items: center; + width: 100%; } #page-header:not(:empty) { @@ -173,8 +173,8 @@ div.dashboard_container .custom-tooltip { display: flex; flex-direction: column; gap: 40px; - width: 64px; padding-top: 16px; + width: 64px; } #page-container div[hidden] { @@ -189,4 +189,17 @@ div.dashboard_container .custom-tooltip { #dashboard-title { margin: 0; + width: 100%; +} + +#logo { + height: 100%; +} + +#logo-and-title { + align-items: center; + display: flex; + flex-direction: row; + gap: 12px; + height: 32px; } From 0ced94d8b49cce08db9d223926ee3145c1bf0495 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Fri, 22 Dec 2023 13:45:09 +0100 Subject: [PATCH 07/40] Revert "Add POC for logo" This reverts commit 811bc1fec39a01a0363132ef83aec5eb5af95240. --- vizro-core/examples/assets/logo.svg | 3 --- vizro-core/src/vizro/models/_dashboard.py | 20 +++------------ vizro-core/src/vizro/static/css/layout.css | 29 ++++++---------------- 3 files changed, 12 insertions(+), 40 deletions(-) delete mode 100644 vizro-core/examples/assets/logo.svg diff --git a/vizro-core/examples/assets/logo.svg b/vizro-core/examples/assets/logo.svg deleted file mode 100644 index 0904b87de..000000000 --- a/vizro-core/examples/assets/logo.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/vizro-core/src/vizro/models/_dashboard.py b/vizro-core/src/vizro/models/_dashboard.py index 1de1e5d62..9aa1a1830 100644 --- a/vizro-core/src/vizro/models/_dashboard.py +++ b/vizro-core/src/vizro/models/_dashboard.py @@ -8,7 +8,7 @@ import dash import dash_bootstrap_components as dbc import dash_daq as daq -from dash import ClientsideFunction, Input, Output, clientside_callback, get_asset_url, get_relative_path, html +from dash import ClientsideFunction, Input, Output, clientside_callback, get_relative_path, html try: from pydantic.v1 import Field, validator @@ -50,7 +50,6 @@ def _all_hidden(components: List[Component]): "nav-panel": html.Div, "control-panel": html.Div, "components": html.Div, - "logo": html.Img, }, ) @@ -131,12 +130,6 @@ def build(self): def _get_page_divs(self, page: Page) -> _PageDivsType: # Identical across pages - logo_img = self._infer_image(filename="logo") - logo = ( - html.Img(src=get_asset_url(logo_img), id="logo") - if logo_img - else html.Img(id="logo", hidden=True) - ) dashboard_title = ( html.H2(self.title, id="dashboard-title") if self.title else html.H2(hidden=True, id="dashboard-title") ) @@ -148,7 +141,6 @@ def _get_page_divs(self, page: Page) -> _PageDivsType: id="settings", ) - # Shared across pages but slightly differ in content. These could possibly be done by a clientside # callback instead. page_title = html.H2(page.title, id="page-title") @@ -160,12 +152,10 @@ def _get_page_divs(self, page: Page) -> _PageDivsType: 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, logo]) + return html.Div([dashboard_title, settings, page_title, nav_bar, nav_panel, control_panel, components]) def _arrange_page_divs(self, page_divs: _PageDivsType): - logo_title = [page_divs["logo"], page_divs["dashboard-title"]] - logo_title_div = html.Div(logo_title, id="logo-and-title", hidden=_all_hidden(logo_title)) - page_header_divs = [logo_title_div] + page_header_divs = [page_divs["dashboard-title"]] left_sidebar_divs = [page_divs["nav-bar"]] left_main_divs = [ page_divs["nav-panel"], @@ -174,9 +164,7 @@ def _arrange_page_divs(self, page_divs: _PageDivsType): right_header_divs = [page_divs["page-title"]] # Apply different container position logic based on condition - right_header_divs.append(page_divs["settings"]) if _all_hidden(logo_title) else page_header_divs.append( - page_divs["settings"] - ) + page_header_divs.append(page_divs["settings"]) if self.title else right_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)) diff --git a/vizro-core/src/vizro/static/css/layout.css b/vizro-core/src/vizro/static/css/layout.css index d79d33b92..bf2c286e0 100644 --- a/vizro-core/src/vizro/static/css/layout.css +++ b/vizro-core/src/vizro/static/css/layout.css @@ -1,9 +1,9 @@ #page-container { display: flex; - flex-direction: column; height: 100vh; overflow: hidden; width: 100vw; + flex-direction: column; } #left-main { @@ -27,9 +27,9 @@ display: flex; flex-direction: column; gap: var(--spacing-06); - overflow: auto; padding: 32px; width: 100%; + overflow: auto; } #right-header { @@ -41,15 +41,15 @@ } #page-header { - align-items: center; - background-color: var(--surfaces-bg-02); display: flex; flex-direction: row; - justify-content: space-between; - min-height: 64px; + width: 100%; + background-color: var(--surfaces-bg-02); padding-left: 20px; padding-right: 32px; - width: 100%; + min-height: 64px; + justify-content: space-between; + align-items: center; } #page-header:not(:empty) { @@ -173,8 +173,8 @@ div.dashboard_container .custom-tooltip { display: flex; flex-direction: column; gap: 40px; - padding-top: 16px; width: 64px; + padding-top: 16px; } #page-container div[hidden] { @@ -189,17 +189,4 @@ div.dashboard_container .custom-tooltip { #dashboard-title { margin: 0; - width: 100%; -} - -#logo { - height: 100%; -} - -#logo-and-title { - align-items: center; - display: flex; - flex-direction: row; - gap: 12px; - height: 32px; } From 3926b9b258caccb337faa8011749d2c94cdc5694 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Fri, 22 Dec 2023 12:45:54 +0000 Subject: [PATCH 08/40] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- vizro-core/src/vizro/models/_dashboard.py | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/vizro-core/src/vizro/models/_dashboard.py b/vizro-core/src/vizro/models/_dashboard.py index 9aa1a1830..7c8762dc8 100644 --- a/vizro-core/src/vizro/models/_dashboard.py +++ b/vizro-core/src/vizro/models/_dashboard.py @@ -164,7 +164,9 @@ def _arrange_page_divs(self, page_divs: _PageDivsType): right_header_divs = [page_divs["page-title"]] # Apply different container position logic based on condition - page_header_divs.append(page_divs["settings"]) if self.title else right_header_divs.append(page_divs["settings"]) + page_header_divs.append(page_divs["settings"]) if self.title else right_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)) From 7057eff1a33def2b9dee77269eeec371239e0c08 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Fri, 22 Dec 2023 11:37:37 +0100 Subject: [PATCH 09/40] Move dashboard title up --- vizro-core/src/vizro/models/_dashboard.py | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/vizro-core/src/vizro/models/_dashboard.py b/vizro-core/src/vizro/models/_dashboard.py index a5c3736ef..9b4c4b73b 100644 --- a/vizro-core/src/vizro/models/_dashboard.py +++ b/vizro-core/src/vizro/models/_dashboard.py @@ -155,10 +155,9 @@ def _get_page_divs(self, page: Page) -> _PageDivsType: return html.Div([dashboard_title, settings, page_title, nav_bar, nav_panel, control_panel, components]) def _arrange_page_divs(self, page_divs: _PageDivsType): - left_header_divs = [page_divs["dashboard-title"]] + page_header_divs = [page_divs["dashboard-title"]] left_sidebar_divs = [page_divs["nav-bar"]] left_main_divs = [ - html.Div(left_header_divs, id="left-header", hidden=_all_hidden(left_header_divs)), page_divs["nav-panel"], page_divs["control-panel"], ] @@ -171,7 +170,9 @@ def _arrange_page_divs(self, page_divs: _PageDivsType): right_main = page_divs["components"] right_side = html.Div([right_header, right_main], id="right-side") - return html.Div([left_side, right_side], id="page-container") + page_header = html.Div(page_header_divs, id="page-header", hidden=_all_hidden(page_header_divs)) + page_main = html.Div([left_side, right_side], id="page-main") + return html.Div([page_header, page_main], id="page-container") def _make_page_layout(self, page: Page): page_divs = self._get_page_divs(page=page) From 0e3881f8be7b11efdc9a45f086bc266b6add7b33 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Fri, 22 Dec 2023 12:01:25 +0100 Subject: [PATCH 10/40] Update CSS --- vizro-core/src/vizro/static/css/layout.css | 31 ++++++++++++++----- .../src/vizro/static/css/scroll_bar.css | 2 +- 2 files changed, 24 insertions(+), 9 deletions(-) diff --git a/vizro-core/src/vizro/static/css/layout.css b/vizro-core/src/vizro/static/css/layout.css index bb1d577ab..d6c7fedc5 100644 --- a/vizro-core/src/vizro/static/css/layout.css +++ b/vizro-core/src/vizro/static/css/layout.css @@ -3,6 +3,7 @@ height: 100vh; overflow: hidden; width: 100vw; + flex-direction: column; } #left-main { @@ -11,8 +12,7 @@ flex: 0 0 auto; flex-direction: column; gap: var(--spacing-08); - overflow: auto; - padding: 40px 32px 0 32px; + padding: 32px 32px 0 32px; width: 352px; } @@ -27,8 +27,9 @@ display: flex; flex-direction: column; gap: var(--spacing-06); - padding: 40px 32px 32px; + padding: 32px; width: 100%; + overflow: auto; } #right-header { @@ -39,21 +40,25 @@ justify-content: space-between; } -#left-header { +#page-header { display: flex; flex-direction: row; - gap: 8px; width: 100%; + background-color: var(--surfaces-bg-02); + padding-left: 20px; + padding-right: 32px; + height: 64px; + justify-content: space-between; + align-items: center; } -#left-header:not(:empty) { +#page-header:not(:empty) { border-bottom: 1px solid var(--border-subtle-alpha-01); } #components { display: flex; height: 100%; - overflow: auto; width: 100%; } @@ -120,7 +125,6 @@ align-items: center; display: inline-flex; flex-direction: column; - padding-top: 26px; width: 64px; } @@ -170,8 +174,19 @@ div.dashboard_container .custom-tooltip { flex-direction: column; gap: 40px; width: 64px; + padding-top: 16px; } #page-container div[hidden] { display: none; } + +#page-main { + display: flex; + flex-direction: row; + height: calc(100vh - 64px); +} + +#dashboard-title { + margin: 0; +} diff --git a/vizro-core/src/vizro/static/css/scroll_bar.css b/vizro-core/src/vizro/static/css/scroll_bar.css index 8f504de1e..c0195fde5 100644 --- a/vizro-core/src/vizro/static/css/scroll_bar.css +++ b/vizro-core/src/vizro/static/css/scroll_bar.css @@ -24,7 +24,7 @@ border-color: var(--surfaces-bg-card); } -#components::-webkit-scrollbar-thumb { +#right-side::-webkit-scrollbar-thumb { border-color: var(--main-container-bg-color); } From 76a07c7cd514d7db332ff8c72bacd261afb626d9 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Fri, 22 Dec 2023 12:24:25 +0100 Subject: [PATCH 11/40] Move settings container conditionally --- vizro-core/src/vizro/models/_dashboard.py | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/vizro-core/src/vizro/models/_dashboard.py b/vizro-core/src/vizro/models/_dashboard.py index 9b4c4b73b..9aa1a1830 100644 --- a/vizro-core/src/vizro/models/_dashboard.py +++ b/vizro-core/src/vizro/models/_dashboard.py @@ -161,12 +161,16 @@ def _arrange_page_divs(self, page_divs: _PageDivsType): page_divs["nav-panel"], page_divs["control-panel"], ] + right_header_divs = [page_divs["page-title"]] + + # Apply different container position logic based on condition + page_header_divs.append(page_divs["settings"]) if self.title else right_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([page_divs["page-title"], page_divs["settings"]], id="right-header") + right_header = html.Div(right_header_divs, id="right-header") right_main = page_divs["components"] right_side = html.Div([right_header, right_main], id="right-side") From 89cee6deec4917bb57428424b46e4b63d8247d34 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Fri, 22 Dec 2023 12:24:29 +0100 Subject: [PATCH 12/40] Fix CSS --- vizro-core/src/vizro/static/css/layout.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/vizro-core/src/vizro/static/css/layout.css b/vizro-core/src/vizro/static/css/layout.css index d6c7fedc5..bf2c286e0 100644 --- a/vizro-core/src/vizro/static/css/layout.css +++ b/vizro-core/src/vizro/static/css/layout.css @@ -47,7 +47,7 @@ background-color: var(--surfaces-bg-02); padding-left: 20px; padding-right: 32px; - height: 64px; + min-height: 64px; justify-content: space-between; align-items: center; } @@ -184,7 +184,7 @@ div.dashboard_container .custom-tooltip { #page-main { display: flex; flex-direction: row; - height: calc(100vh - 64px); + height: 100%; } #dashboard-title { From 6791f0f12d3b85904b639c608c146cdecffd9e5d Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Fri, 22 Dec 2023 12:24:54 +0100 Subject: [PATCH 13/40] Add dashboar title --- vizro-core/examples/default/app.py | 1 + 1 file changed, 1 insertion(+) diff --git a/vizro-core/examples/default/app.py b/vizro-core/examples/default/app.py index ca1df8a2e..341483139 100644 --- a/vizro-core/examples/default/app.py +++ b/vizro-core/examples/default/app.py @@ -550,6 +550,7 @@ def create_home_page(): dashboard = vm.Dashboard( + title="Vizro Demo", pages=[ create_home_page(), create_variable_analysis(), From ac696cf4bad24e9c77324bd7fbaca44ad277c3c5 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Fri, 22 Dec 2023 13:33:38 +0100 Subject: [PATCH 14/40] Add POC for logo --- vizro-core/examples/assets/logo.svg | 3 +++ vizro-core/src/vizro/models/_dashboard.py | 20 ++++++++++++--- vizro-core/src/vizro/static/css/layout.css | 29 ++++++++++++++++------ 3 files changed, 40 insertions(+), 12 deletions(-) create mode 100644 vizro-core/examples/assets/logo.svg diff --git a/vizro-core/examples/assets/logo.svg b/vizro-core/examples/assets/logo.svg new file mode 100644 index 000000000..0904b87de --- /dev/null +++ b/vizro-core/examples/assets/logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/vizro-core/src/vizro/models/_dashboard.py b/vizro-core/src/vizro/models/_dashboard.py index 9aa1a1830..1de1e5d62 100644 --- a/vizro-core/src/vizro/models/_dashboard.py +++ b/vizro-core/src/vizro/models/_dashboard.py @@ -8,7 +8,7 @@ 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 @@ -50,6 +50,7 @@ def _all_hidden(components: List[Component]): "nav-panel": html.Div, "control-panel": html.Div, "components": html.Div, + "logo": html.Img, }, ) @@ -130,6 +131,12 @@ def build(self): def _get_page_divs(self, page: Page) -> _PageDivsType: # Identical across pages + logo_img = self._infer_image(filename="logo") + logo = ( + html.Img(src=get_asset_url(logo_img), id="logo") + if logo_img + else html.Img(id="logo", hidden=True) + ) dashboard_title = ( html.H2(self.title, id="dashboard-title") if self.title else html.H2(hidden=True, id="dashboard-title") ) @@ -141,6 +148,7 @@ def _get_page_divs(self, page: Page) -> _PageDivsType: id="settings", ) + # Shared across pages but slightly differ in content. These could possibly be done by a clientside # callback instead. page_title = html.H2(page.title, id="page-title") @@ -152,10 +160,12 @@ def _get_page_divs(self, page: Page) -> _PageDivsType: 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]) + 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"]] + logo_title_div = html.Div(logo_title, id="logo-and-title", hidden=_all_hidden(logo_title)) + page_header_divs = [logo_title_div] left_sidebar_divs = [page_divs["nav-bar"]] left_main_divs = [ page_divs["nav-panel"], @@ -164,7 +174,9 @@ def _arrange_page_divs(self, page_divs: _PageDivsType): right_header_divs = [page_divs["page-title"]] # Apply different container position logic based on condition - page_header_divs.append(page_divs["settings"]) if self.title else right_header_divs.append(page_divs["settings"]) + right_header_divs.append(page_divs["settings"]) if _all_hidden(logo_title) 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)) diff --git a/vizro-core/src/vizro/static/css/layout.css b/vizro-core/src/vizro/static/css/layout.css index bf2c286e0..d79d33b92 100644 --- a/vizro-core/src/vizro/static/css/layout.css +++ b/vizro-core/src/vizro/static/css/layout.css @@ -1,9 +1,9 @@ #page-container { display: flex; + flex-direction: column; height: 100vh; overflow: hidden; width: 100vw; - flex-direction: column; } #left-main { @@ -27,9 +27,9 @@ display: flex; flex-direction: column; gap: var(--spacing-06); + overflow: auto; padding: 32px; width: 100%; - overflow: auto; } #right-header { @@ -41,15 +41,15 @@ } #page-header { + align-items: center; + background-color: var(--surfaces-bg-02); display: flex; flex-direction: row; - width: 100%; - background-color: var(--surfaces-bg-02); + justify-content: space-between; + min-height: 64px; padding-left: 20px; padding-right: 32px; - min-height: 64px; - justify-content: space-between; - align-items: center; + width: 100%; } #page-header:not(:empty) { @@ -173,8 +173,8 @@ div.dashboard_container .custom-tooltip { display: flex; flex-direction: column; gap: 40px; - width: 64px; padding-top: 16px; + width: 64px; } #page-container div[hidden] { @@ -189,4 +189,17 @@ div.dashboard_container .custom-tooltip { #dashboard-title { margin: 0; + width: 100%; +} + +#logo { + height: 100%; +} + +#logo-and-title { + align-items: center; + display: flex; + flex-direction: row; + gap: 12px; + height: 32px; } From 6611754ccfd77f704216c8ab74cc40f8c7b0e989 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Fri, 22 Dec 2023 13:45:09 +0100 Subject: [PATCH 15/40] Revert "Add POC for logo" This reverts commit 811bc1fec39a01a0363132ef83aec5eb5af95240. --- vizro-core/examples/assets/logo.svg | 3 --- vizro-core/src/vizro/models/_dashboard.py | 20 +++------------ vizro-core/src/vizro/static/css/layout.css | 29 ++++++---------------- 3 files changed, 12 insertions(+), 40 deletions(-) delete mode 100644 vizro-core/examples/assets/logo.svg diff --git a/vizro-core/examples/assets/logo.svg b/vizro-core/examples/assets/logo.svg deleted file mode 100644 index 0904b87de..000000000 --- a/vizro-core/examples/assets/logo.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/vizro-core/src/vizro/models/_dashboard.py b/vizro-core/src/vizro/models/_dashboard.py index 1de1e5d62..9aa1a1830 100644 --- a/vizro-core/src/vizro/models/_dashboard.py +++ b/vizro-core/src/vizro/models/_dashboard.py @@ -8,7 +8,7 @@ import dash import dash_bootstrap_components as dbc import dash_daq as daq -from dash import ClientsideFunction, Input, Output, clientside_callback, get_asset_url, get_relative_path, html +from dash import ClientsideFunction, Input, Output, clientside_callback, get_relative_path, html try: from pydantic.v1 import Field, validator @@ -50,7 +50,6 @@ def _all_hidden(components: List[Component]): "nav-panel": html.Div, "control-panel": html.Div, "components": html.Div, - "logo": html.Img, }, ) @@ -131,12 +130,6 @@ def build(self): def _get_page_divs(self, page: Page) -> _PageDivsType: # Identical across pages - logo_img = self._infer_image(filename="logo") - logo = ( - html.Img(src=get_asset_url(logo_img), id="logo") - if logo_img - else html.Img(id="logo", hidden=True) - ) dashboard_title = ( html.H2(self.title, id="dashboard-title") if self.title else html.H2(hidden=True, id="dashboard-title") ) @@ -148,7 +141,6 @@ def _get_page_divs(self, page: Page) -> _PageDivsType: id="settings", ) - # Shared across pages but slightly differ in content. These could possibly be done by a clientside # callback instead. page_title = html.H2(page.title, id="page-title") @@ -160,12 +152,10 @@ def _get_page_divs(self, page: Page) -> _PageDivsType: 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, logo]) + return html.Div([dashboard_title, settings, page_title, nav_bar, nav_panel, control_panel, components]) def _arrange_page_divs(self, page_divs: _PageDivsType): - logo_title = [page_divs["logo"], page_divs["dashboard-title"]] - logo_title_div = html.Div(logo_title, id="logo-and-title", hidden=_all_hidden(logo_title)) - page_header_divs = [logo_title_div] + page_header_divs = [page_divs["dashboard-title"]] left_sidebar_divs = [page_divs["nav-bar"]] left_main_divs = [ page_divs["nav-panel"], @@ -174,9 +164,7 @@ def _arrange_page_divs(self, page_divs: _PageDivsType): right_header_divs = [page_divs["page-title"]] # Apply different container position logic based on condition - right_header_divs.append(page_divs["settings"]) if _all_hidden(logo_title) else page_header_divs.append( - page_divs["settings"] - ) + page_header_divs.append(page_divs["settings"]) if self.title else right_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)) diff --git a/vizro-core/src/vizro/static/css/layout.css b/vizro-core/src/vizro/static/css/layout.css index d79d33b92..bf2c286e0 100644 --- a/vizro-core/src/vizro/static/css/layout.css +++ b/vizro-core/src/vizro/static/css/layout.css @@ -1,9 +1,9 @@ #page-container { display: flex; - flex-direction: column; height: 100vh; overflow: hidden; width: 100vw; + flex-direction: column; } #left-main { @@ -27,9 +27,9 @@ display: flex; flex-direction: column; gap: var(--spacing-06); - overflow: auto; padding: 32px; width: 100%; + overflow: auto; } #right-header { @@ -41,15 +41,15 @@ } #page-header { - align-items: center; - background-color: var(--surfaces-bg-02); display: flex; flex-direction: row; - justify-content: space-between; - min-height: 64px; + width: 100%; + background-color: var(--surfaces-bg-02); padding-left: 20px; padding-right: 32px; - width: 100%; + min-height: 64px; + justify-content: space-between; + align-items: center; } #page-header:not(:empty) { @@ -173,8 +173,8 @@ div.dashboard_container .custom-tooltip { display: flex; flex-direction: column; gap: 40px; - padding-top: 16px; width: 64px; + padding-top: 16px; } #page-container div[hidden] { @@ -189,17 +189,4 @@ div.dashboard_container .custom-tooltip { #dashboard-title { margin: 0; - width: 100%; -} - -#logo { - height: 100%; -} - -#logo-and-title { - align-items: center; - display: flex; - flex-direction: row; - gap: 12px; - height: 32px; } From aaebcee1d1d6a3f0c9d74e1273d6e6c3714d46b2 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Fri, 22 Dec 2023 12:45:54 +0000 Subject: [PATCH 16/40] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- vizro-core/src/vizro/models/_dashboard.py | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/vizro-core/src/vizro/models/_dashboard.py b/vizro-core/src/vizro/models/_dashboard.py index 9aa1a1830..7c8762dc8 100644 --- a/vizro-core/src/vizro/models/_dashboard.py +++ b/vizro-core/src/vizro/models/_dashboard.py @@ -164,7 +164,9 @@ def _arrange_page_divs(self, page_divs: _PageDivsType): right_header_divs = [page_divs["page-title"]] # Apply different container position logic based on condition - page_header_divs.append(page_divs["settings"]) if self.title else right_header_divs.append(page_divs["settings"]) + page_header_divs.append(page_divs["settings"]) if self.title else right_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)) From f916f9a4b8b22cce70621e4bad68db8881cdb7e4 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Tue, 2 Jan 2024 20:13:16 +0100 Subject: [PATCH 17/40] Fix misalignment between icons and title --- vizro-core/src/vizro/static/css/layout.css | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/vizro-core/src/vizro/static/css/layout.css b/vizro-core/src/vizro/static/css/layout.css index bf2c286e0..1b8f11712 100644 --- a/vizro-core/src/vizro/static/css/layout.css +++ b/vizro-core/src/vizro/static/css/layout.css @@ -45,8 +45,7 @@ flex-direction: row; width: 100%; background-color: var(--surfaces-bg-02); - padding-left: 20px; - padding-right: 32px; + padding: 0 32px; min-height: 64px; justify-content: space-between; align-items: center; @@ -125,13 +124,12 @@ align-items: center; display: inline-flex; flex-direction: column; - width: 64px; } .icon-button { align-items: center; display: flex; - height: 64px; + height: 80px; justify-content: center; width: 100%; } @@ -173,8 +171,8 @@ div.dashboard_container .custom-tooltip { display: flex; flex-direction: column; gap: 40px; - width: 64px; - padding-top: 16px; + width: 80px; + padding-top: 10px; } #page-container div[hidden] { From 77e3bb57ba7edacd6c735d5a31f8b7503d46cd18 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Tue, 2 Jan 2024 20:43:27 +0100 Subject: [PATCH 18/40] Revert scrolling bug --- vizro-core/src/vizro/static/css/layout.css | 3 ++- vizro-core/src/vizro/static/css/scroll_bar.css | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/vizro-core/src/vizro/static/css/layout.css b/vizro-core/src/vizro/static/css/layout.css index 1b8f11712..f26f75d3b 100644 --- a/vizro-core/src/vizro/static/css/layout.css +++ b/vizro-core/src/vizro/static/css/layout.css @@ -29,7 +29,7 @@ gap: var(--spacing-06); padding: 32px; width: 100%; - overflow: auto; + height: calc(100% - 64px); } #right-header { @@ -59,6 +59,7 @@ display: flex; height: 100%; width: 100%; + overflow: auto; } .component_container_grid { diff --git a/vizro-core/src/vizro/static/css/scroll_bar.css b/vizro-core/src/vizro/static/css/scroll_bar.css index c0195fde5..8f504de1e 100644 --- a/vizro-core/src/vizro/static/css/scroll_bar.css +++ b/vizro-core/src/vizro/static/css/scroll_bar.css @@ -24,7 +24,7 @@ border-color: var(--surfaces-bg-card); } -#right-side::-webkit-scrollbar-thumb { +#components::-webkit-scrollbar-thumb { border-color: var(--main-container-bg-color); } From 6bf27415a7a1788adba2ed87fb1afa0233493628 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Tue, 2 Jan 2024 21:23:10 +0100 Subject: [PATCH 19/40] Fix scrolling on right-side --- vizro-core/src/vizro/static/css/layout.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/vizro-core/src/vizro/static/css/layout.css b/vizro-core/src/vizro/static/css/layout.css index f26f75d3b..901e1444b 100644 --- a/vizro-core/src/vizro/static/css/layout.css +++ b/vizro-core/src/vizro/static/css/layout.css @@ -29,7 +29,6 @@ gap: var(--spacing-06); padding: 32px; width: 100%; - height: calc(100% - 64px); } #right-header { @@ -183,7 +182,7 @@ div.dashboard_container .custom-tooltip { #page-main { display: flex; flex-direction: row; - height: 100%; + height: calc(100% - 64px); } #dashboard-title { From cff02430173f651758041fe0590b5b8b4292c6b6 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Tue, 2 Jan 2024 21:43:33 +0100 Subject: [PATCH 20/40] Fix scroll for left-main --- vizro-core/src/vizro/static/css/layout.css | 17 +++++++++-------- vizro-core/src/vizro/static/css/scroll_bar.css | 2 +- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/vizro-core/src/vizro/static/css/layout.css b/vizro-core/src/vizro/static/css/layout.css index 901e1444b..258051186 100644 --- a/vizro-core/src/vizro/static/css/layout.css +++ b/vizro-core/src/vizro/static/css/layout.css @@ -1,9 +1,9 @@ #page-container { display: flex; + flex-direction: column; height: 100vh; overflow: hidden; width: 100vw; - flex-direction: column; } #left-main { @@ -12,6 +12,7 @@ flex: 0 0 auto; flex-direction: column; gap: var(--spacing-08); + overflow: auto; padding: 32px 32px 0 32px; width: 352px; } @@ -40,14 +41,14 @@ } #page-header { + align-items: center; + background-color: var(--surfaces-bg-02); display: flex; flex-direction: row; - width: 100%; - background-color: var(--surfaces-bg-02); - padding: 0 32px; - min-height: 64px; justify-content: space-between; - align-items: center; + min-height: 64px; + padding: 0 32px; + width: 100%; } #page-header:not(:empty) { @@ -57,8 +58,8 @@ #components { display: flex; height: 100%; - width: 100%; overflow: auto; + width: 100%; } .component_container_grid { @@ -171,8 +172,8 @@ div.dashboard_container .custom-tooltip { display: flex; flex-direction: column; gap: 40px; - width: 80px; padding-top: 10px; + width: 80px; } #page-container div[hidden] { diff --git a/vizro-core/src/vizro/static/css/scroll_bar.css b/vizro-core/src/vizro/static/css/scroll_bar.css index 8f504de1e..b5297d015 100644 --- a/vizro-core/src/vizro/static/css/scroll_bar.css +++ b/vizro-core/src/vizro/static/css/scroll_bar.css @@ -12,7 +12,7 @@ background: var(--fill-medium-emphasis); } -#left-side::-webkit-scrollbar-thumb { +#left-main::-webkit-scrollbar-thumb { border-color: var(--surfaces-bg-02); } From 78e744f2ca1479d24843fdcbcaf4f5e6dc52745d Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Tue, 2 Jan 2024 21:56:37 +0100 Subject: [PATCH 21/40] Fix unnecessary scrolling on screens with cards --- vizro-core/src/vizro/static/css/card.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vizro-core/src/vizro/static/css/card.css b/vizro-core/src/vizro/static/css/card.css index bf3ae4165..6a9c7eea5 100644 --- a/vizro-core/src/vizro/static/css/card.css +++ b/vizro-core/src/vizro/static/css/card.css @@ -12,7 +12,7 @@ .nav_card_container { height: 98%; - margin-top: 8px; + margin-top: 4px; position: relative; } From fc0f4484af2d3ac92acc6e8c6b2d74196121dab9 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Tue, 2 Jan 2024 22:02:10 +0100 Subject: [PATCH 22/40] Use short-cut CSS --- vizro-core/src/vizro/static/css/layout.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vizro-core/src/vizro/static/css/layout.css b/vizro-core/src/vizro/static/css/layout.css index 258051186..26b4e832a 100644 --- a/vizro-core/src/vizro/static/css/layout.css +++ b/vizro-core/src/vizro/static/css/layout.css @@ -13,7 +13,7 @@ flex-direction: column; gap: var(--spacing-08); overflow: auto; - padding: 32px 32px 0 32px; + padding: 32px 32px 0; width: 352px; } From d95dadabee2e0804f57afb11f43ecd0d50c204b3 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Wed, 3 Jan 2024 21:02:12 +0100 Subject: [PATCH 23/40] Add changelog --- ...uong_li_nguyen_dashboard_title_position.md | 47 +++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 vizro-core/changelog.d/20240103_210035_huong_li_nguyen_dashboard_title_position.md diff --git a/vizro-core/changelog.d/20240103_210035_huong_li_nguyen_dashboard_title_position.md b/vizro-core/changelog.d/20240103_210035_huong_li_nguyen_dashboard_title_position.md new file mode 100644 index 000000000..0d255527d --- /dev/null +++ b/vizro-core/changelog.d/20240103_210035_huong_li_nguyen_dashboard_title_position.md @@ -0,0 +1,47 @@ + + + + + + +### Changed + +- Move dashboard tite into top header container `page-header` ([#238](https://github.com/mckinsey/vizro/pull/238)) + + + + From e37d83e0c0da9a222e31fa26617962e1b71052d6 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Thu, 4 Jan 2024 12:29:12 +0100 Subject: [PATCH 24/40] Fix typo --- .../20240103_210035_huong_li_nguyen_dashboard_title_position.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vizro-core/changelog.d/20240103_210035_huong_li_nguyen_dashboard_title_position.md b/vizro-core/changelog.d/20240103_210035_huong_li_nguyen_dashboard_title_position.md index 0d255527d..f6f3bbe50 100644 --- a/vizro-core/changelog.d/20240103_210035_huong_li_nguyen_dashboard_title_position.md +++ b/vizro-core/changelog.d/20240103_210035_huong_li_nguyen_dashboard_title_position.md @@ -25,7 +25,7 @@ Uncomment the section that is right (remove the HTML comment wrapper). ### Changed -- Move dashboard tite into top header container `page-header` ([#238](https://github.com/mckinsey/vizro/pull/238)) +- Move dashboard title into top header container `page-header` ([#238](https://github.com/mckinsey/vizro/pull/238)) + + + + +### Added + +- Enable automatic logo insertion into `page-header` container ([#248](https://github.com/mckinsey/vizro/pull/248)) + + + + + From af8757288f65fd1cb2bce55e07b23cf9b5f438fd Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Thu, 4 Jan 2024 13:34:44 +0100 Subject: [PATCH 31/40] Enable logo --- vizro-core/src/vizro/models/_dashboard.py | 14 +++++++++----- vizro-core/src/vizro/static/css/layout.css | 12 ++++++++++++ 2 files changed, 21 insertions(+), 5 deletions(-) diff --git a/vizro-core/src/vizro/models/_dashboard.py b/vizro-core/src/vizro/models/_dashboard.py index 7c8762dc8..43bd2f4ad 100644 --- a/vizro-core/src/vizro/models/_dashboard.py +++ b/vizro-core/src/vizro/models/_dashboard.py @@ -8,7 +8,7 @@ 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 @@ -50,6 +50,7 @@ def _all_hidden(components: List[Component]): "nav-panel": html.Div, "control-panel": html.Div, "components": html.Div, + "logo": html.Div, }, ) @@ -133,13 +134,15 @@ 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( daq.BooleanSwitch( id="theme_selector", on=self.theme == "vizro_dark", persistence=True, persistence_type="session" ), 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. @@ -152,10 +155,11 @@ def _get_page_divs(self, page: Page) -> _PageDivsType: 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]) + 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"], @@ -164,7 +168,7 @@ def _arrange_page_divs(self, page_divs: _PageDivsType): right_header_divs = [page_divs["page-title"]] # Apply different container position logic based on condition - page_header_divs.append(page_divs["settings"]) if self.title else right_header_divs.append( + right_header_divs.append(page_divs["settings"]) if _all_hidden(page_header_divs) else page_header_divs.append( page_divs["settings"] ) diff --git a/vizro-core/src/vizro/static/css/layout.css b/vizro-core/src/vizro/static/css/layout.css index 26b4e832a..6b43c76cd 100644 --- a/vizro-core/src/vizro/static/css/layout.css +++ b/vizro-core/src/vizro/static/css/layout.css @@ -189,3 +189,15 @@ div.dashboard_container .custom-tooltip { #dashboard-title { margin: 0; } + +#logo { + height: 100%; +} + +#logo-and-title { + align-items: center; + display: flex; + flex-direction: row; + gap: 12px; + height: 32px; +} From c3dc66c335c6f81da23073e20674c0146dbfb70e Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Thu, 4 Jan 2024 13:53:49 +0100 Subject: [PATCH 32/40] Fix CSS for no logo / no title --- vizro-core/src/vizro/static/css/layout.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/vizro-core/src/vizro/static/css/layout.css b/vizro-core/src/vizro/static/css/layout.css index 6b43c76cd..43c50ad7b 100644 --- a/vizro-core/src/vizro/static/css/layout.css +++ b/vizro-core/src/vizro/static/css/layout.css @@ -46,9 +46,10 @@ 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) { @@ -182,6 +183,7 @@ div.dashboard_container .custom-tooltip { #page-main { display: flex; + flex: 1 1 0; flex-direction: row; height: calc(100% - 64px); } From 2401e1a711f8919a25e9e620e8c5ff922400ec96 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Thu, 4 Jan 2024 14:10:33 +0100 Subject: [PATCH 33/40] Find a middle-ground for logo size --- vizro-core/examples/assets/css/{images.css => custom.css} | 5 +++++ vizro-core/src/vizro/static/css/layout.css | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) rename vizro-core/examples/assets/css/{images.css => custom.css} (66%) diff --git a/vizro-core/examples/assets/css/images.css b/vizro-core/examples/assets/css/custom.css similarity index 66% rename from vizro-core/examples/assets/css/images.css rename to vizro-core/examples/assets/css/custom.css index 78b93235d..4cc69c059 100644 --- a/vizro-core/examples/assets/css/images.css +++ b/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; +} diff --git a/vizro-core/src/vizro/static/css/layout.css b/vizro-core/src/vizro/static/css/layout.css index 43c50ad7b..b6364bfb6 100644 --- a/vizro-core/src/vizro/static/css/layout.css +++ b/vizro-core/src/vizro/static/css/layout.css @@ -201,5 +201,5 @@ div.dashboard_container .custom-tooltip { display: flex; flex-direction: row; gap: 12px; - height: 32px; + height: 100%; } From 605e5cf6515a4defd8b47d5b3cd202d7a87999be Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Thu, 4 Jan 2024 14:17:11 +0100 Subject: [PATCH 34/40] Test out rectangular logo --- vizro-core/examples/assets/css/custom.css | 3 +-- vizro-core/examples/assets/images/logo.svg | 9 +++++++-- vizro-core/examples/default/app.py | 2 +- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/vizro-core/examples/assets/css/custom.css b/vizro-core/examples/assets/css/custom.css index 4cc69c059..ed364e86c 100644 --- a/vizro-core/examples/assets/css/custom.css +++ b/vizro-core/examples/assets/css/custom.css @@ -6,6 +6,5 @@ img[src*="#my-image"] { } #logo { - margin-left: -8px; - height: 40px; + margin-left: -12px; } diff --git a/vizro-core/examples/assets/images/logo.svg b/vizro-core/examples/assets/images/logo.svg index 0904b87de..e55ed4606 100644 --- a/vizro-core/examples/assets/images/logo.svg +++ b/vizro-core/examples/assets/images/logo.svg @@ -1,3 +1,8 @@ - - + + + + + + + diff --git a/vizro-core/examples/default/app.py b/vizro-core/examples/default/app.py index 341483139..715711d64 100644 --- a/vizro-core/examples/default/app.py +++ b/vizro-core/examples/default/app.py @@ -550,7 +550,7 @@ def create_home_page(): dashboard = vm.Dashboard( - title="Vizro Demo", + # title="Vizro Demo", pages=[ create_home_page(), create_variable_analysis(), From b7188f63cba100e7082ec7c745a6937ca0482fde Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Thu, 4 Jan 2024 14:17:17 +0100 Subject: [PATCH 35/40] Revert "Test out rectangular logo" This reverts commit d71f101488bfe7d23b06b1ceaa87fee7c6cf3a89. --- vizro-core/examples/assets/css/custom.css | 3 ++- vizro-core/examples/assets/images/logo.svg | 9 ++------- vizro-core/examples/default/app.py | 2 +- 3 files changed, 5 insertions(+), 9 deletions(-) diff --git a/vizro-core/examples/assets/css/custom.css b/vizro-core/examples/assets/css/custom.css index ed364e86c..4cc69c059 100644 --- a/vizro-core/examples/assets/css/custom.css +++ b/vizro-core/examples/assets/css/custom.css @@ -6,5 +6,6 @@ img[src*="#my-image"] { } #logo { - margin-left: -12px; + margin-left: -8px; + height: 40px; } diff --git a/vizro-core/examples/assets/images/logo.svg b/vizro-core/examples/assets/images/logo.svg index e55ed4606..0904b87de 100644 --- a/vizro-core/examples/assets/images/logo.svg +++ b/vizro-core/examples/assets/images/logo.svg @@ -1,8 +1,3 @@ - - - - - - - + + diff --git a/vizro-core/examples/default/app.py b/vizro-core/examples/default/app.py index 715711d64..341483139 100644 --- a/vizro-core/examples/default/app.py +++ b/vizro-core/examples/default/app.py @@ -550,7 +550,7 @@ def create_home_page(): dashboard = vm.Dashboard( - # title="Vizro Demo", + title="Vizro Demo", pages=[ create_home_page(), create_variable_analysis(), From 5503f7eb520ff8af63b3d0593f1f396d74470540 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Thu, 4 Jan 2024 14:21:26 +0100 Subject: [PATCH 36/40] Add changelog --- ...0104_141852_huong_li_nguyen_enable_logo.md | 47 +++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 vizro-core/changelog.d/20240104_141852_huong_li_nguyen_enable_logo.md diff --git a/vizro-core/changelog.d/20240104_141852_huong_li_nguyen_enable_logo.md b/vizro-core/changelog.d/20240104_141852_huong_li_nguyen_enable_logo.md new file mode 100644 index 000000000..3abb24736 --- /dev/null +++ b/vizro-core/changelog.d/20240104_141852_huong_li_nguyen_enable_logo.md @@ -0,0 +1,47 @@ + + + + + +### Added + +- Enable automatic logo insertion into `page-header` container ([#248](https://github.com/mckinsey/vizro/pull/248)) + + + + + From 136cdd17ec75cc6e88cfef7a8584541999e76f6d Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Tue, 16 Jan 2024 13:33:46 +0000 Subject: [PATCH 37/40] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- vizro-core/src/vizro/models/_dashboard.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vizro-core/src/vizro/models/_dashboard.py b/vizro-core/src/vizro/models/_dashboard.py index e72a4ac41..2e866d551 100644 --- a/vizro-core/src/vizro/models/_dashboard.py +++ b/vizro-core/src/vizro/models/_dashboard.py @@ -176,7 +176,7 @@ def _arrange_page_divs(self, page_divs: _PageDivsType): 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") From d4ad0e7d7d90e57c0780bc3b4926c2bff620c8e2 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Tue, 16 Jan 2024 15:51:26 +0100 Subject: [PATCH 38/40] Increase margin --- vizro-core/src/vizro/static/css/layout.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vizro-core/src/vizro/static/css/layout.css b/vizro-core/src/vizro/static/css/layout.css index b6364bfb6..8829fab9f 100644 --- a/vizro-core/src/vizro/static/css/layout.css +++ b/vizro-core/src/vizro/static/css/layout.css @@ -200,6 +200,6 @@ div.dashboard_container .custom-tooltip { align-items: center; display: flex; flex-direction: row; - gap: 12px; + gap: 16px; height: 100%; } From 568c69e8d11ee069286f53b6b02f9c8cd1bdae03 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Tue, 16 Jan 2024 18:25:40 +0100 Subject: [PATCH 39/40] PR comments --- vizro-core/src/vizro/models/_dashboard.py | 9 +++++---- vizro-core/src/vizro/models/_page.py | 4 ++-- vizro-core/src/vizro/static/css/layout.css | 2 +- 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/vizro-core/src/vizro/models/_dashboard.py b/vizro-core/src/vizro/models/_dashboard.py index 2e866d551..4d4cfc911 100644 --- a/vizro-core/src/vizro/models/_dashboard.py +++ b/vizro-core/src/vizro/models/_dashboard.py @@ -49,7 +49,7 @@ 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, }, ) @@ -158,7 +158,7 @@ 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"] + 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): @@ -182,7 +182,7 @@ def _arrange_page_divs(self, page_divs: _PageDivsType): 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)) @@ -215,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(): diff --git a/vizro-core/src/vizro/models/_page.py b/vizro-core/src/vizro/models/_page.py index ad03048fd..9c2313c45 100644 --- a/vizro-core/src/vizro/models/_page.py +++ b/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 diff --git a/vizro-core/src/vizro/static/css/layout.css b/vizro-core/src/vizro/static/css/layout.css index 8829fab9f..4a7b7a0d3 100644 --- a/vizro-core/src/vizro/static/css/layout.css +++ b/vizro-core/src/vizro/static/css/layout.css @@ -56,7 +56,7 @@ border-bottom: 1px solid var(--border-subtle-alpha-01); } -#components { +#page-components { display: flex; height: 100%; overflow: auto; From f48437ac1111ccdbd38ac65d4500cf1e7fb04009 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Tue, 16 Jan 2024 18:26:56 +0100 Subject: [PATCH 40/40] Fix scroll-bar --- vizro-core/src/vizro/static/css/scroll_bar.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vizro-core/src/vizro/static/css/scroll_bar.css b/vizro-core/src/vizro/static/css/scroll_bar.css index b5297d015..7e2086b2a 100644 --- a/vizro-core/src/vizro/static/css/scroll_bar.css +++ b/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); }