Inconsistent updating of Image glyph in JupyterLab notebook

Community Support
1

I’ve run into a problem rendering images interactively using Bokeh in Jupyterlab with interactions via IPython widgets. I can get everything working, per se, but the updates are inconsistent. The plots will very frequently update to simply show a blank/transparent image, rather than the intended raster plot data.

This occurs despite confirming the data in the ColumnDataSource exists and has the expected values. I’ve tried creating deep copies of the data before passing it, and this doesn’t prevent the issue. This behavior is consistent regardless of output backend.

As far as I can tell, this doesn’t occur with line or scatter plots, separately or as part of the same interactive set of plots.

Below is a minimally reproducible example using random noise data:

import numpy as np

from bokeh.layouts import grid
from bokeh.models import ColumnDataSource, Slider
from bokeh.plotting import figure, output_notebook, show
from bokeh.io import push_notebook

import ipywidgets as widgets

output_notebook()

test_ts = np.random.uniform(size = (50,50,3,100))
init_z = int(test_ts.shape[2]/2)
scale_img = 6

img = figure(width=scale_img*test_ts.shape[0], height=scale_img*test_ts.shape[1], x_range=(0, test_ts.shape[0]), y_range=(0, test_ts.shape[1]), output_backend="webgl")
slice_dat = ColumnDataSource(data={'x': [0], 'y': [0], 'dw': [test_ts.shape[0]], 'dh': [test_ts.shape[1]], 'im': [test_ts[:,:,init_z,0]]})
img.image(image='im', x='x', y='x', dw='dw', dh='dh', source=slice_dat)

handle = show(img, notebook_handle=True)

def update_plot(time):
    slice_dat.data['im'] = [test_ts[:,:,init_z,time]]
    push_notebook(handle=handle)

widgets.interact(update_plot, time=widgets.IntSlider(min=0, max=test_ts.shape[3]-1, step=1, value=0))

For reference, here is an example of the behavior I’m observing.
output

Package versions:
Bokeh 3.4.1
Jupyter Bokeh 4.0.4
JupyterLab 4.1.8
JupyterLab Widgets 3.0.10
IPython 8.22.2
IPython Widgets 8.1.2

Any thoughts on what could be causing this or how I could further troubleshoot?

EDIT: Forgot to include Jupyter Bokeh in installed packages list.

2

Do you not have the jupyter_bokeh JupyterLab extension installed?

https://docs.bokeh.org/en/latest/docs/user_guide/output/jupyter.html#jupyterlab

3

My apologies, I forgot to include jupyter_bokeh in the list. I have version 4.0.4 installed.

I should also note I’m getting this behavior on two almost identically configured systems, one local and one remote.

4

I’m afraid I don’t know, then. I tried your code on an identical environment on OSX and the image updates immediately and smoothly when the slider is scrubbed. All I can suggest is to submit a GitHub Issue with full details.

5

Just reporting back that I tried this again on Windows 11 on the same local machine mentioned above with an identically configured environment and it did not occur. The other two issues where on Ubuntu 22.04 on this machine, and 18.04 on the remote. If someone else encounters the same issue, or can reproduce this, maybe they can shed some light. Nonetheless, it’s usually not as bad as shown in the image and thus doesn’t break my use case.