X range selection events

Hallo everyone!

I’m working on a dash application that has several inter-linked components. Most importantly, I have a time trace type of plot (with several subplots) and further connected components that display more detailed information (including other plots) for a selected time window. The information in the connected components has to be updated once the user changes time selection window in the time trace plot. At the same time I want to highlight the selected window in the trace plot, without changing the zoom level.

Presently I’m using the following solution. A time window can be selected either by two clicks (on the left and right boundaries) or by a box select. On a complete selection by either of two methods, the connected components are regenerated and the trace plot itself is regenerated with the selection added. In principle this works. However, I find this to be somewhat slow and not entirely user friendly (not to say about the need to write long if-elif event parsers). Ideally, I’d like to have an “x-range” selection tool that should look like an x-zoom and would, firstly, draw a region highlight with JS (instead of zooming-in) with a preset color and opacity and, secondly, would trigger an “xRangeSelection” event. This way one would save the (very expensive) trace plot redrawing, simplify event parsing, and offer a more user-friendly selection tool for this task.

In addition, the present click events are launched only if the user clicks on a line/marker. For my selection function, however, it makes perfect sense to click into an empty space and, also, to add a vertical line across all subplots at the click location (for which I have to regenerate the plot again).

I wonder if I’m missing a more elegant solution that already exists. If it does not, do you think that the needs I’m describing are generic enough to add the new functionality into Dash?

Thanks for your advices!

Hi @boz, did you consider using a plotly range slider https://plot.ly/python/range-slider/ ? You could have several vertically stacked subplots sharing an Xaxis, and a range slider for the time window. If this is not possible for you, for example if you want a finer control of the layout, you can write a clientside callback which should execute faster, for example if you just need to modify the range of your axis in the figures. See for example https://dash.plot.ly/performance or 📣 Dash v1.7.0 released for client-side callbacks.

This slider does not work as described there. I get:

ValueError: Invalid property specified for object of type plotly.graph_objs.Layout: ‘rangeselector’

Is that because I am not using the Enterprise version?