Problem with Pattern Matching Callbacks in Dash

Dash Python
1

I have the following 2 functions to dynamically update a div:

@app.callback(
    [Output('memory', 'data'), Output('linesDiv', 'children')],
    Input('lineButton', 'n_clicks'),
    [State('memory', 'data'), State('linesDiv', 'children')],
    prevent_initial_call=True)
def addLine(n, mem, div):
    if n is None: raise PreventUpdate
    print(2)
    mem['n'] += 1
    mem['lines'].append(go.Scatter(x=[0, 1, 2, 3, 4], y=[0, 1, 2, 3, 4], mode='lines', name=f'Line {mem["n"]}'))
    div += [html.Div([
        html.Label(f"Line {mem['n']}"),
        dbc.Button('Delete', 
                   id={'type': 'deleteLineButton', 'index': mem["n"]}, 
                   className='deleteLineButton'),
        dcc.Dropdown(id={'type': 'lineDropdown', 'index': mem["n"]}, 
                     options=list(SLIDERS.keys())),
    ], className='lineWidgetDiv', id=f"{mem['n']}")]
    
    return mem, div

@app.callback(
    Output(f'{MATCH}', 'children'),
    Input({'type':'lineDropdown', 'index':MATCH}, 'value'),
    State(f'{MATCH}', 'children'))
def updateSliders(option, div):
    if option is None: return div
    print(243)
    div = div[:3]
    for par in SLIDERS[option]:
        div.append(html.Div([html.Label(par)]))
    return div

When the updateSliders function is commented out, addLine works fine. When it is uncommented, neither function works. There are no errors.

updateSliders works fine when I replace MATCH with 1 (hard programming in divs and sliders with id 1).

Is there a reason why MATCH isn’t working for this?

2

Hello @AG-88301,

Welcome to the community!

This should work:

@app.callback(
    [Output('memory', 'data'), Output('linesDiv', 'children')],
    Input('lineButton', 'n_clicks'),
    [State('memory', 'data'), State('linesDiv', 'children')],
    prevent_initial_call=True)
def addLine(n, mem, div):
    if n is None: raise PreventUpdate
    print(2)
    mem['n'] += 1
    mem['lines'].append(go.Scatter(x=[0, 1, 2, 3, 4], y=[0, 1, 2, 3, 4], mode='lines', name=f'Line {mem["n"]}'))
    div += [html.Div([
        html.Label(f"Line {mem['n']}"),
        dbc.Button('Delete', 
                   id={'type': 'deleteLineButton', 'index': mem["n"]}, 
                   className='deleteLineButton'),
        dcc.Dropdown(id={'type': 'lineDropdown', 'index': mem["n"]}, 
                     options=list(SLIDERS.keys())),
    ], className='lineWidgetDiv', id={'type':'lineWidgetDiv', 'index':f"{mem['n']}"})]
    
    return mem, div

@app.callback(
    Output({'type':'lineWidgetDiv', 'index': MATCH}, 'children'),
    Input({'type':'lineDropdown', 'index':MATCH}, 'value'),
    State({'type':'lineWidgetDiv', 'index': MATCH}, 'children'))
def updateSliders(option, div):
    if option is None: return div
    print(243)
    div = div[:3]
    for par in SLIDERS[option]:
        div.append(html.Div([html.Label(par)]))
    return div
2 Likes