Pattern matching callback in plotly-dash

Question

Working with plotly dash, I'm trying to have ListGroup items function as buttons that will update their label when they're clicked. Here is code that works as intended, but I've manually created a callback for each button.

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = (
    html.Div([
        dbc.ListGroup([
            dbc.ListGroupItem(id="button1", n_clicks=0, action=True),
            dbc.ListGroupItem(id="button2", n_clicks=0, action=True),
            dbc.ListGroupItem(id="button3", n_clicks=0, action=True),
        ])
    ])
)

@app.callback(Output("button1", "children"), [Input("button1", "n_clicks")])
def clicked1(n_clicks):
    return f"Button 1: clicked {n_clicks} times"

@app.callback(Output("button2", "children"), [Input("button2", "n_clicks")])
def clicked2(n_clicks):
    return f"Button 2: clicked {n_clicks} times"

@app.callback(Output("button3", "children"), [Input("button3", "n_clicks")])
def clicked3(n_clicks):
    return f"Button 3: clicked {n_clicks} times"

if __name__ == '__main__':
    app.run_server(debug=True)

The buttons appear and update when clicked. The callback graph in the debug menu looks how I expect.

Now I want to replace the three callback functions with just one using pattern-matching. The idea being I could have a dynamic list of an arbitrary number of items and they would all update as expected. Following the way it's described in the docs, I change the code to use dictionaries for id's in the items and in the callback.

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output, MATCH

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = (
    html.Div([
        dbc.ListGroup([
            dbc.ListGroupItem(id={"type": "button", "index": 0}, n_clicks=0, action=True),
            dbc.ListGroupItem(id={"type": "button", "index": 1}, n_clicks=0, action=True),
            dbc.ListGroupItem(id={"type": "button", "index": 2}, n_clicks=0, action=True),
        ])
    ])
)

@app.callback(Output({"type": "button", "index": MATCH}, "children"), [Input({"type": "button", "index": MATCH}, "n_clicks")])
def clicked(n_clicks):
    return f"Button clicked {n_clicks} times"


if __name__ == '__main__':
    app.run_server(debug=True)

Now the buttons show nothing (suggesting the callbacks have not run), they're clickable but nothing happens when they're clicked, and the callback graph is a mess.

As best I can tell, I've followed the instructions. I'm not getting any errors, it just doesn't work. What am I missing?

Answer 1

Turns out the problem was in versioning.

I installed dash using anaconda and the anaconda main repository has very old versions of the dash dependencies. So even though I had dash version 1.16.3 and pattern matching in callbacks was introduced in 1.11, pattern matching also requires dash-renderer version 1.4 or above and I had 1.1.2.

The solution for me was to install dash from conda-forge which has the up-to-date versions of all the dash dependencies.

conda install -c conda-forge dash

Answer 2

I'm happy that you solved your problem.

I just would like to suggest an improvement on the code:

def group_item(index, click=None, action=False):
    return dbc.ListGroupItem(id={"type": "button", "index": index}, n_clicks=click, action=action)

app.layout = (
    html.Div([
        dbc.ListGroup(
            [group_item(i, click=0, action=True) for i in range(3)]
        )
    ])
)

Hope that it can be useful for you.