I’m trying to trigger a pattern-matching callback with a component that is not present in the original layout but added afterwards. This does not seem to work.
See the MWE hereinafter
import dash
from dash import dcc, html, Input, Output, State, clientside_callback, ALL
import plotly.graph_objects as go
app = dash.Dash(__name__)
app.layout = html.Div(
[
html.Button("Generate Figure", id="generate-btn", n_clicks=0),
html.Div(
id="graph-container",
children=[], # Initially empty
style={"display": "none"} # Initially hidden
),
]
)
@app.callback(
[
Output("graph-container", "children"),
Output("graph-container", "style"),
],
[Input("generate-btn", "n_clicks")],
prevent_initial_call=True,
)
def update_figures(n_clicks):
children = [
dcc.Graph(
id=dict(type="figure", id="prec-climate-daily"),
style={"height": "45vh"},
config={"responsive": True},
figure=go.Figure(
data=[go.Scatter(x=[0, 1, 2], y=[0, 1, 0], mode="lines")])
),
]
return children, {"display": "block"}
@app.callback(
Input(dict(type="figure", id=ALL), "figure"),
State(dict(type="figure", id=ALL), "id"),
)
def test(figure, id):
print("test")
if __name__ == "__main__":
app.run(debug=True)
The Graph
component with id=dict(type="figure", id="prec-climate-daily")
is not present in the layout when initializing the app, but is only added by the update_figures callback.
Unfortunately the callback test
is never triggered (nor I see any error in the Python or JS console).
I thought the advantage of pattern-matching callback was that one could use them to trigger also with dynamically created components, however it seems that the only way to trigger them is to have the Graph
object initially in the layout.