Getting selected glyph data properties via CustomJS

After searching a bit I found this issue: Data Source not synchronising client initiated changes to the server side. · Issue #7106 · bokeh/bokeh · GitHub
It seems you have to re-assign or copy the data.

Taking your code that means

data = {'proc_key': []}
target = ColumnDataSource(data)
callback = CustomJS(args=dict(source=source, target=target), code="""
        // get data source from Callback args
        var inds = source.selected.indices;

        // assign data to new data object
        var data = target.data;

        // update new data
        for (var i = 0; i < inds.length; i++) {
            console.log(source.data['proc_key'][inds[i]]);
            data['proc_key'].push(source.data['proc_key'][inds[i]])
        }

        // exchange old with new data
        target.data = data;
        
        console.log(target.data);
        target.change.emit();
    """)

I tested it using bokeh serve and it worked for me.

@Bryan 's statement was

The use case for updating JS data to sync python is by far less common (usually it is some computation in python using numpy or pandas, etc to update the data) so I don’t think I would do anything about this except possibly try to document it better.

1 Like