I wanted to share another cool example of partial update and allow_duplicate=True
This example is from @jinnyzor amazing Dash Chart Editor component library. You can find the code for this app (and others using the Dash Chart Editor) in GitHub. You can also find more info in this post: Dash Chart Editor
This app includes updating details in cards created with pattern matching callbacks. There could be dozens of cards with figures in this app. Prior to Dash 2.9 if you wanted to update a figure or delete a card, all the cards would have to make the round trip between the client and server. Now you can target just the thing you want to change.
For example, this callback deletes one of the cards. The only data needed in the callback is which delete button was clicked and the id’s of all the cards in the layout. Then we patch the container with the cards to delete the selected card.
@app.callback(
Output("pattern-match-container", "children", allow_duplicate=True),
Input({"type": "dynamic-delete", "index": ALL}, "n_clicks"),
State({"type": "dynamic-card", "index": ALL}, "id"),
prevent_initial_call=True,
)
def remove_card(_, ids):
cards = Patch()
if ctx.triggered[0]["value"] > 0:
for i in range(len(ids)):
if ids[i]["index"] == ctx.triggered_id["index"]:
del cards[i]
return cards
return no_update
This callback saves the figure in the dcc.Graph in the card after it’s edited in the Dash Chart Editor component.
@app.callback(
Output("pattern-match-container", "children", allow_duplicate=True),
Input("editor", "figure"),
State("chartId", "value"),
State({"type": "dynamic-card", "index": ALL}, "id"),
prevent_initial_call=True,
)
def save_to_card(f, v, ids):
if f:
figs = Patch()
for i in range(len(ids)):
if ids[i]["index"] == v:
figs[i]["props"]["children"][1]["props"]["figure"] = f
return figs
return no_update
