How to implement client side callbacks to a multiple tabs dash app?

Dash Python
1

Hi,

I have a multipe-tabs dash app that is super slow when hosted on Heroku. I’d like to utilize client-side callbacks to enhance the performance of this app. I tried to get this working but there arent any great examples to learn from for implementing client-side callbacks to a multiple-tabs dash app. I believe this community could help me with a solution to this requirement and that this topic could serve as a reference for all the other members.

I’m attaching my script below so that everyone else and I can learn how the code translates to become a client-side callback-enabled dash app in case of a multiple tabs implementation.

app-url: https://isb-hpi.herokuapp.com/

Code:

app = dash.Dash(__name__, meta_tags=[{'name': 'viewport','content': 'width=device-width, initial-scale=1.0'}])
#prevent_initial_callbacks=True
    
server=app.server
abs_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', style={'text-align': 'right', 'font-size':14, 'color': 'black', 'font-family': 'cursive'})
])

@app.callback(Output('tabs-example-content', 'children'),
              Output('footnote', 'children'),
              Input('tabs-example', 'value'),
              prevent_intial_call=True)
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"}), ""
    elif tab == 'tab-2':
        return html.Div([
            dcc.Graph(id='g2', figure=ahm)], 
            className="row", 
            style={"display": "block","margin-left": "auto","margin-right": "auto"}), ""
    elif tab == 'tab-3':
        return html.Div([
            dcc.Graph(id='g2', figure=blr)], 
            className="row", 
            style={"display": "block","margin-left": "auto","margin-right": "auto"}), ""

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

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

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

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

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

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

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

please share some ideas!

2

any thoughts on how to do this? please share!

3

I think it might help to be more specific in your question. What is it exactly that you want to use a clientside callback for? There is nothing particular about using clientside callbacks in the context of tabs. You might want to take a look at the documentation for clientside callbacks,

https://dash.plotly.com/clientside-callbacks