Plolty renders all the pending updates when the browser becomes active

Dash Python
1

Hi,
I have a live graph to display the current price of a stock. Everything works fine if the browser is active. but when it is inactive and re-opened/maximized, it renders each and every update one by one, until it gets to the current price. It should display the current state of the chart when the browser becomes active, instead of caching all the updates and rendering them all at once. Has anyone faced the same issue?

2

Hi, I would think this is a react thing altogether. I have something similar although lower level in the dash renderer

3
4

Thanks @jcuypers . Were you able to resolve the issue? I’m using @long_callback, not sure if that is the reason the updates are queued.

5

Hi, no I haven’t. Not sure if there even is a solution. Your issue might be different altogether but it resembles closely. Btw, I think long callback has been replaced by background callback. I dont have experience with that sorry

6

Btw you would be able to verify / validate this through the following setup. You could compare a DCC interval output with some text and a timestamp as compared to a counter and timestamp on a background callback. See what happens with both if they are not active / visible

7

Thanks. I added debug print statements in the callback, and its printing to the console on every callback. So it looks like its an issue with the browser which is not updating. I came across the below ink, other have reported the same issue.

8

There is inactive ta b détection for browser and a changevisibility API which triggers when my problem happen. I tested today with overrides and turning it off in the browser but nothing changes for my issue.

9

Hi @jcuypers , Just wanted to check if you were able to find a solution.

10

Hi, unfortunately I didn’t and most likely there isn’t a solution for it at all. You might want to try to find a setting in your browser, that disallows certain sites from being put to “sleep”. I didn’t work for me but you can try.

11

Thanks @jcuypers , changing browser settings didn’t work for me either. My app is supposed to show the real time price and if the tab is inactive , user will see the wrong price on being active. Also, I have timer interval set to 60 second , so it will show updates for each 60 seconds. I wish there was a solution. :frowning:

12

Hi, maybe a solution for you could be that you could use some form of clientside javascript which taps into the page visibility API. It will tell you when your Page becomes active or not, if it becomes active you might want to start a spinner and/or fetch up-to-date data. You might also want top stop/restart your interval based on this. (Have you considered websockets for your data instead of an Interval?) I tested this in a debug console but I haven’t tried it as part of Dash clientside (regarding page visibility ApI). It works well, by itself

1 Like
13

Thanks @jcuypers The data source doesn’t support websocket. I think I can add a dummy websocket component to keep the tab active.

14

Hi, a websocket itself might not. The Mozilla mdn docs talk about a media stream. I have been contemplating a soundless media stream to trick it from not going to sleep. But in the end, it’s not worth it for me.

15

I have already tested it with the media stream. Didn’t work.