JSlink selection on DataFrame widget

xavArtley · September 25, 2021, 7:48pm

Hello, I was wondering if there is a way to jslink or jscallback selection parameter from a DataFrame widget?

nghenzi · September 26, 2021, 12:56am

I do not know why these options do not work. I guess I am getting the wrong Column Data Source

import pandas as pd
import panel as pn
import param 
pn.extension()

default_df = pd.DataFrame({'names': ['A', 'B'], 'v1': [20, 30],
                           'v2': [100, 200],     'v3': [480, 360]})

class ReactiveTable(param.Parameterized):
    table = param.DataFrame(default=default_df)

    def __init__(self, **params):        
        self.table_widget = pn.Param(self.param.table)[0]
        super().__init__(**params)

    @param.depends('table_widget.selection', watch=True)
    def update_params_with_selected_row_values(self):
        print (self.table_widget.selection)

rt = ReactiveTable()
table_view = rt.table_widget

# option 1
# rt.table_widget.jscallback(**{'selection': "console.log('selecting')"})

# option 2
print ('model and CDS', table_view._get_model(doc=pn.state.curdoc).source)  
from bokeh.models import ColumnDataSource, CustomJS
cds = table_view._get_model(doc=pn.state.curdoc).source
cds.selected.js_on_change('indices', CustomJS(args={'cds':cds}, code="console.log('selecting 2')") ) 

#option 3 
#print ('model and CDS', table_view.get_root())  
#cds = table_view.get_root().source
#cds.selected.js_on_change('indices', CustomJS(args={'cds':cds}, #code="console.log('aa')") ) 

#%% option 4 
#cds.selected.js_on_event('indices', CustomJS(args={'cds':cds}, code="console.log('aa', cb_obj)") ) 

table_view.servable()

nghenzi · September 26, 2021, 4:17am

I think it is related to this opened bug. The cds is not appended to the document, then the callbacks are not firing

github.com/bokeh/bokeh

[BUG] CDS js_on_change callback not firing, python callback is firing

opened 09:55PM - 30 Mar 21 UTC

sirspoon

type: bug tag: component: bokehjs tag: API: models

#### ALL software version info (bokeh, python, notebook, OS, browser, any other …relevant packages) Bokeh 2.3.0, chrome browser, python 3.6 #### Description of expected behavior and the observed behavior I'm attempting to trigger a js_on_change callback from a cds that changes in a button-related callback, however it doesn't trigger, I see no updates in the browser console. An on_change python callback however does manage to trigger from the same cds. I initially mentioned it on discourse here.. https://discourse.bokeh.org/t/cds-js-on-change-callback-not-firing-on-bokeh-server-but-python-callback-does-fire/7535. I believe it should trigger as I'm completely replacing the cds.data rather than changing it in-place which I understand is a factor it it triggering. edit: possibly related to this bug; https://github.com/bokeh/bokeh/issues/9613 Thanks for any input, suggestions for work-arounds, or even bug-fixes if it's an actual bug. Complete, minimal, self-contained example code that reproduces the issue below (running in bokeh server) ``` from bokeh.models import ColumnDataSource from bokeh.io import curdoc from bokeh.layouts import layout from bokeh.models import Button from bokeh import events from bokeh.models.callbacks import CustomJS def bkapp(doc): ### set up dummy cds and a button cds_counter=ColumnDataSource(data={"counter":[0]}) button_dummy=Button(label="Test Button_dummy", button_type="success", width=60) ### callback for the button, to update the cds global dummy_int dummy_int=0 def button_callback(event): print("button has been pressed") global dummy_int dummy_int +=1 temp=dummy_int cds_counter.data={"counter": [temp]} print(cds_counter.data["counter"]) button_dummy.on_click(button_callback) ### callbacks I'd like to trigger after pressing the button, via the cds change js_counter_callback = CustomJS(args=dict(cds_counter=cds_counter), code=""" console.log("test test test is not running") console.log(cds_counter.data["counter"]) """) def py_counter_callback(attr, old, new): print("should run when counter in cds changes??") cds_counter.on_change("data", py_counter_callback) cds_counter.js_on_change("data", js_counter_callback) doc.add_root(layout(button_dummy)) global doc doc = curdoc() bkapp(doc) ```

This works, but it is really ugly. As suggested in the github issue, adding an invisible plot to the document, it adds the cds to the doc, then the js callback works

cds_calbback

import pandas as pd
import panel as pn
import param 

pn.extension()

default_df = pd.DataFrame({'names': ['A', 'B'],
                           'v1': [20, 30],
                           'v2': [100, 200],
                           'v3': [480, 360]})

class ReactiveTable(param.Parameterized):
    table = param.DataFrame(default=default_df)

    def __init__(self, **params):        
        self.table_widget = pn.Param(self.param.table)[0]
        super().__init__(**params)

    @param.depends('table_widget.selection', watch=True)
    def update_params_with_selected_row_values(self):
        print (self.table_widget.selection)

rt = ReactiveTable()
table_view = rt.table_widget

# option 2
print ('model and CDS', table_view.get_root(), table_view._models)  
from bokeh.models import ColumnDataSource, CustomJS


cds = table_view.get_root().source
cds.selected.js_on_change('indices', CustomJS(args={'cds':cds}, 
    code="console.log(cb_obj.indices)") ) 

from bokeh.plotting import figure 
p = figure()
p.circle(x='v1', y='v2', source=cds)

pn.Column(table_view, 
        pn.pane.Bokeh(p, visible=False)).servable()