17e44fabd4e14d3bfe8aa6a6e06479b0031a2218
hiram
  Mon Oct 26 15:21:47 2020 -0700
cleaning up for better operation refs #21980

diff --git src/hg/js/mouseOver.js src/hg/js/mouseOver.js
index 0904f0e..0db0224 100644
--- src/hg/js/mouseOver.js
+++ src/hg/js/mouseOver.js
@@ -1,55 +1,61 @@
 
 // One single top-level object variable to hold all other global variables
 var mapData = {};
-// mapData.rects[] - an array of the rectangles, where each rect is
-//                   {x1, y1, x2, y2, v} == x1,y1 x2,y2, value
 // mapData.spans{} - key name is track name, value is an array of
 //                   objects: {x1, x2, value}
 // mapData.visible - keep track of window visible or not, value: true|false
 //                   shouldn't need to do this here, the window knows if it
 //                   is visible or not, just ask it for status
 // mapData.tracks[]  - list of tracks that came in with mapBoxes
 // mapData.boxCount[]  - in same order as tracks[] number of boxes for track
 //                       this boxCount is just for debugging information
 
 // =========================================================================
 // intersect the point with the rectangle, where rect corners are x1,y1 x2,y2
 // =========================================================================
-function intersectPointRectangle(x,y, rect) {
-  var answer = true;
-  if (x <= rect.x1 || x > rect.x2) { answer = false; }
-     else if (y <= rect.y1 || y > rect.y2) { answer = false; }
-  return answer;
-}
+// function intersectPointRectangle(x,y, rect) {
+//   var answer = true;
+//   if (x <= rect.x1 || x > rect.x2) { answer = false; }
+//      else if (y <= rect.y1 || y > rect.y2) { answer = false; }
+//   return answer;
+// }
 
 // given an X coordinate: x, find the index idx
 // 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) {
+    var mouseOver = document.querySelector(".wigMouseOver");
+    mouseOver.classList.toggle("showMouseOver");
+    mapData.visible = false;
+  }
+}
+
 function mouseInTrackImage(evt) {
   var trackName = evt.target.id.replace("img_data_", "");
   var firstRect = "";
   if (mapData.spans[trackName]) {
     var lastRect = mapData.spans[trackName].length - 1;
     firstRect = mapData.spans[trackName][lastRect].x1 + ".." + mapData.spans[trackName][lastRect].x2;
   }
   var evX = evt.x;
   var evY = evt.y;
   var oLeft = $(this).offset().left;
   var oTop = $(this).offset().top;
   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";
@@ -85,67 +91,57 @@
       var mouseOver = document.querySelector(".wigMouseOver");
       mouseOver.classList.toggle("showMouseOver");
       mapData.visible = false;
     }
   } //      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 box definitions, where each element in the array is a
+//  is an array of span definitions, where each element in the array is a
 //     mapBox definition object:
-//        {x1:n ,y1:n, x2:n, y2:n, value:s}
+//        {x1:n, x2:n, value:s}
 //        where n is an integer in the range: 0..width,
 //        and s is the value string to display
-//  Expecting to simplify this in the next iteration to need only
-//        x1:n, x2:n, value:s
-//     since the y coordinates are found in the DOM object for each track
 //     Will need to get them sorted on x1 for efficient searching as
 //     they accumulate in the local data structure here.
 // =========================================================================
 function receiveData(arr) {
-  if (typeof mapData.rects === 'undefined') {
-    mapData.rects = [];	// get this array started first time
+  if (typeof mapData.spans === 'undefined') {
+    mapData.spans = {};         // get this object started first time
     mapData.tracks = [];
     mapData.boxCount = [];
-    mapData.spans = {};
   }
   mapData.visible = false;
   for (var trackName in arr) {
     mapData.tracks.push(trackName);
-    mapData.spans[trackName] = [];
+    mapData.spans[trackName] = [];      // start array
     // add a 'mousemove' event listener to each track display object
     var objectName = "td_data_" + trackName;
     var objectId  = document.getElementById(objectName);
     objectId.addEventListener('mousemove', mouseInTrackImage);
+    objectId.addEventListener('mouseout', mouseLeftTrackImage);
     var itemCount = 0;	// just for monitoring purposes
-// got to artifically rewrite the x coordinates going into spans
-    var tdData = "td_data_" + trackName;
-    var tdDataMap = document.getElementById(tdData);
-    var tdRect = tdDataMap.getBoundingClientRect();
-    var xOff = Math.floor(tdRect.left - 71);
-    // save all the incoming mapBoxes into the mapData.rects[] array
+    // save incoming x1,x2,v data into the mapData.spans[trackName][] array
     arr[trackName].forEach(function(box) {
-      var span = { "x1":box.x1-xOff, "x2":box.x2-xOff, "v":box.v };
-      mapData.spans[trackName].push(span);
-      mapData.rects.push(box); ++itemCount});
+      mapData.spans[trackName].push(box); ++itemCount});
     mapData.boxCount.push(itemCount);	// merely for debugging watch
   }
   var msg = "<ul>";
   for (var idx in mapData.tracks) {
       var trackName = mapData.tracks[idx];
       var imgData = "td_data_" + trackName;
       var imgMap  = document.getElementById(imgData);
       var imageRect = imgMap.getBoundingClientRect();
       var top = Math.floor(imageRect.top);
       var left = Math.floor(imageRect.left);
       var width = Math.floor(imageRect.width);
       var height = Math.floor(imageRect.height);
      msg += "<li>" + trackName + " at left,top (x,y)(w,h):" + left + "," + top + "(" + width + "," + height + ") has: " + mapData.boxCount[idx] + " mapBoxes</li>";
   }
   msg += "</ul>";