Plotly Dash - dcc.Store callback firing twice

user_9658263 0
Viewed 2139

I'm having an issue with Plotly Dash whereby the callback that is triggered by a dcc.Store component is firing twice every time. See the code and example output code below, which is based on the example in the Dash docs (https://dash.plot.ly/dash-core-components/store).

Can anyone explain this or suggest a workaround to prevent it?

Minimal working example code:

import dash

import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Output, Input, State
from dash.exceptions import PreventUpdate

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Store(id='local', storage_type='local'),
    html.Div(html.Button('localStorage', id='local-button')),
    html.Div(0, id='local-clicks'),
])


@app.callback(Output('local', 'data'),
              [Input('local-button', 'n_clicks')],
              [State('local', 'data')])
def on_click(n_clicks, data):
    if n_clicks is None:
        raise PreventUpdate

    app.logger.info(f"Updating data store")

    data = data or {'clicks': 0}

    data['clicks'] = data['clicks'] + 1
    return data


@app.callback(Output('local-clicks', 'children'),
              [Input('local', 'modified_timestamp')],
              [State('local', 'data')]
              )
def on_data(ts, data):
    if ts is None:
        raise PreventUpdate

    app.logger.info(f"New data found! ({ts}, {data})")

    return f"{ts}, {data['clicks']}"


if __name__ == '__main__':
    app.run_server(debug=True, port=8077, threaded=True)

Example output:

Running on http://127.0.0.1:8077/
Debugger PIN: 597-637-135
New data found! (1584011957193, {'clicks': 24})
New data found! (1584011957193, {'clicks': 24})
Updating data store
New data found! (1584012443177, {'clicks': 25})
New data found! (1584012443177, {'clicks': 25})
Updating data store
New data found! (1584012445159, {'clicks': 26})
New data found! (1584012445159, {'clicks': 26})
plotly-dash
3 Answers

I'd suggest converting the memory store to session and changing the code in the second callback to the following:

def on_data(ts, data):

    if not data or not ts:
        raise PreventUpdate

    ...

That should resolve some of the first few circular callbacks.

user_105219590

Try using an if n_clicks is not None and n_clicks > 0 condition to automatically firing up of the callbacks.

I've had a similar issue here and that solved it

user_133856180

I figured out the error, the error is because you are receiving the same callback from arguments.

data

in variables. This code is working :

import dash

import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Output, Input, State
from dash.exceptions import PreventUpdate

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Store(id='local', storage_type='local'),
    html.Div(html.Button('localStorage', id='local-button')),
    html.Div(0, id='local-clicks'),
])


@app.callback(Output('local', 'data'),
              [Input('local-button', 'n_clicks')],
              [State('local', 'data')])
def on_click(n_clicks, data):
    if n_clicks is None:
        raise PreventUpdate

    app.logger.info(f"Updating data store")

    data = data or {'clicks': 0}

    data['clicks'] = data['clicks'] + 1
    return data


@app.callback(Output('local-clicks', 'children'),
              [Input('local', 'modified_timestamp')],
              [State('local', 'data')]
              )
def on_data(ts, datatype):
    if ts is None:
        raise PreventUpdate

    app.logger.info(f"New data found! ({ts}, {datatype})")

    return f"{ts}, {datatype['clicks']}"


if __name__ == '__main__':
    app.run_server(debug=True, port=8077, threaded=True)
user_146081290
Related