Pattern-matching callbacks: can you combine MATCH and ALL?

Dash Python
1

My app has a callback that generates one or more divs each containing 4 buttons and 1 graph which figure is generated by another callback which will use pattern matching and have those buttons as input. (It’s a graph block with button-switchable x axis)

I think I need to combine MATCH and ALL. MATCH to figure out which graph will have its figure updated (‘graph-id’: MATCH), and ALL to update the class of all the buttons for that graph to represent which is “active” (which is literally the button className). If I don’t use MATCH I may end up updating buttons for other graphs blocks that may be on the page.

Is that possible considering MATCH deals with single values?

Also I’m not quite certain if “MATCH” in an Input can MATCH 4 button inputs or if it expects to only match 1.

EDIT/PS: It seems that it works! I’ll share parts of the code if that’s of any interest.

@app.callback(
    [
        Output({'type': 'interactive-graph', 'graph-id': MATCH}, 'figure'),
        Output({'type': 'interactive-graph-title', 'graph-id': MATCH}, 'children'),
        Output({'type': 'interactive-graph-switch', 'graph-id': MATCH, 'key': ALL}, 'className')
    ],
    [
        Input({'type': 'interactive-graph-switch', 'graph-id': MATCH, 'key': ALL}, 'n_clicks')
    ],
    [
        State({'type': 'interactive-graph-store', 'graph-id': MATCH}, 'data')
    ]
)
def update_interactive_graph_figure(clicks, data):
    if dash.callback_context.triggered:
        #DO STUFF
        # it defines variables 'figure', 'title' and a dict of button classes 'btn_class[]'
        return [figure, title, [btn_class[0], btn_class[1], btn_class[2], btn_class[3]]]
    else:
        return [no_update, no_update, [no_update, no_update, no_update, no_update]]
2

I think I resolved it, it worked with two graph blocks and the button groups changed class independently. The difficulties I encountered were not caused by a limitation and the answer must be yes: you can combine MATCH and ALL :slight_smile:

Edited original post.

2 Likes
3

Heeey bro, It’s an amaaazing solution… I’m needing something similar to it and I can’t find it in any other place and thankfully I found this post.

Could you provide information about the buttons/divs you used in the structure of the app that the callbacks deal with?

I didn’t understand the part of the ids in the whole context.

Thank you very much in advance.

4

have you found the solution?