Rangetool overlay on a Datatable

Community Support
1

Is it possible to add a Rangetool overlay on a Datatable(for highlighting specific data)?

Using ‘Plot(layout(data_table))’ gives error : ‘positional arguments are not allowed’

from bokeh.models import DataTable, TableColumn, ColumnDataSource, RangeTool, CustomJS, Plot
from bokeh.layouts import layout
from bokeh.plotting import figure, show
import numpy as np


data = {
    "Index": [f"Row {i}" for i in range(1, 101)],
    "Value1": np.random.randint(1, 100, size=100),
    "Value2": np.random.randint(1, 100, size=100),
    "Value3": np.random.randint(1, 100, size=100),
    "Value4": np.random.randint(1, 100, size=100),
}
source = ColumnDataSource(data)

columns = [
    TableColumn(field="Index", title="Index"),
    TableColumn(field="Value1", title="Value1"),
    TableColumn(field="Value2", title="Value2"),
    TableColumn(field="Value3", title="Value3"),
    TableColumn(field="Value4", title="Value4"),
]

data_table = DataTable(source=source, columns=columns, width=400, height=300)


range_tool = RangeTool(x_range=Range1d(0,data_table.width),y_range = Range1d(0,(data_table.height)/2),y_interaction = True)
range_tool.overlay.fill_color = "gray"
range_tool.overlay.fill_alpha = 0.2



p = Plot(layout(data_table))
table = p.add_tools(range_tool)
show(table)
2

I don’t really have a clear idea what you are trying to accomplish. I will simply state:

  • Data tables only exist separately outside/next to plots
  • Range tools only exist/work inside plots

If you mean that your want a range tool inside some plot to update a data table outside that plot, then sure, you can add callbacks on the range to update anything you like. (Lots of interactive callback examples in the docs)

3

A ‘range of continuous rows’ has to be manually(and frequently) highlighted on the table from a larger row set.

For this reason, both upper and lower bounds need to be manually selectable and draggable .

Create Range ‘Overlay’ to highlight specific continous rows (range overlay should be manually draggable)

bk_1
bk_11764×729 424 KB

Solution 1 > Rangetool (could not be added as a glyph overlay on a table)
Solution 2> Hspan/Span indicating upper and lower bound (unable to select and drag the Hspan as customjs javascript eventKey modifier was not recognised by bokeh ).

Is there a way to create a span/rangetool widget on the table which is selectable manually draggable in real time?

Solution 2( eventKey modifier not recognised):

from bokeh.models import ColumnDataSource, Span, CustomJS, TapTool, PanTool
from bokeh.plotting import figure, show
from bokeh.layouts import column
import numpy as np


x = list(range(10))
y = [i * i for i in x]


source = ColumnDataSource({'x': x, 'y': y})


p = figure(width=400, height=300, tools="pan,wheel_zoom,reset", title="Shift+Drag HSpan")


p.line(x='x', y='y', source=source)


hspan = Span(location=50, dimension="width", line_width=2, line_color="red")
p.add_layout(hspan)

# JavaScript callback for dragging with Shift key
callback = CustomJS(args=dict(hspan=hspan), code="""
    if (event.shiftKey) {  // Check if Shift key is pressed
        const y = cb_obj.y;
        hspan.location = y;
    }
""")

# Add TapTool and PanTool for interaction
tap_tool = TapTool(callback=callback)
pan_tool = PanTool()


p.add_tools(tap_tool, pan_tool)

layout = column(p)
show(layout)
4

There is no continuous selection available on data tables. There is only click followed by a separate shift-click too select an entire set of rows all at once.