Multiple modals: a use case for pattern-matching callback

Dash Python
1

Hi,

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.Modal(
            [
                dbc.ModalHeader("Header"),
                dbc.ModalBody("This is the content of the modal"),
                dbc.ModalFooter(
                    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…).

@app.callback(
    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
4 Likes
3

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: https://vidar-19.yotta-conseil.fr/
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.

4

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.

5

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: https://scinlp.org/

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
6

this resolved my issue.
thanks