Multiple modals: a use case for pattern-matching callback


I just want to share the use of pattern-matching callback to implement multiple modals in an app.

To implement modal, one can use this tip from dash documentation: Modal - dbc docs

To implement multiple modals with a single callback, you just need to modify the “id” by adding an index:

modal = html.Div(
        dbc.Button("Open modal", {"index": 1, "role": "open"}),
                dbc.ModalBody("This is the content of the modal"),
                    dbc.Button("Close", id={"index": 1, "role": "close"}, className="ml-auto")
            id={"index": 1, "role": "modal"},

Then, a single callback with a MATCH selector will handle all modals (with different index: 1, 2…).

    Output({'index': MATCH, 'role': 'modal'}, "is_open"),
    [Input({'index': MATCH, 'role': 'open'}, "n_clicks"), Input({'index': MATCH, 'role': 'close'}, "n_clicks")],
    [State({'index': MATCH, 'role': 'modal'}, "is_open")])
def toggle_modal(n1, n2, is_open):
    if n1 or n2:
        return not is_open
    return is_open

Sorry, I have no idea.
I didn’t notice it before. But now you are pointing this out, it seems to refresh on my app too now:
I am using now dash 1.19. They was maybe a change in the implementation since the version which introduced pattern-matching callbacks.
Let me know if you could solve this issue.

Hi @fran6wol

Your app is very interesting - it deserves it’s own show-and-tell post!

The the short video you included is excellent and is a great overview of the app. It left me wanting to know more - especially about the NLP and data mining used to extract the risk factors from the huge database of scientific papers.

Hi @AnnMarieW

Thank you for your message!

The video was made for a poster session in the first SciNLP workshop which help remotely last June:

There is also an unpublished but more detailed paper on arXiv: [2005.00848] Visualization of Diseases at Risk in the COVID-19 Literature

1 Like

this resolved my issue.