From 05a4dd0ad99799bc62a5107c985178b5bf25fb84 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Mon, 30 Oct 2023 12:30:15 +0100 Subject: [PATCH] Add quick POC for demo --- vizro-core/examples/assets/css/images.css | 32 ++++++++++++++ vizro-core/examples/default/app.py | 1 + .../actions/_action_loop/_action_loop.py | 2 +- vizro-core/src/vizro/models/_dashboard.py | 11 ++++- vizro-core/src/vizro/models/_page.py | 42 ++----------------- 5 files changed, 47 insertions(+), 41 deletions(-) diff --git a/vizro-core/examples/assets/css/images.css b/vizro-core/examples/assets/css/images.css index 78b93235d..4e724b3c5 100644 --- a/vizro-core/examples/assets/css/images.css +++ b/vizro-core/examples/assets/css/images.css @@ -4,3 +4,35 @@ img[src*="#my-image"] { float: left; margin: 10px 25px; } + +.page-title { + grid-area: pagetitle; +} + +.nav_panel { + grid-area: navpanel; +} + +.dashboard_title_outer { + grid-area: dashboardtitle; +} + +.control_panel { + grid-area: controls; +} + +.component_container { + grid-area: components; +} + +.theme_selector { + grid-area: themeselector; +} + + +#dashboard_container_outer { + display: grid; + grid-template-areas: "dashboardtitle pagetitle themeselector" + "navpanel components components" + "controls components components" +} diff --git a/vizro-core/examples/default/app.py b/vizro-core/examples/default/app.py index 989901141..7d9c96525 100644 --- a/vizro-core/examples/default/app.py +++ b/vizro-core/examples/default/app.py @@ -530,6 +530,7 @@ def create_home_page(): "Summary": ["Continent Summary"], } ), + title="Dashboard" ) if __name__ == "__main__": diff --git a/vizro-core/src/vizro/actions/_action_loop/_action_loop.py b/vizro-core/src/vizro/actions/_action_loop/_action_loop.py index def923e60..c522d3ed1 100644 --- a/vizro-core/src/vizro/actions/_action_loop/_action_loop.py +++ b/vizro-core/src/vizro/actions/_action_loop/_action_loop.py @@ -16,7 +16,7 @@ def _create_app_callbacks(cls) -> html.Div: Returns: List of required components for the action loop and for each `Action` in the `Dashboard`. """ - return html.Div([cls._build_action_loop(), cls._build_actions_models()], id="app_components_div") + return html.Div([cls._build_action_loop(), cls._build_actions_models()], id="app_components_div", className="hidden") @staticmethod def _build_action_loop(): diff --git a/vizro-core/src/vizro/models/_dashboard.py b/vizro-core/src/vizro/models/_dashboard.py index 6f42700dd..e6d00f63d 100644 --- a/vizro-core/src/vizro/models/_dashboard.py +++ b/vizro-core/src/vizro/models/_dashboard.py @@ -103,10 +103,19 @@ def build(self): page.build() # TODO: ideally remove, but necessary to register slider callbacks self._update_theme() + dashboard_title = ( + html.Div( + children=[html.H2(self.title), html.Hr()], className="dashboard_title", id="dashboard_title_outer" + ) + if self.title + else None + ) + return dbc.Container( id="dashboard_container_outer", children=[ - html.Div(id=f"vizro_version_{vizro.__version__}"), + dashboard_title, + html.Div(id=f"vizro_version_{vizro.__version__}", className="hidden"), ActionLoop._create_app_callbacks(), dash.page_container, ], diff --git a/vizro-core/src/vizro/models/_page.py b/vizro-core/src/vizro/models/_page.py index ae40c2e48..27121afd1 100644 --- a/vizro-core/src/vizro/models/_page.py +++ b/vizro-core/src/vizro/models/_page.py @@ -154,7 +154,7 @@ def update_graph_theme(theme_selector_on: bool): def _create_theme_switch(): _, dashboard = next(model_manager._items_with_type(Dashboard)) theme_switch = daq.BooleanSwitch( - id="theme_selector", on=True if dashboard.theme == "vizro_dark" else False, persistence=True + id="theme_selector", on=True if dashboard.theme == "vizro_dark" else False, persistence=True, className="theme_selector" ) return theme_switch @@ -188,52 +188,16 @@ def _create_component_container(self, components_content): ) return component_container - @staticmethod - def _arrange_containers(page_title, theme_switch, nav_panel, control_panel, component_container): - """Defines div container arrangement on page. - - To change arrangement, one has to change the order in the header, left_side and/or right_side_elements. - """ - _, dashboard = next(model_manager._items_with_type(Dashboard)) - dashboard_title = ( - 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", 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 - ) - right_side_elements = [header, component_container] - 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): # Create dashboard containers/elements - page_title = html.H2(children=self.title) + page_title = html.H2(children=self.title, className="page-title") theme_switch = self._create_theme_switch() nav_panel = self._create_nav_panel() control_panel = self._create_control_panel(controls_content) component_container = self._create_component_container(components_content) - # Arrange dashboard containers - left_side, right_side = self._arrange_containers( - page_title=page_title, - theme_switch=theme_switch, - nav_panel=nav_panel, - control_panel=control_panel, - component_container=component_container, - ) - return dbc.Container( id=self.id, - children=[dcc.Store(id=f"{ON_PAGE_LOAD_ACTION_PREFIX}_trigger_{self.id}"), left_side, right_side], + children=[dcc.Store(id=f"{ON_PAGE_LOAD_ACTION_PREFIX}_trigger_{self.id}"), page_title, theme_switch, nav_panel, control_panel, component_container], className="page_container", )