Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Monitor live computation progress with Plotly

I’d like to use Plotly inside monitor functions of computational routines, e.g. finding a global minimum of a function, solving ODE, etc… For this, I must be able to perform online updates on traces. Below is a minimal example of trying to move a marker, superimposed over a heat-map.
NOTE: assume the new marker coordinates are obtained at runtime (possibly by calling an expensive routine), so we do not have all the curve the marker will trace.

Question 1: steps of for-loop are being skipped, unless I invoke time.sleep() to wait for figure to update. Why does this happen?
Question 2 How can I force the entire figure to re-draw and not increment the for-loop index, unless the figure has re-drawn?
Question 3 Is there a better way to do the online update of the marker position?

I run the code below in 2 Jupiter Lab cells.

Jupyter Cell 1: Plot a heatmap of sin(x)cos(y); superimpose marker at x=1, y=0

import numpy as np
import plotly.graph_objs as go
from time import sleep


x = np.arange(0,2.*np.pi,np.pi/100)-np.pi
y = np.arange(0,2.*np.pi,np.pi/100)-np.pi

xx, yy = np.meshgrid(x,y)
zz = np.sin(xx)*np.cos(yy)


fig = go.FigureWidget(layout_width = 400, layout_height = 400)


fig.add_heatmap(x = x, y = y, z=zz, colorscale = 'blues')


fig.add_scatter(x=[1.], y=[0], 
            marker_color = 'red',
            marker_size = 10)

fig

Jupyter Cell 2: force the marker to trace a semi-circle

N = 10
for i in range(N+1):
    phi=np.pi/N*i
    with fig.batch_update():
        fig.data[1].update(x=[np.cos(phi)],y = [np.sin(phi)])
        fig.layout.title.text = 'i='+ str(i)
    sleep(.6)