Skip to main content

Plot / Bokeh / Widgets

Embed Bokeh widgets with script callbacks

# Original source: https://docs.bokeh.org/en/latest/docs/user_guide/interaction/callbacks.html#customjs-for-selections

import json
from random import random
from h2o_wave import main, app, Q, ui
from bokeh.resources import CDN
from bokeh.layouts import row
from bokeh.models import ColumnDataSource, CustomJS
from bokeh.plotting import figure
from bokeh.embed import json_item


@app('/demo')
async def serve(q: Q):
if not q.client.initialized:
q.client.initialized = True

# Create a plot
x = [random() for x in range(500)]
y = [random() for y in range(500)]

s1 = ColumnDataSource(data=dict(x=x, y=y))
p1 = figure(width=250, height=300, tools="lasso_select", title="Select Here")
p1.circle('x', 'y', source=s1, alpha=0.6)

s2 = ColumnDataSource(data=dict(x=[], y=[]))
p2 = figure(width=250, height=300, x_range=(0, 1), y_range=(0, 1), tools="", title="Watch Here")
p2.circle('x', 'y', source=s2, alpha=0.6)

s1.selected.js_on_change(
'indices',
CustomJS(
args=dict(s1=s1, s2=s2),
code="""
var indices = cb_obj.indices;
var d1 = s1.data;
var d2 = s2.data;
d2['x'] = []
d2['y'] = []
for (var i = 0; i < indices.length; i++) {
d2['x'].push(d1['x'][indices[i]])
d2['y'].push(d1['y'][indices[i]])
}
s2.change.emit();

// Send the selected indices to the Wave app via an event.
// Here,
// - The first argument, 'the_plot', is some name to uniquely identify the source of the event.
// - The second argument, 'selected', is some name to uniquely identify the type of event.
// - The third argument is any arbitrary data to be sent as part of the event.
// Ordinarily, we would just call wave.emit('the_plot', 'selected', indices), but this particular
// example triggers events every time the indices change (which is several times per second),
// so we use a 'debounced' version of 'emit()' that waits for a second before emitting an event.
// Here, 'emit_debounced()' is not part of the Wave API, but custom-built for this example - see
// the inline_script's 'content' below.
emit_debounced('the_plot', 'selected', indices);
// The indices will be accessible to the Wave app using 'q.events.the_plot.selected'.
"""
)
)

layout = row(p1, p2)

# Serialize the plot as JSON.
# See https://docs.bokeh.org/en/latest/docs/user_guide/embed.html#json-items
plot_id = 'my_plot'
plot_data = json.dumps(json_item(layout, plot_id))

q.page['meta'] = ui.meta_card(
box='',
# Import Bokeh Javascript libraries from CDN
scripts=[ui.script(path=f) for f in CDN.js_files],
# Execute custom Javascript
script=ui.inline_script(
# The inline script does two things:
content=f'''
// 1. Create a debounced version of `wave.emit()` and make it accessible to Bokeh's event handler.
// window.emit_debounced() is the name of new, debounced (calmer) version of wave.emit() that waits
// for 1000ms before emitting an event.
window.emit_debounced=window.wave.debounce(1000, window.wave.emit);

// 2. Make Bokeh render the plot.
Bokeh.embed.embed_item({plot_data});
''',
# Ensure that the Bokeh Javascript library is loaded
requires=['Bokeh'],
# Ensure that the target HTML container element is available
targets=[plot_id],
),
)
q.page['plot'] = ui.markup_card(
box='1 1 4 4',
title='',
content=f'<div id="{plot_id}"></div>',
)
q.page['details'] = ui.markdown_card(
box='1 5 4 1',
title='Selected Marks',
content='Nothing selected.',
)
else:
if q.events.the_plot and q.events.the_plot.selected:
q.page['details'].content = f'You selected {q.events.the_plot.selected}'

await q.page.save()