Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[FEATURE] Support BoxSelectTool-like range-setting for the RangeTool #13646

Open
droumis opened this issue Jan 9, 2024 · 7 comments · May be fixed by #13855
Open

[FEATURE] Support BoxSelectTool-like range-setting for the RangeTool #13646

droumis opened this issue Jan 9, 2024 · 7 comments · May be fixed by #13855
Assignees
@mattpap
Labels
grant: CZI R5 Funded by CZI Round 5 grant type: feature
Milestone
3.x

Comments

@droumis
Copy link
Member

droumis commented Jan 9, 2024

Problem description

Limiting the setting of the focused range to just pan/drag with a RangeTool adds extra steps/clicks.

Feature description

Is there any interest in supporting BoxSelectTool-like range-setting interaction for the RangeTool by default? For example, see plotly range slider or the Bokeh app below that uses a custom callback.

Potential alternatives

None

Additional information

import numpy as np
from bokeh.layouts import column
from bokeh.models import ColumnDataSource, RangeTool, BoxSelectTool, CustomJS
from bokeh.plotting import figure, show
from bokeh.sampledata.stocks import AAPL
from bokeh.io import output_notebook

output_notebook()

dates = np.array(AAPL['date'], dtype=np.datetime64)
source = ColumnDataSource(data=dict(date=dates, close=AAPL['adj_close']))

# Main
p = figure(height=300, width=800, tools="xpan", toolbar_location=None,
           x_axis_type="datetime", x_axis_location="above",
           background_fill_color="#efefef", x_range=(dates[1500], dates[2500]))
p.line('date', 'close', source=source)
p.yaxis.axis_label = 'Price'

# Minimap
select = figure(title="Drag the middle and edges of the selection box to change the range above",
                height=130, width=800, y_range=p.y_range,
                x_axis_type="datetime", y_axis_type=None,
                tools="", background_fill_color="#efefef")
select.line('date', 'close', source=source)
select.ygrid.grid_line_color = None

range_tool = RangeTool(x_range=p.x_range)
select.add_tools(range_tool)

bselect = BoxSelectTool(dimensions='width')
select.add_tools(bselect)

callback = CustomJS(args=dict(x_range=p.x_range), code="""
        const geometry = cb_obj.geometry;
        x_range.start = geometry.x0;
        x_range.end = geometry.x1;
""")

select.js_on_event('selectiongeometry', callback)

show(column(p, select))
Screen.Recording.2024-01-09.at.1.53.12.PM.mov
@droumis droumis added the TRIAGE label Jan 9, 2024
@bryevdv
Copy link
Member

bryevdv commented Jan 9, 2024 •
edited

Please confirm this summary understanding:

Drag events initiated outside the existing range should define a new range to replace the old one (new behavior). Drag events inside the existing range or on its border should adjust the existing range (current behavior).

If so that seems like a reasonable flag to add. I don't have strong feelings about making it a new default cc @bokeh/dev

@bryevdv bryevdv added this to the 3.x milestone Jan 9, 2024
@mattpap
Copy link
Contributor

mattpap commented Jan 9, 2024

@droumis, should this be scheduled under CZI?

@droumis
Copy link
Member Author

droumis commented Jan 10, 2024

@bryevdv Yes, that's correct. Either as a flag or enabled by default is fine with me.

@mattpap Yes, it fits for CZI so I'll add the label. Given that this is really low priority, I'd like to take a first shot at this myself if that's ok.

@droumis droumis added the grant: CZI R5 Funded by CZI Round 5 grant label Jan 10, 2024
@droumis droumis self-assigned this Jan 10, 2024
@droumis
Copy link
Member Author

droumis commented Apr 2, 2024

I'm not going to have time for this task in the foreseeable future, so I'll let @mattpap take this one

@droumis droumis assigned mattpap and unassigned droumis Apr 2, 2024
@droumis
Copy link
Member Author

droumis commented Apr 5, 2024

@philippjfr were discussing some additional features that would be good to include as general improvements to the RangeTool (I can file separate feature requests if preferred).

  1. adding handle glyphs (see image below from plotly rangeslider
    image
  2. ability to invert focus mask (e.g. the non-selected region is darker in the image above)
  3. expand/contract selected range via scroll zoom when cursor hovers (e.g. see altair interval selection below)
Screen.Recording.2024-04-05.at.11.49.27.AM.mov

This was referenced Apr 5, 2024
Merged
Merged
@mattpap
Copy link
Contributor

mattpap commented Apr 8, 2024

adding handle glyphs

PR #13279 lays the foundation for this kind of features.

ability to invert focus mask

Added support in PR #13810.

expand/contract selected range via scroll zoom when cursor hovers

PR #13815 lays the foundation for this, but more work will be needed in a follow-up PR.

@maximlt
Copy link
Contributor

maximlt commented Apr 17, 2024

While creating a feature request in hvPlot to add an API to make it easy to add a range tool, I had a quick look at how other libraries called this feature. Sharing this here as it might help designing the UI/UX in Bokeh:

(I quite liked the ECharts implementation)

image

@mattpap mattpap linked a pull request Apr 30, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mattpap mattpap

Labels
grant: CZI R5 Funded by CZI Round 5 grant type: feature
Projects
None yet
Milestone
3.x
Development

Successfully merging a pull request may close this issue.

Add support for range selection to RangeTool bokeh/bokeh
4 participants
@mattpap @bryevdv @droumis @maximlt