Skip to content

Commit

Permalink
[Demo] Adjust layout for smaller screensize (#876)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nadijagraca
nadijagraca authored Nov 18, 2024
1 parent c80b359 commit e34455e
Show file tree
Hide file tree
Showing 4 changed files with 250 additions and 168 deletions.
48 changes: 48 additions & 0 deletions vizro-ai/changelog.d/20241113_200250_nadija_ratkusic_graca_css_fixes.md
View file
Original file line number Diff line number Diff line change
@@ -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))
-->
223 changes: 96 additions & 127 deletions vizro-ai/examples/dashboard_ui/app.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
CodeClipboard,
CustomDashboard,
DropdownMenu,
FlexContainer,
HeaderComponent,
Icon,
Modal,
Expand Down Expand Up @@ -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 = {
Expand All @@ -79,120 +76,102 @@
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,
*[[0, 0, 0, 0]] * 1,
*[[1, 1, 2, 2]] * 11,
]
),
components=[
vm.Container(
title="",
components=[CodeClipboard(id="plot"), ToggleSwitch(id="toggle-id")],
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",
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],
]
),
components=[
vm.Graph(id="graph-id", 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",
# row_min_height="40px",
),
HeaderComponent(),
FlexContainer(
components=[
UserUpload(
id="data-upload-id",
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"],
),
vm.Action(
function=display_filename(),
inputs=["data-store-id.data"],
outputs=["upload-message-id.children"],
),
vm.Action(
function=update_table(),
inputs=["data-store-id.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="10px",
col_gap="4px",
),
components=[
vm.Button(
id="trigger-button-id",
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",
"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-id.figure", "code-output-store-id.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-id"
),
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-id"),
# Modal(id="modal"),
],
]
),
vm.Container(
title="",
components=[HeaderComponent()],
FlexContainer(
components=[
vm.Graph(id="graph", figure=px.scatter(pd.DataFrame())),
DropdownMenu(id="dropdown-menu"),
],
),
],
)
Expand All @@ -206,7 +185,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):
Expand Down Expand Up @@ -235,7 +214,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."""
Expand All @@ -253,7 +232,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."""
Expand All @@ -267,7 +246,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):
Expand All @@ -290,9 +269,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]
Expand All @@ -302,21 +279,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()
Loading

0 comments on commit e34455e

Please sign in to comment.