Updating shared List with multiple callback inputs

Dash Python
1

Hello, I’m trying to make website that when I click on the graph, it’s Id is appended to some list and change color of the figure. If I click again, it will change bgcolor again and remove ID from the list. And, eventually when I click a button, I want to show that selected graphs on other window.
Right now I’m stuck with putting id’s of clicked graphs on the list.
here’s my code

for i in range(40):
    app.callback(
        [Output('graph-{}'.format(i), 'figure'),
         Output('selected-graphs{}'.format(i), 'children')],
        [Input('graph-{}'.format(i), 'clickData')],
          [State('file-input', 'filename'),
           State('graphWrapper-{}'.format(i), 'id'),
           State('selected-graphs', 'children')]
        )(select_graphs)

I have total maximum 40 graphs with different IDs. So, I needed to make 40 callbacks for each graphs to know which one is clicked. Now, the problem is, I cannot have same output for multiple callbacks.

Output('selected-graphs', 'children')],

this part is problematic. ‘selected-graphs’ is ID of hidden div to store the data. But, I cannot use this as output of 40 callbacks. How can I add or delete each graphs’ IDs in the shared list when I click on the graph?

2

It might be worth switching to use Dash pattern-matching callbacks,

https://dash.plotly.com/pattern-matching-callbacks

It that does not solve the issue, I have written a small util class, which makes it possible to assign an output multiple times,

2 Likes
3

Yes indeed, this is a perfect use case for Pattern Matching Callbacks (Pattern-Matching Callbacks | Dash for Python Documentation | Plotly)! Please let us know how it goes @mayjunjuly0313 as this is a new feature (we’d love to see what you make!)

4

Hi there! Your use case is exactly what I am looking for.
Did you get it? I tried to match the graph’s id with a dropdown’s option, but there is no id for every dropdown’s option.
My idea is (step by step):

  1. The user adds a graph (and he can add as many as wanted)
  2. A new element is added to the dropdown’s options (so there is a match between this element and the added graph).
  3. The user can select this option.
  4. Given the selected option, he can modify the figure.

I am stuck trying to figure it out. Thank you for your help!

@chriddyp I woud be grateful if I can take one minute of your time! Thanks!!

5

Hi @churchill1973

This announcement includes a nice example of pattern matching callbacks: 📣 Dash v1.11.0 Release - Introducing Pattern-Matching Callbacks

It sounds like what you are looking for.