How to enable lazy loading of plotly dash app with multiple plots under different tabs

Dash Python
1

Hi,

Here is an example of a dash app that has multiple tabs: https://isb-hpi.herokuapp.com/.

The load time of this app when included in an iframe of a website is too high. I would like to invoke lazy loading such that, the app loads the JSON of the plot in a tab only when the user activates that tab.

So in my case, there are 9 tabs but on-load, it just invokes the JSON of the plot in tab-1 which is the default tab. When I active the second tab by selecting it, only then the JSON of the plotly plot in that tab shall load.

How do I achieve this?

code:

app = dash.Dash(__name__, meta_tags=[{
      'name': 'viewport',
      'content': 'width=device-width, initial-scale=1.0'
    }])
server=app.server

tabs_styles = {'display': 'inlineBlock', 'height': 'auto', 'width': 'auto',
               'position': 'fixed', "background": "#323130", 'top': '12.5vh', 'left': '7.5vw',
               'border': 'grey', 'border-radius': '4px'}

tab_style = {
    "background": "#323130",
    'text-transform': 'uppercase',
    'color': 'white',
    'border': '#A9A9A9',
    'font-size': '10px',
    'font-weight': 600,
    'align-items': 'center',
    'justify-content': 'center',
    'border-radius': '4px',
    'padding':'6px'
}

tab_selected_style = {
    "background": "#A9A9A9",
    'text-transform': 'uppercase',
    'color': 'white',
    'font-size': '10px',
    'font-weight': 600,
    'align-items': 'center',
    'justify-content': 'center',
    'border-radius': '4px',
    'padding':'6px'
}

app.layout = html.Div([
    dcc.Tabs(id='tabs-example', value='tab-1', mobile_breakpoint=0, children=[
        dcc.Tab(label='India', value='tab-1',style=tab_style, selected_style=tab_selected_style),
        dcc.Tab(label='Ahmedabad', value='tab-2',style=tab_style, selected_style=tab_selected_style),
        dcc.Tab(label='Bengaluru', value='tab-3',style=tab_style, selected_style=tab_selected_style),
        dcc.Tab(label='Chennai', value='tab-4',style=tab_style, selected_style=tab_selected_style),
        dcc.Tab(label='Hyderabad', value='tab-5',style=tab_style, selected_style=tab_selected_style),
        dcc.Tab(label='Kolkata', value='tab-6',style=tab_style, selected_style=tab_selected_style),
        dcc.Tab(label='Mumbai', value='tab-7',style=tab_style, selected_style=tab_selected_style),
        dcc.Tab(label='Pune', value='tab-8',style=tab_style, selected_style=tab_selected_style),
        dcc.Tab(label='NCR', value='tab-9',style=tab_style, selected_style=tab_selected_style)
    ]),
    html.Div(id='tabs-example-content'),
    html.Div(id='footnote')
])

@app.callback(Output('tabs-example-content', 'children'),
              Output('footnote', 'children'),
              Input('tabs-example', 'value'))

def render_content(tab):
    if tab == 'tab-1':
        return  html.Div([
            dcc.Graph(id='g2', figure=india)], 
            className="row", 
            style={"display": "block","margin-left": "auto","margin-right": "auto"}), "footnote to div"
    elif tab == 'tab-2':
        return html.Div([
            dcc.Graph(id='g2', figure=ahm)], 
            className="row", 
            style={"display": "block","margin-left": "auto","margin-right": "auto"}), "footnote to div"
    elif tab == 'tab-3':
        return html.Div([
            dcc.Graph(id='g2', figure=blr)], 
            className="row", 
            style={"display": "block","margin-left": "auto","margin-right": "auto"}), "footnote to div"

    elif tab == 'tab-4':
        return html.Div([
            dcc.Graph(id='g2', figure=che)], 
            className="row", 
            style={"display": "block","margin-left": "auto","margin-right": "auto"}), "footnote to div"

    elif tab == 'tab-5':
        return html.Div([
            dcc.Graph(id='g2', figure=hyd)], 
            className="row", 
            style={"display": "block","margin-left": "auto","margin-right": "auto"}), "footnote to div"

    elif tab == 'tab-6':
        return html.Div([
            dcc.Graph(id='g2', figure=kol)], 
            className="row", 
            style={"display": "block","margin-left": "auto","margin-right": "auto"}), "footnote to div"

    elif tab == 'tab-7':
        return html.Div([
            dcc.Graph(id='g2', figure=mum)], 
            className="row", 
            style={"display": "block","margin-left": "auto","margin-right": "auto"}), "footnote to div"

    elif tab == 'tab-8':
        return html.Div([
            dcc.Graph(id='g2', figure=pune)], 
            className="row", 
            style={"display": "block","margin-left": "auto","margin-right": "auto"}), "footnote to div"

    elif tab == 'tab-9':
        return html.Div([
            dcc.Graph(id='g2', figure=ncr)], 
            className="row", 
            style={"display": "block","margin-left": "auto","margin-right": "auto"}), "footnote to div"


if __name__ == '__main__':
    app.run_server(debug=True, use_reloader=False)
2

Do the “Method 1. Content as Callback” approach: dcc.Tabs | Dash for Python Documentation | Plotly

1 Like
3

I am implementing method-1 but the app makes the website loading too slow.
It takes almost a minute to load the website. I have edited the post and added my code. take a look at it and let me know if I can do anyting more to implement lazy-loading and enhance the performance of my website in which i have my dash app in an iframe.

4

Try disabling the initial loads in the callback using the argument “prevent_initial_call=True”. You will need Dash v 1.12.0 for this functionality.

Release Notes v.1.12

5

that helps but I want the app to display the graph in the first tab. If I set this argument to False, it only loads the graph when I click on the next tab.

6

how to set the prevent_initial_call=False to first tab (Tab1) and True for all other tabs