从Flask应用程序启动的Bokeh服务器回调

Question

我正在使用Flask-AppBuilder框架构建一个应用程序,并使用autoload_server将脚本src插入到我的html模板中成功嵌入了散景图.目前,我在散景应用程序中有一个小部件按钮,它会触发python回调以更新绘图.我会想知道的是,如果有可能触发相同的行为,但使用一个按钮,位于烧瓶内部应用程序.在我看来,这应该是可能的,但我只是不知道如何将一个UI事件从烧瓶按钮传递到散景服务器.

以下是简化代码.

bokeh.py代码

有一个回调按钮可以将情节从'cos'改为'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"

烧瓶应用

使用散景服务器嵌入散景应用程序.我首先bokeh serve --allow-websocket-connection=localhost:5006 --allow-websocket-connection=localhost:8080 bokeh.py在命令提示符下运行以启动散景服务器.然后我在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/")

烧瓶bokeh.html模板

有一个按钮,我想以某种方式触发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 %}

Answer 1

一种快速而肮脏的方法是右键单击浏览器中的 Bokeh 按钮并选择“检查元素”。您应该看到定义的 onClick 函数。从那里您应该能够为 Flask 应用程序中的按钮提供相同的 onClick 函数：

$(document).ready(function () {

    document.getElementById("flaskButton").onclick = [onClick function from Bokeh button];

});

上述内容仅适用于您希望保留这两个按钮的情况。