petar-qb
commented
1 month ago Hi @BalaNagendraReddy and thanks for the great question. 🚀
Triggering custom actions when the page is loaded, natively through the Vizro configuration, is currently unavailable feature and will be available once this PR become merged. As it doesn't look like this PR is going to be merged soon, I'm posting two Vizro examples on how this already could be achieved (in less native Vizro way).
The first example solves the problem by utilising dash callbacks.
"""Dev app to try things out."""
from time import sleep
from dash import callback, Input, Output
from vizro import Vizro
import vizro.models as vm
MONGO_DB_FILES = ["file_1.csv", "file_2.csv", "file_3.csv", "file_4.csv"]
def extract_mongo_db_files():
print("Extracting files from database...")
sleep(2)
print(f"Files extracted:\n{MONGO_DB_FILES}")
return MONGO_DB_FILES
home_page = vm.Page(
title="Home Page",
components=[vm.Card(text="Go to the 'Mongo Files Page' to see the extracted files.")],
)
mongo_files_page = vm.Page(
title="Mongo Files Page",
path="path1/path2",
id="mongo_files_page_id",
components=[
vm.Card(
id="my_card_id",
text=""
),
],
)
@callback(
Output("my_card_id", "children"),
Input(f'on_page_load_action_trigger_{mongo_files_page.id}', "data"),
)
def update_my_card_id(data):
files = extract_mongo_db_files()
return f"Extracted files: {files}"
dashboard = vm.Dashboard(pages=[home_page, mongo_files_page])
if __name__ == "__main__":
Vizro().build(dashboard).run()The second example solves the same problem in fully native Vizro way.
Useful references:
- More about static/dynamic Vizro data you can find here.
- More about how to speed-up you Vizro app significantly if the dynamic data is used you can find here.
- More about custom figures and how to make any component to depend on the data that's loaded you can find here.
"""Dev app to try things out."""
import pandas as pd
from time import sleep
from dash import dcc
import dash_bootstrap_components as dbc
from vizro import Vizro
import vizro.models as vm
import vizro.plotly.express as px
from vizro.managers import data_manager
from vizro.models.types import capture
from vizro.tables import dash_ag_grid
MONGO_DB_FILES = ["file_1.csv", "file_2.csv", "file_3.csv", "file_4.csv"]
# TODO - DOCS: More about how to use Vizro cache to speed up your app -> https://vizro.readthedocs.io/en/stable/pages/user-guides/data/#configure-cache
def extract_mongo_db_files():
print("Extracting files from database...")
sleep(1)
print(f"Files extracted:\n{MONGO_DB_FILES}")
return pd.DataFrame({"files": MONGO_DB_FILES})
data_manager["my_data"] = extract_mongo_db_files
# TODO - DOCS: More about custom figures -> https://vizro.readthedocs.io/en/stable/pages/user-guides/custom-figures/
@capture("figure")
def my_responsive_card(data_frame, id, column):
return dbc.Card(
id=id,
children=f"Files extracted:\n{list(data_frame[column].values)}",
)
@capture("figure")
def my_responsive_dropdown(data_frame, id, column):
options = list(data_frame[column].values)
return dcc.Dropdown(
id=id,
options=options,
value=options[0] if options else None,
multi=False,
)
home_page = vm.Page(
title="Home Page",
components=[vm.Card(text="Go to the 'Mongo Files Page' to see the extracted files.")],
)
mongo_files_page = vm.Page(
title="Mongo Files Page",
path="path1/path2",
id="mongo_files_page_id",
components=[
vm.Figure(
figure=my_responsive_card(
data_frame="my_data",
id="my_card_id",
column="files",
)
),
vm.Figure(
figure=my_responsive_dropdown(
data_frame="my_data",
id="my_dropdown_id",
column="files",
)
),
vm.AgGrid(
id="my_ag_grid_id",
figure=dash_ag_grid(data_frame="my_data")
),
],
)
dashboard = vm.Dashboard(pages=[home_page, mongo_files_page])
if __name__ == "__main__":
Vizro().build(dashboard).run()
BalaNagendraReddy
Question
Hi Team,
I'm currently working on a multipage app using the vizro library and I need to implement a feature that extracts file names from MongoDB when a specific page is loaded. The goal is to dynamically load the page with all the extracted file names based on the output of a function.
Objective: I need to ensure that when the page is opened, the extract_files_from_db function is called, and the page content is dynamically updated with the file names extracted from MongoDB.
Challenges: I am not sure how to integrate the function with the page loading process or how to update the page content dynamically based on the result. Could you please provide guidance on how to:
Trigger the extract_files_from_db function when the page loads. Update the page content with the extracted file names.
Any assistance or examples on how to achieve this with the vizro library would be greatly appreciated.
Code/Examples
Package Version: vizro==0.1.18
Which package?
vizro
Code of Conduct