push_notebook() does not work with ipywidgets Output Widget

Runtime Info:

notebook server is 5.0.0 Python 3.6.1 |Continuum Analytics, Inc.| (default, May 11 2017, 13:09:58) IPython 6.0.0 bokeh ‘0.12.9’ ipywidgets ‘7.0.1’ ubuntu 16

I am trying to embed bokeh plots within the ipywidgets ecosystem. However, I cannot update these plots externally when they are wrapped in an ipywidget Output Widget . Here is a simple repro

This displays the blank graph:

import bokeh
from bokeh.io import output_notebook, show, push_notebook
output_notebook(bokeh.resources.INLINE)
from bokeh.models import ColumnDataSource, Circle
import ipywidgets as widgets
from IPython.display import display


plot = figure()
source = ColumnDataSource(
    data=dict(
        x=[],
        y=[],
    )
)

circle = Circle(x="x", y="y", size=15, fill_color="blue", fill_alpha=0.8, line_color=None)
plot.add_glyph(source, circle)

outw = widgets.Output()
with outw:
    h = show(plot, notebook_handle=True)
display(outw)

This cell should update that graph:

source.data = {'x':[0], 'y':[0]}
push_notebook(handle=h);

However the first graph does not change. If I remove the wrapping in the output widget it does update. If i use an ipywidget (instead of a bokeh plot) inside of the output widget it updates as expected.

[noobymcnoob]

Here is a full example of how to use a bokeh plot inside of a Jupyter ipywidget hierarchy:

from ipywidgets import Output
import bokeh.io as bio
import bokeh.plotting as bp
import asyncio

class BokehChartDemo(Output):
    def __init__(self, *a, **kw):
        bio.output_notebook(hide_banner=True)
        super().__init__(*a,**kw)

        self._figure = None

        asyncio.get_event_loop().create_task(self._updateLoop())

    async def _updateLoop(self):
        while True:
            # we need to wait for it to be displayed first
            await asyncio.sleep(0.25)
            self._initialize()
            self._draw()
        asyncio.get_event_loop().call_later(0.25,self._initialize)

    def _initialize(self):
        if self._figure is not None: return
        self._figure = bp.figure(sizing_mode='stretch_both')
        self._data = bp.ColumnDataSource(dict(x=[],y=[],radii=[],colours=[]))
        self._figure.circle("x","y",radius="radii",fill_color="colours",fill_alpha=0.6,line_color=None,source=self._data)

        with self:
            self._handle = bp.show(self._figure,notebook_handle=True)

    def _draw(self):
        N = 1
        x = np.random.random(size=N)*100
        y = np.random.random(size=N)*100
        radii = np.random.random(size=N)*.5
        colours = ['#%02x%02x%02x' % (r,g,150) for r,g in zip(np.floor(50+2*x).astype('int'),np.floor(30+2*y).astype('int'))]
        self._data.stream(
            dict(
                x = x,
                y = y,
                radii = radii,
                colours = colours
            ),
            1000
        )
        bio.push_notebook(handle=self._handle)

display(BokehChartDemo())

[dajuro]

Hi,

I just ran into the same problem and I found a workaround: you need to render the widgets before plotting into it! This code works for me:

import bokeh
from bokeh.io import output_notebook, show, push_notebook
output_notebook(bokeh.resources.INLINE)
from bokeh.models import ColumnDataSource, Circle
import ipywidgets as widgets
from IPython.display import display

plot = figure()
source = ColumnDataSource(
    data=dict(
        x=[1],
        y=[1],
    )
)

circle = Circle(x="x", y="y", size=15, fill_color="blue", fill_alpha=0.8, line_color=None)
plot.add_glyph(source, circle)

outw = widgets.Output()

# display widget!!!!
display(outw)

# plot into widget
with outw:
    h = show(plot, notebook_handle=True)

Now you can update the plot:

source.data = {'x':[5], 'y':[5]}
push_notebook(handle=h);

Edit and FYI: this is the same for matplotlib plots as well