Vega-lite: Mouseover selection is not cleared

[keckelt]

Hi!
I'm playing with mouseover/hover animations and have the problem that the selections based on mouseover are not cleared properly when the cursor is moved out of the canvas.

En example using the Bar Chart with Highlighting on Hover and Selection on Click:

Even if I add a padding of 50 to the spec, the hover-selection is not cleared until i move the cursor back into the area enclosed by the axis.

This is especially problematic if the first&last bar are very high because I'm forced to move the cursor carefully.

I could not reproduce that behavior with Javascript's mouseover/out events on divs: https://codepen.io/keckelt/pen/xxxXQea

[domoritz]

Thank you for the bug report. @kanitw @arvind Any ideas how we can fix this in general?

[arvind]

Thanks for the question, @keckelt. You can set "clear": "mouseout" to get the behavior you're expecting. We could consider doing this automatically if on is set to mouseover but this seems like a very specific condition to hardcode, and we would need to investigate if there are any knock-on effects.

[domoritz]

That works. I will send a pull request to fix this example.

Update: see below

[domoritz]

Looks like we actually have many examples with "on": "mouseover".

For example, in https://vega.github.io/editor/#/examples/vega-lite/interactive_multi_line_label, we don't clear the tooltip at all when the mouse leaves.

With some effort, we can also reproduce this error in many other cases that use single selections with mouseover such as https://vega.github.io/editor/#/examples/vega-lite/concat_hover.

Looking at how many examples we have and none of them use "clear": "mouseout" so I actually think it would be good to set "clear": "mouseout" by default.

Seeing all these examples, do you now think we should change the default for clear?

[domoritz]

Related issues: https://github.com/vega/vega/issues/2112

[tmori3y2]

May I ask a question?

https://vega.github.io/editor/#/examples/vega-lite/interactive_bar_select_highlight

https://vega.github.io/editor/#/examples/vega-lite/interactive_multi_line_label

Are these really bugs?

These seem to work correctly if you change the event source from the default scope to window or view.

I understand that the behavior when going out of scope holds the last captured xy in the graph region.

Considering that, the examples using the scope behave as specified.

This behavior is useful for brushes because the selected area is automatically clipped. (EDIT)

[tmori3y2]

I understand that the behavior when going out of scope holds the last captured xy in the graph area.

Considering that, the examples using the scope behave as specified.

• Open online editor
• Paste the following config

~json
{
"signals": [
{"name": "unit", "value": null, "on": [{"events": "window:mousemove", "update": "isTuple(group()) ? group() : unit"}]},
{"name": "window_xy_monitor", "on": [{"events": "window:mousemove", "update": "xy()"}]},
{"name": "window_xy_unit_monitor", "on": [{"events": "window:mousemove", "update": "xy(unit)"}]},
{"name": "view_xy_monitor", "on": [{"events": "view:mousemove", "update": "xy()"}]},
{"name": "view_xy_unit_monitor", "on": [{"events": "view:mousemove", "update": "xy(unit)"}]},
{"name": "scope_xy_monitor", "on": [{"events": "scope:mousemove", "update": "xy()"}]},
{"name": "scope_xy_unit_monitor", "on": [{"events": "scope:mousemove", "update": "xy(unit)"}]}
]
}
~

Check scope_xy_monitor and scope_xy_unit_monitor when moving the mouse.

[domoritz]

Are these really bugs?

Thanks for your follow up. I think there is a bug since depending on where/how fast you leave, the selection gets cleared or not.

[tmori3y2]

There are several specs in Vega and Vega-lite that will behave strangely if the property set is not in a specific combination.

It is difficult to determine whether or not these are bugs.

But many of them are certainly not enough documentation.

In this case, the explanations of scope and event functions are just such an example.

In fact, I couldn't describe the event correctly without checking the values of some debug signals.

Let's take a look at the first spec.

• Both the mouseover and mouseout event should be used in pairs but not be used.
• The reason why highlight_tuple works even though there is no mouseout event is because the unit has been updated by mousemove. the mouseover fired at the boundary between the group and rect. (EDITED)
• The result should be the same even if the mouseover event is replaced by mousemove.

From the above considerations,

• The title should be “Mousemove selection is not cleared”, not “Mouseover selection is not cleared”. (EDITED)
  
  
  
  • The mousemove event should be used instead of mouseover.
  
  
  • The highlight_tuple should not be null using "clear": "mouseout".
  
  
• We need to find out why highlight_tuple doesn't change to null when the cursor leaves the graph region.

[tmori3y2]

• We need to find out why highlight_tuple doesn't change to null when the cursor leaves the graph region.

Because if you set the event source to scope, you cannot get coordinates outside the graph region.

Let's explain using my scope_xy_monitor.

• To prevent the offset value from being added to the captured xy() in the signal, set the browser scale to 100%.
• The graph region is a rectangle determined by the diagonal [0, 0]-[width, height].
• width = 180, height = 200
• Since the event source is scope, xy () returns the coordinates of the graph region.
• When the cursor leaves the graph region, xy () returns the last captured coordinates within the graph region.
• If the cursor is fast, the capture will be rough.

• If you slowly move the cursor out of the graph region, y() will become the bar / graph boundary value of 200 and the selection will be cleared.
• If you move the cursor quickly out of the graph region, y() will be the value such as 198 in the bar and the selection will not be cleared.
• Note that the highlight_tuple and scope_xy_monitor captures are not completely synchronized, so the selection may not be cleared even with y () = 200.

Since x() has padding, it is difficult to reproduce this issue, but it can be reproduced by moving the cursor quickly.

[tmori3y2]

In some vega examples, scope is used with click, mousedown, and mousemove to return the valid click position, the drag start position (eg, brush), and the current cursor position within the group's graph region.

On the other hand, if the source is set to window or view, it is able to get the position outside the graph region, but processing such as clamping with range is required to get a valid position within the graph region.

The following is an example where scope cannot be used.

https://vega.github.io/editor/#/examples/vega/overview-plus-detail

Try replacing

• [@overview:mousedown, window:mouseup] > window:mousemove!"

with

• [@overview:mousedown, scope:mouseup] > scope:mousemove!"

The mouseup capture fails outside the graph region, and the drag state is not cleared even though the mouse is released. (Undocumented !!)

By the way, going back to the examples below,

https://vega.github.io/editor/#/examples/vega-lite/interactive_bar_select_highlight

https://vega.github.io/editor/#/examples/vega-lite/interactive_multi_line_label

On replacing "mouseover" with "view:mousemove" these examples will be working correctly, but on replacing "mouseover" with "window:mousemove" these will be not working.

In the window source, item() does not seem to be evaluated. (Undocumented !!)

In any case, there are documentation issue, but if the definition is clear, in most cases it should work correctly with the correct usage.

Only when the definition is clear can we understand what is a bug and what is a usage problem?

[tmori3y2]

• The reason why highlight_tuple works even though there is no mouseout event is because the unit has been updated by mousemove.
• The result should be the same even if the mouseover event is replaced by mousemove.

From the above considerations,

• The title should be “Mousemove selection is not cleared”, not “Mouseover selection is not cleared”.

  • The mousemove event should be used instead of mouseover.
  • The highlight_tuple should not be null using "clear": "mouseout".

Since the mouseover fired at the boundary between the group and rect, I withdraw this indication. (unit was not related)

This issue seems to have been discussed in #4306.

• dblclick is the default
• mouseout is a user option

However, it is not documented.