In my app, I can change the components in it via callbacks. For example I have a radio group with two options, such that selecting
option1 will create components
group1 and selecting
option2 will create components
group2. The created group is passed as children to a div, having it displayed on screen. Only one component group exists (as far as the app is concerned) at any given moment.
In the end I want to take all the selections the user made into a callback to do something with them. The problem is that I need to have as States all possible component groups which is a problem since only one group exists at a given time.
My current solution is to have all groups exist as children of the div at all times, and switch between them on screen via changing the
display prop of the style param. This is some what hacky so I was wondering is there’s a better way to solve this.
If I understand your goal, you need to use a dcc.Store component to store the user selections.
In the callback add a state of the dcc.store ‘data’ and the dcc.store ‘data’ as an output, adding in the callback the current user selection before sending it back.
Interesting idea. This does make the callback dynamic since I don’t need to state each user input individually. The downside is that I now need to create a callback for each input to add the selected value to the Store. Currently I don’t need to do that since I can just access the prop of the inputs I need. Might be worth it though
Sorry, I do not understand the downside explanation.
I understand that every time the user make a selection it triggers a callback, you only need to add the state and the output of the dcc.Store to this callback.
Sorry I guess I didn’t explain well.
There isn’t a callback for each input. There are many inputs which need to be fed into the final callback that does something with all of them. The problem is that there are pairs of inputs where only one exists at a time. For example an input category where the user can split the data into train\val\test via dates or via percent of data (e.g. 70%\15%\15%). Each one of these has its own set of components (date picker for the former and slider for the latter). Only one set of components can exist at any given moment since there is a dropdown switching between them.
This is a problem since the final callback needs to state both sets of components, while some of them don’t exist.
Your idea of using the Store can solve this since I won’t need to explicitly state all the components in the callback decorator, though I’ll need to create a callback for each component to add its value to the Store.
Does this make more sense?
Its not possible to use a dcc.Store for each selection?
If I understand correctly all the selections are a sequence of previous choices, if you have a dcc.Store for each step then you can know all the selections the user did at the end of the process with a callback that takes the data of each dcc.Store.
actually they are mostly independent, there a few inputs that have multiple “versions” (as in the data split type I mentioned previously). I think though that using the store, is better since I don’t need to keep track of so many inputs into the final callback, especially since the order they are listed matters.
In this case, what would be the easiest way to add component values to a store. Is there a programatic way to create callbacks?
But it doesn’t matter If they are independent, you just need to have one dcc.Store for each radio item, then you will store each selection made by the user.
Have you looked at pattern matching callbacks? It seems like a good fit for your problem,
Yep, you’re right! I can use pattern matching. I use pattern matching when I programmatically create components, but this isn’t the case here so I haven’t thought about it. Thanks!