Dropdown affecting other dropdowns across multiple tabs

Dash Python
1

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.