2648e954eb83fa169fa9164622d9baff598e2d1d
max
  Tue Jan 10 05:10:53 2023 -0800
fixing selection in hgTracks to respect left-right bounds, refs #30458

diff --git src/hg/js/hgTracks.js src/hg/js/hgTracks.js
index c74aed6..74a5d9e 100644
--- src/hg/js/hgTracks.js
+++ src/hg/js/hgTracks.js
@@ -354,48 +354,51 @@
             if ($('#dnaLink').length) {
                 link = $('#dnaLink').attr('href');
                 reg = new RegExp("(.+&o=)[0-9]+.+&db=[^&]+(.*)");
                 a = reg.exec(link);
                 if (a && a[1]) {
                     var url = a[1] + (pos.start - 1) + "&g=getDna&i=mixed&c=" + pos.chrom;
                     url += "&l=" + (pos.start - 1) + "&r=" + pos.end + "&db=" + getDb() + a[2];
                     $('#dnaLink').attr('href', url);
                 }
             }
         }
         if (!imageV2.backSupport)
             imageV2.markAsDirtyPage();
     },
 
-    check: function (img, selection)
-    {   // return true if user's selection is still w/n the img (including some slop).
+    getXLimits : function(img, slop) {
+        // calculate the min/max x position for drag-select, such that user cannot drag into the label area
         var imgWidth = jQuery(img).width();
-        var imgHeight = jQuery(img).height();
         var imgOfs = jQuery(img).offset();
-        var slop = 10;
-
-        // We ignore clicks in the gray tab and track title column
-        // (we really should suppress all drag activity there,
-        // but I don't know how to do that with imgAreaSelect).
         var leftX = hgTracks.revCmplDisp ?  imgOfs.left - slop :
                                             imgOfs.left + hgTracks.insideX - slop;
         var rightX = hgTracks.revCmplDisp ? imgOfs.left + imgWidth - hgTracks.insideX + slop :
                                             imgOfs.left + imgWidth + slop;
 
-        return (   (selection.event.pageX >= leftX)
-                && (selection.event.pageX < rightX)
-                && (selection.event.pageY >= (imgOfs.top - slop))
+        return [leftX, rightX];
+    },
+
+    check: function (img, selection)
+    {   // return true if user's selection is still w/n the img (including some slop).
+        var imgWidth = jQuery(img).width();
+        var imgHeight = jQuery(img).height();
+        var imgOfs = jQuery(img).offset();
+        var slop = 10;
+
+        // No need to check the x limits anymore, as imgAreaSelect is doing that now.
+        return  (  (selection.event.pageY >= (imgOfs.top - slop))
                 && (selection.event.pageY <  (imgOfs.top + imgHeight + slop)));
     },
 
     pixelsToBases: function (img, selStart, selEnd, winStart, winEnd, addHalfBp)
     {   // Convert image coordinates to chromosome coordinates
         var imgWidth = jQuery(img).width() - hgTracks.insideX;
         var width = hgTracks.winEnd - hgTracks.winStart;
         var mult = width / imgWidth;   // mult is bp/pixel multiplier
  
         // where does a bp position start on the screen?
         // For things like drag-select, if the user ends just before the nucleotide itself, do not count
         // the nucleotide itself as selected. But for things like clicks onto
         // a selection, if the user right-clicks just before the middle of the
         // nucleotide, we certainly want to use this position.
         var halfBpWidth = 0;
@@ -1390,31 +1393,35 @@
 
     load: function (firstTime)
     {
         var imgHeight = 0;
         if (imageV2.enabled)
             imgHeight = imageV2.imgTbl.innerHeight() - 1; // last little bit makes border look ok
         
 
         // No longer disable without ruler, because shift-drag still works
         if (typeof(hgTracks) !== "undefined") {
 
             if (hgTracks.rulerClickHeight === undefined || hgTracks.rulerClickHeight === null)
                 hgTracks.rulerClickHeight = 0; // will be zero if no ruler track
             var heights = hgTracks.rulerClickHeight;
 
+            var xLimits = genomePos.getXLimits($(imageV2.imgTbl), 0);
+
             dragSelect.areaSelector = jQuery((imageV2.imgTbl).imgAreaSelect({
+                minX : xLimits[0],
+                maxX : xLimits[1],
                 selectionColor:  'blue',
                 outerColor:      '',
                 minHeight:       imgHeight,
                 maxHeight:       imgHeight,
                 onSelectStart:   dragSelect.selectStart,
                 onSelectChange:  dragSelect.selectChange,
                 onSelectEnd:     dragSelect.selectEnd,
                 autoHide:        false, // gets hidden after possible dialog
                 movable:         false,
                 clickClipHeight: heights
             }));
 
             // remove any ongoing drag-selects when the esc key is pressed anywhere for this document
             // This allows to abort zooming / highlighting
             $(document).keyup(function(e){