Jslink from bokeh panel to parameter

Panel
1

Hi everyone,

I try to link a bokeh widget in panel to some other object, e.g., a param. The example by Damien Farrell used to work with an older version of bokeh: panel jslink bokeh

With bokeh 2.0 this code seems to be broken. Here is a MWE:

from bokeh.plotting import figure
import panel as pn
pn.extension()

m = pn.pane.Markdown("**Chart info** x_range: XXX selected: XXX")
s = pn.widgets.IntSlider(name='x_range start',start=0,end=6,value=0)

p = figure(tools=['tap','xpan'], height=200)
p.circle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=10)

pp = pn.panel(p)

# plot -> params
jsupdateinfo = '''
    var r = source.x_range.start;
    // do something
'''
pp.jslink(m, code={'x_range.start': jsupdateinfo})
pp.jslink(s, **{'x_range.start': 'value'})

# params -> plot
jsupdateplot = '''
    var r = target.x_range.end - target.x_range.start;
    target.x_range.start = source.value;
    target.x_range.end = source.value+r;
'''
s.jslink(p, code={'value': jsupdateplot})

pn.Column(m,s,pp)

The jslinks from pp results in the following error:

    ValueError                                Traceback (most recent call last)
<ipython-input-27-627e90bb010e> in <module>
     16 '''
     17 #pp.jslink(m, code={'x_range.start': jsupdateinfo})
---> 18 pp.jslink(s, **{'x_range.start': 'value'})
     19 
     20 # params -> plot

~/anaconda3/envs/panel/lib/python3.8/site-packages/panel/viewable.py in jslink(self, target, code, args, bidirectional, **links)
   1083                 else:
   1084                     matches = ''
-> 1085                 raise ValueError("Could not jslink %r parameter (or property) "
   1086                                  "on %s object because it was not found.%s"
   1087                                  % (k, type(self).__name__, matches))

ValueError: Could not jslink 'x_range.start' parameter (or property) on Bokeh object because it was not found.

Thanks for your support!
Heike

2

The fact this isn’t working is a bug, it actually works perfectly fine if I just remove the validation. If you could file an issue that would be appreciated. For now you can emulate it using a jscallback:

jsupdateinfo = '''
var r = source.start;
slider.value = r
'''
pp.jscallback(args={'slider': s}, **{'x_range.start': jsupdateinfo})

Hope that helps.

3

Thanks a lot for the quick reply and solution! Done