Dash plotly update label in between calculation

I’m new to dash plotly and using this for some of my personal projects. Now I have a long calculation running and I need to update some status bar like label with progress with the calculation. Something like this

app.layout = html.Div([
    html.Div([
        html.Button("Start calculation",n_clicks=0,id="btn")
        html.Label('Calculation 1 complete', style={'display':"none"}, id='cal1'),
        html.Label('Calculation 2 complete', style={'display':"none"}, id='cal1'),
        html.Label('Calculation 3 complete', style={'display':"none"}, id='cal1'),
])
])


@app.callback(
    [Output('cal1', 'style'),
    Output('cal2', 'style'),
    Output('cal3', 'style')],
    [Input('btn', 'n_clicks')])
def calculation():
    # long calulation 1
    #> make label id cal1 visible

    # long calulation 2
    #> make label id cal2 visible

    # long calulation 3
    #> make label id cal3 visible

    # calculation complete

But I don’t know how to achieve this. I can only have callbacks that have specific input that starts the function and at the end of the function update some specific output. Unlike pure javascript I cant just update some html anytime inside the function. Can anyone help me to solve this

2 posts - 2 participants

Read full topic