644f1ed70c1b04896944f66bdfa03c16278135d6
braney
  Fri Jul 31 15:16:12 2026 -0700
quickLift: keep the difference lines from standing still during a drag

The difference lines are drawn up over a track's center label, but center
labels don't scroll with the data, so the lines sat still while the image
moved underneath them.  hgTracks now keeps each center label as text with
the color it was drawn in, and flags the label when lines were painted over
it.  While the image is being dragged hgTracks.js hides that slice and puts
the label up as text in its place, then swaps the image back on drop.
Windows with no difference lines drawn are untouched.  refs #37974

diff --git src/hg/js/hgTracks.js src/hg/js/hgTracks.js
index a3db619f33a..60cf3fc3c5c 100644
--- src/hg/js/hgTracks.js
+++ src/hg/js/hgTracks.js
@@ -2884,30 +2884,42 @@
 
   //////////////////////////
  //// Drag Scroll code ////
 //////////////////////////
 jQuery.fn.panImages = function(){
     // globals across all panImages
     genomePos.original = genomePos.getOriginalPos(); // redundant but makes certain original is set.
     var leftLimit   = hgTracks.imgBoxLeftLabel * -1;
     var rightLimit  = (hgTracks.imgBoxPortalWidth - hgTracks.imgBoxWidth + leftLimit);
     var only1xScrolling = ((hgTracks.imgBoxWidth - hgTracks.imgBoxPortalWidth) === 0);
     var prevX       = (hgTracks.imgBoxPortalOffsetX + hgTracks.imgBoxLeftLabel) * -1;
     var portalWidth = 0;
     var portalAbsoluteX = 0;
     var savedPosition;
     var highlightAreas  = null; // Used to ensure dragSelect highlight will scroll.
+    // quickLift draws its difference lines up into the center labels, but center labels do
+    // not scroll with the data.  Rather than leave the lines standing still over an image
+    // that is moving underneath them, these slices are swapped for a text stand-in of the
+    // center label (written by hgTracks) while the image is being dragged.
+    var cntrLabLines    = null;
+
+    function cntrLabDragSwap(dragging) {
+        if (cntrLabLines === null || cntrLabLines.length === 0)
+            return;
+        cntrLabLines.css( {'display': (dragging ? 'none' : '')} );
+        cntrLabLines.siblings('.cntrLabStandIn').css( {'display': (dragging ? 'block':'none')});
+    }
 
     this.each(function(){
 
     var pic;
     var pan;
 
     if ( $(this).is("img") ) {
         pan = $(this).parent("div");
         pic = $(this);
     }
     else if ( $(this).is("div.scroller")  ) {
         pan = $(this);
         pic = $(this).children("img#panImg"); // Get the real pic
     }
 
@@ -2936,30 +2948,33 @@
                 $(this).css('cursor',"");  // normal pointer when not over clickable item
         });
 
         panAdjustHeight(prevX);
 
         pan.on("mousedown", function(e){
              if (e.which > 1 || e.button > 1 || e.shiftKey || e.metaKey || e.altKey || e.ctrlKey)
                  return true;
             if (mouseIsDown === false) {
                 if (rightClick.menu) {
                     rightClick.menu.hide();
                 }
                 mouseIsDown = true;
                 mouseDownX = e.clientX;
                 highlightAreas = $('.highlightItem');
+                // quickLift lines in center labels.  ':visible' so that turning center
+                // labels off leaves drag scrolling exactly as it was.
+                cntrLabLines = $('img.cntrLabLines:visible');
                 atEdge = (!beyondImage && (prevX >= leftLimit || prevX <= rightLimit));
                 $(document).on('mousemove',panner);
                 $(document).on('mouseup', panMouseUp);  // Will exec only once
                 return false;
             }
         });
     }
 
     function panner(e) {
         //if (!e) e = window.event;
         if ( mouseIsDown ) {
             var relativeX = (e.clientX - mouseDownX);
 
             if (relativeX !== 0) {
                 if (posting.mapClicksAllowed()) {
@@ -2987,30 +3002,31 @@
                         newX = rightLimit - (rightLimit - newX)/decelerator;// slower
                         //if (newX < rightLimit - wingSize) // Don't go too far over the edge!
                         //    newX = rightLimit - wingSize;
                     } else
                         newX = rightLimit;
 
                 } else if (newX >= rightLimit && newX < leftLimit)
                     beyondImage = false; // could have scrolled back without mouse up
 
                 posStatus = panUpdatePosition(newX,true);
                 newX = posStatus.newX;
                 // do not update highlights if we are at the end of a chromsome
                 if (!posStatus.isOutsideChrom)
                     scrollHighlight(relativeX);
 
+                cntrLabDragSwap(true);  // center label lines can't scroll: use the text
                 var nowPos = newX.toString() + "px";
                 $(".panImg").css( {'left': nowPos });
                 $('.tdData').css( {'backgroundPosition': nowPos } );
                 if (!only1xScrolling)
                     panAdjustHeight(newX);  // Will dynamically resize image while scrolling.
             }
         }
     }
     function panMouseUp(e) {  // Must be a separate function instead of pan.mouseup event.
         //if (!e) e = window.event;
         if (mouseIsDown) {
 
             dragMaskClear();
             $(document).off('mousemove',panner);
             $(document).off('mouseup',panMouseUp);
@@ -3019,58 +3035,72 @@
             setTimeout(posting.allowMapClicks,50); 
 
             // Outside image?  Then abandon.
             var curY = e.pageY;
             var imgTbl = $('#imgTbl');
             var north = $(imgTbl).offset().top;
             var south = north + $(imgTbl).height();
             if (curY < north || curY > south) {
                 atEdge = false;
                 beyondImage = false;
                 if (savedPosition)
                     genomePos.set(savedPosition);
                 var oldPos = prevX.toString() + "px";
                 $(".panImg").css( {'left': oldPos });
                 $('.tdData').css( {'backgroundPosition': oldPos } );
+                cntrLabDragSwap(false);  // image is back where it started, lines line up
                 if (highlightAreas)
                     imageV2.drawHighlights();
                 return true;
             }
 
             // Do we need to fetch anything?
             if (beyondImage) {
                 if (imageV2.inPlaceUpdate) {
                     var pos = parsePosition(genomePos.get());
                     imageV2.navigateInPlace("db=" + getDb() + "&position=" +
                             encodeURIComponent(pos.chrom + ":" + pos.start + "-" + pos.end),
                             null, true);
                 } else {
                     document.TrackHeaderForm.submit();
                 }
                 return true; // Make sure the setTimeout below is not called.
             }
 
             // Just a normal scroll within a >1X image
             if (prevX !== newX) {
                 prevX = newX;
                 if (!only1xScrolling) {
                     //panAdjustHeight(newX); // Will resize image AFTER scrolling.
                     // Important, since AJAX could lead to reinit after this within bounds scroll
                     hgTracks.imgBoxPortalOffsetX = (prevX * -1) - hgTracks.imgBoxLeftLabel;
                     hgTracks.imgBoxPortalLeft = newX.toString() + "px";
                 }
+                // No new image is coming, but the center label slices didn't move with the
+                // data, so the quickLift lines hidden above can only come back in the right
+                // place with a redraw.  Ask for one.
+                if (cntrLabLines && cntrLabLines.length > 0) {
+                    if (imageV2.inPlaceUpdate) {
+                        var newPos = parsePosition(genomePos.get());
+                        imageV2.navigateInPlace("db=" + getDb() + "&position=" +
+                                encodeURIComponent(newPos.chrom + ":" + newPos.start + "-" +
+                                                   newPos.end), null, true);
+                    } else
+                        cntrLabDragSwap(false);
                 }
+            } else
+                cntrLabDragSwap(false);  // drag ended where it started, nothing moved
         }
     }
     });  // end of this.each(function(){
 
     function panUpdatePosition(newOffsetX,bounded)
     {
         // Updates the 'position/search" display with change due to panning
         var closedPortalStart = hgTracks.imgBoxPortalStart + 1;   // Correction for half open
         var portalWidthBases = hgTracks.imgBoxPortalEnd - closedPortalStart;
         var portalScrolledX  = hgTracks.imgBoxPortalOffsetX+hgTracks.imgBoxLeftLabel + newOffsetX;
         var recalculate = false;
 
         var newPortalStart = 0;
         if (hgTracks.revCmplDisp)
             newPortalStart = closedPortalStart +     // As offset goes down, so do bases seen.