Callback is called twice in a sigler event

JoseMarqueses · December 2, 2019, 10:40pm

In the next code ( is an example), callback is called twice in every single event. when you show the slider’s id the last id will be repeated in every short time period. Why? how i can fix it?

CODE:

import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

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

app.layout = html.Div([
    html.Div([
        dcc.Slider(
            id='{}'.format(i),
            min=0,
            max=20,
            step=0.5,
            value=10,
        ) for i in range(10)]),
    html.Div(id='slider-output-container')
])

def generate_inputs():
    return  [Input('{}'.format(_),'value') for _ in range(10)]

@app.callback(
    dash.dependencies.Output('slider-output-container', 'children'),
    generate_inputs()
)
def update_output(*values):
    ctx = dash.callback_context
    id = ctx.triggered[0]['prop_id'].split('.')[0]
    print(id)
    return 'You have selected "{}"'.format(values[0])


if __name__ == '__main__':
    app.run_server()

Emmanuelle · December 2, 2019, 10:58pm

Wow this is weird, the issue seems to be related to the name of the sliders (just numbers), when I change it as below the problem disappears…

import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

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

app.layout = html.Div([
    html.Div([
        dcc.Slider(
            id='slider_{}'.format(i),
            min=0,
            max=20,
            step=0.5,
            value=10,
            updatemode='mouseup',
        ) for i in range(10)]),
    html.Div(id='slider-output-container')
])

def generate_inputs():
    return  [Input('slider_{}'.format(_),'value') for _ in range(10)]

@app.callback(
    dash.dependencies.Output('slider-output-container', 'children'),
    generate_inputs()
)
def update_output(*values):
    ctx = dash.callback_context
    id = ctx.triggered[0]['prop_id'].split('.')[0]
    print(ctx.triggered, id, values)
    return 'You have selected "{}"'.format(values[int(id[-1])])


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

JoseMarqueses · December 2, 2019, 11:14pm

Hi Emmanuelle,

the problem doesnt disappears for me, change differents sliders and check it. In my real code (this is an example) the name of sliders are not numbers.

Im not in debug mode.

JoseMarqueses · December 3, 2019, 12:34pm

Can anyone help me or with the same problem?

Emmanuelle · December 3, 2019, 5:19pm

Is the issue completely reproducible for you? The problem I have is that sometimes I have the same problem as you (as seen from the sequence of prints), and sometimes it behaves correctly. The best thing would be if you could record your screen with both the app and the terminal where the prints are displayed, for the record (we could then open an issue of the Dash Github).

JoseMarqueses · December 3, 2019, 11:32pm

When app start callback is called once (it’s ok):

When I change one slider the first time all is ok:

But when I change the second slider, callback is called twice every short time and the last id is showed:

I change a slider again and this:

this is my code:

import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

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

app.layout = html.Div([
    html.Div([
        dcc.Slider(
            id='slider_{}'.format(i),
            min=0,
            max=20,
            step=0.5,
            value=10,
            updatemode='mouseup',
        ) for i in range(10)]),
    html.Div(id='slider-output-container')
])


def generate_inputs():
    return  [Input('slider_{}'.format(i),'value') for i in range(10)]

@app.callback(
    dash.dependencies.Output('slider-output-container', 'children'),
    generate_inputs()
)
def update_output(*values):
    ctx = dash.callback_context
    id = ctx.triggered[0]['prop_id'].split('.')[0]
    print(ctx.triggered, id, values)
    return 'You have selected "{}"'.format(values[int(id[-1])])


if __name__ == '__main__':
    app.run_server()

flyingcujo · December 4, 2019, 5:58pm

I have been able to reproduce this problem. In my case it’s not intermittent, but consistent behavior as reported by @JoseMarqueses. After the initial slider selection, all subsequent slider selections result in 2 back-to-back callbacks - the first assoc. with the previously selected slider, and the second being the most recent. However, if I repeatedly select the same slider, the callback is only triggered once.

Initial Page Load

###############################
 ctx = {
  "states": {},
  "triggered": [
    {
      "prop_id": "slider_9.value",
      "value": 10
    }
  ],
  "inputs": {
    "slider_0.value": 10,
    "slider_1.value": 10,
    "slider_2.value": 10,
    "slider_3.value": 10,
    "slider_4.value": 10,
    "slider_5.value": 10,
    "slider_6.value": 10,
    "slider_7.value": 10,
    "slider_8.value": 10,
    "slider_9.value": 10
  }
}

Selecting Initial Slider (slider_0)

###############################
 ctx = {
  "states": {},
  "triggered": [
    {
      "prop_id": "slider_0.value",
      "value": 7
    }
  ],
  "inputs": {
    "slider_0.value": 7,
    "slider_1.value": 10,
    "slider_2.value": 10,
    "slider_3.value": 10,
    "slider_4.value": 10,
    "slider_5.value": 10,
    "slider_6.value": 10,
    "slider_7.value": 10,
    "slider_8.value": 10,
    "slider_9.value": 10
  }
}

Selecting A Different Slider (slider_1):

###############################
 ctx = {
  "states": {},
  "triggered": [
    {
      "prop_id": "slider_0.value",
      "value": 7
    }
  ],
  "inputs": {
    "slider_0.value": 7,
    "slider_1.value": 10,
    "slider_2.value": 10,
    "slider_3.value": 10,
    "slider_4.value": 10,
    "slider_5.value": 10,
    "slider_6.value": 10,
    "slider_7.value": 10,
    "slider_8.value": 10,
    "slider_9.value": 10
  }
}
###############################
 ctx = {
  "states": {},
  "triggered": [
    {
      "prop_id": "slider_1.value",
      "value": 8.5
    }
  ],
  "inputs": {
    "slider_0.value": 7,
    "slider_1.value": 8.5,
    "slider_2.value": 10,
    "slider_3.value": 10,
    "slider_4.value": 10,
    "slider_5.value": 10,
    "slider_6.value": 10,
    "slider_7.value": 10,
    "slider_8.value": 10,
    "slider_9.value": 10
  }
}

Selecting another different Slider (slider_2):

###############################
 ctx = {
  "states": {},
  "triggered": [
    {
      "prop_id": "slider_1.value",
      "value": 8.5
    }
  ],
  "inputs": {
    "slider_0.value": 7,
    "slider_1.value": 8.5,
    "slider_2.value": 10,
    "slider_3.value": 10,
    "slider_4.value": 10,
    "slider_5.value": 10,
    "slider_6.value": 10,
    "slider_7.value": 10,
    "slider_8.value": 10,
    "slider_9.value": 10
  }
}
###############################
 ctx = {
  "states": {},
  "triggered": [
    {
      "prop_id": "slider_2.value",
      "value": 5
    }
  ],
  "inputs": {
    "slider_0.value": 7,
    "slider_1.value": 8.5,
    "slider_2.value": 5,
    "slider_3.value": 10,
    "slider_4.value": 10,
    "slider_5.value": 10,
    "slider_6.value": 10,
    "slider_7.value": 10,
    "slider_8.value": 10,
    "slider_9.value": 10
  }
}

flyingcujo · December 4, 2019, 6:05pm

FWIW, utilzing daq.Slider vice dcc.Slider results in expected behavior - one callback per slider change.

JoseMarqueses · December 4, 2019, 9:50pm

thank flyingcujo!!! daq.Slider resolve the problem. There is rangeSlider in dash_daq? im looking for it but i dont find it, and I need rangeSlider for my proyect.

flyingcujo · December 4, 2019, 10:36pm

daq doesn’t have a range slider…i just tested that to see if the problem was related to dcc.slider…vice some other wierd issue.

flyingcujo · December 4, 2019, 10:37pm

I still think this is a bug that should be reported via their github.

JoseMarqueses · December 4, 2019, 10:58pm

Will this be resolved in the next update?

flyingcujo · December 5, 2019, 2:00am

Not sure… I don’t work for Dash/Plotly!

Topic		Replies	Views
Dash Events trigger callback function Twice in every single event Dash Python	3	4590	December 31, 2018
Callback call other callbacks Dash Python	3	5955	November 19, 2019
Dash Bug? Callback runs multiple times on the same input trigger Dash Python	0	351	November 11, 2020
Dash with dcc.location (URL) input gives duplicate callback exception after refreshing the app more than twice Dash Python	2	244	September 21, 2021
Possible Bug: Clientside Callbacks Triggering after Circular Callback Dash Python	0	276	June 16, 2021

Callback is called twice in a sigler event

Related Topics