Panel widgets compatible with .jscallback

Panel
1

I wanted to access the value of panel.widgets.RadioButtonGroup in a jscallback but it seems like this is not possible. In the minimal example below, the value of panel.widgets.Select is logged correctly but value of RadioButtonGroup is undefined. I also get undefined with RadioBoxGroup/DiscreteSlider. Is there any documentation for which Panel widgets can be made available to javascript in this manner?

import panel as pn


select = pn.widgets.Select(value="*", options=["*", "+"], width=50)
radio_button = pn.widgets.RadioButtonGroup(value="*", options=["*", "+"])
button = pn.widgets.Button(name="Log value")


button.jscallback(
    clicks="""
console.log(sel.value)
console.log(rad.value)
""",
    args={"sel": select, "rad": radio_button},
)

pn.serve(pn.Row(select, radio_button, button))
2

Since this widget comes directly from bokeh, you need to check the props that mdoel has.
In this case you want the .active property.

3

As @rsdenijs points out, internally Panel tries to define mappings from the underlying Bokeh properties to the parameter name in Panel in order to provide a consistent API. Internally this happens using the _rename attribute on the widget, e.g.:

pn.widgets.RadioButtonGroup._rename['value']

'active'

Additionally, in order to support jslinking we also define so called _source_transforms:

pn.widgets.RadioButtonGroup._source_transforms

{'value': 'source.labels[value]'...

which define transformations needed to map the property value of active back to the value you’d see in Python.

2 Likes
4

@rsdenijs @philippjfr thank you for your answers!

Does this also apply for non-Bokeh widgets? So I tried to look at _rename and _source_transforms for pn.widgets.Tabulator; while _rename is empty _source_transforms maps all props to None.

5

Any property that is mapped to None effectively can’t be easily linked because Python applies significant transformations to it that can’t easily be replicated in JS. That doesn’t necessarily mean it’s not possible but it’s a good indication that it isn’t straightforward.