Order of callbacks execution

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

1 post - 1 participant

Read full topic