OnUnhover being called when it shouldn't

[TheLogan]

I'm not happy with the builtin tooltip for the polar chart, so I'm attempting to make my own, however I'm having issues with it hiding as soon as it should show, and form what I can tell this is because it's running OnUnhover on every redraw (while the cursor is anywhere near the chart)

I've attempted to set up a simple example here
https://codepen.io/tim-logan/pen/qBqOeMZ?editors=1010

Line 72/73 can be flipped in/out with comments to see the result either in console or directly on the plot.

I may just be doing something wrong, but it looks like a bug to me :)

[nicolaskruchten]

@rreusser is this related to your recent work? i.e. does your recent work fix it?

[rreusser]

Hmm… I don't think it's directly related. That relates to unhover not being fired when you initiate an interaction like dragging. I see a couple things here:

First, pointerEvents: 'none' on the hover box might help since if the mouse falls into the hover box, that catches pointer events and prevents the plot from receiving them.

Second, hoverinfo: 'none' on the traces hides the original hovers while still dispatching hover events (hoverinfo: 'skip' is similar but skips over the trace and prevents hover events for that trace.)

The final thing, and the thing I think is causing the problems, is that setHoveredPoint triggers re-rendering of the Plotly react component, which doesn't seem to preserve the hover state (if you hide a trace, it also gets un-hidden?). I've been working with custom hovers recently, but not via react, so I haven't encountered this. One thought is that the revision prop of the Plotly component gives some control over exactly when to re-render the plot. I've used it in the codepen below to simply cause the plot never to get updated (if you changed the data, it would be necessary to externally pass in an increasing counter to indicate it.)

I think this version fixes some of the issues but not all: https://codepen.io/rsreusser/pen/poNgjgN

That's a bit of a low-level hack, so it's not great. The final thing I notice is that every time the plot renders, it creates new objects for the data and layout inside the MyPlot component. An alternate way to control updating the plot is through shallow equality of the data/layout/config objects. If you're able to pass them in and re-use the objects, then they won't trigger an update of the plot unless they have actually changed. The Refreshing the Plot section of the plotly-react readme has more details about this.

All of this being said, it would be nice if the hover state didn't change if the plot hadn't changed. The best answer I have at the moment is to use the above tools to simply prevent the plotly-react component from updating unless the plot has actually changed.

[TheLogan]

You're right that it would be nice if it didn't change unless the plot changed, but at least this is a totally acceptable workaround, thank you very much :)

[rreusser]

Oh, and I also have a PR in the works to sort out the positioning of the hover. I will try to finally get it posted today (Friday) so that you can see the format of the info. In short, it returns a bounding box of what is being hovered with coordinates such that hovers absolutely positioned (top/left) as a sibling of the plot div should show up in the right place. I'll try to fast-track this tomorrow so that you can get a sense asap of the information it will provide.

[TheLogan]

It doesn't seem to be up yet, but I'll keep an eye out, thank you :)