Bokeh dynamically changes BoxAnnotation

Question

Is it possible to update the rendering of bokeh shapes in the IPython interaction function. I have a code that looks like this:

x = [0, 1, 2, 3, 4]
y = [0, 1, 2, 3, 4]
source = ColumnDataSource(data=dict(x=x, y=y)
f = figure()
f.line(x, y, source=source)
show(f)

def update_func(selected_data):
   source.data['y'] = ...
   source.push_notebook()
   <here I would like to add BoxAnnotation to figure f, and rerender it>

interactive(update_func, selected_data=[0,1,2])

Answer 1

You can use CustomJS to insert JavaScript code that will be used to change the lower and upper values ​​of BoxAnnotation. I am using Slider from Bokeh in this example:

from bokeh.io import vform
from bokeh.models import CustomJS, Slider
from bokeh.plotting import figure, show
from bokeh.models import BoxAnnotation

plot = figure(plot_width=300, plot_height=300)
plot.line([0,1],[0,1], line_width=3, line_alpha=0.6)

box_l = BoxAnnotation(plot=plot, top=0.4, 
                      fill_alpha=0.1, fill_color='red')
box_m = BoxAnnotation(plot=plot, bottom = 0.4,top=0.6, 
                      fill_alpha=0.1, fill_color='green')
box_h = BoxAnnotation(plot=plot, bottom=0.6, 
                      fill_alpha=0.1, fill_color='red')
plot.renderers.extend([box_l, box_m, box_h])

callb_low = CustomJS(args=dict(box_l=box_l,box_m=box_m,plot=plot),
    code="""
        var level = cb_obj.get('value')
        box_l.set({"top":level})
        box_m.set({"bottom":level})
        plot.trigger('change');
    """)

callb_high = CustomJS(args=dict(box_m=box_m,box_h=box_h,plot=plot),
    code="""
        var level = cb_obj.get('value')
        box_m.set({"top":level})
        box_h.set({"bottom":level})
        plot.trigger('change');
    """)

slider1 = Slider(start=0.1, end=1, value=0.4, step=.01, title="low",
                 callback=callb_low)
slider2 = Slider(start=0.1, end=1, value=0.6, step=.01, title="high",
                 callback=callb_high)
layout = vform(slider1,slider2, plot)
show(layout)

The result will look like this:

Based on the bigreddot suggestions, you can do the following on ipython laptops:

from bokeh.io import push_notebook
from bokeh.plotting import figure, show
from bokeh.models import BoxAnnotation
from ipywidgets import interact

p = figure(x_range=(0,1), y_range=(0,1),plot_width=300, plot_height=300)
box_L = BoxAnnotation(plot=p, top=0.4, 
                      fill_alpha=0.1, fill_color='red')
box_M = BoxAnnotation(plot=p, bottom = 0.4,top=0.6, 
                      fill_alpha=0.1, fill_color='green')
box_H = BoxAnnotation(plot=p, bottom=0.6, 
                      fill_alpha=0.1, fill_color='red')
p.renderers.extend([box_L, box_M, box_H])

def update_func(thresh_L=0.4, thresh_H=0.6):
    box_L.top = box_M.bottom = thresh_L;
    box_M.top = box_H.bottom=thresh_H;
    p.renderers.extend([box_L, box_M, box_H])
    push_notebook()  # note, just a function, not a method on "source"

show(p)

Then, in a separate cell, you start your sliders:

interact(update_func, thresh_L=(0, 1, 0.1),thresh_H=(0, 1, 0.1))

Answer 2

Bokeh 0.11 push_notebook Bokeh. / push_notebook. :

x = [0, 1, 2, 3, 4]
y = [0, 1, 2, 3, 4]
source = ColumnDataSource(data=dict(x=x, y=y)
f = figure()
f.line(x, y, source=source)
show(f)

def update_func(selected_data):
    source.data['y'] = ...
    # update box annotation (or any other properties) here
    push_notebook()  # note, just a function, not a method on "source"

interactive(update_func, selected_data=[0,1,2]) 

:

https://github.com/bokeh/bokeh/blob/master/examples/howto/notebook_comms/Basic%20Usage.ipynb

https://github.com/bokeh/bokeh/blob/master/examples/howto/notebook_comms/Continuous%20Updating.ipynb

https://github.com/bokeh/bokeh/blob/master/examples/howto/notebook_comms/Jupyter%20Interactors.ipynb