I’m trying to implement a dashboard with tabs and within the tabs there are some controls for the graphs. If I place everything within one file the elements call the right callback function within the tab. However, when they are in different files the callback function is no longer called.
Is there a way to organize the files so the callbacks are assigned to the right elements?
The directory structure is:
tabs.py
/test
-init.py
-layout.py
The files Im using are:
tabs.py
import dash
from dash.dependencies import Input, Output
import dash_html_components as html
import dash_core_components as dcc
from test import layout
app = dash.Dash()
app.config['suppress_callback_exceptions'] = True
app.layout = html.Div([
html.H1('Dash Tabs component demo'),
dcc.Tabs(id="tabs-example", value='tab-1-example', children=[
dcc.Tab(label='Tab One', value='tab-1-example'),
dcc.Tab(label='Tab Two', value='tab-2-example'),
]),
html.Div(id='tabs-content-example')
])
@app.callback(Output('tabs-content-example', 'children'),
[Input('tabs-example', 'value')])
def render_content(tab):
if tab == 'tab-1-example':
return layout.layout
elif tab == 'tab-2-example':
return "Tab 2"
if __name__ == '__main__':
app.run_server(debug=True)
layout.py
import dash
from dash.dependencies import Input, Output
import dash_html_components as html
import dash_core_components as dcc
from tabs import app
layout = html.Div([
html.H3('Tab content 1'),
dcc.Dropdown(
id='range-drop',
options=[{'label':i, 'value':i} for i in range(2,10)],
value=2),
dcc.Dropdown(
id='value-drop',
options=[{'label':i, 'value':i} for i in range(2,10)],
value=2),
dcc.Graph(id='graph-1-tabs')
])
@app.callback(Output('graph-1-tabs', 'figure'),
[Input('range-drop', 'value'),
Input('value-drop', 'value')])
def drop_select(val_range, value):
print(val_range, value) <<------ doesnt get called
return {'data': [{'x': [1,2,3],
'y': [3,2,1],
'type': 'bar'}]}