Pass Data to Dash Modal and toggle on and off

Dash Python
1

Hi,

I am trying to use a Dash Modal to display information about a point that I have clicked on in a scattermapbox. I am not sure how to do it rather than just returning ‘is_open’ . This way opens up a modal nicely but obviously the data from the map_graph point I have clicked on is not transferred into the modal as I have just returned the state.

@app.callback(
    Output("modal", "is_open"),
    [Input("map-graph", "clickData"),
     Input("close", "n_clicks")],
    [State("modal", "is_open")],)
def toggle_modal(data, n2, is_open):
    print(data)
    if data or n2:
        return not is_open
    return is_open


def modal():
    return html.Div(dbc.Modal(
                [
                    dbc.ModalHeader("Header"),
                    dbc.ModalBody(children=
                    [
                        g_total(),
                    ], style={"display": "grid",
                              "grid-template-columns": "auto auto auto auto auto",
                              "grid-template-rows": "auto auto auto auto", }),
                    dbc.ModalFooter(dbc.Button("Close", id="close", className="ml-auto")),
                ],
                id="modal",
                style={
                    "max-width": "none",
                    "position": "fixed",
                    "height": "80vh",
                    "width": "80vw",
                    "opacity": "0.8",
                    "background": "#1e1e1e",
                    'top': '12%',
                    'left': '10%',
                }
            ))

def new_layout():
    return html.Div(
        className="row",
        children=[
            # Column for user banner
            build_banner(),
            # Column for app graphs and plots
            html.Div(children=[map_graph(),modal()]),
        ],
    )

Basically I want to use some of the data contained in the “data” parameter in toggle_modal(data, n2, is_open) to create the modal I have tried doing something like this to no avail, it completely breaks the pop up.

@app.callback(
    Output("modal", "children"),
    [Input("map-graph", "clickData"),
     Input("close", "n_clicks")],
def update_modal(data, n2):
    print(data)
    if data or n2:
        return {}
    return dbc.Modal(
                [
                    dbc.ModalHeader("data.somedictionaryvalue"),
                    dbc.ModalBody(children=
                    [
                        g_total(data.somedictionaryvalues),
                    ], style={"display": "grid",
                              "grid-template-columns": "auto auto auto auto auto",
                              "grid-template-rows": "auto auto auto auto", }),
                    dbc.ModalFooter(dbc.Button("Close", id="close", className="ml-auto")),
                ],
                style={
                    "max-width": "none",
                    "position": "fixed",
                    "height": "80vh",
                    "width": "80vw",
                    "opacity": "0.8",
                    "background": "#1e1e1e",
                    'top': '12%',
                    'left': '10%',
                }
            )


def modal():
    return html.Div(id = 'modal')

def new_layout():
    return html.Div(
        className="row",
        children=[
            # Column for user banner
            build_banner(),
            # Column for app graphs and plots
            html.Div(children=[map_graph(),modal()]),
        ],
    )

Thank you very much in advance! If there is another way to do a pop up containing a few graphs and stuff using data from the map point without a modal then I would be all ears!

2

If it’s not too late, I had to implement something similar for my Dash app. The only approach I was able to successfully implement was to create an empty Div in my app layout, create a callback for the bar plot clickData event and then compose/return a dbc.Modal object from it. You’ll send this object to the “children” property of the empty Div you’d created. No need to track the “n_clicks” input since the modal will anyway disappear when you click anywhere outside it in order to dismiss it.

Hope this helps.