[chrome-only] Flashing tooltips on certain plot types

[abought]

Reported by @benralexander

Summary

Some, but not all, association plots on the portal are showing an issue where mousing over points causes a tool tip to flash rapidly. In these cases it is not possible to select the point (eg to open or interact with the tooltip)

Steps to reproduce

This has been reproduced as occurring only for certain plot/dataset types. It occurs in Chrome, but not firefox. It happens more often for points on the far right edge of the plot (but not the left edge).

1. Visit this sample gene page: http://www.type2diabetesgenetics.org/gene/geneInfo/SLC30A8#
2. From the "datasets" dropdown above the plot, select one of the new "dynamic" datasets: BioMe AMP T2D GWAS)
3. Move the mouse over an association point on the far right side of the association plot for that panel. The tooltip should flash too quickly to select. (the gif below was recorded at a low framerate)

Interestingly, this problem may go away if the user interacts elsewhere on the page (opening/closing devtools etc). It will resume reproducibly on new page load.



[pjvandehaar]

The flashing is just because the tooltip obstructs the hover, right?

For me, every time I add a new dataset, the LZ svg becomes wider than it should, the tooltips begin to be plotted for that wider size, but the plot and points remain at the old size, meaning that tooltips are in the wrong places. Upon window resize, LZ repairs itself.

This happens in both Chrome and Firefox on both dynamic and static datasets for me.

[abought]

I've confirmed the width issue with Peter (see screenshot where dashboard buttons are far off to the side of the plot)- interestingly the plot width returns to normal whenever the window is resized (triggering a plot redraw). This behavior can be seen on the portal when adding new datasets.

Will follow up to see if these problems are linked, otherwise will follow up and create a separate ticket for this.

[pjvandehaar]

(It likely makes more sense to just rename this issue, since the width is the problem. The blinking tooltips are an expected and unfixable side-effect of incorrect width calculations.)

[abought]

Following up: we eventually traced this issue to problems with identifying the size of the parent container. There were two main and distinct causes observed:

1. If you are using this with bootstrap, the div classed lz-container should be a separate div. Do not add the class to an existing div for a bootstrap row, column, etc, because these introduce their own padding that throws off the position calculations. (causing the tooltip to think it should be a few pixels to one side, and therefore interfering with the mouse pointer)

2. If you are using responsive resize mode (and your UI is prone to being redrawn by something outside of LocusZoom- eg tab panes), consider setting the plot layout option responsive_resize to 'width_only' or false. Using a less aggressive redraw mode can help avoid the errors introduced into the calculation.