221339e63d4378f833ad7472327b73e550a3769c
hiram
  Fri Jan 22 23:51:53 2021 -0800
investigating the width calculation of the text window, and keep the text popUp in the graph area at all times refs #21980

diff --git src/hg/js/hgTracks.js src/hg/js/hgTracks.js
index c72d7be..fadcbd4 100644
--- src/hg/js/hgTracks.js
+++ src/hg/js/hgTracks.js
@@ -4644,33 +4644,33 @@
     // can show 'no data' when not found
     var mouseOverValue = "no data";
     if (foundIdx > -1) { // value to display
       if (mouseOver.items[trackName][foundIdx].c > 1) {
         mouseOverValue = " μ " + mouseOver.items[trackName][foundIdx].v + " ";
       } else {
         mouseOverValue = " " + mouseOver.items[trackName][foundIdx].v + " ";
       }
     }
     $('#mouseOverText').html(mouseOverValue);
     var msgWidth = mouseOver.maximumWidth[trackName];
     $('#mouseOverText').width(msgWidth);
     var msgHeight = Math.ceil($('#mouseOverText').height());
     var lineHeight = Math.max(0, tdHeight - msgHeight);
     var lineTop = Math.max(0, tdTop + msgHeight);
-    var msgLeft = Math.max(0, clientX - (msgWidth/2) - 3); // with magic 3
+    var msgLeft = Math.max(tdLeft, clientX - (msgWidth/2) - 3); // with magic 3
+    msgLeft = Math.min(msgLeft, rightSide - msgWidth);  // right border limit
     var lineLeft = Math.max(0, clientX - 3);  // with magic 3
-    $('#mouseOverText').css('fontSize',mouseOver.browserTextSize);
     $('#mouseOverText').css('left',msgLeft + "px");
     $('#mouseOverText').css('top',tdTop + "px");
     $('#mouseOverVerticalLine').css('left',lineLeft + "px");
     $('#mouseOverVerticalLine').css('top',lineTop + "px");
     $('#mouseOverVerticalLine').css('height',lineHeight + "px");
     windowUp = true;      // yes, window is to become visible
 
     if (windowUp) {     // the window should become visible
       mouseOver.popUpVisible();
     } else {    // the window should disappear
       mouseOver.popUpDisappear();
     } //      window visible/not visible
     },  //      mouseInTrackImage function (evt)
 
     // timeout calls here upon completion
@@ -4720,31 +4720,31 @@
     //  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,
     //        and s is the value string to display
     //     Will need to get them sorted on x1 for efficient searching as
     //     they accumulate in the local data structure here.
     //  2020-11-24 more generalized incoming data structure, don't care
     //             what the structure is for each item, this will vary
     //             depending upon the type of track.  trackType now remembered
     //             in mouseOver.trackType[trackName]
     // =======================================================================
     receiveData: function (arr)
     {
-      mouseOver.visible = false;
+      mouseOver.popUpDisappear();
       for (var trackName in arr) {
 	// clear these variables if they existed before
       if (mouseOver.trackType[trackName]) {mouseOver.trackType[trackName] = undefined;}
       if (mouseOver.items[trackName]) {mouseOver.items[trackName] = undefined;}
       if (mouseOver.tracks[trackName]) {mouseOver.tracks[trackName] = 0;}
       mouseOver.items[trackName] = [];      // start array
       mouseOver.trackType[trackName] = arr[trackName].t;
       // add a 'mousemove' and 'mouseout' event listener to each track
       //     display object
       var tdData = "td_data_" + trackName;
       var tdDataId  = document.getElementById(tdData);
 // from jQuery doc:
 //  As the .mousemove() method is just a shorthand
 //    for .on( "mousemove", handler ), detaching is possible
 //      using .off( "mousemove" ).
@@ -4760,37 +4760,43 @@
          var lenV = arr[trackName].d[datum].v.toString().length;
          if (lenV > lengthLongestNumberString) {
 	   lengthLongestNumberString = lenV;
 	   longestNumber = arr[trackName].d[datum].v;
          }
         mouseOver.items[trackName].push(arr[trackName].d[datum]);
        ++itemCount;
       }
       mouseOver.tracks[trackName] = itemCount;	// != 0 -> indicates valid track
       var mouseOverValue = "";
       if (hasMean) {
          mouseOverValue = " μ " + longestNumber + " ";
       } else {
          mouseOverValue = " " + longestNumber + " ";
       }
-      $('#mouseOverText').html(mouseOverValue);	// see how big as rendered
       $('#mouseOverText').css('fontSize',mouseOver.browserTextSize);
+      $('#mouseOverText').html(mouseOverValue);	// see how big as rendered
       var maximumWidth = Math.ceil($('#mouseOverText').width());
       $('#mouseOverText').html("no data");	// might be bigger
       if (Math.ceil($('#mouseOverText').width() > maximumWidth)) {
           maximumWidth = Math.ceil($('#mouseOverText').width());
       }
+      // XXX this is not working when there are two wiggle tracks in display
+      //     and the window is dragged left or right.  The track where the
+      //     drag takes place seems to be dominate somehow and it's width
+      //     calculation overrides the other track width calculation
+      //     even though the .html() has been set here correctly, the
+      //     width() comes back with the dragged track value ?
       mouseOver.maximumWidth[trackName] = maximumWidth;
       }
     },  //      receiveData: function (arr)
 
     failedRequest: function(url)
     {   // failed request to get json data, remove it from the URL list
       if (mouseOver.jsonUrl[url]) {
         delete mouseOver.jsonUrl[url];
       }
     },
 
     // =========================================================================
     // fetchJsonData() sends JSON request, callback to receiveData() upon return
     // =========================================================================
     fetchJsonData: function (url)