Code not working

Dash Python
1

I am trying to create a single data source and single control-container dynamic output components as per code shared by @chriddyp . Below is my code.I am not able to see any output. Can anybody help me understand what is the error.

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import itertools

app = dash.Dash()
app.layout = html.Div([
dcc.Dropdown(
id=‘datasource-1’,
options=[
{‘label’: i, ‘value’: i} for i in [‘A’, ‘B’, ‘C’]
],value = “A”
),
html.Hr(),
html.Div(‘Dynamic Controls’),
html.Div(
id=‘controls-container’
),
html.Hr(),
html.Div(‘Output’),
html.Div(
id=‘output-container’
)
])

def generate_control_id(value):
return ‘Control {}’.format(value)

DYNAMIC_CONTROLS = {
‘A’: dcc.Dropdown(
id=generate_control_id(‘A’),
options=[{‘label’: ‘Dropdown A: {}’.format(i), ‘value’: i} for i in [‘A’, ‘B’, ‘C’]]
),
‘B’: dcc.Dropdown(
id=generate_control_id(‘B’),
options=[{‘label’: ‘Dropdown B: {}’.format(i), ‘value’: i} for i in [‘A’, ‘B’, ‘C’]]
),
‘C’: dcc.Dropdown(
id=generate_control_id(‘C’),
options=[{‘label’: ‘Dropdown C: {}’.format(i), ‘value’: i} for i in [‘A’, ‘B’, ‘C’]]
),

'X': dcc.Dropdown(
    id=generate_control_id('X'),
    options=[{'label': 'Dropdown X: {}'.format(i), 'value': i} for i in ['A', 'B', 'C']]
),
'Y': dcc.Dropdown(
    id=generate_control_id('Y'),
    options=[{'label': 'Dropdown Y: {}'.format(i), 'value': i} for i in ['A', 'B', 'C']]
),
'Z': dcc.Dropdown(
    id=generate_control_id('Z'),
    options=[{'label': 'Dropdown Z: {}'.format(i), 'value': i} for i in ['A', 'B', 'C']]
)

}

@app.callback(
Output(‘controls-container’, ‘children’),
[Input(‘datasource-1’, ‘value’)])
def display_controls(datasource_1_value):
return html.Div([
DYNAMIC_CONTROLS[datasource_1_value],

])

def generate_output_id(value1):
return ‘{} container’.format(value1)

@app.callback(
Output(‘output-container’, ‘children’),
[Input(‘datasource-1’, ‘value’)])
def display_controls(datasource_1_value):
return html.Div(id=generate_output_id(
datasource_1_value,

))

def generate_output_callback(datasource_1_value,):
def output_callback(control_1_value):
print(“output_callback”)
return ‘’’
You have selected {} and
generated from {} (datasource 1)
‘’’.format(
control_1_value,
datasource_1_value,
)
return output_callback

app.config.suppress_callback_exceptions = True

for value1 in itertools.product([o[‘value’] for o in app.layout[‘datasource-1’].options]):
app.callback(
Output(generate_output_id(value1), ‘children’),
[Input(generate_control_id(value1), ‘value’)])(
generate_output_callback(value1)
)

if name == ‘main’:
app.run_server(debug=True)

2

Properly formatted code is:

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import itertools

app = dash.Dash()
app.layout = html.Div([
    dcc.Dropdown(
        id='datasource-1',
        options=[
            {'label': i, 'value': i} for i in ['A', 'B', 'C']
        ], value="A"
    ),
    html.Hr(),
    html.Div('Dynamic Controls'),
    html.Div(
        id='controls-container'
    ),
    html.Hr(),
    html.Div('Output'),
    html.Div(
        id='output-container'
    )
])

def generate_control_id(value):
    return 'Control {}'.format(value)

DYNAMIC_CONTROLS = {
    'A': dcc.Dropdown(
        id=generate_control_id('A'),
        options=[{'label': 'Dropdown A: {}'.format(i), 'value': i} for i in [
            'A', 'B', 'C']]
    ),
    'B': dcc.Dropdown(
        id=generate_control_id('B'),
        options=[{'label': 'Dropdown B: {}'.format(i), 'value': i} for i in [
            'A', 'B', 'C']]
    ),
    'C': dcc.Dropdown(
        id=generate_control_id('C'),
        options=[{'label': 'Dropdown C: {}'.format(i), 'value': i} for i in [
            'A', 'B', 'C']]
    ),

    'X': dcc.Dropdown(
        id=generate_control_id('X'),
        options=[{'label': 'Dropdown X: {}'.format(i), 'value': i} for i in [
            'A', 'B', 'C']]
    ),
    'Y': dcc.Dropdown(
        id=generate_control_id('Y'),
        options=[{'label': 'Dropdown Y: {}'.format(i), 'value': i} for i in [
            'A', 'B', 'C']]
    ),
    'Z': dcc.Dropdown(
        id=generate_control_id('Z'),
        options=[{'label': 'Dropdown Z: {}'.format(i), 'value': i} for i in [
            'A', 'B', 'C']]
    )
}


@app.callback(
    Output('controls-container', 'children'),
    [Input('datasource-1', 'value')])
def display_controls1(datasource_1_value):
    return html.Div([DYNAMIC_CONTROLS[datasource_1_value]])


def generate_output_id(value1):
    return '{} container'.format(value1)


@app.callback(
    Output('output-container', 'children'),
    [Input('datasource-1', 'value')])
def display_controls2(datasource_1_value):
    return html.Div(id=generate_output_id(datasource_1_value))


def generate_output_callback(datasource_1_value,):
    def output_callback(control_1_value):
        print("output_callback")
        return '''You have selected {} and generated from {} (datasource 1)'''.format(
            control_1_value, datasource_1_value,
        )
    return output_callback


app.config.suppress_callback_exceptions = True

for value1 in itertools.product([o['value'] for o in app.layout['datasource-1'].options]):
    app.callback(
        Output(generate_output_id(value1), 'children'),
        [Input(generate_control_id(value1), 'value')])(
            generate_output_callback(value1)
    )

if __name__ == '__main__':
    app.run_server(debug=True)
2 Likes
3

After this, value1 is a tuple of length 1 instead of a string. A minimal change to the code is

for value1, in itertools.product([o['value'] for o in app.layout['datasource-1'].options]):
    ...

but perhaps something like

for o in app.layout['datasource-1'].options:
    value1 = o['value']
    ...

will be easier to read.

4

Thanks a lot @jks.The code is working fine now.