minor fixes

mckinsey · Nov 8, 2024 · fbfd6e9 · fbfd6e9
1 parent a0750d6
commit fbfd6e9
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 53 deletions.
diff --git 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,36 +38,38 @@
 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(
         grid=[
             [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],
             [1, 1, 0, 0, 0],
             [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
@@ -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
@@ -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
@@ -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
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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