Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

Direct access to properties of html or dcc components

Hi Dashers,
In all the Dash tutorials and examples I have seen so far, the properties of Dash html and dcc components are updated via callback functions. This means that the updates are triggered by either some user action, or something like dcc.Interval at a specific frequency. However I would also like to update some component properties based on the state of some computation that is running. The simplest example is to append the string “Done” to the text in an existing html.H4 element when the computation finishes. How can I do that?

In order to achieve the above, I tried to see if I can directly access/update (outside of a callback) the properties of the html and dcc components, but haven’t succeeded so far.

Many thanks in advance
Arnie

Hi,

Interesting question! Could you clarify two points regarding your use case:

Is the calculation completely decoupled from the app (in other words, not in a callback)? Besides, do you want to make updates other than when the calculation is done?

In my limited knowledge of Dash, I think the closest thing to what you want is the recently added long callback. I believe it would allow you to keep sending updates on the status of the task triggered by the callback. It could be a good starting point for you.

Hi @jlfsjunior,
Thanks a bunch for your reply.

Updates other than printing “Done” in the end could be having a log window in the Dash app that will show the progress of a long running simulation, like below …
Starting simulation …
1000 steps completed … max vel = 100m/s
2000 steps completed … max vel = 110m/s
2048 steps completed … max vel = 115m/s … done!
And while I am presently only thinking in the context of simulations, I imagine there can be other instances where the ability to update a dcc or html element outside of a callback could help.

Yes, I was planning to have the simulation fired outside a callback. I suppose I can have a workaround where simulation is fired from a callback and the same callback then prints “Done” when the function firing the simulation returns at the end of the simulation. Thanks for pointing out the new long_callback feature, I have to look into that but that can potentially be a good fit here. A workaround for watching the simulation using callbacks would be more complex. I imagine I can have the simulation write out its status periodically to a file, and then have a dcc.Interval check the file for updates every n secs. But if the simulation could directly append the latest status to a Dash html element like a TextArea, the code would be much simpler.

Thanks
Arnie

1 Like

Nice! In a way, the long_callback functionality does exactly what you described in the workaround, except that it implements most of the things for you (polling the job status, send updates to the client and so on). Dash has a RESTful interface, so the updates are all driven by the clientside… unless you use something like WebSockets, which is available in dash-extensions

1 Like