465349055c8c59f2afc587972673c5761cff2f9b
hiram
  Mon Oct 26 16:04:09 2020 -0700
correct X position for message when window is scrolled left-right in browser refs #21980

diff --git src/hg/js/mouseOver.js src/hg/js/mouseOver.js
index cca9571..e4afeae 100644
--- src/hg/js/mouseOver.js
+++ src/hg/js/mouseOver.js
@@ -55,31 +55,31 @@
   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 = " " + mapData.spans[trackName][foundIdx].v + " ";
     $('#mouseOverText').html(msg);
     var msgWidth = Math.ceil($('#mouseOverText').width());
     var msgHeight = Math.ceil($('#mouseOverText').height());
-    var posLeft = offLeft + (rectLeft - msgWidth) + "px";
+    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;
     }
@@ -112,30 +112,31 @@
   if (typeof mapData.spans === 'undefined') {
     mapData.spans = {};         // get this object started first time
     mapData.tracks = [];
     mapData.boxCount = [];
   }
   mapData.visible = false;
   for (var trackName in arr) {
     mapData.tracks.push(trackName);
     mapData.spans[trackName] = [];      // start array
     // add a 'mousemove' and 'mouseout' 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);
+//    window.addEventListener('onscroll', mouseLeftTrackImage);
     var itemCount = 0;	// just for monitoring purposes
     // save incoming x1,x2,v data into the mapData.spans[trackName][] array
     arr[trackName].forEach(function(box) {
       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);