Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

Dash: Multi-Page Apps keeps updating on its own

Hello everyone, I have created a multi-page app using the Dash examples and structures. Each page(app) has dcc.graph and one or more dcc.sliders (and/or range sliders).

It works perfectly fine locally but when I deploy it on Google Cloud, the pages keep updating on its own without a user’s input. I have tried deploying only one of the pages or changing the dcc.sliders’ update mode to ‘mouseup’ (from ‘drag’), yet the problem persists. Any insight would be greatly appreciated.

Here is a simplified version of my index.py:

import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

from app import app
from apps import app1, app2, app3

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='page-content'),
    ])


@app.callback(Output('page-content', 'children'),
              [Input('url', 'pathname')])

def display_page(pathname):
    if pathname == '/apps/app1':
        return app1.layout
    elif pathname == '/apps/app2':
        return app2.layout
    elif pathname == '/apps/app3':
        return app3.layout
    else:
        return '404'

if __name__ == '__main__':
    app.run_server(host='0.0.0.0', debug=True, port=8080)
 

And this is an example of how my apps are structured:

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output
import plotly.express as px
import plotly.graph_objects as go
import flask

from app import app

fig2 = go.Figure()
layout = html.Div(style={
                    'border-style':'solid',
                                  },
                   children=[
                                                
                         html.Div(style={'marginBottom': '0em',
                                            },
                            children=[
                                dcc.Graph(id='graph2',figure=fig2)
                            ]),

                    
                    html.Div(style={'marginBottom': '1em',
                                           },
                            
                            children=[
                            ("Select a and b:"
                            ),
                            
                            dcc.RangeSlider(
                                id='Rangeslider1',
                                min=-3.5,
                                max=3.5,
                                step=0.01,
                                value=[-1, 1],
                                tooltip={'always_visible':False, 'placement':'topLeft'},
                                updatemode='drag',
                                allowCross=False,
                                included=True,
                                
                            ),
                        ]),
                                          
])


@app.callback(
    Output('graph2', 'figure'),
    [Input('Rangeslider1','value')
     ])


def update_figure(Rangeslider1):

    a1=float(Rangeslider1[0])
    a2=float(Rangeslider1[1])
    x= np.linspace(a1, a2, 100)
        
    fig2 = go.Figure()

    fig2.add_trace(go.Scatter(x=x, y=x^2,mode='lines',line_color='rgba(5, 6, 237,1)',
                              hoverinfo="skip", line_width=4
                                
                                )) 

     fig2.update_layout(autosize=True,
                  template=("plotly_white"),
                  showlegend=False,
                  hoverdistance=100
                  ),   
    
return fig2 
    

I have the same issue. My app is deployed on pythonanywhere. Dash is in updating status forever. Has anyone found a solution to this? I found this post [BUG] Dash app shows "Updating..." forever · Issue #1028 · plotly/dash · GitHub regarding the issue but really don’t know how to fix this.

thanks