Bokeh app not running inside a Jupyter Notebook

mbilyanov · August 3, 2023, 7:12pm

I have the following example application, and when I try to run it inside a jupyter notebook, I’m getting a massive error.

from bokeh.layouts import column
from bokeh.models import ColumnDataSource, CheckboxButtonGroup, CustomJS
from bokeh.plotting import show, figure, output_notebook
import pandas as pd
output_notebook()

def create_plot(doc):
    
    # create fake data
    x = [2, 4, 8, 5, 9, 3]
    y = [4, 8, 2, 7, 4, 6]
    id_ = ['1001', '1002', '1003', '1004', '1005', '1006']
    color = ['red'] + ['green']*5
    df = pd.DataFrame({'x': x, 'y': y, 'ids': id_, 'color': color})

    # create column data source
    cds = ColumnDataSource(data=df)

    # create figure
    p = figure(width=300, height=200)
    p.circle(x='x', y='y', size=5, source=cds, color='color')

    # Create widget (checkbox button)
    checkbox_button_group = CheckboxButtonGroup(labels=id_, active=[0])

    # Update the colors after a click on an id
    checkbox_button_group.js_on_click(CustomJS(code="""
        console.log('checkbox_button_group: active=' + this.active, this.toString())
        """))

    def set_col(row, red_ids):
        color = 'red' if row in red_ids else 'green'
        return color

    def update_data(df, red_ids=None):
        if red_ids is None:
            red_ids = []
        
        df['color'] = df['ids'].apply(lambda x: set_col(x, red_ids))
        cds.data = df

    def update(attr, old, new):
        red_ids = [checkbox_button_group.labels[i] for i in checkbox_button_group.active]
        update_data(df, red_ids)

    checkbox_button_group.on_change('active', update)

    # display button & plot in a column
    doc.add_root(column(checkbox_button_group, p))

show(create_plot)

The error I’m getting is:

ERROR:tornado.application:Uncaught exception GET /autoload.js?bokeh-autoload-element=p1001&bokeh-absolute-url=[http://localhost:58198&resources=none](http://localhost:58198&resources=none/) (::1)

HTTPServerRequest(protocol='http', host='localhost:58198', method='GET', uri='/autoload.js?bokeh-autoload-element=p1001&bokeh-absolute-url=[http://localhost:58198&resources=none](http://localhost:58198&resources=none/)', version='HTTP/1.1', remote_ip='::1')

Traceback (most recent call last):

File "/Users/me/miniconda3/envs/myproject/lib/python3.9/site-packages/tornado/web.py", line 1713, in _execute

result = await result

File "/Users/me/miniconda3/envs/myproject/lib/python3.9/site-packages/bokeh/server/views/autoload_js_handler.py", line 62, in get

session = await self.get_session()

File "/Users/me/miniconda3/envs/myproject/lib/python3.9/site-packages/bokeh/server/views/session_handler.py", line 145, in get_session

session = await self.application_context.create_session_if_needed(session_id, self.request, token)

File "/Users/me/ERROR:tornado.application:Uncaught exception GET /autoload.js?bokeh-autoload-element=p1001&bokeh-absolute-url=[http://localhost:58198&resources=none](http://localhost:58198&resources=none/) (::1)

HTTPServerRequest(protocol='http', host='localhost:58198', method='GET', uri='/autoload.js?bokeh-autoload-element=p1001&bokeh-absolute-url=[http://localhost:58198&resources=none](http://localhost:58198&resources=none/)', version='HTTP/1.1', remote_ip='::1')

Traceback (most recent call last):

File "/Users/me/miniconda3/envs/myproject/lib/python3.9/site-packages/tornado/web.py", line 1713, in _execute

result = await result

File "/Users/me/miniconda3/envs/myproject/lib/python3.9/site-packages/bokeh/server/views/autoload_js_handler.py", line 62, in get

session = await self.get_session()

File "/Users/me/miniconda3/envs/myproject/lib/python3.9/site-packages/bokeh/server/views/session_handler.py", line 145, in get_session

session = await self.application_context.create_session_if_needed(session_id, self.request, token)

File "/Users/me/miniconda3/envs/myproject/lib/python3.9/site-packages/bokeh/server/contexts.py", line 240, in create_session_if_needed

self._application.initialize_document(doc)

File "/Users/me/miniconda3/envs/myproject/lib/python3.9/site-packages/bokeh/application/application.py", line 190, in initialize_document

h.modify_document(doc)

File "/Users/me/miniconda3/envs/myproject/lib/python3.9/site-packages/bokeh/application/handlers/function.py", line 140, in modify_document

self._func(doc)

File "/Users/me/.tmp/ipykernel_18885/1564001177.py", line 27, in create_plot

checkbox_button_group.js_on_click(CustomJS(code="""

File "/Users/me/miniconda3/envs/myproject/lib/python3.9/site-packages/bokeh/core/has_props.py", line 360, in __getattr__

self._raise_attribute_error_with_matches(name, properties)

File "/Users/me/miniconda3/envs/myproject/lib/python3.9/site-packages/bokeh/core/has_props.py", line 368, in _raise_attribute_error_with_matches

raise AttributeError(f"unexpected attribute {name!r} to {self.__class__.__name__}, {text} attributes are {nice_join(matches)}")

AttributeError: unexpected attribute 'js_on_click' to CheckboxButtonGroup, similar attributes are js_event_callbacks

miniconda3/envs/myproject/lib/python3.9/site-packages/bokeh/server/contexts.py", line 240, in create_session_if_needed

self._application.initialize_document(doc)

File "/Users/me/miniconda3/envs/myproject/lib/python3.9/site-packages/bokeh/application/application.py", line 190, in initialize_document

h.modify_document(doc)

File "/Users/me/miniconda3/envs/myproject/lib/python3.9/site-packages/bokeh/application/handlers/function.py", line 140, in modify_document

self._func(doc)

File "/Users/me/.tmp/ipykernel_18885/1564001177.py", line 27, in create_plot

checkbox_button_group.js_on_click(CustomJS(code="""

File "/Users/me/miniconda3/envs/myproject/lib/python3.9/site-packages/bokeh/core/has_props.py", line 360, in __getattr__

self._raise_attribute_error_with_matches(name, properties)

File "/Users/me/miniconda3/envs/myproject/lib/python3.9/site-packages/bokeh/core/has_props.py", line 368, in _raise_attribute_error_with_matches

ERROR:tornado.access:500 GET /autoload.js?bokeh-autoload-element=p1001&bokeh-absolute-url=[http://localhost:58198&resources=none](http://localhost:58198&resources=none/) (::1) 59.34ms

raise AttributeError(f"unexpected attribute {name!r} to {self.__class__.__name__}, {text} attributes are {nice_join(matches)}")

AttributeError: unexpected attribute 'js_on_click' to CheckboxButtonGroup, similar attributes are js_event_callbacks

ERROR:tornado.access:500 GET /autoload.js?bokeh-autoload-element=p1001&bokeh-absolute-url=[http://localhost:58198&resources=none](http://localhost:58198&resources=none/) (::1) 59.34ms

Bryan · August 3, 2023, 7:16pm

It’s not possible to speculate without more information. Is this Jupyterlab? Classic Jupyter notebook? Have you installed the Bokeh Jupyter extension? Did you set the appropriate notebook_url parameter properly? ^[1] What are the relevant versions (of everything)?

IMO users having to manually tell us what the notebook frontend URL is, is really terrible UX. But the Jupyter team has a calcified ideological opposition to exposing any front-end details to the running kernel, so the matter is out of our hands entirely. We cannot make this better on our end. ↩︎

mbilyanov · August 3, 2023, 7:46pm

It is jupyterlab Version 3.3.2
Yes, conda install jupyter_bokeh is installed.
Tried notebook_url = "http://localhost:60000"

Nothing.

But you are correct, I tried everything and can’t get it to run in jupyter. I give up, at least how can I modify the example above so it runs with just the normal bokeh server command?

I get a completely blank page when I modify in the following way:

from bokeh.plotting import curdoc
...
...
..
create_plot(curdoc)

Bryan · August 3, 2023, 7:56pm

What version of Bokeh? Are there any errors or messages in the browser’s JavaScript console?

how can I modify the example above so it runs with just the normal bokeh server command?

Generally speaking you would just put all the code inside the ap function in a script, and replace the occurrences of doc with curdoc(). There’s many examples to refer to in the docs and in the repo.

Bryan · August 3, 2023, 8:00pm

@mbilyanov I missed this buried in the output:

AttributeError: unexpected attribute 'js_on_click' to CheckboxButtonGroup, similar attributes are js_event_callbacks

There is not js_on_click in Bokeh 3.0 or later. Use the standard and general `js_on_change with the “active” property

    checkbox_button_group.js_on_change("active", CustomJS(code="""

.
Lots of examples of using js_on_change in the docs:

JavaScript callbacks — Bokeh 3.2.1 Documentation

mbilyanov · August 3, 2023, 8:20pm

With this:
show(create_plot, notebook_url="localhost:8888")

Now I’m getting this:

ERROR:bokeh.server.views.ws:Refusing websocket connection from Origin '[http://localhost:8891](http://localhost:8891/)'; use --allow-websocket-origin=localhost:8891 or set BOKEH_ALLOW_WS_ORIGIN=localhost:8891 to permit this; currently we allow origins {'localhost:8888'} WARNING:tornado.access:403 GET /ws (::1) 3.17ms WARNING:tornado.access:403 GET /ws (::1) 3.17ms

mbilyanov · August 3, 2023, 8:21pm

show(create_plot, notebook_url="localhost:8891")

Got it to work inside the jupyter lab notebook … which a progress.

Trying to get it running as a standalone server app.

Thank you for the help and for your patience.

system · November 1, 2023, 8:22pm

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.