Dynamic update of graph visualisation for real-time transformation monitoring

📊 Plotly Python
1

I’m working on a research project (written in Python) which performs many consecutive graph transformations, mostly subgraph removals, until an optimum is achieved. I’d like to visualise this process with a Plotly/Dash app. My expectation would be to notify the app about every change immediately without any user interaction. I read that a usual solution for such situations used to be periodic interval-based updates. However, I need to capture every change/frame and my update intervals may vary from seconds to minutes, so the best solution would be to update the graph only when it’s needed.

Until now, I visualised the initial graph and created a framelist from all the changes during the optimization. From these information I could replay the transformations after the algorithm has finished, but I was not able to do this in real-time.

The closest example I found in Plotly docs is this, where the animation is updated after every compute() call:

However, I could not find the Python counterpart of this solution.

So my question in short: Is there a way to dynamically update a Plotly/Dash graph from Python without any user interaction?

2

You should look into this: Live Updates | Dash for Python Documentation | Plotly

3

Thanks for the fast reply! I saw this doc and the periodic update option, however I’d like to trigger the update when a new graph variant was found and not periodically, i.e., I’d like to use push notifications instead of polling for changes.

4

You have two options from what I understand your usecase is:

  1. Use Job Queues in Dash Enterprise: Dash Job Queue
  2. Roll your own custom logic to “wire up” your callback(s) that update the graphs to a hidden UI element (e.g a Div). The hidden UI element can act as a “trigger” for the callback function.
5

Thanks! The second option sounds promising. Could you per chance point out some thoughts/snippets how does it look like in practice? Should I use Dash for this? How will the hidden element be “notified” to trigger the callback function?