Partial Updating both Parent and Child's Childrens

Dash Python
1

Hello devs.

I am stuck with my code and idk how to circunvent a problem I have when not all Outputs contain the MATCH.

My problem is as follows:

The HTML structure is something like this:

SessionStore_A
SessionStore_B
Main
  Parent
    Child_1
      Input_A
      Input_B
      Input_C

Basically what I want is:

  1. Select Input_A
  2. Make options for Input_B and C (based on A)
  3. Make Child_2 with same content as Child_1

My code is as follows:

import get_options from package




@callback(
    Output('Parent', 'children'),
    Output({'type':'Input_B', 'index':MATCH}, 'options'),
    Output({'type':'Input_C', 'index':MATCH}, 'options'),
    Output('SessionStorage_A', 'data'),
    Output('SessionStorage_B', 'data'),
    Input({'type':'Input_A', 'index':MATCH}, 'value'),
    State({'type':'Input_B', 'index':MATCH}, 'options'),
    State({'type':'Input_C', 'index':MATCH}, 'options'),
    State('parent', 'children'),
    State('SessionStorage_A', 'data'),
    State('SessionStorage_B', 'data'),
)
def process(Input_A_value,
            current_A_options, current_B_options,
            current_childrens,
            SessionStoraga_A_data, SessionStorage_B_data):
    
    if not is_valid(Input_A_value):
        return (current_A_options, current_B_options,
                current_childrens,
                SessionStorage_A_data, SessionStorage_B_data)

    SessionStorage_B_data['SelectedVal'] = Input_A_value  # Just to store the selections in case of reload.

    A,B = get_options(Input_A_value)
    SessionStorage_A_data['GotValues'] = A,B  # It is basically to memoize but at client level.

    ParentChildrensPatch = Patch()
    
    next_child = make_next_child()
    ParentChildrensPatch.append(next_child)
    
    return (ParentChildrensPatch,
            A, B,
            SessionStorage_A_data, SessionStorage_B_data)

With this I get the errors:

Mismatched `MATCH` wildcards across `Output`s

`Input` / `State` wildcards not in `Output`s

Which I have seen it is because they all need to have the MATCH wildcard and I have seen solutions using ALL and figuring out the inputs using ctx.

I know how to use ctx, i just don’t know how to partially update the options.

Also, I have thought of just updating SessionStorage_B and rebulding the page each time based on that. Hadn’t tested but feels inefficient.

Thanks in advance.

2

Hello @VanceVisaris,

Welcome to the community!

You should check out using set_props for the outputs that aren’t MATCH. It allows for this flexibility.

1 Like
3

Hello @jinnyzor and thanks for the reply.

I have checked the clientside callbacks, but I need the server to act over the SessionStorages, the rest could be done at client side level.

Is there a way to create components at clientside? Achieve something like this:

def make_div(some_options):
    comp = html.Div(
        children = [dcc.Dropdown(some_options)] # Or any complex comp with other dependencies
    )
    return comp

clientside_callback(
"""
function append_child(){
    return make_div([1,2,3]) // The server function.
}
""",
Output("some-div", "children"),
# Something else here as input.
)

What I mean, if there is a way to at least create the components the same way as the python. In other words, translate the python function into a usable js function.

4

Yes, you can add components via clientside callbacks.

Checkout Adding Component via Clientside Callbacks

1 Like
5

I will try using this approach, thanks.