Option to snap to data point boundary on brushing

[flash1293]

Is your feature request related to a problem? Please describe.
This is discussed in elastic/kibana#79435 - in some cases it doesn't make sense to have a pixel perfect brushing because it results in odd numbers for the defined range.

Describe the solution you'd like
There should be an option for the brushed area to snap to the nearest boundary between data points on the x axis (for both beginning and end). This could be enabled if the user is holding down the shift key while brushing. I'm not sure whether elastic-charts or the consumer should control the shift key in that case.

Describe alternatives you've considered
It's possible to do the "snapping" in the brushing handler on consumer side, but in that case the resulting range wouldn't be represented correctly in the chart during brushing.

Additional context
We have to be careful with this - I don't think it is the right choice to enable by default because there are valid use cases for brushes more granular than the data resolution (e.g. selecting one data point plus some context of half a data point left and right to zoom in)

Checklist

• this request is checked against already exist requests
• every related Kibana issue is listed under Kibana Cross Issues list
• kibana cross issue tag is associated to the issue if any kibana cross issue is present

[flash1293]

cc @wylieconlon

[nickofthyme]

@flash1293 I added something similar to this recently in 22.0.0 for vislib. See PR here #801. Using roundHistogramBrushValues rounds the value to the nearest "bucket".

The highlighter does not yet snap to the rounded selection but @markov00 and I have discussed adding that in the future. I think adding the key modifier be it shift or control would be a good idea.

This behavior is not by default.

[katrin-freihofner]

Something that might be related came up in a recent design audit:

Zooming does not work if the user's initial mouseDown event occurs outside the axis area. User needs to be very precise with their initial click.

Initially reported by @hbharding

[markov00]

Hi @katrin-freihofner, I've tested it on our storybook: https://elastic.github.io/elastic-charts/?path=/story/interactions--brush-selection-tool-on-linear and looks like the callback is triggered in every case, also if the brush starts from the outside the projection area of the chart (see the callback logs on the right Actions panel). Could you please try to debug the callback configured on the onBrushEnd property of the <Settings> component of the chart gets triggered?

[shahzad31]

@markov00 i can verify that it doesn't work if mouse initial starting point is outside the chart, i can reproduce the same behaviour on https://elastic.github.io/elastic-charts/?path=/story/interactions--brush-selection-tool-on-linear

It works if you you move your mouse from chart to outside without clicking and then do brush, but if you make a click outside chart and then do the brushing it brushing never get's triggered.

[markov00]

Hi @shahzad31, I think the behavior you are looking for is not achievable.
If the drag starts from within the DOM element .echChart then the brush is performed as shown here:

Apr-13-2021.15-53-06.mp4

We can attach listeners to mouse down + move + up to the window element to capture a drag from the outside, but we need to discriminate if multiple charts are under the same brushed area, which one should render and trigger an event. We can try to understand if that is feasible but I have some doubts.

Secondly, from the @katrin-freihofner's gif, it looks like the brush is happening when the brush started from outside the "projection area", but within the chart element (e.g. from the axis ticks/labels/title).
The issue Katrin was trying showing to show there was the fact that the brush end callback didn't trigger the actual linked zoom event. For that case, I've asked if Katrin can checks what is happening code-wise, or at least link me to a reproducible example.