Dynamically generated components within dynamically generated components

Dash Python
1

Hey everyone.
I am in a situation, where I have a number of the same modals for settings for a number of graphs. These modals get dynamically generated each time a graph is added, to have a settings modal associated with it. In these modals, I have a list of buttons that also get dynamically generated based on some conditions. I then run into an issue with callbacks, since i need to always identify, which button was pressed in which modal and it gets a little complicated. I try to solve this issue with having more detailed defined IDs.
’
image

In the first picture, I am showing how the callback is defined, it is not important what code follows, important thing is that the print statement never reaches, if a remove button (the button in the list that gets dynamically generated) is pressed.

image
image716×390 13.7 KB

In the second picture I show how the buttons are created when there is the need. My idea was to match all the buttons within a specific modal match is modal’s id and then each button would have its unique identifier, the value in it.

So my thought process is: when remove button is clicked, match the index (modal index) with all of the other components and give me a list of all the n_clicks from the buttons in that modal (button-index: ALL). I have also tried to just slam the ALL wildcard in the index and just get the right list based on the ID that triggered the callback, but none of the mentioned solutions make my remove buttons trigger the callback. ChatGPT suggests its an issue with combining MATCH and ALL wildcards, but not much more information.

Is there maybe another solution to this desired behavior or a fix for my attempted solution? Let me know if you want extra information, it is quite hard to explain :smiley:

2

Hey @martin.vlacil.

Related (I think):

3

I think I see the point of the post, but I have an issue where the index of other items in the callback share the index of the modal, making the buttons indices {major}-{minor} wont match the other parameters in the callback and thus not get triggered, right?

4

Don’t know if I understood your question correctly. But I have a suggestion:

  1. When you create your components (dynamically), create references from index to index.
  2. use callback_context to find the id of the component that triggert the callback.

So, to be more specific, you create a mapping from one component id to the other, the moment you create them.

The concept is shown in the below snippet (using dicts cross reference)

from dist import Distribution, Binomial, Poisson
from typing import Dict

BINOM = 'Binomial'
POISSON = 'Poisson'

DIST_NAMES = [
    BINOM,
    POISSON,
]
DIST_NAMES.sort()

INITIAL_DISTRIBUTION: str = BINOM

D2I: Dict[str, int] = {d: i for i, d in enumerate(DIST_NAMES)}
I2D: Dict[int, str] = {i: d for d, i in D2I.items()}

DISTNAME2DIST: Dict[str, Distribution] = {
    BINOM: Binomial(),
    POISSON: Poisson(),
}

You can see how I utilize this in main.py here:

Sorry if its a bit annoying to read the code, still a work in progress. But the idea is present.

See the callback starting at line 121, and go from there.