serverside_with_progress
32 lines
import time
import time
import plotly.express as px
import plotly.express as px
import diskcache
from dash import DiskcacheManager
from dash_extensions.enrich import DashProxy, Output, Input, State, Serverside, html, dcc, \
from dash_extensions.enrich import DashProxy, Output, Input, State, Serverside, html, dcc, \
ServersideOutputTransform
ServersideOutputTransform
app = DashProxy(transforms=[ServersideOutputTransform()])
cache = diskcache.Cache("./cache")
# Background callbacks require a cache manager
background_callback_manager = DiskcacheManager(cache)
app = DashProxy(transforms=[ServersideOutputTransform()], background_callback_manager=background_callback_manager)
app.layout = html.Div(
app.layout = html.Div(
[
[
html.Button("Query data", id="btn"),
html.Button("Query data", id="btn"),
dcc.Dropdown(id="dd"),
dcc.Dropdown(id="dd"),
html.P("0%", id="progress-component"),
dcc.Graph(id="graph"),
dcc.Graph(id="graph"),
dcc.Loading(dcc.Store(id="store"), fullscreen=True, type="dot"),
dcc.Store(id="store"),
]
]
)
)
@app.callback(Output("store", "data"), Input("btn", "n_clicks"), prevent_initial_call=True)
@app.callback(
def query_data(n_clicks):
Output("store", "data"),
time.sleep(3) # emulate slow database operation
Input("btn", "n_clicks"),
background=True,
progress=[
Output("progress-component", "children"),
],
prevent_initial_call=True
)
def query_data(set_progress, _):
total = 3
for i in range(total):
# Simulating a process step
time.sleep(1) # emulate slow database operation
set_progress([(i + 1) / total]) # Update progress using set_progress
return Serverside(px.data.gapminder()) # no JSON serialization here
return Serverside(px.data.gapminder()) # no JSON serialization here
@app.callback(Output("dd", "options"), Output("dd", "value"), Input("store", "data"), prevent_initial_call=True)
@app.callback(Output("dd", "options"), Output("dd", "value"), Input("store", "data"), prevent_initial_call=True)
def update_dd(df):
def update_dd(df):
options = [{"label": column, "value": column} for column in df["year"]] # no JSON de-serialization here
options = [{"label": column, "value": column} for column in df["year"]] # no JSON de-serialization here
return options, options[0]['value']
return options, options[0]['value']
@app.callback(Output("graph", "figure"), [Input("dd", "value"), State("store", "data")], prevent_initial_call=True)
@app.callback(Output("graph", "figure"), [Input("dd", "value"), State("store", "data")], prevent_initial_call=True)
def update_graph(value, df):
def update_graph(value, df):
df = df.query("year == {}".format(value)) # no JSON de-serialization here
df = df.query("year == {}".format(value)) # no JSON de-serialization here
return px.sunburst(df, path=["continent", "country"], values="pop", color="lifeExp", hover_data=["iso_alpha"])
return px.sunburst(df, path=["continent", "country"], values="pop", color="lifeExp", hover_data=["iso_alpha"])
if __name__ == "__main__":
if __name__ == "__main__":
app.run_server()
app.run_server()