Mouse out highlighted zones

[lpatiny]

Why when we are hover a rectangle that is highlighted and we press the key 'f' (full out) the highlight do not disappear.

This looks like an implementation issue.

[hamed-musallam]

as i can see, the onMouseLeave event will only trigger when the mouse pointer leaves an element and because in our case we refresh x domain the mouse become outside the element's boundaries so the onMouseLeave will not trigger.

one of the solution that i could think is to erase highlighted state once the domain is updated

[hamed-musallam]

@lpatiny

one of the solution that i could think is to erase highlighted state once the domain is updated

Do you have any suggestions?, or should I proceed with my own?

[lpatiny]

@targos Could you advice on this issue ?

[targos]

Changing the domain is just one way to trigger this issue. We need to find a more general solution.

[hamed-musallam]

as far as I know, the primary way to trigger this issue is by changing the domain (what are the other ways?). In response, we could clear the highlight state when the domain changes.

[targos]

as i can see, the onMouseLeave event will only trigger when the mouse pointer leaves an element and because in our case we refresh x domain the mouse become outside the element's boundaries so the onMouseLeave will not trigger.

I am trying to reproduce it to confirm this hypothesis but so far I'm not able to. onMouseLeave is triggered when the shape goes away and the mouse is not moving: https://codesandbox.io/p/sandbox/highlight-9pf9rj
You can try two interactions:

• Put the mouse over a rectangle and press s to randomly change the positions of the rectangles
• Put the mouse over a line and press l to add a new line (which pushes other lines down).

[hamed-musallam]

Could you please review this brief video? I attempted to hover the mouse over the element and then pressed 's' to change the position of the elements. As you can observe, the onMouseLeave event did not trigger.

Screen.Recording.2023-10-24.at.09.36.46.mov

[targos]

What? Here I'm doing exactly the same:

[hamed-musallam]

it seems it depends on the browser, I'm using Safari. take a look

Screen.Recording.2023-10-24.at.09.50.16.mov

[targos]

I think it shows that we should be able to find a correct solution. The onMouseLeave callback is not ignored by design.

[targos]

I had a look with Luc. There are several things to note:

• The Safari behavior is a small bug, but not the problem of this issue. If you move the mouse by just 1 pixel, the callback is correctly called.
• The real issue in the Range component of NMRium, is that the rectangle on which the mouse entered is removed from the DOM and replaced by another rectangle after the zoom out, so there is no mouse leave event to send (the element is no longer here). You should make sure that this rectangle stays in sync with the group (<g>) on which you listen to the events.

[targos]

This seems to be related to the implementation of Resizer, which forces you to change the key prop. But the key prop should not be changed here.

[targos]

https://react.dev/learn/rendering-lists#rules-of-keys

[hamed-musallam]

Thank you Michael,

I know the rules of the keys, I was using the key to force rendering the Resizer component for a reason I do not remember now, but it seems it has a side effect, I will check the implementation of the resizer and try to fix it.