What is the execution order of callbacks?

Dash Python
1

I need to fire one particular callback before another, but I seem to not manage to deduce how to affect the firing order. Can someone direct me to this information?

Thanks!

1 Like
2

@ber.sg - This order is determined automatically by creating a dependency tree based off of the inputs and outputs.

For example, see the “coutries and cities” example here: https://plot.ly/dash/getting-started-part-2. Dash will first call the callback to update the “countries” dropdown and then call the second “cities” dropdown once with the first callback has finished:

@app.callback(
    dash.dependencies.Output('cities-dropdown', 'options'),
    [dash.dependencies.Input('countries-dropdown', 'value')])
def set_cities_options(selected_country):
    return [{'label': i, 'value': i} for i in all_options[selected_country]]

@app.callback(
    dash.dependencies.Output('cities-dropdown', 'value'),
    [dash.dependencies.Input('cities-dropdown', 'options')])
def set_cities_value(available_options):
    return available_options[0]['value']

If no callbacks depend on each other, then the order is random and if you are running the app with multiple workers (e.g. gunicorn app:server --workers 5) then the callbacks will be processed in parallel.

3

if multiple workers And callbacks depend on each other is order guranteed?

4

Hello!! I hope you can help me with an issue I’m having with the order of the callbacks. I have two callbacks: one to define the range slider properties with a dropdown as input, and the other is to make some graphs depending on the range slider and the dropdown value. I need the range slider to update first than the graphs, but I can see that the code runs first the callback of the graphs and then, it runs the callback to update the range slider.
This is my code:

dbc.Col(

        html.Div(

            dcc.Dropdown(

                id='cities_dropdown',

                options=options,

                value='Colombia',

                multi=False,

                clearable=False,

                style={'width':'70%','margin':'0.5rem','padding-top': '7px'}

            ),

        ),

        width=12,md={'size':5,'offset':1}

    ),

    dbc.Col(

        html.Div(

            dcc.RangeSlider(

                id='range_slider',

                step=None,

                allowCross=False,

                value=[4,7]

            ),

            style={'padding':'2rem'},

        ),

        width=12,md={'size':6,'offset':0}

    )

@app.callback(

[Output(component_id='range_slider',component_property='min'),

Output(component_id='range_slider',component_property='max'),

Output(component_id='range_slider',component_property='value'),

Output(component_id='range_slider',component_property='marks')],

[Input(component_id='cities_dropdown',component_property='value')],

)

def update_slider(cities_dropdown):

print('updated_range_slider')

if cities_dropdown=='Colombia':

    minimo=4

    maximo=7

    value=[4,7]

    marks={4: 'Abril', 5: 'Mayo', 6: 'Junio', 7: 'Julio'}

else:

    df=data[data['Ciudad']==cities_dropdown]

    df['mes']=df['FechaDeMuerte'].dt.month

    months=df['mes'].unique()

    minimo=min(months)

    if minimo==3:

        minimo=4

    maximo=max(months)

    value=[minimo,maximo]

    marks={}

    for month in months:

        if month==4:

            marks[4]='Abril'

        if month==5:

            marks[5]='Mayo'

        if month==6:

            marks[6]='Junio'

        if month==7:

            marks[7]='Julio'

return (minimo,maximo,value,marks)

@app.callback(

[Output(component_id='sex_graph',component_property='figure'),

Output(component_id='age_graph',component_property='figure'),

Output(component_id='days_graph',component_property='figure')],

[Input(component_id='cities_dropdown',component_property='value'),

Input(component_id='range_slider',component_property='value')]

)

def update_graphs(cities_dropdown,range_slider):

print('updated_graphs')

And, when I run the code, this is what I got:

Running on http://127.0.0.1:8050/
Debugger PIN: 834-443-670
updated_graphs
updated_range_slider
updated_graphs