Selection of Region Of Interest (ROI) on a heatmap

The following code works to create an interactive heatmap (movable/zoomable).

How to add the possibility of doing a selection rectangle (“Region Of Interest”, ROI), that will stay displayed?

If we use the icon “selection+magnification glass”, it works with a drag and drop, but after releasing the mouse, it automatically zooms in the selection.

Instead, I would like to keep the selection rectangle displayed, but not zoom in it : just keep the selection rectangle visible as a ROI (Region Of Interest) of the bigger image.

How to do that?

import numpy as np
import bokeh.models, bokeh.plotting, bokeh.embed, bokeh.models.callbacks, bokeh.models, bokeh.layouts
Z = np.random.randn(100, 100)
color_mapper = bokeh.models.LinearColorMapper(palette="Viridis256", low=0, high=5)
plot = bokeh.plotting.figure(x_range=(0, 1), y_range=(0, 1), height=200)
plot.image(image=[Z], color_mapper=color_mapper, dh=1.0, dw=1.0, x=0, y=0)
color_bar = bokeh.models.ColorBar(color_mapper=color_mapper)
plot.add_layout(color_bar, "right")
bokeh.plotting.show(plot)

We are currently working on persistent and editable selection overlays (see Persistent box selection overlay by mattpap · Pull Request #12468 · bokeh/bokeh · GitHub) which will be available in bokeh 3.1), so this may be useful. Otherwise will are investigating adding support for data annotation tools (not yet clearly defined in scope and functionality) in a longer time perspective.

In the mean time, you can use a SelectionGeometry event to draw persistent rects yourself:

Thanks @mateusz and @Bryan for your answers! Your link SelectionGeometry example looks like a good solution for now! Would you know how to allow only one selection rectangle?

i.e. when the user does a second selection rectangle, it replaces the previous one.

This would be perfect

(PS: would you have an idea for Bokeh: how to update/redraw the plot data after slider.on_change (with AJAX)?? TL;DR I already have a Flask server for the rest of the application and I would like to keep this server and use AJAX to refresh/update the plots.)

Would you know how to allow only one selection rectangle?

Omit the concat with the old data:

    source.data = {
        left: [geometry.x0],
        right: [geometry.x1],
        top: [geometry.y0],
        bottom: [geometry.y1]
    }

With the SelectionGeometry tool, we cannot move or resize the rectangle selection box after the selection has been made, is that correct ?

@mateusz With your pull request Editable annotations and persistent selection overlays by mattpap · Pull Request #12468 · bokeh/bokeh · GitHub both moving and resizing seem to be available. Will this feature be available in BokehJS (without Python)?
Would you have the example code that allowed you to record the screencast? I’d like to test this new feature

With the SelectionGeometry tool, we cannot move or resize the rectangle selection box after the selection has been made, is that correct?

Yes, you would have implement this yourself, but this is precisely what my PR is trying to achieve.

(…) both moving and resizing seem to be available. Will this feature be available in BokehJS (without Python)?

Functionality of bokeh (Python) and bokehjs is mirrored as much as possible, so yes it will be available.

Would you have the example code that allowed you to record the screencast? I’d like to test this new feature

In the PR, there is new examples/interaction/tools/persistent_selection.py example, however it is tailored to selection tools. Other uses are still work in progress, so no examples thus far.

Thanks! Do you have an approximate idea when it will be included in the latest stable release? (2022 or 2023?)

@stamljf Since this is a new feature, it will go in a 3.1 release. The next planned release will be in January, but it may be a 3.0.x bugfix release if the 3.1 branch is not ready then.

With the SelectionGeometry tool, we cannot move or resize the rectangle selection box after the selection has been made, is that correct ?

As @mateusz mentioned, that is not correct, but the updates have to be done manually, at present. Here is a relevant example:

JavaScript callbacks — Bokeh 3.3.2 Documentation

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.