How to setup and structure callbacks when two inputs modify a single graph?

Dash Python
1

Hi all :slight_smile:

I have the following setup. The user can click on an “Add” button which creates a new html.Div representing a new row with automatically incrementing id. Say, the initial row has a row id of 0 and with the n_clicks-count from the “Add” button I spawn new rows. Each row is additionally divided into two columns (html.Div) with currently the column index as their id. The first column has id 0, second 1. There is also one dcc.Graph with currently the same index as the row. So in the first row, the graph also has id 0. The idea is, whenever the select button in one of the columns is clicked, new data from that column (either the select itself) or any other component in this column can update the graph data in that row.

A visualization of the setup:

t1
t1921×393 3.51 KB

I tried setting up the callback for the select dropdowns with Pattern Matching Callbacks.

Like so:

@app.callback(
    Output({'type': 'graph', 'index': MATCH}, "options"),
    [Input({'type': 'select_dropdown', 'index': MATCH}, 'value')]
)
def update_graph_from_dropdown(value):

, but this doesn’t work as supposed, since:
{'type': 'select_dropdown', 'index': 0} and
{'type': 'select_dropdown', 'index': 1} should both together update the {'type': 'graph', 'index': 0}.

And likewise, if the user clicked on the “Add” button and added a new row, then the callbacks should also work for this row. So either the new column dropdowns also have an incrementing index: {'type': 'select_dropdown', 'index': 2}and {'type': 'select_dropdown', 'index': 3}.
Or would it be possible to extend the id dict to contain more keys to something like: {'type': 'select_dropdown', 'row': 0, 'column': 0} and {'type': 'select_dropdown', 'row': 0, 'column': 1}

I’m pretty stuck here at the moment, any help is highly appreciated. Thank you already!