Bokeh source.change.emit() only works on first change

Question

I'm trying to create an interactive stacked bar chart that displays the data for a given slider value. The entire data is stored in a base dataset and the data displayed is a subset of this base dataset. The problem I'm facing is that the code basically works, but only the first time a change is issued.

Here is a minimal example:

from bokeh.layouts import column
from bokeh.models import CustomJS, Slider
from bokeh.plotting import ColumnDataSource, figure, output_file, show

import pandas as pd

base = pd.DataFrame({'a': [1, 2, 3, 4, 5, 6],
                     'b': [10, 20, 30, 40, 50, 60],
                     'c': ['x', 'y', 'x', 'y', 'x', 'y']})
edit = pd.DataFrame({'a': [1, 2],
                     'b': [10, 20],
                     'c': ['x', 'y']})

sbase = ColumnDataSource(data=base)
sedit = ColumnDataSource(data=edit)

p = figure(x_range=['x', 'y'], width=200, height=200)
p.vbar_stack(stackers=['a', 'b'], x='c', width=0.9, color=['#7570b3', '#1b9e77'], source=sedit)

slider = Slider(start=1, end=3, value=1, step=1, title='slider')
slider_callback = CustomJS(args=dict(sbase=sbase, sedit=sedit), code="""
    const sid = cb_obj.value;
    const bs = sbase.data;
    const ed = sedit.data;
    
    var ix = sid*2-2;
    var iy = sid*2-1;    
    
    ed['a'] = [bs['a'][ix], bs['b'][ix]];
    ed['b'] = [bs['a'][iy], bs['b'][iy]];
    
    console.log(ed)
    console.log(sedit.data)
    sedit.change.emit();
    console.log(sedit.data)
""")
slider.js_on_change('value', slider_callback)

output_file('test.html')
show(column(p, slider))

I'm kind of at a loss, because, according to the logs, the underlying data does change with subsequent inputs, but the chart still remains frozen.

Answer 1

source.change.emit is something that probably should be internal, but it's been mentioned a few places where it is currently the only option. However, in general (including this case) the recommended best practice is always to make real assignments to update entire property values (e.g. .data) all at once, rather than changing things "in-place".

slider_callback = CustomJS(args=dict(sbase=sbase, sedit=sedit), code="""
    const sid = cb_obj.value;
    const bs = sbase.data;
    const ix = sid*2-2;
    const iy = sid*2-1;

    sedit.data = {
        a: [bs['a'][ix], bs['b'][ix]],
        b: [bs['a'][iy], bs['b'][iy]],
        c: bs.c
    }
""")