diff --git a/vizro-ai/examples/dashboard_ui/app.py b/vizro-ai/examples/dashboard_ui/app.py index 7a938aec8..2cafc8fa6 100644 --- a/vizro-ai/examples/dashboard_ui/app.py +++ b/vizro-ai/examples/dashboard_ui/app.py @@ -15,7 +15,6 @@ Icon, Modal, MyDropdown, - MyPage, OffCanvas, UserPromptTextArea, UserUpload, @@ -39,16 +38,17 @@ vm.Container.add_type("components", Modal) vm.Container.add_type("components", CustomButton) vm.Container.add_type("components", HeaderComponent) - -MyPage.add_type("components", UserPromptTextArea) -MyPage.add_type("components", UserUpload) -MyPage.add_type("components", MyDropdown) -MyPage.add_type("components", OffCanvas) -MyPage.add_type("components", CodeClipboard) -MyPage.add_type("components", Icon) vm.Container.add_type("components", Modal) -dashboard_page = MyPage( +vm.Page.add_type("components", UserPromptTextArea) +vm.Page.add_type("components", UserUpload) +vm.Page.add_type("components", MyDropdown) +vm.Page.add_type("components", OffCanvas) +vm.Page.add_type("components", CodeClipboard) +vm.Page.add_type("components", Icon) + + +dashboard_page = vm.Page( id="vizro_ai_dashboard_page", title="Vizro AI - Dashboard", layout=vm.Layout( @@ -56,7 +56,6 @@ [4, 4, 4, 4, 4], [2, 2, 0, 0, 0], [2, 2, 0, 0, 0], - [3, 3, 0, 0, 0], [1, 1, 0, 0, 0], [1, 1, 0, 0, 0], [1, 1, 0, 0, 0], @@ -64,11 +63,13 @@ [1, 1, 0, 0, 0], [1, 1, 0, 0, 0], [1, 1, 0, 0, 0], - ] + [3, 3, 0, 0, 0], + ], + row_min_height="50px", ), components=[ vm.Container( - title="Code", + title="", components=[ vm.Container( title="", @@ -82,7 +83,7 @@ ], layout=vm.Layout( grid=[*[[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]] * 11, [-1, -1, -1, -1, -1, -1, -1, -1, 1, 1]], - col_gap="20px", + row_min_height="30px", ), ) ], @@ -129,8 +130,6 @@ grid=[ [2, -1, -1, -1, -1, -1, 1, 1, 0, 0], ], - row_gap="0px", - col_gap="4px", ), components=[ vm.Button( @@ -246,7 +245,7 @@ def save_to_file(generated_code): @callback( - Output("run-dashboard-navlink", "style"), + [Output("run-dashboard", "style"), Output("run-dashboard-navlink", "href")], Input("dashboard-code-markdown", "children"), ) def show_button(ai_response): @@ -255,38 +254,21 @@ def show_button(ai_response): raise PreventUpdate port = find_available_port() subprocess.Popen(["python", "output_files/run_vizro_ai_output.py", str(port)]) - return {} - - -# -# @callback( -# [Output("run-dashboard-button", "disabled"), Output("embedded-dashboard", "children")], -# Input("run-dashboard-button", "n_clicks"), -# ) -# def run_generated_dashboard(n_clicks): -# """Runs vizro-ai generated dashboard in an iframe window.""" -# port = find_available_port() -# if not n_clicks: -# raise PreventUpdate -# else: -# subprocess.Popen(["python", "output_files/run_vizro_ai_output.py", str(port)]) -# iframe = html.Iframe(src="http://localhost:8051/", height="600px") -# return True, iframe + href = f"http://localhost:{port}/" + return {}, href app = Vizro().build(dashboard) app.dash.layout.children.append( html.Div( [ - dbc.NavLink("Contact us", href="https://github.com/mckinsey/vizro/issues"), - dbc.NavLink("GitHub", href="https://github.com/mckinsey/vizro"), - dbc.NavLink("Docs", href="https://vizro.readthedocs.io/projects/vizro-ai/"), html.Div( [ "Made using ", html.Img(src=get_asset_url("logo.svg"), id="banner", alt="Vizro logo"), - "vizro", + dbc.NavLink("vizro", href="https://github.com/mckinsey/vizro"), ], + style={"display": "flex", "flexDirection": "row"}, ), ], className="anchor-container", diff --git a/vizro-ai/examples/dashboard_ui/assets/custom_css.css b/vizro-ai/examples/dashboard_ui/assets/custom_css.css index a3fcce0ab..3cac139f9 100644 --- a/vizro-ai/examples/dashboard_ui/assets/custom_css.css +++ b/vizro-ai/examples/dashboard_ui/assets/custom_css.css @@ -26,7 +26,7 @@ background-color: inherit; border: 1px solid var(--border-subtle-alpha-01); color: var(--text-primary); - height: 500px; + height: 62vh; padding: 8px; width: 100%; } @@ -46,6 +46,7 @@ background: var(--surfaces-bg-card); font-family: monospace; height: 100%; + max-height: 670px; overflow: auto; padding: 1rem; position: relative; @@ -136,7 +137,7 @@ border: 1px dashed var(--border-subtle-alpha-01); border-radius: 5px; color: var(--text-primary); - height: 46px; + height: 100%; line-height: 46px; text-align: center; } @@ -245,4 +246,9 @@ line-height: 16px; text-decoration: none; transition: box-shadow 0.2s; + width: 100%; +} + +#run-dashboard-navlink.nav-link { + color: var(--text-primary-inverted); } diff --git a/vizro-ai/examples/dashboard_ui/components.py b/vizro-ai/examples/dashboard_ui/components.py index e442e17a7..1b4751194 100644 --- a/vizro-ai/examples/dashboard_ui/components.py +++ b/vizro-ai/examples/dashboard_ui/components.py @@ -219,16 +219,6 @@ def build(self): return offcanvas -class MyPage(vm.Page): - """Custom page.""" - - type: Literal["my_page"] = "my_page" - - def pre_build(self): - """Overwriting pre_build.""" - pass - - class Icon(vm.VizroBaseModel): """Icon component for settings.""" @@ -261,7 +251,6 @@ def build(self): """Returns custom dashboard.""" dashboard_build_obj = super().build() dashboard_build_obj.children.append(dcc.Store(id="dashboard-data-store", storage_type="session")) - # dashboard_build_obj.children.append(dcc.Store(id="outputs-store-id", storage_type="session")) return dashboard_build_obj @@ -283,7 +272,7 @@ def build(self): id=f"{self.id}-navlink", ), ], - style={"width": "12rem"}, + style={"display": "none"}, className="navlink-button", ) return button @@ -296,7 +285,7 @@ class HeaderComponent(vm.VizroBaseModel): def build(self): """Returns custom header component.""" - title = html.Header("Vizro", id="custom-header-title") + title = html.Header("Vizro-AI dashboard generator", id="custom-header-title") header = html.Div( children=[html.Img(src=get_asset_url("logo.svg"), alt="Vizro logo", className="header-logo"), title], id="custom-header-div", diff --git a/vizro-ai/examples/dashboard_ui/run_vizro_ai.py b/vizro-ai/examples/dashboard_ui/run_vizro_ai.py index d52d4660b..81f8be3ec 100644 --- a/vizro-ai/examples/dashboard_ui/run_vizro_ai.py +++ b/vizro-ai/examples/dashboard_ui/run_vizro_ai.py @@ -51,4 +51,4 @@ def run_vizro_ai_dashboard(user_prompt, model, api_key, api_base, n_clicks, vend args = parser.parse_args() - print(run_vizro_ai_dashboard(args.arg1, args.arg2, args.arg3, args.arg4, args.arg5, args.arg6)) + print(run_vizro_ai_dashboard(args.arg1, args.arg2, args.arg3, args.arg4, args.arg5, args.arg6)) # noqa: T201