759bf533411ead63f7b23fccd569a37998c87d9c
hiram
  Mon Oct 26 16:30:43 2020 -0700
isolate the popUp visible/disappear functions refs #21980

diff --git src/hg/js/mouseOver.js src/hg/js/mouseOver.js
index e4afeae..2dd5fe6 100644
--- src/hg/js/mouseOver.js
+++ src/hg/js/mouseOver.js
@@ -24,83 +24,89 @@
 // in the rects[idx] array where rects[idx].x1 <= x < rects[idx].x2
 // returning -1 when not found
 // if we knew the array was sorted on x1 we could get out early
 //   when x < x1
 function findRange(x, rects) {
   var answer = -1;
   for ( var idx in rects ) {
      if ((rects[idx].x1 <= x) && (x < rects[idx].x2)) {
        answer = idx;
        break;
      }
   }
   return answer;
 }
 
-function mouseLeftTrackImage(evt) {
-  if (mapData.visible) {
+function popUpDisappear() {
+  if (mapData.visible) {        // should *NOT* have to keep track !*!
     var mouseOver = document.querySelector(".wigMouseOver");
     mouseOver.classList.toggle("showMouseOver");
     mapData.visible = false;
   }
 }
 
+function popUpVisible() {
+  if (! mapData.visible) {        // should *NOT* have to keep track !*!
+    var contain = document.getElementById('mouseOverContainer');
+    var mouseOver = document.querySelector(".wigMouseOver");
+    mouseOver.classList.toggle("showMouseOver");
+    mapData.visible = true;
+  }
+}
+
+function mouseLeftTrackImage(evt) {
+  popUpDisappear();
+}
+
 function mouseInTrackImage(evt) {
   var trackName = evt.target.id.replace("img_data_", "");
   var evX = evt.x;
   var evY = evt.y;
+  // This offset is not correct.  It doesn't follow window scrolling
+  //  left or right
   var offLeft = Math.max(0, Math.floor(evt.x - $(this).offset().left));
   var windowUp = false;     // see if window is supposed to become visible
   var foundIdx = -1;
   var valP = "noX";
   if (mapData.spans[trackName]) {
      foundIdx = findRange(offLeft, mapData.spans[trackName]);
   }
   if (foundIdx > -1) {
     var tdName = "td_data_" + trackName;
     var elId  = document.getElementById(tdName);
     var rectBounds = elId.getBoundingClientRect();
     var rectTop = Math.floor(rectBounds.top);	// follows window scrolling
     var rectLeft = Math.floor(rectBounds.left);
     valP = mapData.spans[trackName][foundIdx].v;
     // value to display
     var msg = "&nbsp;" + mapData.spans[trackName][foundIdx].v + "&nbsp;";
     $('#mouseOverText').html(msg);
     var msgWidth = Math.ceil($('#mouseOverText').width());
     var msgHeight = Math.ceil($('#mouseOverText').height());
     var posLeft = evt.x - msgWidth + "px";
     var posTop = rectTop + "px";
     $('#mouseOverContainer').css('left',posLeft);
     $('#mouseOverContainer').css('top',posTop);
     windowUp = true;      // yes, window is to become visible
   }
   var offTop = Math.max(0, Math.floor(evt.y - $(this).offset().top));
   var msg = "<p>. . . mouse in target.id: " + evt.target.id + "(" + trackName + ")[" + foundIdx + "]='" + valP + "' at " + offLeft + "," + offTop + ", evX,Y: " + evX + "," + evY + "</p>";
   $('#eventRects').html(msg);
   if (windowUp) {     // the window should become visible
-    if (! mapData.visible) {        // should *NOT* have to keep track !*!
-      var contain = document.getElementById('mouseOverContainer');
-      var mouseOver = document.querySelector(".wigMouseOver");
-      mouseOver.classList.toggle("showMouseOver");
-      mapData.visible = true;
-    }
+    popUpVisible();
   } else {    // the window should disappear
-    if (mapData.visible) {
-      var mouseOver = document.querySelector(".wigMouseOver");
-      mouseOver.classList.toggle("showMouseOver");
-      mapData.visible = false;
-    }
+    popUpDisappear();
   } //      window visible/not visible
 }
 
 // =========================================================================
 // receiveData() callback for successful JSON request, receives incoming JSON
 //             data and gets it into global variables for use here.
 //  The incoming 'arr' is a a set of objects where the object key name is
 //      the track name, used here as an array reference: arr[trackName]
 //        (currently only one object per json file, one file for each track,
 //           this may change to have multiple tracks in one json file.)
 //  The value associated with each track name
 //  is an array of span definitions, where each element in the array is a
 //     mapBox definition object:
 //        {x1:n, x2:n, value:s}
 //        where n is an integer in the range: 0..width,