1

I have this short code that use the dcc.Interval component to update a text in the callback, where I tried to print out the value of the n_intervals property.

from dash import Dash, html, dcc, Input, Output

app = Dash()

dccinterval = dcc.Interval(
    id='interval-component',
    interval=1000,
    n_intervals=0
)

app.layout = html.Div(
    children=[
        html.Div(id='live-update-text'),
        dccinterval
    ]
)


@app.callback(Output('live-update-text', 'children'),
              Input(dccinterval, 'n_intervals'))
def update_message(n):
    print('current interval in update_message: ', dccinterval.n_intervals)
    print('current n in update_message: ', n)
    return 'Message: ' + str(n)


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

Here is the output:

current interval in update_message:  0
current n in update_message:  0
current interval in update_message:  0
current n in update_message:  1
current interval in update_message:  0
current n in update_message:  2
current interval in update_message:  0
current n in update_message:  3
.
.
.

As you might see that the value of n_intervals got via the Input is changing correctly, but the value got directly from the interval component always stays at 0. I am wondering why. Can someone please help me with this? The reason I need to figure this out is that in my application when I tried to change the n_intervals’ value via component fails. That is, when I tried to set the value by doing dccinterval.n_intervals = a number, it does not work.

Thank you very much for any comments!

xcosmos
  • 33
  • 5

1 Answers1

0

dccinterval.n_intervals is showing up strangely because that's not the correct way to use the interval component. The other way, using n, which is the function argument representing the interval from the Input, is the correct way. However, you've defined your Input a bit incorrectly. Rather than referencing the variable for the component, which is dccinterval, you need to reference the id of that component, like this:

Input('interval-component', 'n_intervals')

If you want to update the interval's value, you need to set up a callback that uses it as an Output like this:

Output('interval-component', 'n_intervals')

and the function will return whichever value you want to update the interval to.

Edit: So, the reason the wrong way doesn't work is because the variable you declare in the layout, dccinterval in this case, doesn't contain all of the details once the app is running. The callback function's argument, n in this case, has the right info because it has been updated through Dash. This is related to how Dash works, and how - more deeply - React works under the hood.

coralvanda
  • 6,431
  • 2
  • 15
  • 25
  • Thank you for the comments. However, if you look at the documentation here https://dash.plotly.com/basic-callbacks under the title "Passing Components Into Callbacks Instead of IDs", you will see that use `dccinterval` to refer to the component is eligible. – xcosmos Apr 18 '22 at 15:43
  • Ah, thanks for linking to that. I didn't realize that behavior was possible. Was my answer able to help you resolve your question otherwise? – coralvanda Apr 18 '22 at 22:02
  • I am sorry, but not really. I know the 'correct' way to do it, but what I really want to know is why the 'wrong' way does not work. After some reading, I guess it's due to the 'client side' vs 'server side' difference. Hopefully someone will come out and confirm that. Thank you very much though! – xcosmos Apr 19 '22 at 16:55
  • Added an edit with more details. Hopefully that is helpful. – coralvanda Apr 20 '22 at 01:14
  • Thank you again. It make sense. I don't know anything about React, maybe that's something I need to learn next. I originally thought the dccinterval variable works like a pointer, or reference in C. I guess it's not. – xcosmos Apr 21 '22 at 19:39