lost interaction between ipywidgets when wrapped into bokeh

[epifanio]

When wrapping interconnected ipywidgets (e.g.: an IPyWidget.IntSlider with a ipyleaflet.Map.zoom) into an ipywidgets_bokeh, we lost the interaction between widgets.

Attempt to reproduce the issue:

from ipywidgets_bokeh import IPyWidget
import ipywidgets as widgets

from bokeh.layouts import row
from bokeh.plotting import curdoc
from ipyleaflet import Map, basemaps
from ipywidgets import jslink

m = Map(center=(46.01, 6.16), zoom=12, basemap=basemaps.Stamen.Terrain)
zoom_slider = widgets.IntSlider(description='Zoom level:', min=0, max=15, value=7)
jslink((zoom_slider, 'value'), (m, 'zoom'))

slider_wrapper = IPyWidget(widget=zoom_slider, width=600, height=400)
map_wrapper = IPyWidget(widget=m, width=600, height=400)


doc = curdoc()
doc.add_root(row(slider_wrapper, map_wrapper))

In the code above, the zoom slider should be connected with the zoom level into the ipywidgets map canvas.

[epifanio]

interaction between widgets is not working - I am digging into the ipywidgets_bokeh src code but with no luck ... @philippjfr any pointer/way to better debug this issue? Thanks for any hints!

[epifanio]

Cross-posting from: https://discourse.bokeh.org/t/bokeh-2-4-issue-rendering-ipywidgets/8441/2

Can't manage to get a basic example working. The IPywidgets are rendered correctly into a bokeh server app, but the linking between widgets is lost.

For the code above, see a running demo here: https://bokeh.epinux.com/ipw

Thanks for any help!

[bryevdv]

cc @mattpap @philippjfr for any comments

[epifanio]

Hi, is there any plan to re-add the ability to interact between ipywidgets and bokeh - is such a core functionality no longer supported in ipywidgets_bokeh?

I've tried different combinations of versions for the software involved, one that worked is the following:

ipykernel==5.5.5
bokeh==2.3.3
ipywidgets_bokeh==1.0.2

[epifanio]

@mattpap @philippjfr any hints on how can I debug this issue? is there any relevant log I can capture to help you debug this issue? perhaps by changing/adding logging statements into the src code? Thanks for any advice!

[epifanio]

@mattpap @philippjfr Any pointer on how to debug? (jslink not working between "wrapped" ipywidget linked to bokeh widget ) -- Is this bug going to be addressed ?
I was developing an app that relies on this package, but since last October I had to pin my dependencies on older bokeh and ipykernel to make it work, in the hope this bug was receiving some love :-)
unfortunately, I am now hitting the need to upgrade the bokeh version due to awesome new features and lots of bug-fix :)

[epifanio]

This is still an issue :(

I updated all the involved libraries to the latest stable version.:

(base) jovyan@0fec7b75a0de:~$ panel serve untitled.py 
2023-10-10 12:48:00,975 Starting Bokeh server version 3.2.2 (running on Tornado 6.3.3)
2023-10-10 12:48:00,976 User authentication hooks NOT provided (default user enabled)
2023-10-10 12:48:00,977 Bokeh app running at: http://localhost:5006/untitled
2023-10-10 12:48:00,977 Starting Bokeh server with process id: 261
2023-10-10 12:48:07,908 404 GET /static/extensions/ipywidgets_bokeh/ipywidgets_bokeh.js?v=1f4dc096d58f7d21e3875671aee6f29b120ab84218fa47db2cb53bc9eb5b4dac (172.17.0.1) 0.33ms
2023-10-10 12:48:07,989 WebSocket connection opened
2023-10-10 12:48:07,990 ServerConnection created

the js console log:

ipywidgets_bokeh.js:1     Failed to load resource: the server responded with a status of 404 (Not Found)
bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:183 [bokeh] setting log level to: 'info'
bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:226 [bokeh] Websocket connection 0 is now open
bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:226 Error: could not resolve type 'ipywidgets_bokeh.widget.IPyWidget', which could be due to a widget or a custom model not being registered before first usage
    at p.error (bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:211:4951)
    at p._resolve_type (bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:211:5059)
    at p._decode_object_ref (bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:211:4782)
    at p._decode (bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:211:1779)
    at bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:211:2249
    at f (bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:178:450)
    at p._decode_plain_array (bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:211:2237)
    at p._decode (bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:211:928)
    at p._decode_plain_object (bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:211:2340)
    at p._decode (bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:211:1066)
_repull_session_doc @ bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:226
bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:226 [bokeh] Failed to repull session Error: could not resolve type 'ipywidgets_bokeh.widget.IPyWidget', which could be due to a widget or a custom model not being registered before first usage
_repull_session_doc @ bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:226
bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:225 [bokeh] Failed to load Bokeh session M9GQ9U2HGrc6YH4vk8jdQzxgH0jpB4C8zdVJBl2SDGdi: Error: could not resolve type 'ipywidgets_bokeh.widget.IPyWidget', which could be due to a widget or a custom model not being registered before first usage
o.add_document_from_session @ bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:225
bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:163 Error rendering Bokeh items: Error: could not resolve type 'ipywidgets_bokeh.widget.IPyWidget', which could be due to a widget or a custom model not being registered before first usage
    at p.error (bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:211:4951)
    at p._resolve_type (bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:211:5059)
    at p._decode_object_ref (bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:211:4782)
    at p._decode (bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:211:1779)
    at bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:211:2249
    at f (bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:178:450)
    at p._decode_plain_array (bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:211:2237)
    at p._decode (bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:211:928)
    at p._decode_plain_object (bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:211:2340)
    at p._decode (bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:211:1066)
k @ bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:163
DevTools failed to load source map: Could not load content for chrome-extension://iidnbdjijdkbmajdffnidomddglmieko/sourceMap/detect-editors.js.map: System error: net::ERR_BLOCKED_BY_CLIENT

[bryevdv]

This is still an issue :(

There's not really anyone maintaining this at present. I expect this extension is of most interest to the panel/holoviz folks so perhaps issues on their trackers could encourage them to take up work on it.

I updated all the involved libraries to the latest stable version.:

you might try again, Bokeh 3.3 was just released and that 404 seems consistent with a "localhost' but that was just fixed. (Not enough information here to say at all for sure, though, just some speculation)

[philippjfr]

There's not really anyone maintaining this at present. I expect this extension is of most interest to the panel/holoviz folks so perhaps issues on their trackers could encourage them to take up work on it.

Lightly maintained is probably more accurate, @mattpap and I have tried to fix the most crucial issues and put in a good amount of work to support latest releases of ipywidgets and Bokeh. Getting jslink to work is unfortunately quite difficult but I also haven't been able to dig into it very deeply yet.

[epifanio]

Getting jslink to work is unfortunately quite difficult but I also haven't been able to dig into it very deeply yet.

I understand that, it is such a cool feature to be able to get the best of two great ecosystem back working together. If there is anything I can do to help debuging and test changes - I will be more than happy to spend time on this.

[philippjfr]

That would be really great. I'm not 100% sure what it would take. We need to understand how jslinks work. As far as I can tell jslink creates a Link widget in ipywidgets which is then somehow serialized alongside the source and target widgets. When you embed the two ipywidgets components that the jslink references as separate models in Bokeh I don't know whether the source or target model contains a reference to the Link widget and how the WidgetManager on the frontend connects the two.

[epifanio]

I don't know if that can help, but I have pinned the last version where this system was actually working well - I can share a docker image if helpful. A starting point .. could be changing the src code to add some debug statements .. ?