From e448fba62723c9bdb12b2283f5cfbbd6e31cf8a0 Mon Sep 17 00:00:00 2001 From: nadijagraca Date: Wed, 13 Nov 2024 16:08:14 +0100 Subject: [PATCH 01/11] fix css --- vizro-ai/examples/dashboard_ui/app.py | 9 ++++++--- vizro-ai/examples/dashboard_ui/assets/custom_css.css | 7 +++---- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/vizro-ai/examples/dashboard_ui/app.py b/vizro-ai/examples/dashboard_ui/app.py index 48dc43d21..43c9bcc61 100644 --- a/vizro-ai/examples/dashboard_ui/app.py +++ b/vizro-ai/examples/dashboard_ui/app.py @@ -80,12 +80,15 @@ layout=vm.Layout( grid=[ [4, 4, 4, 4], + [4, 4, 4, 4], + [2, 2, 1, 1], [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, + [3, 3, 1, 1], + *[[0, 0, 1, 1]] * 10, ] ), components=[ @@ -124,11 +127,11 @@ ), 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"], + inputs=["data-upload-components.contents", "data-upload-components.filename"], outputs=["data-store-id.data", "modal-table-icon.style", "modal-table-tooltip.style"], ), vm.Action( diff --git a/vizro-ai/examples/dashboard_ui/assets/custom_css.css b/vizro-ai/examples/dashboard_ui/assets/custom_css.css index dea230d73..fc999abaf 100644 --- a/vizro-ai/examples/dashboard_ui/assets/custom_css.css +++ b/vizro-ai/examples/dashboard_ui/assets/custom_css.css @@ -121,12 +121,11 @@ width: 20px; } -#data-upload-id { +#data-upload-component { border: 1px dashed var(--border-subtle-alpha-01); - border-radius: 5px; color: var(--text-primary); - height: 46px; - line-height: 46px; + height: 5vh; + line-height: 5vh; text-align: center; } From be5966caeb5e479fc34bcf50261295e86db59723 Mon Sep 17 00:00:00 2001 From: nadijagraca Date: Wed, 13 Nov 2024 20:03:31 +0100 Subject: [PATCH 02/11] css fixes --- ..._200250_nadija_ratkusic_graca_css_fixes.md | 48 +++++++++++++++++++ vizro-ai/examples/dashboard_ui/app.py | 31 ++++-------- .../dashboard_ui/assets/custom_css.css | 47 ++++++++++++------ 3 files changed, 88 insertions(+), 38 deletions(-) create mode 100644 vizro-ai/changelog.d/20241113_200250_nadija_ratkusic_graca_css_fixes.md diff --git a/vizro-ai/changelog.d/20241113_200250_nadija_ratkusic_graca_css_fixes.md b/vizro-ai/changelog.d/20241113_200250_nadija_ratkusic_graca_css_fixes.md new file mode 100644 index 000000000..f1f65e73c --- /dev/null +++ b/vizro-ai/changelog.d/20241113_200250_nadija_ratkusic_graca_css_fixes.md @@ -0,0 +1,48 @@ + + + + + + + + + diff --git a/vizro-ai/examples/dashboard_ui/app.py b/vizro-ai/examples/dashboard_ui/app.py index 43c9bcc61..63b79c697 100644 --- a/vizro-ai/examples/dashboard_ui/app.py +++ b/vizro-ai/examples/dashboard_ui/app.py @@ -79,15 +79,9 @@ title="Vizro-AI - create interactive charts with Plotly and Vizro", layout=vm.Layout( grid=[ - [4, 4, 4, 4], - [4, 4, 4, 4], - [2, 2, 1, 1], - [2, 2, 1, 1], - [2, 2, 1, 1], - [3, 3, 1, 1], - [3, 3, 1, 1], - [3, 3, 1, 1], - [3, 3, 1, 1], + *[[4, 4, 4, 4]] * 2, + *[[2, 2, 1, 1]] * 3, + *[[3, 3, 1, 1]] * 4, *[[0, 0, 1, 1]] * 10, ] ), @@ -123,7 +117,6 @@ [0], ], row_gap="0px", - # row_min_height="40px", ), components=[ UserUpload( @@ -158,7 +151,7 @@ [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=[ @@ -305,21 +298,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() diff --git a/vizro-ai/examples/dashboard_ui/assets/custom_css.css b/vizro-ai/examples/dashboard_ui/assets/custom_css.css index fc999abaf..989f1ab0d 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); - min-height: 13.5vh; + min-height: 14vh; padding: 8px; width: 100%; } @@ -46,7 +46,7 @@ background: var(--surfaces-bg-card); font-family: monospace; height: 100%; - max-height: 470px; + max-height: 44vh; overflow: auto; padding: 1rem; position: relative; @@ -146,18 +146,6 @@ justify-content: center; } -.anchor-container { - background: #060a17; - bottom: 0; - display: flex; - font-weight: 600; - gap: 2rem; - padding: 4px; - place-content: baseline center; - position: fixed; - width: 100%; -} - .toggle-div { display: flex; flex-direction: row; @@ -190,17 +178,20 @@ .btn-primary:enabled:has(#dropdown-menu-icon) { background-color: inherit; color: var(--text-active); + font-size: 1.5rem; } .btn-primary:disabled:has(#dropdown-menu-icon) { background-color: inherit; color: var(--text-active); + font-size: 1.5rem; } .download-button { background-color: inherit; color: var(--text-active); width: 100%; + font-size: 1.5rem; } #modal-table-icon { @@ -273,7 +264,8 @@ display: flex; flex-direction: row; justify-content: center; - width: 100%; + padding-left: 4px; + min-width: 130px; } #custom-header-div { @@ -315,3 +307,28 @@ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); transform: translateY(-2px); } + +.anchor-container { + align-items: center; + background: var(--text-primary); + border-top-left-radius: 8px; + bottom: 0; + color: var(--text-contrast-primary); + display: flex; + font-size: 0.8rem; + font-weight: 500; + height: 24px; + padding: 0 12px; + position: fixed; + right: 0; +} + +.anchor-container:focus, +.anchor-container:hover { + background: var(--text-secondary); + color: var(--text-contrast-primary); +} + +img#banner { + height: 16px; +} From 6a311d58fdb4a6bd4ebda1dfd54a6d38a1d436d0 Mon Sep 17 00:00:00 2001 From: nadijagraca Date: Thu, 14 Nov 2024 12:10:33 +0100 Subject: [PATCH 03/11] remove unnecessary ids --- vizro-ai/examples/dashboard_ui/app.py | 38 +++++++++---------- .../dashboard_ui/assets/custom_css.css | 16 ++++---- vizro-ai/examples/dashboard_ui/components.py | 10 ++--- 3 files changed, 32 insertions(+), 32 deletions(-) diff --git a/vizro-ai/examples/dashboard_ui/app.py b/vizro-ai/examples/dashboard_ui/app.py index 63b79c697..59c27e0a2 100644 --- a/vizro-ai/examples/dashboard_ui/app.py +++ b/vizro-ai/examples/dashboard_ui/app.py @@ -88,7 +88,7 @@ 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]], row_gap="12px", @@ -104,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"), ], ), @@ -125,16 +125,16 @@ vm.Action( function=data_upload_action(), inputs=["data-upload-components.contents", "data-upload-components.filename"], - outputs=["data-store-id.data", "modal-table-icon.style", "modal-table-tooltip.style"], + 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"], ), ], @@ -156,33 +156,33 @@ ), 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" + 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"), ], ), @@ -202,7 +202,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): @@ -231,7 +231,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.""" @@ -249,7 +249,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.""" @@ -263,7 +263,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): @@ -287,7 +287,7 @@ def download_fig(n_clicks_html, n_clicks_json, data): @callback( - [Output("model-dropdown-id", "options"), Output("model-dropdown-id", "value")], Input("settings-dropdown", "value") + [Output("model-dropdown", "options"), Output("model-dropdown", "value")], Input("settings-dropdown", "value") ) def update_model_dropdown(value): """Callback for updating available models.""" diff --git a/vizro-ai/examples/dashboard_ui/assets/custom_css.css b/vizro-ai/examples/dashboard_ui/assets/custom_css.css index 989f1ab0d..d6069936d 100644 --- a/vizro-ai/examples/dashboard_ui/assets/custom_css.css +++ b/vizro-ai/examples/dashboard_ui/assets/custom_css.css @@ -22,7 +22,7 @@ outline-width: 0; } -#text-area-id { +#text-area { background-color: inherit; border: 1px solid var(--border-subtle-alpha-01); color: var(--text-primary); @@ -66,7 +66,7 @@ font-size: 12px; } -#model-dropdown-id .Select-menu-outer { +#model-dropdown .Select-menu-outer { font-size: 12px; /* top: 0; */ @@ -74,12 +74,12 @@ /* transform: translateY(3px) translateY(-100%); */ } -#model-dropdow-idn .dash-dropdown { +#model-dropdow .dash-dropdown { background-color: inherit; font-size: 12px; } -#trigger-button-id { +#trigger-button { width: 100%; } @@ -87,7 +87,7 @@ background-color: inherit; } -#model-dropdown-id .Select-clear { +#model-dropdown .Select-clear { display: none; } @@ -95,7 +95,7 @@ width: 50%; } -.card:has(#upload-message-id) { +.card:has(#upload-message) { background-color: inherit; box-shadow: none; font-size: 12px; @@ -257,7 +257,7 @@ padding-top: 4px; } -#dropdown-menu-id { +#dropdown-menu { align-items: center; border: 0.5px solid gray; border-radius: 8px; @@ -294,7 +294,7 @@ color: var(--text-secondary); } -#open-settings-id:hover { +#open-settings:hover { cursor: pointer; } diff --git a/vizro-ai/examples/dashboard_ui/components.py b/vizro-ai/examples/dashboard_ui/components.py index 1e8397b3f..c4c7e9fc1 100644 --- a/vizro-ai/examples/dashboard_ui/components.py +++ b/vizro-ai/examples/dashboard_ui/components.py @@ -293,8 +293,8 @@ class CustomDashboard(vm.Dashboard): def build(self): """Returns custom dashboard.""" dashboard_build_obj = super().build() - dashboard_build_obj.children.append(dcc.Store(id="data-store-id", storage_type="session")) - dashboard_build_obj.children.append(dcc.Store(id="code-output-store-id", storage_type="session")) + dashboard_build_obj.children.append(dcc.Store(id="data-store", storage_type="session")) + dashboard_build_obj.children.append(dcc.Store(id="code-output-store", storage_type="session")) return dashboard_build_obj @@ -340,7 +340,7 @@ def custom_table(data_frame): id="modal-table-tooltip", ), html.P( - id="upload-message-id", children=["Upload your data file (csv or excel)"], style={"paddingTop": "10px"} + id="upload-message", children=["Upload your data file (csv or excel)"], style={"paddingTop": "10px"} ), dbc.Modal( id="data-modal", @@ -415,8 +415,8 @@ def build(self): ) icon = html.Div( children=[ - html.Span("settings", className="material-symbols-outlined", id="open-settings-id"), - dbc.Tooltip("Settings", target="open-settings-id"), + html.Span("settings", className="material-symbols-outlined", id="open-settings"), + dbc.Tooltip("Settings", target="open-settings"), ], className="settings-div", ) From 5706a261e3803fae6e4e07a975c464e4906a2042 Mon Sep 17 00:00:00 2001 From: nadijagraca Date: Thu, 14 Nov 2024 13:00:09 +0100 Subject: [PATCH 04/11] wrapping clipboard in loading component --- vizro-ai/examples/dashboard_ui/app.py | 2 +- vizro-ai/examples/dashboard_ui/assets/custom_css.css | 3 +-- vizro-ai/examples/dashboard_ui/components.py | 9 +++++++-- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/vizro-ai/examples/dashboard_ui/app.py b/vizro-ai/examples/dashboard_ui/app.py index 59c27e0a2..0a9706449 100644 --- a/vizro-ai/examples/dashboard_ui/app.py +++ b/vizro-ai/examples/dashboard_ui/app.py @@ -124,7 +124,7 @@ actions=[ vm.Action( function=data_upload_action(), - inputs=["data-upload-components.contents", "data-upload-components.filename"], + inputs=["data-upload-component.contents", "data-upload-component.filename"], outputs=["data-store.data", "modal-table-icon.style", "modal-table-tooltip.style"], ), vm.Action( diff --git a/vizro-ai/examples/dashboard_ui/assets/custom_css.css b/vizro-ai/examples/dashboard_ui/assets/custom_css.css index d6069936d..cd43085e1 100644 --- a/vizro-ai/examples/dashboard_ui/assets/custom_css.css +++ b/vizro-ai/examples/dashboard_ui/assets/custom_css.css @@ -191,7 +191,6 @@ background-color: inherit; color: var(--text-active); width: 100%; - font-size: 1.5rem; } #modal-table-icon { @@ -257,7 +256,7 @@ padding-top: 4px; } -#dropdown-menu { +#dropdown-menu-div { align-items: center; border: 0.5px solid gray; border-radius: 8px; diff --git a/vizro-ai/examples/dashboard_ui/components.py b/vizro-ai/examples/dashboard_ui/components.py index c4c7e9fc1..96c7aaf33 100644 --- a/vizro-ai/examples/dashboard_ui/components.py +++ b/vizro-ai/examples/dashboard_ui/components.py @@ -89,12 +89,17 @@ def build(self): markdown_code = "\n".join(["```python", code, "```"]) - return html.Div( + return dcc.Loading( + html.Div( [ dcc.Clipboard(target_id=f"{self.id}-code-markdown", className="code-clipboard"), dcc.Markdown(markdown_code, id=f"{self.id}-code-markdown"), ], className="code-clipboard-container", + ), + color="grey", + parent_className="loading-container", + overlay_style={"visibility": "visible", "opacity": 0.3}, ) @@ -395,7 +400,7 @@ def build(self): target="dropdown-menu-icon", ), ], - id="dropdown-menu-id", + id="dropdown-menu-div", ) return download_div From ae3992deaf4d50f7d35d5bc818e22f5e5cf55ee6 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Thu, 14 Nov 2024 14:04:17 +0000 Subject: [PATCH 05/11] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- vizro-ai/examples/dashboard_ui/app.py | 8 ++------ vizro-ai/examples/dashboard_ui/assets/custom_css.css | 2 +- vizro-ai/examples/dashboard_ui/components.py | 10 +++++----- 3 files changed, 8 insertions(+), 12 deletions(-) diff --git a/vizro-ai/examples/dashboard_ui/app.py b/vizro-ai/examples/dashboard_ui/app.py index 0a9706449..6840c01b1 100644 --- a/vizro-ai/examples/dashboard_ui/app.py +++ b/vizro-ai/examples/dashboard_ui/app.py @@ -174,9 +174,7 @@ ), ], ), - MyDropdown( - options=SUPPORTED_MODELS["OpenAI"], value="gpt-4o-mini", multi=False, id="model-dropdown" - ), + MyDropdown(options=SUPPORTED_MODELS["OpenAI"], value="gpt-4o-mini", multi=False, id="model-dropdown"), OffCanvas( id="settings", options=["OpenAI", "Anthropic", "Mistral", "xAI"], @@ -286,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", "options"), Output("model-dropdown", "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] diff --git a/vizro-ai/examples/dashboard_ui/assets/custom_css.css b/vizro-ai/examples/dashboard_ui/assets/custom_css.css index cd43085e1..561dd45b9 100644 --- a/vizro-ai/examples/dashboard_ui/assets/custom_css.css +++ b/vizro-ai/examples/dashboard_ui/assets/custom_css.css @@ -263,8 +263,8 @@ display: flex; flex-direction: row; justify-content: center; - padding-left: 4px; min-width: 130px; + padding-left: 4px; } #custom-header-div { diff --git a/vizro-ai/examples/dashboard_ui/components.py b/vizro-ai/examples/dashboard_ui/components.py index 96c7aaf33..da96d5e2b 100644 --- a/vizro-ai/examples/dashboard_ui/components.py +++ b/vizro-ai/examples/dashboard_ui/components.py @@ -91,11 +91,11 @@ def build(self): return dcc.Loading( html.Div( - [ - dcc.Clipboard(target_id=f"{self.id}-code-markdown", className="code-clipboard"), - dcc.Markdown(markdown_code, id=f"{self.id}-code-markdown"), - ], - className="code-clipboard-container", + [ + dcc.Clipboard(target_id=f"{self.id}-code-markdown", className="code-clipboard"), + dcc.Markdown(markdown_code, id=f"{self.id}-code-markdown"), + ], + className="code-clipboard-container", ), color="grey", parent_className="loading-container", From 42a62dd513f395d6fa6d3eb10523eac9d214e768 Mon Sep 17 00:00:00 2001 From: Li Nguyen <90609403+huong-li-nguyen@users.noreply.github.com> Date: Thu, 14 Nov 2024 14:47:57 +0100 Subject: [PATCH 06/11] [Demo] Fix diverging stacked bar in ViViVo (#864) Co-authored-by: Antony Milne <49395058+antonymilne@users.noreply.github.com> --- vizro-core/examples/visual-vocabulary/custom_charts.py | 10 ++++++++-- .../pages/examples/diverging_stacked_bar.py | 10 +++++++--- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/vizro-core/examples/visual-vocabulary/custom_charts.py b/vizro-core/examples/visual-vocabulary/custom_charts.py index 7e1f26948..ea7b41d63 100644 --- a/vizro-core/examples/visual-vocabulary/custom_charts.py +++ b/vizro-core/examples/visual-vocabulary/custom_charts.py @@ -290,12 +290,18 @@ def diverging_stacked_bar(data_frame: pd.DataFrame, **kwargs) -> go.Figure: orientation = fig.data[0].orientation x_or_y = "x" if orientation == "h" else "y" - for trace_idx in range(len(fig.data) // 2): + for trace_idx in range(len(fig.data) // 2, len(fig.data)): fig.update_traces({f"{x_or_y}axis": f"{x_or_y}2"}, selector=trace_idx) + # Add ticksuffix and range limitations on both sids for correct interpretation of diverging stacked bar + # with percentage data + fig.update_layout({f"{x_or_y}axis": {"ticksuffix": "%"}}) fig.update_layout({f"{x_or_y}axis2": fig.layout[f"{x_or_y}axis"]}) fig.update_layout( - {f"{x_or_y}axis": {"autorange": "reversed", "domain": [0, 0.5]}, f"{x_or_y}axis2": {"domain": [0.5, 1]}} + { + f"{x_or_y}axis": {"domain": [0, 0.5], "range": [100, 0]}, + f"{x_or_y}axis2": {"domain": [0.5, 1], "range": [0, 100]}, + } ) if orientation == "h": diff --git a/vizro-core/examples/visual-vocabulary/pages/examples/diverging_stacked_bar.py b/vizro-core/examples/visual-vocabulary/pages/examples/diverging_stacked_bar.py index ae08c6629..e6ab63c0a 100644 --- a/vizro-core/examples/visual-vocabulary/pages/examples/diverging_stacked_bar.py +++ b/vizro-core/examples/visual-vocabulary/pages/examples/diverging_stacked_bar.py @@ -24,12 +24,16 @@ def diverging_stacked_bar(data_frame: pd.DataFrame, **kwargs) -> go.Figure: orientation = fig.data[0].orientation x_or_y = "x" if orientation == "h" else "y" - for trace_idx in range(len(fig.data) // 2): + for trace_idx in range(len(fig.data) // 2, len(fig.data)): fig.update_traces({f"{x_or_y}axis": f"{x_or_y}2"}, selector=trace_idx) + fig.update_layout({f"{x_or_y}axis": {"ticksuffix": "%"}}) fig.update_layout({f"{x_or_y}axis2": fig.layout[f"{x_or_y}axis"]}) fig.update_layout( - {f"{x_or_y}axis": {"autorange": "reversed", "domain": [0, 0.5]}, f"{x_or_y}axis2": {"domain": [0.5, 1]}} + { + f"{x_or_y}axis": {"domain": [0, 0.5], "range": [100, 0]}, + f"{x_or_y}axis2": {"domain": [0.5, 1], "range": [0, 100]}, + } ) if orientation == "h": @@ -63,6 +67,6 @@ def diverging_stacked_bar(data_frame: pd.DataFrame, **kwargs) -> go.Figure: data_frame=pastries, x=["Strongly Disagree", "Disagree", "Agree", "Strongly Agree"], y="pastry", - labels={"value": "Response count", "variable": "Opinion"}, + labels={"value": "", "variable": "", "pastry": ""}, title="I would recommend this pastry to my friends", ) From f277c811d4fcc1b24c4c5f9423c3d5627c1d9c7d Mon Sep 17 00:00:00 2001 From: nadijagraca Date: Fri, 15 Nov 2024 10:01:17 +0100 Subject: [PATCH 07/11] minor changes --- vizro-ai/examples/dashboard_ui/app.py | 2 +- .../dashboard_ui/assets/custom_css.css | 7 ++++++ vizro-ai/examples/dashboard_ui/components.py | 25 +++++++++++-------- 3 files changed, 22 insertions(+), 12 deletions(-) diff --git a/vizro-ai/examples/dashboard_ui/app.py b/vizro-ai/examples/dashboard_ui/app.py index 6840c01b1..bd73379e4 100644 --- a/vizro-ai/examples/dashboard_ui/app.py +++ b/vizro-ai/examples/dashboard_ui/app.py @@ -90,7 +90,7 @@ title="", 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", ), diff --git a/vizro-ai/examples/dashboard_ui/assets/custom_css.css b/vizro-ai/examples/dashboard_ui/assets/custom_css.css index 561dd45b9..6d0afaa45 100644 --- a/vizro-ai/examples/dashboard_ui/assets/custom_css.css +++ b/vizro-ai/examples/dashboard_ui/assets/custom_css.css @@ -331,3 +331,10 @@ img#banner { height: 16px; } + +.dropdown-menu-outer-div { + width: 100%; + display: flex; + justify-content: end; + align-items: end; +} diff --git a/vizro-ai/examples/dashboard_ui/components.py b/vizro-ai/examples/dashboard_ui/components.py index da96d5e2b..854d809dc 100644 --- a/vizro-ai/examples/dashboard_ui/components.py +++ b/vizro-ai/examples/dashboard_ui/components.py @@ -391,17 +391,20 @@ def build(self): toggleClassName="dropdown-menu-toggle-class", ) download_div = html.Div( - children=[ - html.Span("download", className="material-symbols-outlined", id=f"{self.id}-icon"), - dropdown_menu, - dbc.Tooltip( - "Download this plot to your device as a plotly JSON or interactive HTML file " - "for easy sharing or future use.", - target="dropdown-menu-icon", - ), - ], - id="dropdown-menu-div", - ) + html.Div( + children=[ + html.Span("download", className="material-symbols-outlined", id=f"{self.id}-icon"), + dropdown_menu, + dbc.Tooltip( + "Download this plot to your device as a plotly JSON or interactive HTML file " + "for easy sharing or future use.", + target="dropdown-menu-icon", + ), + ], + id="dropdown-menu-div", + ), + className="dropdown-menu-outer-div", + ) return download_div From 08286751304ce618586caf56a2b8abcd10e9bdd5 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Fri, 15 Nov 2024 09:03:12 +0000 Subject: [PATCH 08/11] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- .../dashboard_ui/assets/custom_css.css | 4 +-- vizro-ai/examples/dashboard_ui/components.py | 26 +++++++++---------- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/vizro-ai/examples/dashboard_ui/assets/custom_css.css b/vizro-ai/examples/dashboard_ui/assets/custom_css.css index 6d0afaa45..2b6c9d01f 100644 --- a/vizro-ai/examples/dashboard_ui/assets/custom_css.css +++ b/vizro-ai/examples/dashboard_ui/assets/custom_css.css @@ -333,8 +333,8 @@ img#banner { } .dropdown-menu-outer-div { - width: 100%; + align-items: end; display: flex; justify-content: end; - align-items: end; + width: 100%; } diff --git a/vizro-ai/examples/dashboard_ui/components.py b/vizro-ai/examples/dashboard_ui/components.py index 854d809dc..f9b1f2b0f 100644 --- a/vizro-ai/examples/dashboard_ui/components.py +++ b/vizro-ai/examples/dashboard_ui/components.py @@ -391,20 +391,20 @@ def build(self): toggleClassName="dropdown-menu-toggle-class", ) download_div = html.Div( - html.Div( - children=[ - html.Span("download", className="material-symbols-outlined", id=f"{self.id}-icon"), - dropdown_menu, - dbc.Tooltip( - "Download this plot to your device as a plotly JSON or interactive HTML file " - "for easy sharing or future use.", - target="dropdown-menu-icon", - ), - ], - id="dropdown-menu-div", + html.Div( + children=[ + html.Span("download", className="material-symbols-outlined", id=f"{self.id}-icon"), + dropdown_menu, + dbc.Tooltip( + "Download this plot to your device as a plotly JSON or interactive HTML file " + "for easy sharing or future use.", + target="dropdown-menu-icon", ), - className="dropdown-menu-outer-div", - ) + ], + id="dropdown-menu-div", + ), + className="dropdown-menu-outer-div", + ) return download_div From c8c46c60b6e3bd55c9a3469aa486507744fa63c9 Mon Sep 17 00:00:00 2001 From: nadijagraca Date: Fri, 15 Nov 2024 15:55:02 +0100 Subject: [PATCH 09/11] implement flex container --- vizro-ai/examples/dashboard_ui/app.py | 188 ++++++++---------- .../dashboard_ui/assets/custom_css.css | 28 ++- vizro-ai/examples/dashboard_ui/components.py | 13 ++ 3 files changed, 126 insertions(+), 103 deletions(-) diff --git a/vizro-ai/examples/dashboard_ui/app.py b/vizro-ai/examples/dashboard_ui/app.py index bd73379e4..38dc6099d 100644 --- a/vizro-ai/examples/dashboard_ui/app.py +++ b/vizro-ai/examples/dashboard_ui/app.py @@ -24,6 +24,7 @@ UserPromptTextArea, UserUpload, custom_table, + FlexContainer ) from dash import Input, Output, State, callback, ctx, dcc, get_asset_url, html from vizro import Vizro @@ -47,14 +48,10 @@ vm.Container.add_type("components", ToggleSwitch) vm.Container.add_type("components", UserPromptTextArea) vm.Container.add_type("components", DropdownMenu) -vm.Container.add_type("components", HeaderComponent) +vm.Page.add_type("components", HeaderComponent) +vm.Page.add_type("components", FlexContainer) -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) -vm.Page.add_type("components", Modal) +FlexContainer.add_type("components", DropdownMenu) SUPPORTED_MODELS = { @@ -79,114 +76,101 @@ title="Vizro-AI - create interactive charts with Plotly and Vizro", layout=vm.Layout( grid=[ - *[[4, 4, 4, 4]] * 2, - *[[2, 2, 1, 1]] * 3, - *[[3, 3, 1, 1]] * 4, - *[[0, 0, 1, 1]] * 10, + *[[0, 0, 0, 0]] * 1, + *[[1, 1, 2, 2]] * 11, ] ), components=[ - vm.Container( - title="", - components=[CodeClipboard(id="plot"), ToggleSwitch()], - layout=vm.Layout( - grid=[*[[0]] * 7, [1]], - row_gap="12px", - col_gap="12px", - ), - ), - vm.Container( - title="", - layout=vm.Layout( - grid=[ - *[[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]] * 10, - [-1, -1, -1, -1, -1, -1, -1, -1, -1, 1, 1], - ] - ), + HeaderComponent(), + FlexContainer( components=[ - vm.Graph(id="graph", figure=px.scatter(pd.DataFrame())), - DropdownMenu(id="dropdown-menu"), - ], - ), - vm.Container( - id="upload-data-container", - title="Turn your data into visuals — just upload, describe, and see your chart in action", - layout=vm.Layout( - grid=[ - [1], - [0], - ], - row_gap="0px", - ), - components=[ - UserUpload( - id="data-upload-component", - actions=[ - vm.Action( - function=data_upload_action(), - 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.data"], - outputs=["upload-message.children"], - ), - vm.Action( - function=update_table(), - inputs=["data-store.data"], - outputs=["modal-table.children", "modal-title.children"], + vm.Container( + id="upload-data-container", + title="Turn your data into visuals — just upload, describe, and see your chart in action", + layout=vm.Layout( + grid=[[0], [1]], + row_gap="0px", + ), + components=[ + vm.Figure(id="show-data-component", figure=custom_table(data_frame=pd.DataFrame())), + UserUpload( + id="data-upload-component", + actions=[ + vm.Action( + function=data_upload_action(), + 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.data"], + outputs=["upload-message.children"], + ), + vm.Action( + function=update_table(), + inputs=["data-store.data"], + outputs=["modal-table.children", "modal-title.children"], + ), + ], ), ], ), - vm.Figure(id="show-data-component", figure=custom_table(data_frame=pd.DataFrame())), - ], - ), - vm.Container( - title="", - layout=vm.Layout( - grid=[ - [3, 3, 3, 3, 3, 3, 3, 3, 3], - [3, 3, 3, 3, 3, 3, 3, 3, 3], - [3, 3, 3, 3, 3, 3, 3, 3, 3], - [2, -1, -1, -1, -1, 1, 1, 0, 0], - ], - row_gap="12px", - col_gap="4px", - ), - components=[ - vm.Button( - id="trigger-button", - text="Run Vizro-AI", - actions=[ - vm.Action( - function=run_vizro_ai(), - inputs=[ - "text-area.value", - "trigger-button.n_clicks", - "data-store.data", - "model-dropdown.value", - "settings-api-key.value", - "settings-api-base.value", - "settings-dropdown.value", + vm.Container( + title="", + layout=vm.Layout( + grid=[ + *[[0, 0, 0, 0, 0, 0, 0, 0, 0]] * 3, + [3, -1, -1, -1, -1, 1, 1, 2, 2], + ], + row_gap="12px", + col_gap="4px", + ), + components=[ + UserPromptTextArea(id="text-area"), + MyDropdown(options=SUPPORTED_MODELS["OpenAI"], value="gpt-4o-mini", multi=False, + id="model-dropdown"), + vm.Button( + id="trigger-button", + text="Run Vizro-AI", + actions=[ + vm.Action( + function=run_vizro_ai(), + inputs=[ + "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.figure", "code-output-store.data"], + ), ], - outputs=["plot-code-markdown.children", "graph.figure", "code-output-store.data"], + ), + OffCanvas( + id="settings", + options=["OpenAI", "Anthropic", "Mistral", "xAI"], + value="OpenAI", ), ], ), - MyDropdown(options=SUPPORTED_MODELS["OpenAI"], value="gpt-4o-mini", multi=False, id="model-dropdown"), - OffCanvas( - id="settings", - options=["OpenAI", "Anthropic", "Mistral", "xAI"], - value="OpenAI", + vm.Container( + title="", + components=[CodeClipboard(id="plot"), ToggleSwitch()], + layout=vm.Layout( + grid=[*[[0]] * 7, [1]], + row_gap="12px", + col_gap="12px", + ), ), - UserPromptTextArea(id="text-area"), - # Modal(id="modal"), - ], + ] ), - vm.Container( - title="", - components=[HeaderComponent()], + FlexContainer( + components=[ + vm.Graph(id="graph", figure=px.scatter(pd.DataFrame())), + DropdownMenu(id="dropdown-menu"), + ], ), ], ) diff --git a/vizro-ai/examples/dashboard_ui/assets/custom_css.css b/vizro-ai/examples/dashboard_ui/assets/custom_css.css index 2b6c9d01f..db806f3a2 100644 --- a/vizro-ai/examples/dashboard_ui/assets/custom_css.css +++ b/vizro-ai/examples/dashboard_ui/assets/custom_css.css @@ -46,7 +46,7 @@ background: var(--surfaces-bg-card); font-family: monospace; height: 100%; - max-height: 44vh; + max-height: 42vh; overflow: auto; padding: 1rem; position: relative; @@ -338,3 +338,29 @@ img#banner { justify-content: end; width: 100%; } + +.flex-container { + display: flex; + flex-wrap: wrap; + gap: 12px; + justify-content: flex-start; + flex-direction: column; + overflow: none; +} + +.flex-container h4 { + color: var(--text-secondary); + margin: 0; + padding-top: 12px; + text-align: center; +} + +.flex-container .code-clipboard-container { + height: 500px; + width: 100%; +} + + +.flex-container #graph { + height: 712px; +} \ No newline at end of file diff --git a/vizro-ai/examples/dashboard_ui/components.py b/vizro-ai/examples/dashboard_ui/components.py index f9b1f2b0f..3bb97a881 100644 --- a/vizro-ai/examples/dashboard_ui/components.py +++ b/vizro-ai/examples/dashboard_ui/components.py @@ -430,3 +430,16 @@ def build(self): ) return html.Div(children=[header, icon], className="custom_header") + + +class FlexContainer(vm.Container): + """Custom flex `Container`.""" + + type: Literal["flex_container"] = "flex_container" + title: str = None # Title exists in vm.Container but we don't want to use it here. + + def build(self): + """Returns a flex container.""" + return html.Div( + id=self.id, children=[component.build() for component in self.components], className="flex-container" + ) From bc36522ec2d7d2eda5f35a7ee93bb7b249c76642 Mon Sep 17 00:00:00 2001 From: nadijagraca Date: Fri, 15 Nov 2024 16:03:35 +0100 Subject: [PATCH 10/11] minor fixes --- .../dashboard_ui/assets/custom_css.css | 2 ++ vizro-ai/examples/dashboard_ui/components.py | 26 ++++++++----------- 2 files changed, 13 insertions(+), 15 deletions(-) diff --git a/vizro-ai/examples/dashboard_ui/assets/custom_css.css b/vizro-ai/examples/dashboard_ui/assets/custom_css.css index db806f3a2..c21fd7406 100644 --- a/vizro-ai/examples/dashboard_ui/assets/custom_css.css +++ b/vizro-ai/examples/dashboard_ui/assets/custom_css.css @@ -265,6 +265,8 @@ justify-content: center; min-width: 130px; padding-left: 4px; + width: 130px; + align-self: flex-end; } #custom-header-div { diff --git a/vizro-ai/examples/dashboard_ui/components.py b/vizro-ai/examples/dashboard_ui/components.py index 3bb97a881..34f9ed2ef 100644 --- a/vizro-ai/examples/dashboard_ui/components.py +++ b/vizro-ai/examples/dashboard_ui/components.py @@ -391,21 +391,17 @@ def build(self): toggleClassName="dropdown-menu-toggle-class", ) download_div = html.Div( - html.Div( - children=[ - html.Span("download", className="material-symbols-outlined", id=f"{self.id}-icon"), - dropdown_menu, - dbc.Tooltip( - "Download this plot to your device as a plotly JSON or interactive HTML file " - "for easy sharing or future use.", - target="dropdown-menu-icon", - ), - ], - id="dropdown-menu-div", - ), - className="dropdown-menu-outer-div", - ) - + children=[ + html.Span("download", className="material-symbols-outlined", id=f"{self.id}-icon"), + dropdown_menu, + dbc.Tooltip( + "Download this plot to your device as a plotly JSON or interactive HTML file " + "for easy sharing or future use.", + target="dropdown-menu-div", + ), + ], + id="dropdown-menu-div", + ) return download_div From f88435ddb17f08f47693e7828aa589f12d506ba8 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Fri, 15 Nov 2024 15:07:17 +0000 Subject: [PATCH 11/11] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- vizro-ai/examples/dashboard_ui/app.py | 7 +++--- .../dashboard_ui/assets/custom_css.css | 8 +++---- vizro-ai/examples/dashboard_ui/components.py | 22 +++++++++---------- 3 files changed, 18 insertions(+), 19 deletions(-) diff --git a/vizro-ai/examples/dashboard_ui/app.py b/vizro-ai/examples/dashboard_ui/app.py index 38dc6099d..aa4f27a2b 100644 --- a/vizro-ai/examples/dashboard_ui/app.py +++ b/vizro-ai/examples/dashboard_ui/app.py @@ -15,6 +15,7 @@ CodeClipboard, CustomDashboard, DropdownMenu, + FlexContainer, HeaderComponent, Icon, Modal, @@ -24,7 +25,6 @@ UserPromptTextArea, UserUpload, custom_table, - FlexContainer ) from dash import Input, Output, State, callback, ctx, dcc, get_asset_url, html from vizro import Vizro @@ -127,8 +127,9 @@ ), components=[ UserPromptTextArea(id="text-area"), - MyDropdown(options=SUPPORTED_MODELS["OpenAI"], value="gpt-4o-mini", multi=False, - id="model-dropdown"), + MyDropdown( + options=SUPPORTED_MODELS["OpenAI"], value="gpt-4o-mini", multi=False, id="model-dropdown" + ), vm.Button( id="trigger-button", text="Run Vizro-AI", diff --git a/vizro-ai/examples/dashboard_ui/assets/custom_css.css b/vizro-ai/examples/dashboard_ui/assets/custom_css.css index c21fd7406..0eb9a42a0 100644 --- a/vizro-ai/examples/dashboard_ui/assets/custom_css.css +++ b/vizro-ai/examples/dashboard_ui/assets/custom_css.css @@ -258,6 +258,7 @@ #dropdown-menu-div { align-items: center; + align-self: flex-end; border: 0.5px solid gray; border-radius: 8px; display: flex; @@ -266,7 +267,6 @@ min-width: 130px; padding-left: 4px; width: 130px; - align-self: flex-end; } #custom-header-div { @@ -343,10 +343,9 @@ img#banner { .flex-container { display: flex; - flex-wrap: wrap; + flex-flow: column wrap; gap: 12px; justify-content: flex-start; - flex-direction: column; overflow: none; } @@ -362,7 +361,6 @@ img#banner { width: 100%; } - .flex-container #graph { height: 712px; -} \ No newline at end of file +} diff --git a/vizro-ai/examples/dashboard_ui/components.py b/vizro-ai/examples/dashboard_ui/components.py index 34f9ed2ef..793f27dcc 100644 --- a/vizro-ai/examples/dashboard_ui/components.py +++ b/vizro-ai/examples/dashboard_ui/components.py @@ -391,17 +391,17 @@ def build(self): toggleClassName="dropdown-menu-toggle-class", ) download_div = html.Div( - children=[ - html.Span("download", className="material-symbols-outlined", id=f"{self.id}-icon"), - dropdown_menu, - dbc.Tooltip( - "Download this plot to your device as a plotly JSON or interactive HTML file " - "for easy sharing or future use.", - target="dropdown-menu-div", - ), - ], - id="dropdown-menu-div", - ) + children=[ + html.Span("download", className="material-symbols-outlined", id=f"{self.id}-icon"), + dropdown_menu, + dbc.Tooltip( + "Download this plot to your device as a plotly JSON or interactive HTML file " + "for easy sharing or future use.", + target="dropdown-menu-div", + ), + ], + id="dropdown-menu-div", + ) return download_div