Refresh Output widget with matplotlib figure

[sergun]

Hi!

I deal with refresh matplotlib figure inside Output widget. The problem is that during update the Output completely disappears (or resizes to zero width / height) and appears again.
I can see this because the Button follows Output in VBox and it goes to the top for some milliseconds.

The idea is like follows but my code is very complex to be posted here. But this simple example works well and my program meets the problem.

What can cause such a problem?

PS. You can see I do ax.clear() and ax.plot(...) instead of ax.set_xdata(...) That is not occasionly because my logic needs to re-plot from zero.

%matplotlib inline

# To prevent automatic figure display when execution of the cell ends
%config InlineBackend.close_figures=False 

import matplotlib.pyplot as plt
import numpy as np

from IPython.html import widgets
from IPython.display import display,clear_output

plt.ioff()
ax=plt.gca()

out=widgets.Output()
button=widgets.Button(description='Next')
vbox=widgets.VBox(children=(out,button))
display(vbox)

def click(b):
    ax.clear()
    ax.plot(np.random.randn(100),np.random.randn(100),'+')
    with out:
        clear_output(wait=True)
        display(ax.figure)

button.on_click(click)
click(None)

[pbugnion]

(I edited your comment to put the code in a code block to make it easier to read)

[pbugnion]

I actually cannot reproduce this on Chrome with the latest widgets -- when I click next, the output widget does not disappear. The plot just refreshes with new data, as expected.

What version of ipywidgets are you using (widgets.__version__)? I note that from IPython.html import widgets has been deprecated for a long time in favour of import ipywidgets as widgets. What browser are you using?

One thing you could also try is to create a new output widget every time next is clicked, and to refresh vbox.children instead:

button = widgets.Button(description='Next')
vbox = widgets.VBox(children=[])

def click(event=None):
    out = widgets.Output()
    ax.clear()
    ax.plot(np.random.randn(100),np.random.randn(100),'+')
    with out:
        clear_output(wait=True)
        display(ax.figure)
    vbox.children = [button, out]

button.on_click(click)
click()

[andymcarter]

I don't get the disappearing behaviour on Chrome either.

If you know the size of the chart you are expecting, could you fix the size of the output widget? I've added a border to demonstrate where the widget boundary is.

%matplotlib inline

# To prevent automatic figure display when execution of the cell ends
%config InlineBackend.close_figures=False 

import matplotlib.pyplot as plt
import numpy as np

from IPython.html import widgets
from ipywidgets import Layout
from IPython.display import display,clear_output

plt.ioff()
ax=plt.gca()

out=widgets.Output(layout=Layout(height='300px', width = '400px', border='solid'))
button=widgets.Button(description='Next')
vbox=widgets.VBox(children=(out,button))
display(vbox)

def click(b):
    ax.clear()
    ax.plot(np.random.randn(100),np.random.randn(100),'+')
    with out:
        clear_output(wait=True)
        display(ax.figure)

button.on_click(click)
click(None)

[jasongrout]

Is the problem similar to the flickering issue addressed in the documentation at http://ipywidgets.readthedocs.io/en/stable/examples/Using%20Interact.html#Flickering-and-jumping-output ? There, we suggest fixing the height of the Output widget to prevent the flickering and jumping.

[sergun]

@pbugnion @andymcarter @jasongrout thanks! You helped a lot!

@pbugnion As I specified the problem existed in "complex" scenario only which I could not post here and I just showed very simple alternative of what I do.

@jasongrout right. The main problem I meet was "jumping". Specifying height fixed it. Now I worry just about a very little but visible delay in plot update. Don't understand why it is. Because I use clear_otput with wait=True specified. In this case clearing output should be executed exactly before modifying output.

with out:
        clear_output(wait=True)
        display(ax.figure)

[sergun]

Forgor to say. The delay is in "complex" scenario only. Simple example I posted works fine.

[jasongrout]

I've noticed a slight flicker in complex plots too at some points. I'm pretty sure the code is doing what it is supposed to do, i.e., clearing the output just before displaying the figure, but it may not hurt to trace through the js execution path one more time to make sure the clear is happening just before a new img is created.

Matplotlib is slow enough drawing complex figures that there usually is a delay in the kernel in rendering a figure.

[jasongrout]

In your complex scenario, do you have any outputs above the matplotlib image? I've noticed that even with the wait argument, those scenarios still tend to flicker.

[jasongrout]

(and I'll also add that moving to a plotting framework like bqplot, which just updates an existing image, also takes care of flickering problems)

[sergun]

@jasongrout my "complex" case looks so:

So there is nothing above the Output widget with matplotlib image.

I also found that when I use "%matplotlib notebook" instead of "%matplotlib inline" there is no delay (flickering).

[jasongrout]

With this example code, I see the output widget waiting to clear the output until just before the new image comes. If you want to pursue this further, could you give an example where it flickers even when we clear with wait=True?

from ipywidgets import Output
out = Output()
out

import matplotlib.pyplot as plt
from IPython.display import clear_output
import time

ax=plt.axes()
with out:
        clear_output(wait=True)
        plt.plot([1,2,3])
        time.sleep(1)
        display(ax.figure)

[sytelus]

I had lot of flickers even when using wait=True. I discovered that you want to call clear_output and display on widget, not on global instances. That is,

with out:
        out.clear_output(wait=True)
        out.display(ax.figure)

[jasongrout]

Typically, you should either do:

with out:
    clear_output(wait=True)
    display(ax.figure)

OR do:

out.clear_output(wait=True)
out.display(ax.figure)

Are you saying that you had better results with your variant above?