Run sample code find: Error: reference {"type":"ColumnDataSource",}

Hi,

When a implemented my code based on follow sample code, I got a error of:

Uncaught Error: reference {“type”:“ColumnDataSource”,“id”:“5c356b74-1e46-4e92-bd35-c0bd7ff9c4c1”} isn’t known (not in Document?)

at o (document.js:412)

at document.js:433

at o (document.js:417)

at Function.P._resolve_refs (document.js:437)

at P.apply_json_patch (document.js:728)

at t._handle_patch (session.js:70)

at t.handle (session.js:19)

at t._steady_state_handler (connection.js:262)

at t.ACK.t.msgtype._current_handler (connection.js:242)

at t._on_message (connection.js:204)

But when I just copied and run the sample code only with bokeh serve mode, I found this error as well. Is anyone know why? Is there any error in our bokeh sample? My bokeh version is 0.13.0. This code is OK on jupyter.

from bokeh.plotting import figure, output_file, show
from bokeh.models import ColumnDataSource, HoverTool, CustomJS

output_file("hover_callback.html")

# define some points and a little graph between them
x = [2, 3, 5, 6, 8, 7]
y = [6, 4, 3, 8, 7, 5]
links = {
    0: [1, 2],
    1: [0, 3, 4],
    2: [0, 5],
    3: [1, 4],
    4: [1, 3],
    5: [2, 3, 4]
}

p = figure(plot_width=400, plot_height=400, tools="", toolbar_location=None, title='Hover over points')

source = ColumnDataSource({'x0': [], 'y0': [], 'x1': [], 'y1': []})
sr = p.segment(x0='x0', y0='y0', x1='x1', y1='y1', color='olive', alpha=0.6, line_width=3, source=source, )
cr = p.circle(x, y, color='olive', size=30, alpha=0.4, hover_color='olive', hover_alpha=1.0)

# Add a hover tool, that sets the link data for a hovered circle
code = """
var links = %s;
var data = {'x0': [], 'y0': [], 'x1': [], 'y1': []};
var cdata = circle.data;
var indices = cb_data.index['1d'].indices;
for (var i = 0; i < indices.length; i++) {
    var ind0 = indices[i]
    for (var j = 0; j < links[ind0].length; j++) {
        var ind1 = links[ind0][j];
        data['x0'].push(cdata.x[ind0]);
        data['y0'].push(cdata.y[ind0]);
        data['x1'].push(cdata.x[ind1]);
        data['y1'].push(cdata.y[ind1]);
    }
}
segment.data = data;
""" % links

callback = CustomJS(args={'circle': cr.data_source, 'segment': sr.data_source}, code=code)
p.add_tools(HoverTool(tooltips=None, callback=callback, renderers=[cr]))

show(p)

Hi,

You are never adding any roots to your document. Every Bokeh server app typically ends with a line similar to

    cursor().add_root(...)

which specifies what the Bokeh server should display. The "show" function is only useful for standalone (i.e. non Bokeh server) content. There are lots of example apps you can refer to here:

  https://github.com/bokeh/bokeh/tree/master/examples/app

As well as documentation about the Bokeh server and Bokeh apps here:

  Bokeh server — Bokeh 3.3.2 Documentation

Thanks,

Bryan