How to prevent a Dash app influenced by user during a long_callback, Python3?

user_4772565 0
Viewed 408

I have made a app: Dash is used to make the browser-based gui and the backend calculation is made in purely Python3.

Since the calculation can take from seconds to hours or even days depending on the user's study case, I used the decorator of long_callback from Dash. The GUI follows simple user logic:

  1. When the run button is clicked, the button is disabled to not only inform the user that the app is doing the calculation, but also prevent the user from clicking the button again when the app is still doing the calculation.
  2. When the app is still doing the calculation, the user should be able to use other parts of the app, just except the run-button. And the on-going calculation in the backend should not be influenced.

I have made a simplified code to demonstrate my issue.

  1. First, I enter an arbitrary value, e.g. 10 in the entry.
  2. Then, I click the run-button. The button is disabled and the app runs like expected.
  3. Before the run finishes (i.e. before the run-button becomes enabled), I changed the entry from 10 to 20, the output message shows the number 20 instead of 10. How is it possible? After clicking the run-button, any further operation on the GUI should not influence the call that is already started. Could you please show me how to implement it? Thanks.
import time
import dash
from dash import html, dcc
from dash.long_callback import DiskcacheLongCallbackManager
from dash.dependencies import Input, Output, State


# Diskcache
import diskcache

cache = diskcache.Cache("./cache")
long_callback_manager = DiskcacheLongCallbackManager(cache)

app = dash.Dash(__name__, long_callback_manager=long_callback_manager)

app.layout = html.Div(
    [
        html.Div([html.P(id="paragraph_id", children=["Button not clicked"])]),
        html.Button(id="button_id", children="Run Job!"),
        dcc.Input(id='entry_id')
    ]
)


@app.long_callback(
    output=Output("paragraph_id", "children"),
    inputs=dict(
        n_clicks=Input("button_id", "n_clicks"),
        entry_text=State("entry_id", "value"),
    ),
    running=[
        (Output("button_id", "disabled"), True, False),
    ],
    prevent_initial_call=True,
)
def callback(n_clicks, entry_text):
    if not n_clicks:
        raise dash.exceptions.PreventUpdate

    time.sleep(3.0)  # Here 3 seconds is just an example. My actual code can run days.
    return [f"Clicked {n_clicks} times, entered {entry_text}"]


if __name__ == "__main__":
    app.run_server(debug=True)
plotly-dash python-3.x
2 Answers

TLDR: You can overcome the issue by adding a Store element that caches the current value before dispatching the calculation,

import time
import dash
import diskcache

from dash import html, dcc
from dash.long_callback import DiskcacheLongCallbackManager
from dash.dependencies import Input, Output, State


# Diskcache
cache = diskcache.Cache("./cache")
long_callback_manager = DiskcacheLongCallbackManager(cache)

app = dash.Dash(__name__, long_callback_manager=long_callback_manager)

app.layout = html.Div(
    [
        html.Div([html.P(id="paragraph_id", children=["Button not clicked"])]),
        html.Button(id="button_id", children="Run Job!"),
        dcc.Input(id="entry_id"),
        dcc.Store(id="input_cache"),
    ]
)


@app.callback(
    Output("input_cache", "data"), Input("button_id", "n_clicks"), State("entry_id", "value")
)
def cache_job_inputs(n_clicks, entry_text):
    if not n_clicks:
        raise dash.exceptions.PreventUpdate
    return dict(n_clicks=n_clicks, entry_text=entry_text)


@app.long_callback(
    output=Output("paragraph_id", "children"),
    inputs=dict(
        data=Input("input_cache", "data"),
    ),
    running=[
        (Output("button_id", "disabled"), True, False),
    ],
    prevent_initial_call=True,
)
def callback(data):
    time.sleep(3.0)  # Here 3 seconds is just an example. My actual code can run days.
    return [f"Clicked {data['n_clicks']} times, entered {data['entry_text']}"]


if __name__ == "__main__":
    app.run_server(debug=True)

Inspecting callback invocations via the dash.callback_context.triggered property, I noticed regular invocations by _long_callback_interval_1.n_intervals. The new value of entry_id is captured during these invocations, which seems like a bug to me.

user_24288870

If you wish the State to not affect an existing callback execution, set the disabled of that component to True during the execution, like how you disable the button during the callback computation, like so:

@app.long_callback(
    output=Output("paragraph_id", "children"),
    inputs=dict(
        n_clicks=Input("button_id", "n_clicks"),
        entry_text=State("entry_id", "value"),
    ),
    running=[
        (Output("button_id", "disabled"), True, False),
        (Output("entry_id", "disabled"), True, False),
    ],
    prevent_initial_call=True,
)
def callback(n_clicks, entry_text):
    if not n_clicks:
        raise dash.exceptions.PreventUpdate

    time.sleep(3.0)  # Here 3 seconds is just an example. My actual code can run days.
    return [f"Clicked {n_clicks} times, entered {entry_text}"]
user_87073370
Related