7c8985c0326a29d6bf3a58ceece3b8b23f06a713
chmalee
  Wed Sep 6 15:03:20 2023 -0700
Make mouseovers show up when moving from item to item, refs #31365

diff --git src/hg/js/utils.js src/hg/js/utils.js
index 2f78d18..ad09d68 100644
--- src/hg/js/utils.js
+++ src/hg/js/utils.js
@@ -3882,64 +3882,47 @@
 // signal handler for when mousemove has gone far enough away from the pop up
 // we can't use removeEventListener because the function call is hard to keep
 // track of because of a bounded this keyword
 var mousemoveSignal;
 // The div that moves around the users screen with the visible mouseover text
 var mouseoverContainer;
 
 function hideMouseoverText(ele) {
     /* Actually hides the tooltip text */
     let tooltipTarget = ele;
     tooltipTarget.classList.remove("isShown");
     tooltipTarget.style.opacity = "0";
     tooltipTarget.style.visibility = "hidden";
 }
 
-function hideMouseover(e) {
-    /* a mouseover has been shown, and now the mouse has moved
-    * if the mouse is near the pop up, keep it present, else hide it */
-    refEl = e.target; // the span with the text in it
-    if (!refEl) {debugger;}
-    mouseX = e.pageX > 0 ? e.pageX: e.clientX;
-    mouseY = e.pageY > 0 ? e.pageY: e.clientY;
-    targetBox = refEl.getBoundingClientRect();
-    if ( mouseX >= (targetBox.left - 45) && mouseX <= (targetBox.right + 45) &&
-            mouseY >= (targetBox.top - 45) && mouseY <= (targetBox.bottom + 45) ) {
-        // keep the mouseover showing
-        return;
-    } else {
-        // now that we are going to hide the pop up we can remove the event listener
-        // for whether we wanted to keep the pop up or not
-        hideMouseoverText(refEl);
-        if (mousemoveSignal) {mousemoveSignal.abort();}
-    }
-}
-
 function mousemoveHelper(e) {
     /* Helper function for deciding whether to keep a tooltip visible upon a mousemove event */
+    if ($(".tooltip.isShown").length > 0) {
+        return;
+    }
     let targetBox = this.getBoundingClientRect();
     let mouseX = e.clientX;
     let mouseY = e.clientY;
     // currently allow the mouse to move in a 45 pixel box around the element
     if ( mouseX >= (targetBox.left - 45) && mouseX <= (targetBox.right + 45) &&
             mouseY >= (targetBox.top - 45) && mouseY <= (targetBox.bottom + 45) ) {
         // keep the mouseover showing
         return;
     } else {
         // now that we are going to hide the pop up we can remove the event listener
         // for whether we wanted to keep the pop up or not
-        console.log("hiding mouseover:");
+        console.log("hiding mouseover in mousemove helper:");
         console.log(this);
         hideMouseoverText(this);
         mousemoveSignal.abort();
     }
 }
 
 function showMouseoverText(e) {
     // actually show the mouseover text
     e.preventDefault();
     referenceElement = e.target;
     if (!e.target.getAttribute("mouseoverid")) {
         // corner case: the side slice and grey control bar slice are weird, the td
         // container has the title tag, while the img or a element receives the mouseover
         // event, so we need to go back up the tree to find the mouseoverid for those elems
         while (referenceElement.parentElement && !referenceElement.getAttribute("mouseoverid")) {
@@ -3965,33 +3948,30 @@
     mousemoveSignal = new AbortController();
     let callback = mousemoveHelper.bind(mouseoverContainer);
 
     // allow the user to mouse over the mouse over, (eg. clicking a link or selecting text)
     document.addEventListener("mousemove", callback, {signal: mousemoveSignal.signal});
     mouseoverTimer = undefined;
 }
 
 function showMouseover(e) {
     /* Helper function for showing a mouseover. Uses a timeout function to allow
      * user to not immediately see all available tooltips. */
     e.preventDefault();
     // if a tooltip is currently visible, we need to wait for its mouseout
     // event to clear it before we can show this one, ie a user "hovers"
     // this element on their way to mousing over the shown mouseover
-    if ($(".tooltip.isShown").length > 0) {
-        return;
-    }
     if (mouseoverTimer) {
         // user is moving their mouse around, make sure where they stop is what we show
         clearTimeout(mouseoverTimer);
     }
     mouseoverTimer = setTimeout(showMouseoverText, 300, e);
 }
 
 function addMouseover(ele1, text = null, ele2 = null) {
     /* Adds wrapper elements to control various mouseover events */
     if (!mouseoverContainer) {
         mouseoverContainer = document.createElement("div");
         mouseoverContainer.className = "tooltip";
         mouseoverContainer.style.position = "fixed";
         mouseoverContainer.style.display = "inline-block";
         mouseoverContainer.style.visibility = "hidden";