Ipywidgets not working if added dynamically

[anton-br]

ALL software version info

General:
Ubuntu 22.04.2 LTS
python 3.11.3

library versions:
bokeh==3.3.4
ipympl==0.9.3
ipykernel==6.29.3
ipyleaflet==0.18.2
ipympl==0.9.3
ipython==8.22.1
ipython_genutils==0.2.0
ipywidgets==8.1.2
ipywidgets-bokeh==1.5.0
jupyterlab==4.1.2
jupyterlab_pygments==0.3.0
jupyterlab_server==2.25.3
jupyterlab_widgets==3.0.10
matplotlib==3.8.3
panel==1.3.8

browser:
Chrome 122.0.6261.94

Description of expected behavior and the observed behavior

I am trying to dynamically add new widgets by button click. But got a message Wrong widget protocol version: received protocol version '', but was expecting major version '2 and created widgets are not updating. Here is a code example:

import ipywidgets as ipw
import panel as pn
pn.extension('ipywidgets', sizing_mode="stretch_width")

button = pn.widgets.Button(name='button', width=100)
def calculate(a):
    if not a:  # aviod widgets creation before button is clicked
        return None
    slider = ipw.widgets.FloatSlider(value=10, start=0, end=100)
    text = ipw.widgets.FloatText(description='Current slider value:')
    @pn.depends(slider, watch=True)
    def slider_update(a):
        text.value = str(a)
        print("update", text.value)
    return pn.Column(slider, text)

bind_button = pn.bind(calculate, button)
pn.Column(button, bind_button).servable()

If serve the code, push the button and drug the slider, I would expect the slider's value to be printed in floattext widget but nothing happend.

But, from console we can conclude that widgets is updating as expected:

[Coderambling]

Hi @anton-br . Found this very old Github entry mentioning the same error and a workaround. Does that help in any way? It seems to mention the package / module that generates the error warning. JuliaGizmos/Interact.jl#176 . Please update this issue if you found a workaround / solution for this.

[anton-br]

@Coderambling thanks for the reply! I tried different versions of ipywidgets/widgetsnbextension but it didn't work. In the issue, they simply add a metadata to Comm. I suspect something needs to be done in ipywidgets_bokeh in our case. Probably we can add metadata or smth in the manager.js file as it was done in this issue. I have no experience with js, however, I can look into the problem if you can point me in the right direction.

[Coderambling]

Regrettably I don't really have specific knowledge of those details of the stack.

The only other thing I can suggest is running the code on Anaconda Cloud (or in a similar Notebook environment), and see if the issue persists there.

[anton-br]

Thank you for the suggestion! Unfortunately, I am not sure that switching an environment would help to solve the issue, as I need to start a panel application from the console. I've seen @philippjfr has previously solved this problem before. So, Philip, would you mind to give any clue on how to fix this bug?

[Coderambling]

Had a look at the issue you referenced, and looks like some code was changed in ipywidgets_bokeh to solve it. So you're possibly on the right track, but I have no idea beyond that.

[philippjfr]

In my testing this is now working but will require a new release of ipywidgets_bokeh.

[anton-br]

yeah, I've also checked and problem with version disappears! @philippjfr, thank you!

But, I've found another one. If you try to create interactive pn.pane.Matplotlib instead of slider you'll receive an error "Comm is already created". Feels like someone is trying to create the same comm twice)

I'll try to figure out why is happenning and let you know.

[philippjfr]

Can you provide a reproducer?

[anton-br]

import ipywidgets as ipw
import panel as pn
import matplotlib.pyplot as plt

pn.extension('ipywidgets')

button = pn.widgets.Button(name='button', width=100)
def calculate(a):
    if not a:  # aviod widgets creation before button is clicked
        return None
    fig, ax = plt.subplots()
    ax.plot((1, 2, 3))
    return pn.pane.Matplotlib(fig, interactive=True, high_dpi=False)

bind_button = pn.bind(calculate, button)
pn.Column(button, bind_button).servable()

[philippjfr]

Thanks, also now fixed in bokeh/ipywidgets_bokeh#104

[anton-br]

Great is working as intended now!

[Coderambling]

Wow that was a quick turnaround @philippjfr !