plotly dash: create multiple callbacks (with loop?)

Question

Say I have a model with 20 parameters and I made one input component for each param.

[dcc.Input(type = 'number', id = 'input %i'%i) for i in range(20)]

I want to have one button html.Button('populate parameters', id = 'button populate') that is supposed to populate best pre-fitted value for all the inputs.

Code should look like below, except it doesn't work.

for i in range(20):
    @app.callback(
        dash.dependencies.Output('input %i'%i, 'value'),
        [dash.dependencies.Input('button populate', 'n_clicks')]
    )
    def update(ignore):
        return np.random.uniform()

Do I have to write 20 callbacks for each output with identical functionality? I can't find a way to make them in one go (loop?)

Answer 1

I have dealt with the same issue and found a solution. What you do is bypass the decorator and call the app.callback function directly:

def update(ignore):
    return np.random.uniform()

for i in range(20):
    app.callback(
        dash.dependencies.Output('input %i' % i, 'value'),
        [dash.dependencies.Input('button populate', 'n_clicks')]
    )(update)

Answer 2

In dash >= 1.11.0 you may use Pattern-Matching Callbacks. No loops needed when defining the callback(s).

Example

1. Import callback selectors

• Import dash.dependecies.ALL:

from dash.dependencies import Input, Output, State, ALL

• Other available callback selectors are MATCH and ALLSMALLER.

2. Use dictionaries as the id

• Define your components with a id that is a dictionary. You may choose any keys but for example type and id are quite reasonable choices. So, instead of

[dcc.Input(type = 'number', id = 'input %i'%i) for i in range(20)]

use

[
    dcc.Input(type='number',
              id={
                  'type': 'my-input-type',
                  'id': 'input %i' % i
              }) for i in range(20)
]

3. Use a callback selector with @app.callback

• Use the ALL callback selector when defining the callback:

@app.callback(
    dash.dependencies.Output({
        'type': 'my-input-type',
        'id': ALL
    }, 'value'), [dash.dependencies.Input('button populate', 'n_clicks')])
def update(ignore):
    return np.random.uniform()

Answer 3

you can have as many input parameters/argument on a callback as you want. But only one output.

What solved a similar case for me was:

@app.callback(
    [Output('output-id', 'children')],
    [Input('button-trigger', 'n_clicks'],
    [State('input-one', 'value'),
    ...
    [State('input-twenty', 'value')]
)
def my_fancy_function(n_clicks, v1, ..., v20):
    return sth_awesome

State() as opposed to Input() does not trigger the callback when an input value is changed.

n_clicks changes +1 with each click but doesn't need to be used.

If your parameters are dependent on each other you would need more callbacks. But...with 20 parameters There must be a better way

Answer 4

I have done something similar to populate my layout component after page reload.

Thanks to the first callback, the state of the components are store in a dcc.Store component. The second callback is to populate the layout components when their state changes or when you access the tab ( the layout is in a dcc.Tabs)

dash_layout_components = {
'time_slider_app2': 'value',
'backtest_choice_app2': 'values',
'asset_selection_app2': 'value',
'graph_selection_app2': 'values'
}

stored_layout_value_name = [key[:key.rfind('a')] + value for key, value in 
dash_layout_components.items()]

set_back_and_display_graph_input = {
    'store_layout_data': 'modified_timestamp',
    'tabs': 'value'
}


@app.callback(
Output('store_layout_data', 'data'),
[Input(key, value) for key, value in dash_layout_components.items()])
def store_layout(time_slider_value, backtest_choice_values, assets_selection_values, graph_selection_values):

    data_json = {
        'time_slider_value': time_slider_value,
        'backtest_choice_values': backtest_choice_values,
        'asset_selection_value': assets_selection_values,
        'graph_selection_values': graph_selection_values
   }
   return data_json


for component_id, component_property in dash_layout_components.items():
@app.callback(
    Output(component_id, component_property),
    [Input(key, value) for key, value in set_back_and_display_graph_input.items()],
    [State('store_layout_data', 'data'),
     State(component_id, 'id')]
)
def set_back_component(bouton_ts, tabs_value, layout_state_data, component):  # dynamiser l'arrivée des paramètres. piste, en créer une liste entre le for et le callback

    if tabs_value != '/app2':
        raise PreventUpdate

    if layout_state_data is None:
        return []

    else:
        store_layout_component_name = stored_layout_value_name[list(dash_layout_components.keys()).index(component)]
        return layout_state_data[store_layout_component_name]

Note that you won't have access to the iterated values (component_id and component_property) inside the function ( set_back_component(...) )