Hi, big fan of your work.
i am prototyping dash app, where I am configuring another tool.
This tool only needs json as an input.
Now I have one dropdown - where you select variable. This dropdown should affect other elements, such as dropdowns, across multiple tabs.
Following code shows only ‘error loading dependencies’:
import dash
import json
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
metadata = dict(
var1=['min', 'max', 'sum'],
var2=['min', 'max', 'sum'],
var3=['min', 'max', 'sum', 'mean', 'median'])
app = dash.Dash(__name__)
app.config['suppress_callback_exceptions']=True
app.layout = html.Div(
[
dcc.Dropdown(
id='variables',
options=[{'label': variable, 'value': variable} for variable in metadata],
# value=metadata.columns[0],
# labelStyle={'display': 'block'},
),
dcc.Tabs(
id='choose-variable-action',
value='simple',
children=[
dcc.Tab(label='Simple', value='simple'),
dcc.Tab(label='Ratio', value='ratio')]),
html.Div(id='tabs-content'),
# dcc.Dropdown(
# id='functions',
# multi=True,
# ),
html.Div('{}',
id='config',
# style={'display': 'none'},
),
html.Div('{}',
id='functions-hidden',
# style={'display': 'none'}
)
]
)
def simple_tab_content():
return html.Div([
# html.H3('Simple'),
dcc.Dropdown(
id='functions',
multi=True,
)])
def ratio_tab_content():
return html.Div([
# html.H3('Ratio'),
])
@app.callback(
output=Output('tabs-content', 'children'),
inputs=[Input('choose-variable-action', 'value')])
def render_tab_content(tab):
if tab == 'simple':
return simple_tab_content()
if tab == 'ratio':
return ratio_tab_content()
@app.callback(output=Output('functions', 'options'),
inputs=[Input('variables', 'value')])
def update_options(value):
if value:
return [{'label': i, 'value': i} for i in metadata[value]]
return {}
@app.callback(output=Output('functions', 'value'),
inputs=[Input('functions', 'options')],
state=[State('variables', 'value'), State('config', 'children')])
def update_value(options, variable_value, jconfig):
config = json.loads(jconfig)
if variable_value in config:
return config[variable_value]
return None
@app.callback(
output=Output('config', 'children'),
inputs=[Input('variables', 'value'), Input('functions', 'value')],
state=[State('config', 'children')])
def update_config(variable_value, functions_value, jconfig):
config = json.loads(jconfig)
if variable_value and functions_value:
config[variable_value] = functions_value
return json.dumps(config)
if __name__ == '__main__':
app.run_server(debug=True)
I tracked the bug being caused by callbacks connected to ‘functions’ - as this component is only on the tab, and not anywhere elsewhere.
I am now thinking how to store data in a hidden div so the data are persistent everywhere - how to achieve that?
Apart from that, i guess that ‘problem loading dependencies’ is very unuseful message as well.
by the way, i also found this: https://github.com/plotly/dash-recipes/blob/master/multi-page-dropdown-example.gif, which kinda is the functionality i want. however the code is 2y old and I believe there must exist more elegant solution.