Last active
March 4, 2021 18:16
-
-
Save Abhilash-Chandran/ddf8edf6adfde5f40458621cbd057db2 to your computer and use it in GitHub Desktop.
A demo for dynamic call back in Dash plotly setting information on button id.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import typing as t | |
import numpy as np | |
import json | |
import dash_core_components as dcc | |
import dash_html_components as html | |
import dash_bootstrap_components as dbc | |
import dash.dependencies as ddd | |
import plotly.express as px | |
from dash import Dash, callback_context | |
# Common data for the plot | |
data = np.random.random((100,100)) | |
# A column of dcc.graph and buttons | |
def dash_build_content( | |
dataset_name: str, | |
analyses: t.List[str], | |
) -> dbc.Col: | |
col_elements = [] | |
for analysis in analyses: | |
plot_id = f"{dataset_name}~{analysis}~plot" | |
spinner_id = f"{dataset_name}~{analysis}~spinner" | |
col_elements.append( | |
dbc.Col([ | |
html.Div( | |
dbc.Spinner( | |
dcc.Graph( | |
id={ | |
"type": "analysis_result", | |
"plot_id": plot_id | |
}, | |
figure={ | |
} | |
), | |
id=spinner_id, | |
fullscreen=False | |
), | |
), | |
dbc.Row( | |
children=[ | |
dbc.Button( | |
"Run", | |
id={ | |
"type": "run_analysis_button", | |
"plot_id": plot_id | |
}, | |
color="success", | |
className="mr-1" | |
), | |
dbc.Label(f"Run {analysis} analysis for {dataset_name}"), | |
] | |
) | |
]) | |
) | |
return dbc.Col( | |
children=col_elements | |
) | |
# Method to do analysis | |
def do_analysis(analysis: str) -> np.ndarray: | |
if analysis == "mean": | |
return data.mean(axis=0) | |
elif analysis == "var": | |
return data.var(axis=0) | |
elif analysis == "std": | |
return data.std(axis=0) | |
else: | |
return data | |
# -------------------------------------------------------------- 01 | |
# Dash app | |
app = Dash( | |
__name__, | |
external_stylesheets=[dbc.themes.BOOTSTRAP], | |
) | |
# -------------------------------------------------------------- 02 | |
app.layout = html.Div(dash_build_content( | |
dataset_name="Dataset-1", | |
analyses=["mean", "std", "var"]) | |
) | |
# -------------------------------------------------------------- 03 | |
# Register analysis call backs | |
@app.callback( | |
ddd.Output( | |
{ | |
"type": "analysis_result", | |
"plot_id": ddd.MATCH | |
}, | |
'figure' | |
), | |
ddd.Input( | |
{ | |
"type": "run_analysis_button", | |
"plot_id": ddd.MATCH | |
}, | |
'n_clicks' | |
), | |
prevent_initial_call=True | |
) | |
def render_plot_div(n_clicks): | |
btn_id = callback_context.triggered[0]['prop_id'].split( | |
'.')[0] | |
print(btn_id) | |
plot_id = json.loads(btn_id)["plot_id"] | |
parent, analysis, _ = plot_id.split('~') | |
analysis_result = do_analysis(analysis) | |
ret_figure = px.line(y=analysis_result) | |
return ret_figure | |
app.run_server(debug=False) | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment