javascript - 保存修改后的 ColumnDataSource

Question

我正在尝试使用 flask 和 bokeh 构建一个网络应用程序，用户可以在其中手动对数据进行分类。现在，UI 使用自定义 javascript 回调来直观地呈现更改，但我不确定如何使用 javascript 将发布请求发送回我的 flask 应用程序以记录用户的事件。

我想考虑的替代解决方案是将 ColumnDataSource 转换为 .csv 文件，用户在完成特定页面后可以下载该文件，但我不确定在 flask 中调用 api 后如何访问 ColumnDataSource。

我提供了一个基本示例来说明我要完成的任务。

from bokeh.embed import file_html
from bokeh.events import DoubleTap
from bokeh.models import CategoricalColorMapper, ColumnDataSource, CustomJS
from bokeh.plotting import figure
from bokeh.resources import CDN 
from flask import Flask
import numpy as np

# color map
cmap = CategoricalColorMapper(
    factors=[0, 1], 
    palette=['red', 'green']
)

# custom javascript callback
js_code = """ 
    var x = cb_obj['x'];
    var left = src.data['left'];
    var right = src.data['right'];
    var color = src.data['color'];
    for (i=0; i < left.length; i++) {
        if ((x > left[i]) && (x < right[i])) {
            var c = color[i]
            if (c < 1) {
                color[i] = 1
            } else {
                color[i] = 0
            }
        }
    }
    src.data['color'] = color
    src.trigger('change')
"""

# flask app
app = Flask(__name__)

@app.route("/")
def main():
    N = 10
    left = np.arange(N)
    right = left + 1 
    color = np.random.randint(2, size=N)

    src = ColumnDataSource({
        'left': left,
        'right': right,
        'color': color
    })  

    fig = figure(
        width=500, height=200,
        title='Double Click to Change Color'
    )   
    fig.quad(
        'left', 'right', 0, 1,
        source=src,
        fill_color={'field': 'color', 'transform': cmap},
        line_color='black'
    )   

    callback = CustomJS(code=js_code, args={'src': src})
    fig.js_on_event(DoubleTap, callback)
    title = 'test'
    html = file_html(fig, CDN, title)

    return html

if __name__ == "__main__":
    app.run(debug=True)

感谢阅读!

Answer 1

从 JS 发送 POST 请求，你可以使用 XMLHttpRequest .

但是，在您的场景中，我会使用 Bokeh 服务器 ( example of usage with Flask ) - 这样，您不需要任何手动 POST 请求，因为示例中的 ColumnDataSource 将被同步到触发更改信号后的 Bokeh 服务器(顺便说一句，“触发器”已弃用，您应该使用 src.change.emit())。

在自定义 GET 处理程序中，您可以使用 get_model_by_name 访问 Bokeh 服务器上您的 Bokeh 文档的任何模型:

@app.route('/cds-data/<cds_name>')
def get_cds_data(cds_name):
    data = curdoc().get_model_by_name(cds_name).data
    return some_dict_to_csv_string_function_you_have_to_write(data)

如果您仍然不想使用 Bokeh 服务器，您仍然不需要任何 POST 请求 - 您可以将数据转换为字符串，然后使用类似于此处示例的内容:https://stackoverflow.com/a/29534664/564509