Bokeh linking/ brushing based on column instead of row indices / index using selection tools

Question

Question related to: Bokeh linking/ brushing based on column instead of row indices / index

I would like to use a selection tool for multiple selection instead of the "tap". For this I'm using the example shown customjs-for-selections. Unfortunately I seem to get stuck in a loop of changes using source.selected.indices='new selection'. Any suggestions how to update selection without triggering js_on_change?

from bokeh.plotting import figure, show
from bokeh.layouts import gridplot
from bokeh.models import ColumnDataSource, CDSView, BooleanFilter, CustomJS
import pandas as pd
output_notebook()

data = {'person': [1, 1, 1, 2, 2, 3, 3, 3, 3], 
        'activities':['a', 'b', 'c', 'a', 'b', 'a', 'b', 'c', 'd'], 
        'hours':[3, 4, 6, 2, 7, 5, 3, 2, 12], 
        'foodeaten':[12, 14, 34, 45, 67, 5, -1, 3, 5]}
df     = pd.DataFrame(data = data)
print(df)
source = ColumnDataSource(data = df)
views  = [(df.activities == l) for l in ['a', 'b', 'c', 'd']]
filtered_views = [CDSView(source = source, filters = [BooleanFilter(view.values.tolist())]) for view in views]
plot_options = dict(plot_width = 250, 
                    plot_height = 250, 
                    tools = "tap,pan,wheel_zoom,reset,save,box_select", 
                    tooltips = [("Person", "@person"), ("hours", "@hours")])
plots = [figure(title = 'activity {l}'.format(l = l), **plot_options) for l in ['a', 'b', 'c', 'd', 'a', 'b', 'c', 'd']]
for plot, view, name in zip(plots, 2 * filtered_views, 4 * ['hours'] + 4 * ['foodeaten']):
    plot.circle('person', y = name, size = 15, view = view, source = source)

callback = CustomJS(args = dict(source = source, plots = plots), code = """
const selected_index = source.selected.indices[0]

const person = source.data['person'][selected_index]
var all_selected = [];
debugger;
for (index in source.data.index){
    if (source.data['person'][index] == person)
    all_selected.push(index)
}
source.selected.indices = all_selected
""")

callback1 = CustomJS(args = dict(source = source, ), code = """
var selected_indices = source.selected.indices;
var data = source.data;
debugger;
console.log(selected_indices)
var all_selected = [];
var persons = [];

for (i in selected_indices){
    index = selected_indices[i];
    console.log(data['person'][index]);
    persons.push(data['person'][index]);
    }


for (i in data.index){
    index = data.index[i]
    for (j in persons){
        person = persons[j]
        if (data['person'][i] == person){
            all_selected.push(index);
            }
    }
    }
source.selected.indices=all_selected;
""")


source.selected.js_on_change('indices', callback1)
output_file('testSelect.html')

show(gridplot(children = [plot for plot in plots], ncols = 2))

Tony · Accepted Answer

The callback from previous example still does the job when TapTool is replaced with the BoxSelectTool (tested on Bokeh v1.0.4):

from bokeh.plotting import figure, show
from bokeh.layouts import gridplot
from bokeh.models import ColumnDataSource, CDSView, BooleanFilter, CustomJS, BoxSelectTool
import pandas as pd
# output_notebook()
data = {'person': [1, 1, 1, 2, 2, 3, 3, 3, 3],
        'activities':['a', 'b', 'c', 'a', 'b', 'a', 'b', 'c', 'd'],
        'hours':[3, 4, 6, 2, 7, 5, 3, 2, 12],
        'foodeaten':[12, 14, 34, 45, 67, 5, -1, 3, 5]}
df = pd.DataFrame(data = data)
print(df)
source = ColumnDataSource(data = df)
views = [(df.activities == l) for l in ['a', 'b', 'c', 'd']]
filtered_views = [CDSView(source = source, filters = [BooleanFilter(view.values.tolist())]) for view in views]
plot_options = dict(plot_width = 250,
                    plot_height = 250,
                    tools = "box_select,tap,pan,wheel_zoom,reset,save",
                    tooltips = [("Person", "@person"), ("hours", "@hours")])
plots = [figure(title = 'activity {l}'.format(l = l), **plot_options) for l in ['a', 'b', 'c', 'd', 'a', 'b', 'c', 'd']]
for plot, view, name in zip(plots, 2 * filtered_views, 4 * ['hours'] + 4 * ['foodeaten']):
    plot.circle('person', y = name, size = 15, view = view, source = source)

callback = CustomJS(args = dict(source = source, plots = plots), code = """
const selected_index = source.selected.indices[0]
const person = source.data['person'][selected_index]
var all_selected = [];
//debugger;
for (index in source.data.index){
    if (source.data['person'][index] == person)
    all_selected.push(index); }
source.selected.indices = all_selected; """)

# output_file('testSelect.html')
for plot in plots:
    plot.select_one(BoxSelectTool).callback = callback
show(gridplot(children = [plot for plot in plots], ncols = 2))

Bokeh linking/ brushing based on column instead of row indices / index using selection tools

Answers (2)

Related Questions