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()