Closing modal of dash-bootstrap-components is slowing down in a specific situation

Dash Python
1

Hello Plotly-dash users,

I am now trying to embed mp4 video in my plotly-dash application.
To visualize the video effectively, I’m using dash-bootstrap-component and modal UI of it. My modal UI equips a title area, video contents with html.Iframe, and footer with a close button. The video file size is about 10MB~20MB.

Interestingly, my application takes a lot of time to close a modal only when I use the close button (more than 10 seconds).
Here are the situations and results.

  • Clicking the close button on staging environment (gunicorn server) → Slow
  • Clicking outside of the modal on the staging environment → Not slow
  • Clicking the close button on the staging environment, replacing with a test video (0.5MB) → Not slow
  • Clicking the close button on a test environment (run python index.py) → Not slow

I doubt the big file size gives a bad effect on the gunicorn server. Now I start up the server by gunicorn -b 0000:8050 index.server. Maybe some option is required…?

Does anyone have an idea to solve this situation?

2

Clicking outside the modal closes the modal clientside whereas closing with a button click + a callback does a round-trip to the server to get the results of executing your callback function. Is the callback sending the video to the front end by any chance? It could explain execution of callback being slow when video is large.

One possible fix is to toggle the modal using a client-side callback. Then no round-trip is required. Here’s a simple example of that.

import dash
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State

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

app.layout = dbc.Container(
    [
        dbc.Button("Open modal", id="open"),
        dbc.Modal(
            [
                dbc.ModalHeader("Modal"),
                dbc.ModalBody("Hey cool, a modal!"),
                dbc.ModalFooter(dbc.Button("Close", id="close")),
            ],
            id="modal",
        ),
    ],
    className="p-5",
)

app.clientside_callback(
    """
    function(nOpen, nClose, isOpen) {
        return (nOpen || nClose) ? !isOpen : isOpen;
    }
    """,
    Output("modal", "is_open"),
    Input("open", "n_clicks"),
    Input("close", "n_clicks"),
    State("modal", "is_open"),
)


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

@tcbegley

Is the callback sending the video to the front end by any chance?

I do not understood why the video has been sent to the Dash-side. The callback function is exactly the same as the one in the official documentation, and it only uses the modal open/close status and the number of button clicks.
Is it scanning the entire contents of the DOM to check the open/close status?

Anyway, thanks to you, this client-side callback function solved the slowing down! You saved me a lot.

4

Interesting. Then I’m also not really sure what’s going on. You might be able to get some insight from the Network tab in your browser’s developer tools, whether there is a request to the backend that’s hanging or if something else is happening.

But glad to hear the clientside callback fixed the problem in any case!