Dcc.graph callback not work issue with multi-page and switch layout design

Dash Python
1

Hi, I am trying to design switch page function. Firstly, I design layout1 and graph callback with input link. graph worked and update. And then, I change layout1 for switch multi-page. Same dcc.graph callback not work but content of html.div on layout2 can callback when I try to design layout2 and it’s embedded to a html.div(id=…) of layout1.

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

from app import app_dash
from apps import layout1

#####################
##graph page layout##
#####################
app_dash.layout = html.Div([
dcc.Location(id=‘url’, refresh=False),
html.Div(id=‘page-content’)
])

@app_dash.callback(Output(‘page-content’, ‘children’),
[Input(‘url’, ‘pathname’)])
def display_page(pathname):
if ‘binary’ in pathname:
return layout1 .layout
else
return ‘404’

if name == ‘main’:
app_dash.run_server(debug=True, port=8050, host=‘0.0.0.0’)

#########################
layout1
#########################
data = layout1(app_dash)
layout = data.layout()
@app_dash.callback(Output(‘graph-content’,‘children’),
[
Input(‘button-1’, ‘n_clicks_timestamp’),
Input(‘button-2’, ‘n_clicks_timestamp’),])
def update_content(btn1,btn2):
if btn1 > btn2:
# button 1 was clicked
return layout2_1.layout
elif btn2 > btn1:
# button 2 was clicked
return layout2_2.layout

#########################layout and callback

class layout1:
def init(self, app):
self.app = app
def layout():
layout = html.Div([
html.Button(’ Explore’, id=‘button-1’, n_clicks=0,
n_clicks_timestamp=-1),
html.Button(’ Evaluate’, id=‘button-2’, n_clicks=0,
n_clicks_timestamp=-1),
dcc.Input(id=‘task-id-content’),

                html.Div(id='graph-content')])

class layout2:
def init(self, app):
self.app = app

def layout():
    layout = html.Div([
                           dcc.Graph(id='curve-graph'),])

@app_dash.callback(Output(‘train-lift-curve-graph’, ‘figure’),
[Input(‘task-id-content’, ‘value’),],
)
def update_train_lift_curve_figure(taskid):
print(taskid)
task_data = mongo.db.tasks.find_one(ObjectId(taskid))
…
…
return {
‘data’: data,
‘layout’: layout
}
#####################

I simply show my code. I tried to move the ddc.graph component which was originally a component of layout2 to layout1. It worked. However, it don’t callback on layout2…

1 Like