Bokeh - обновить текст Div во время обратного вызова - PullRequest
0 голосов
/ 17 апреля 2020

Фон:

У меня есть сервер bokeh, показывающий график рассеяния и таблицу данных. Когда пользователь щелкает точку данных на графике, DataTable обновляется данными, связанными с этой точкой. Выше DataTable у меня есть Div с заголовком для таблицы.

У меня есть ColumnDataSource.selected.on_change с обработчиком событий на источнике для точечной диаграммы и я могу обновить DataTable.

Проблема:

Я хотел бы обновить Div с выбранной точкой, чтобы показать, к чему относятся данные в таблице, но не может.

Ниже приведен пример того, что Я пытаюсь сделать:

import pandas as pd

from bokeh.io import curdoc
from bokeh.models import ColumnDataSource, Div
from bokeh.models.widgets import DataTable, TableColumn
from bokeh.layouts import gridplot
from bokeh.plotting import figure

df = pd.DataFrame({'a':[1, 2, 3, 4, 5], 'b':[10, 20, 30, 40, 50]})

src = ColumnDataSource(df)

p = figure(tools='tap')

p.circle(x='a', y='b', source=src)

df1 = pd.DataFrame({'a':[], 'b':[]})

srcTab = ColumnDataSource(df1)

table_cols = [TableColumn(field='a', title='a'),
        TableColumn(field='b', title='b')]

dataTable = DataTable(source=srcTab, columns=table_cols)

# This is the div in question
div = Div(text="<b>Select a data point</b>")

grid = gridplot([[None, div], [p, dataTable]])

def callback(attr, old, new):
    selected_index = src.selected.indices[0] + 1

    newDf1 = df.iloc[0:selected_index,:]

    newSrcTab = ColumnDataSource(newDf1)

    srcTab.data.update(newSrcTab.data)

    # Set div text to f"Point selected: {selected_index}"

src.selected.on_change('indices', callback)

curdoc().add_root(grid)

Требования:

боке, pandas

Сервер может быть запущен с bokeh serve --show [folder with the above code in it]/

Примечания:

  1. Я знаю, что обработчик событий выдает много ошибок. Это просто пример кода, а не мой фактический вариант использования (в котором есть обработка ошибок).
  2. Я бы предпочел сделать все это в python, но если бы существовало простое решение с пользовательским обратным вызовом JS, которое бы будь великим.
...