[Demo] Adjust layout for smaller screensize

vizro-ai/changelog.d/20241113_200250_nadija_ratkusic_graca_css_fixes.md

@@ -0,0 +1,48 @@
+<!--
+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
+
+- A bullet item for the Added 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))
+
+-->
+<!--
+### 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-ai/examples/dashboard_ui/app.py

@@ -79,21 +79,18 @@
     title="Vizro-AI - create interactive charts with Plotly and Vizro",
     layout=vm.Layout(
         grid=[
-            [4, 4, 4, 4],
-            [2, 2, 1, 1],
-            [2, 2, 1, 1],
-            [3, 3, 1, 1],
-            [3, 3, 1, 1],
-            [3, 3, 1, 1],
-            *[[0, 0, 1, 1]] * 8,
+            *[[4, 4, 4, 4]] * 2,
+            *[[2, 2, 1, 1]] * 3,
+            *[[3, 3, 1, 1]] * 4,
+            *[[0, 0, 1, 1]] * 10,
         ]
     ),
     components=[
         vm.Container(
             title="",
-            components=[CodeClipboard(id="plot"), ToggleSwitch(id="toggle-id")],
+            components=[CodeClipboard(id="plot"), ToggleSwitch()],
             layout=vm.Layout(
-                grid=[*[[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]] * 7, [-1, -1, -1, -1, -1, -1, -1, -1, -1, 1, 1, 1]],
+                grid=[*[[0]] * 7, [1]],
                 row_gap="12px",
                 col_gap="12px",
             ),
@@ -107,7 +104,7 @@
                 ]
             ),
             components=[
-                vm.Graph(id="graph-id", figure=px.scatter(pd.DataFrame())),
+                vm.Graph(id="graph", figure=px.scatter(pd.DataFrame())),
                 DropdownMenu(id="dropdown-menu"),
             ],
         ),
@@ -120,25 +117,24 @@
                     [0],
                 ],
                 row_gap="0px",
-                # row_min_height="40px",
             ),
             components=[
                 UserUpload(
-                    id="data-upload-id",
+                    id="data-upload-component",
                     actions=[
                         vm.Action(
                             function=data_upload_action(),
-                            inputs=["data-upload-id.contents", "data-upload-id.filename"],
-                            outputs=["data-store-id.data", "modal-table-icon.style", "modal-table-tooltip.style"],
+                            inputs=["data-upload-component.contents", "data-upload-component.filename"],
+                            outputs=["data-store.data", "modal-table-icon.style", "modal-table-tooltip.style"],
                         ),
                         vm.Action(
                             function=display_filename(),
-                            inputs=["data-store-id.data"],
-                            outputs=["upload-message-id.children"],
+                            inputs=["data-store.data"],
+                            outputs=["upload-message.children"],
                         ),
                         vm.Action(
                             function=update_table(),
-                            inputs=["data-store-id.data"],
+                            inputs=["data-store.data"],
                             outputs=["modal-table.children", "modal-title.children"],
                         ),
                     ],
@@ -155,38 +151,36 @@
                     [3, 3, 3, 3, 3, 3, 3, 3, 3],
                     [2, -1, -1, -1, -1, 1, 1, 0, 0],
                 ],
-                row_gap="10px",
+                row_gap="12px",
                 col_gap="4px",
             ),
             components=[
                 vm.Button(
-                    id="trigger-button-id",
+                    id="trigger-button",
                     text="Run Vizro-AI",
                     actions=[
                         vm.Action(
                             function=run_vizro_ai(),
                             inputs=[
-                                "text-area-id.value",
-                                "trigger-button-id.n_clicks",
-                                "data-store-id.data",
-                                "model-dropdown-id.value",
+                                "text-area.value",
+                                "trigger-button.n_clicks",
+                                "data-store.data",
+                                "model-dropdown.value",
                                 "settings-api-key.value",
                                 "settings-api-base.value",
                                 "settings-dropdown.value",
                             ],
-                            outputs=["plot-code-markdown.children", "graph-id.figure", "code-output-store-id.data"],
+                            outputs=["plot-code-markdown.children", "graph.figure", "code-output-store.data"],
                         ),
                     ],
                 ),
-                MyDropdown(
-                    options=SUPPORTED_MODELS["OpenAI"], value="gpt-4o-mini", multi=False, id="model-dropdown-id"
-                ),
+                MyDropdown(options=SUPPORTED_MODELS["OpenAI"], value="gpt-4o-mini", multi=False, id="model-dropdown"),
                 OffCanvas(
                     id="settings",
                     options=["OpenAI", "Anthropic", "Mistral", "xAI"],
                     value="OpenAI",
                 ),
-                UserPromptTextArea(id="text-area-id"),
+                UserPromptTextArea(id="text-area"),
                 # Modal(id="modal"),
             ],
         ),
@@ -206,7 +200,7 @@
 
 @callback(
     Output("settings", "is_open"),
-    Input("open-settings-id", "n_clicks"),
+    Input("open-settings", "n_clicks"),
     [State("settings", "is_open")],
 )
 def open_settings(n_clicks, is_open):
@@ -235,7 +229,7 @@ def show_api_base(value):
 @callback(
     Output("plot-code-markdown", "children"),
     Input("toggle-switch", "value"),
-    [State("code-output-store-id", "data")],
+    [State("code-output-store", "data")],
 )
 def toggle_code(value, data):
     """Callback for switching between vizro and plotly code."""
@@ -253,7 +247,7 @@ def toggle_code(value, data):
     Output("data-modal", "is_open"),
     Input("modal-table-icon", "n_clicks"),
     State("data-modal", "is_open"),
-    State("data-store-id", "data"),
+    State("data-store", "data"),
 )
 def open_modal(n_clicks, is_open, data):
     """Callback for opening modal component."""
@@ -267,7 +261,7 @@ def open_modal(n_clicks, is_open, data):
 @callback(
     Output("download-file", "data"),
     [Input("dropdown-menu-html", "n_clicks"), Input("dropdown-menu-json", "n_clicks")],
-    State("code-output-store-id", "data"),
+    State("code-output-store", "data"),
     prevent_initial_call=True,
 )
 def download_fig(n_clicks_html, n_clicks_json, data):
@@ -290,9 +284,7 @@ def download_fig(n_clicks_html, n_clicks_json, data):
         return dcc.send_string(plotly_json, "plotly_fig.json")
 
 
-@callback(
-    [Output("model-dropdown-id", "options"), Output("model-dropdown-id", "value")], Input("settings-dropdown", "value")
-)
+@callback([Output("model-dropdown", "options"), Output("model-dropdown", "value")], Input("settings-dropdown", "value"))
 def update_model_dropdown(value):
     """Callback for updating available models."""
     available_models = SUPPORTED_MODELS[value]
@@ -302,21 +294,13 @@ def update_model_dropdown(value):
 
 app = Vizro().build(dashboard)
 app.dash.layout.children.append(
-    html.Div(
-        [
-            html.Div(
-                [
-                    "Made using ",
-                    html.Img(src=get_asset_url("logo.svg"), id="banner", alt="Vizro logo"),
-                    dbc.NavLink("vizro", href="https://github.com/mckinsey/vizro", target="_blank"),
-                ],
-                style={"display": "flex", "flexDirection": "row"},
-            ),
-        ],
+    dbc.NavLink(
+        ["Made with ", html.Img(src=get_asset_url("logo.svg"), id="banner", alt="Vizro logo"), "vizro"],
+        href="https://github.com/mckinsey/vizro",
+        target="_blank",
         className="anchor-container",
     )
 )
-
 server = app.dash.server
 if __name__ == "__main__":
     app.run()