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