Bokeh server callback initiated from Flask application

Dear all,

I am crossposting this question from stack overflow in the hopes of reaching somebody who could point me in the right direction. I was not able to find a similar example online.

down votefavorite

I am building an app using the Flask-AppBuilder framework, and have successfully embedded a bokeh plot using autoload_server to insert the script src into my html template. At the moment, I have a widget button inside the bokeh app which triggers a python callback to update the plot. What I would like to know is if it is possible to trigger the same behaviour but using a button which sits inside the flask app. It seems to me that this should be possible but I just don’t know how to communicate the UI event from a flask button to the bokeh server.

Below is simplified code.

bokeh.py code

Has a callback button to change plot from ‘cos’ to ‘sin’.

import numpy as np
from bokeh.plotting import figure, output_file, show
from bokeh.io import curdoc, reset_output
from bokeh.layouts import column, row
from bokeh.models import Button

def plotRoutine(input):

    x = np.linspace(0,10)
    if input=='cos':
        y = np.cos(x)
    if input=='sin':
        y = np.sin(x)

    plot = figure(title = input)
    plot.line(x, y)

    return plot
def callback():
    plot = plotRoutine('sin')
    layout.children[1] = plot
plot = plotRoutine('cos')

button = Button(label="Callback button in bokeh server")
button.on_click(callback)

layout = column(button, plot)
curdoc().add_root(layout)
curdoc().title = "bokeh"

Flask app

Embeds the bokeh app using bokeh server. I am first running bokeh serve --allow-websocket-connection=localhost:5006 --allow-websocket-connection=localhost:8080 bokeh.py in command prompt to start the bokeh server. Then I start my flask app on localhost:8080.

from flask import render_template, request, g
from flask_appbuilder import ModelView, BaseView, expose, has_access
from bokeh.embed import autoload_server
class Bokeh(BaseView):

    default_view = 'bokeh'

    @expose("/")
    @has_access
    def bokeh(self):
        script = autoload_server(model=None, url="http://localhost:5006/bokeh")
        return self.render_template('bokeh.html', bokeh_script=script)

appbuilder.add_view(Bokeh(), "Bokeh", href="/bokeh/")

Flask bokeh.html template

Has a button that I would like to somehow trigger the callback inside the bokeh.py.

{% extends "appbuilder/base.html" %}
{% block content %}

<script>

    $(document).ready(function () {

        document.getElementById("flaskButton").onclick = function () {

            // CODE HERE TO TRIGGER CALLBACK?

        };

    });

</script>

<div id="bokeh_app">
    {{ bokeh_script|safe }}
</div>

<button id="flaskButton">Callback button in Flask</button>

{% endblock %}