1313ab4f97f5d5c1f2edd63533dce23ad8426ab7
braney
  Wed Oct 19 10:50:11 2022 -0700
draw zoom indicator box in the right place and make it transparent so
you can see the underlying pixel

diff --git src/hg/js/hgTracks.js src/hg/js/hgTracks.js
index 2d95e11..891f1b1 100644
--- src/hg/js/hgTracks.js
+++ src/hg/js/hgTracks.js
@@ -4794,31 +4794,31 @@
       } 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);
     if (tdTop < 0) {
        lineHeight = Math.max(0, tdHeight + tdTop - msgHeight);
     }
     var msgLeft = Math.max(tdLeft, clientX - (msgWidth/2) - 3); // with magic 3
     var msgTop = Math.max(0, tdTop);
     var lineTop = Math.max(0, msgTop + msgHeight);
-    var lineLeft = Math.max(0, clientX - 3);  // with magic 3
+    var lineLeft = Math.max(0, clientX - 1);  // magic 3 +  2 for width of indicator box
     if (clientY < msgTop + msgHeight) {	// cursor overlaps with the msg box
       msgLeft = clientX - msgWidth - 6;     // to the left of the cursor
       if (msgLeft < tdLeft || msgLeft < 0) {   // hits left edge, switch
         msgLeft = clientX;         // to right of cursor
       }
     } else {	// apply limits to left and right edges, window or image
       msgLeft = Math.min(msgLeft, tdRight - msgWidth);  // image right limit
       msgLeft = Math.min(msgLeft, $(window).width() - msgWidth); // window right
       msgLeft = Math.max(0, msgLeft);  // left window edge limit
     }
     $('#mouseOverText').css('top',msgTop + "px");
     $('#mouseOverText').css('left',msgLeft + "px");
     $('#mouseOverVerticalLine').css('left',lineLeft + "px");
     $('#mouseOverVerticalLine').css('top',lineTop + "px");
     $('#mouseOverVerticalLine').css('height',lineHeight + "px");