Bokeh DataTable won't update after trigger('change') without clicking on header

Question

Bokeh version: 0.10 Python: 3.4 Jupiter: 4.x

Goal: create a table that only shows data selected from a scatter plot

Problem: the DataTable only refreshes itself after being clicked on despite the: s2.trigger('change'). In other examples on Bokeh site one plot will update another using this technique: see http://bokeh.pydata.org/en/latest/docs/user_guide/interaction.html#customjs-for-selections

the code below should run in a Jupyter notebook if you're using the above mentioned versions.

and, thanks for any help. Joe

    from bokeh.io import output_notebook, show
    from bokeh.plotting import figure
    from bokeh.models import CustomJS, ColumnDataSource
    from bokeh.models.widgets import DataTable, TableColumn
    from bokeh.io import vform

    output_notebook()

    x = list(range(-20, 21))
    y0 = [abs(xx) for xx in x]

    # create a column data source for the plots to share
    source = ColumnDataSource(data=dict(x=x, y0=y0))
    s2 = ColumnDataSource(data=dict(x=[1],y0=[2]))

    source.callback = CustomJS(args=dict(s2=s2), code="""
            var inds = cb_obj.get('selected')['1d'].indices;
            var d1 = cb_obj.get('data');
            var d2 = s2.get('data');
            d2['x'] = []
            d2['y0'] = []
            for (i = 0; i < inds.length; i++) {
                d2['x'].push(d1['x'][inds[i]])
                d2['y0'].push(d1['y0'][inds[i]])
            }
            s2.trigger('change');
        """)


    # create DataTable

    columns = [
            TableColumn(field="x", title="x"),
            TableColumn(field="y0", title="y0"),
        ]
    dt = DataTable(source=s2, columns=columns, width=300, height=300 )

    # create a new plot and add a renderer
    TOOLS = "box_select,lasso_select,help"
    left = figure(tools=TOOLS, width=300, height=300)
    left.circle('x', 'y0', source=source)


    show(vform(left,dt))

Answer 1

only s2 change is triggered in the CustomJS, so it's normal that dt doesn't change.

this will do the job, dt moved above the JS, dt is passed in the JS, and dt is triggered :

dt = DataTable(source=s2, columns=columns, width=300, height=300 )
source.callback = CustomJS(args=dict(s2=s2, dt=dt), code="""
        var inds = cb_obj.get('selected')['1d'].indices;
        var d1 = cb_obj.get('data');
        var d2 = s2.get('data');
        d2['x'] = []
        d2['y0'] = []
        for (i = 0; i < inds.length; i++) {
            d2['x'].push(d1['x'][inds[i]])
            d2['y0'].push(d1['y0'][inds[i]])
        }
        console.log(dt);
        s2.trigger('change');
        dt.trigger('change');
    """)

Answer 2

If you only care about updating the table, then you don't actually need to pass both the data source and the "data table". This is because the "data table" already has the source as an attribute. Here is the code in its entirety (note that only "dt" is passed):

from bokeh.io import output_notebook, show
from bokeh.plotting import figure
from bokeh.models import CustomJS, ColumnDataSource
from bokeh.models.widgets import DataTable, TableColumn
from bokeh.io import vform

output_notebook()

x = list(range(-20, 21))
y0 = [abs(xx) for xx in x]

# create a column data source for the plots to share
source = ColumnDataSource(data=dict(x=x, y0=y0))
s2 = ColumnDataSource(data=dict(x=[1],y0=[2]))

# create DataTable

columns = [
    TableColumn(field="x", title="x"),
    TableColumn(field="y0", title="y0"),
]
dt = DataTable(source=s2, columns=columns, width=300, height=300 )

# create a new plot and add a renderer
TOOLS = "box_select,lasso_select,help"
left = figure(tools=TOOLS, width=300, height=300)
left.circle('x', 'y0', source=source)

source.callback = CustomJS(args=dict(mytable=dt), code="""
var inds = cb_obj.get('selected')['1d'].indices;
var d1 = cb_obj.get('data');
var d2 = mytable.get('source').get('data');
d2['x'] = []
d2['y0'] = []
for (i = 0; i < inds.length; i++) {
d2['x'].push(d1['x'][inds[i]])
d2['y0'].push(d1['y0'][inds[i]])
}
mytable.trigger('change');
""")

show(vform(left,dt))