jslink/jscallback fails on CrossSelector

[nitrocalcite]

This appears to be unrelated to #1346.

I want to create a js callback that fires whenever the value of CrossSelector changes. I figured this kind of thing should work, as an example:

import panel as pn
w = pn.widgets.CrossSelector(name='selector', options=['a', 'b', 'c'])
w.jscallback(value="console.log('hello world');")
w.show()

However, the widget doesn't render at all. I get this stack in the browser logs:

[bokeh] setting log level to: 'info'
bokeh.min.js?v=16636fdaaea87a3216e9adf3b34ca3c7:551 [bokeh] Websocket connection 0 is now open
bokeh.min.js?v=16636fdaaea87a3216e9adf3b34ca3c7:551 TypeError: Cannot read property 'connect' of undefined
    at l.connect (bokeh.min.js?v=16636fdaaea87a3216e9adf3b34ca3c7:176)
    at l._update_property_callbacks (bokeh.min.js?v=16636fdaaea87a3216e9adf3b34ca3c7:239)
    at l.connect_signals (bokeh.min.js?v=16636fdaaea87a3216e9adf3b34ca3c7:239)
    at Function._initialize_references_json (bokeh.min.js?v=16636fdaaea87a3216e9adf3b34ca3c7:162)
    at Function.from_json (bokeh.min.js?v=16636fdaaea87a3216e9adf3b34ca3c7:162)
    at h._repull_session_doc (bokeh.min.js?v=16636fdaaea87a3216e9adf3b34ca3c7:551)
_repull_session_doc @ bokeh.min.js?v=16636fdaaea87a3216e9adf3b34ca3c7:551
bokeh.min.js?v=16636fdaaea87a3216e9adf3b34ca3c7:551 [bokeh] Failed to repull session TypeError: Cannot read property 'connect' of undefined
_repull_session_doc @ bokeh.min.js?v=16636fdaaea87a3216e9adf3b34ca3c7:551
bokeh.min.js?v=16636fdaaea87a3216e9adf3b34ca3c7:550 [bokeh] Failed to load Bokeh session hSE4zmZ9BTyuKlnO8TW7qoXNjS2llNQWiTGhkcNhP9Lj: TypeError: Cannot read property 'connect' of undefined
t.add_document_from_session @ bokeh.min.js?v=16636fdaaea87a3216e9adf3b34ca3c7:550
bokeh.min.js?v=16636fdaaea87a3216e9adf3b34ca3c7:160 Error rendering Bokeh items: TypeError: Cannot read property 'connect' of undefined
    at l.connect (bokeh.min.js?v=16636fdaaea87a3216e9adf3b34ca3c7:176)
    at l._update_property_callbacks (bokeh.min.js?v=16636fdaaea87a3216e9adf3b34ca3c7:239)
    at l.connect_signals (bokeh.min.js?v=16636fdaaea87a3216e9adf3b34ca3c7:239)
    at Function._initialize_references_json (bokeh.min.js?v=16636fdaaea87a3216e9adf3b34ca3c7:162)
    at Function.from_json (bokeh.min.js?v=16636fdaaea87a3216e9adf3b34ca3c7:162)
    at h._repull_session_doc (bokeh.min.js?v=16636fdaaea87a3216e9adf3b34ca3c7:551)

I expected that jscallback would work the same way on CrossSelector as it does on other widgets, say, Toggle:

# works fine for me
w = pn.widgets.Toggle(name='selector')
w.jscallback(value="console.log('hello world');")
w.show()

To work around this I tried to use jslink, but found identical behavior on CrossSelector and Toggle.
Are there any workarounds to this, or am I misunderstanding jscallback/jslink somehow?
Thanks!

Software version info

panel 0.9.7
bokeh 2.1.1
Ubuntu 16.04
Google Chrome
Python 3.7.7

[nitrocalcite]

Has anyone else tried to reproduce, or is there some workaround for this?

Thanks!

[philippjfr]

There probably isn't a great solution for now. The CrossSelector widget is a so called CompositeWidget which is made up of other widgets which are linked up in certain ways. Since that linking mostly happens in Python it's not really useable from the JS side. In the long run it would be good to convert it into a single widget but in the short term we should probably at least warn when you try to add JS callbacks.

[nitrocalcite]

A hacky workaround in the mean time that works for me is to link the CrossSelector's output value in Python to another widget and then using jscallback on that widget. For example, writing the output values as JSON into an un-editable TextInput and calling jscallback on the TextInput.

As you mentioned some kind of notification that these calls are unsupported would certainly help out.

[Material-Scientist]

Same for the DataFrame & Tabulator widgets:

df = pd.DataFrame({'x':[1,2,3],'y':[0,0.5,1]}).set_index('x')        

plot = pn.pane.HoloViews(hv.Curve(df))
frame = pn.widgets.DataFrame(value=df,height=150)
tab = pn.widgets.Tabulator(value=df)
slider = pn.widgets.IntSlider()
# slider.jslink(plot,code={'value':"console.log('slider test')"}) # works
# frame.jslink(plot,code={'value':"console.log('frame test')"}) # doesn't work
# tab.jslink(plot,code={'value':"console.log('tab test')"}) # doesn't work
pn.Row(plot,pn.Column(frame,tab,slider))

Versions:
pn.__version__, bokeh.__version__, hv.__version__, hvplot.__version__
('1.2.1', '3.2.2', '1.17.1', '0.8.4')
Python: 3.10.11

The layout also fails to render when executing the jslink.

2023-08-21-13-53-19.mp4