update datatable on bokeh barchart tap

Question

I have made a bokeh bar chart and a datatable from a pandas dataframe display next to eachother on a webpage using django. I want to click on the bar chart and change the displayed data table rows based on the title of the bar chart.

I have put an example below. Based on the example I want to click a bar on the barchart and retrieve the name of the bar (one of the fruits labels). I then want to filter a dataframe (just list in example) if the barchart name is the same as the string in the column. E.g.: If I click on the barchart bar called "apple" the rows of the dataframe where the "word" column value is equal to apple should be displayed.

I have been trying to do this with js_on_event and js_on_change but have not been able to read anything. Is there any way to do this? Or even just to read the name of the column on tap?

def indexPage(request):
fruits = ["apple", "banana","carrot","daikon","eggplant","fig","grape"]
count = [1,2,3,4,5,6,7]

data = {'fruits' : fruits,
        'count'   : count}

source = ColumnDataSource(data=data)

p = figure(y_range=fruits, sizing_mode='scale_width',toolbar_location='right',tools=['tap', 'reset'])

p.hbar(y='fruits', right="count",height=0.9,selection_color='deepskyblue', nonselection_color='lightgray',nonselection_alpha=0.3,source=source)
hover = HoverTool(tooltips=[("word","@fruits"),("count","@count")])
p.add_tools(hover)

script, div = components(p)
########################################################################################################
text = ["apples r red", "banana is yelo","carrt is loong","daikon is long","eggplants r","figs are the food","grape is red"]
word = ["apple", "banana","carrot","daikon","eggplant","fig","grape"]

data1 = {'text' : text}

source = ColumnDataSource(data=data1)

dt = DataTable(columns=[TableColumn(field='text', title='text')],source=source)

script1, div1 = components(dt)
return render(request, "index.html", {'script':script, 'div':div, "script1":script1,"div1":div1})

Answer 1

Here's a working example based on your code that demonstrates the described behavior:

from bokeh.io import show
from bokeh.layouts import row
from bokeh.models import ColumnDataSource, HoverTool, DataTable, TableColumn, CDSView, CustomJS, IndexFilter
from bokeh.plotting import figure

p_ds = ColumnDataSource(dict(fruits=["apple", "banana", "carrot", "daikon", "eggplant", "fig", "grape"],
                             count=[1, 2, 3, 4, 5, 6, 7]))

p = figure(y_range=sorted(set(p_ds.data['fruits'])), sizing_mode='scale_width',
           toolbar_location='right', tools=['tap', 'reset'])

p.hbar(y='fruits', right="count", height=0.9, selection_color='deepskyblue', nonselection_color='lightgray',
       nonselection_alpha=0.3, source=p_ds)
p.add_tools(HoverTool(tooltips=[("word", "@fruits"), ("count", "@count")]))

dt_ds = ColumnDataSource(data=dict(text=["apples r red", "banana is yelo", "carrt is loong", "daikon is long",
                                         "eggplants r", "figs are the food", "grape is red"],
                                   word=["apple", "banana", "carrot", "daikon", "eggplant", "fig", "grape"]))


dt = DataTable(columns=[TableColumn(field='text', title='text')], source=dt_ds,
               # Since none of the bars are selected at the start,
               # the filters are set to show an empty table.
               view=CDSView(source=dt_ds, filters=[IndexFilter(indices=[])]))

p_ds.selected.js_on_change('indices',
                           CustomJS(args=dict(view=dt.view, p_ds=p_ds),
                                    code="""\
                                        const {indices} = cb_obj;
                                        if (indices.length > 0) {
                                            const idx = indices[0];
                                            const word = p_ds.data.fruits[idx];
                                            const GroupFilter = Bokeh.Models('GroupFilter');
                                            view.filters = [new GroupFilter({column_name: 'word', group: word})];
                                        } else {
                                            const IndexFilter = Bokeh.Models('IndexFilter');
                                            view.filters = [new IndexFilter({indices: []})];
                                        }
                                        // Needed to work around https://github.com/bokeh/bokeh/issues/7273.
                                        view.source.change.emit();
                                    """))

show(row(p, dt))