hvplot (bokeh backend) using groupby with active legend is flickering in VSCode Notebook

[mosc9575]

This is a duplicate of holoviz/hvplot#1369. I was asked to open the same issue here.

---

I am running a hvplot() on a xarray in a Jupyter Notebook in VSCode and the figure is flickering if it has a legend.

The changing size of the figure with the legend is unwanted and makes is hard to focus on the shown data. To me it looks like the figure is updated twice, once without the legend and then the total available space is used, and a second time with the legend.

If this is right, there is somewhere in the process a unneeded calculation.

All software version info

Python, HvPlot, Panel, Bokeh

1. Python version : 3.12.4 (tags/v3.12.4:8e8a4ba, Jun 6 2024, 19:30:16) [MSC v.1940 64 bit (AMD64)]
2. IPython version : 8.25.0
3. Tornado version : 6.4.1
4. Bokeh version : 3.4.2
5. BokehJS static path : ~\Envs\fbpinn\Lib\site-packages\bokeh\server\static
6. node.js version : (not installed)
7. npm version : (not installed)
8. jupyter_bokeh version : 4.0.5
9. hvplot version : 0.10.0
10. panel version : 1.4.4
11. Operating system : Windows-10-10.0.19045-SP0

VSCode

1. Version: 1.91.1 (user setup)
2. Commit: f1e16e1e6214d7c44d078b1f0607b2388f29d729
3. Date: 2024-07-09T22:06:49.809Z
4. Electron: 29.4.0
5. ElectronBuildId: 9728852
6. Chromium: 122.0.6261.156
7. Node.js: 20.9.0
8. V8: 12.2.281.27-electron.0
9. OS: Windows_NT x64 10.0.19045

import hvplot.xarray  # noqa
import numpy as np
from xarray import Dataset

x = np.arange(-np.pi,np.pi,0.1)
t = np.arange(0,10,0.1)
u = np.array([k*np.sin(x) for k in t]).T
v = np.array([k*np.cos(x) for k in t]).T

ds = Dataset({"u": (["x", "time"], u), "v": (["x", "time"], v)}, coords={"x": x, "time": t})

a = ds[["u", "v"]].hvplot(groupby="time", legend=False).opts(ylim=(-10.2,10.2))
b = ds[["u", "v"]].hvplot(groupby="time").opts(ylim=(-10.2,10.2))

a+b

Comment

I was trying to reproduce this in a browser in JupyterLab and JupyterNotebook but there was no flickering. I don't know why. I guess the update frequency can be different, which could explain the different visual observations.

• I may be interested in making a pull request to address this

[bryevdv]

This probably belongs in the main repo. Although it may be specific to notebooks, it looks like a layout issue, rather than anything to do with the extension, which mostly only handles communication with the kernel.

That said, it it would be much preferable to have a pure Bokeh MRE.

[mosc9575]

I have no idea how to create a MRE in bokeh. I don't know how the process works in holoviews and what happens if the value of the slider changes. And I can't find out where callback function is placed.

I tried to build a figure in a VSCode Notebook with with a slider where the data source is updated by a CustomJS callback. This works totally fine.
I also run b.select(time=t) for all t. This always returns a bokeh figure with a legend and looks good to me. But I am not sure if this is the code, which is used to update the figure.

As I mentioned before I did run the same code in JupyterLab and there is no flickering. But I believe it doesn't run that smooth like in VSCode.

For me, and this is only guessing, I believe that VSCode, for some reason, doesn't wait until the updated figure is finally finished.
Is it possible that bokeh draws the figure without a legend in the initial phase and later adds the legend and readjusts the width and height?

But again, I have no idea how to proof my ideas with an example.

[philippjfr]

Yeah, this is definitely odd. I'm not a VSCode user so a quick question, does the VSCode browser console have a Profiler like the Chrome Browser profiler? That'd at least let us see what's happening.

[mosc9575]

VSCode has DeveloperTools (Help -> Toggle Developer Tools) which looks like the one which is shipped with Chrome.

[philippjfr]

Neat, if you could try going to the Performance tab, hit record, drag the slider until the bug occurs, stop recording and then zoom in on the time interval where the issue occurs and take a screenshot of the resulting flamegraph. I'd do it but can't promise when I'd get around to it.

[bryevdv]

Cc @pavithraes IIRC there was a similar issue in a tutorial example at scipy.

[mosc9575]

Here is a screenshot of a part of an 8 seconds with multiple flickering.

Since I am not sure which is the important graph, I also share the records with you. I hope you can import it.

Trace-20240718T151508.json

[philippjfr]

Thanks, I can indeed open it but strangely it seems to show only VSCode internals, can't actually see any calls into Bokeh happening. Will have to poke around myself.

[mosc9575]

I believe this section looks suspicious.

[philippjfr]

Ah strange, couldn't see that on my end.

[mosc9575]

I hoped the export would include more information. I tried my best.

[philippjfr]

No, really appreciate it! Will dig in more later.