7a2dbf6721582d73ac9665d9231ffd7fdb703d3a
chmalee
  Wed Jun 3 15:04:56 2026 -0700
Add a link to create a myVariants item to the menu bar under My Data, refs #33808

diff --git src/hg/js/hgTracks.js src/hg/js/hgTracks.js
index 19d6115ad8c..15039276089 100644
--- src/hg/js/hgTracks.js
+++ src/hg/js/hgTracks.js
@@ -1,7456 +1,7479 @@
 // hgTracks.js - Javascript for use in hgTracks CGI
 
 // Copyright (C) 2008 The Regents of the University of California
 
 // "use strict";
 // Don't complain about line break before '||' etc:
 /* jshint -W014 */
 /* jshint esversion: 8 */
 
 
 var debug = false;
 
 /* Data passed in from CGI via the hgTracks object:
  *
  * string cgiVersion      // CGI_VERSION
  * string chromName       // current chromosome
  * int winStart           // genomic start coordinate (0-based, half-open)
  * int winEnd             // genomic end coordinate
  * int newWinWidth        // new width (in bps) if user clicks on the top ruler
  * boolean revCmplDisp    // true if we are in reverse display
  * int insideX            // width of side-bar (in pixels)
  * int rulerClickHeight   // height of ruler (in pixels) - zero if ruler is hidden
  * boolean inPlaceUpdate  // true if in-place-update is turned on
  * int imgBox*            // various drag-scroll values
  * boolean measureTiming  // true if measureTiming is on
  * Object trackDb         // hash of trackDb entries for tracks which are visible on current page
  * string highlight       // highlight string, in format chrom#start#end#color|chrom2#start2#end2#color2|...
  * string prevHlColor     // the last highlight color that the user picked
  */
 
 /* IE11 compatibility - IE doesn't have string startsWith and never will */
 if (!String.prototype.startsWith) {
   String.prototype.startsWith = function(searchString, position) {
     position = position || 0;
     return this.indexOf(searchString, position) === position;
   };
 }
 
 function initVars()
 {  // There are various entry points, so we call initVars in several places to make sure all is well
     if (typeof(hgTracks) !== "undefined" && !genomePos.original) {
         // remember initial position and size so we can restore it if user cancels
         genomePos.original = genomePos.getOriginalPos();
         genomePos.originalSize = $('#size').text().replace(/,/g, ""); // strip out any commas
         dragSelect.originalCursor = jQuery('body').css('cursor');
 
         if (typeof (igv) !== "undefined") {
             igv.initIgvUcsc();
         }
 
         imageV2.imgTbl = $('#imgTbl');
         // imageV2.enabled === true unless: advancedJavascript===false, or trackSearch, or config pg
         imageV2.enabled = (imageV2.imgTbl && imageV2.imgTbl.length > 0);
 
         // jQuery load function with stuff to support drag selection in track img
         if (theClient.isSafari()) {
             // Safari has the following bug: if we update the hgTracks map dynamically,
             // the browser ignores the changes (even though if you look in the DOM the changes
             // are there). So we have to do a full form submission when the user changes
             // visibility settings or track configuration.
             // As of 5.0.4 (7533.20.27) this is problem still exists in safari.
             // As of 5.1 (7534.50) this problem appears to have been fixed - unfortunately,
             // logs for 7/2011 show vast majority of safari users are pre-5.1 (5.0.5 is by far
             // the most common).
             //
             // Early versions of Chrome had this problem too, but this problem went away
             // as of Chrome 5.0.335.1 (or possibly earlier).
             //
             // KRR/JAT 2/2016:
             // This Safari issue is likely resolved in all current versions.  However the test
             // for version had been failing, likely for some time now.
             // (As of 9.0.9, possibly earlier, the 3rd part of the version is included in the
             // user agent string, so must be accounted for in string match)
             // Consequences were that page refresh was used instead of img update (e.g. 
             // for drag-zoom).  And UI dialog was unable to update (e.g. via Apply button).
             imageV2.mapIsUpdateable = false;
             var reg = new RegExp("Version\/([0-9]+.[0-9]+)(.[0-9]+)? Safari");
             var a = reg.exec(navigator.userAgent);
             if (a && a[1]) {
                 var version = Number(a[1]);
                 if (version >= 5.1) {
                     imageV2.mapIsUpdateable = true;
                 }
             }
         }
         imageV2.inPlaceUpdate = hgTracks.inPlaceUpdate && imageV2.mapIsUpdateable;
     }
 }
 
   /////////////////////////////////////
  ////////// Genomic position /////////
 /////////////////////////////////////
 var genomePos = {
 
     original: null,
     originalSize: 0,
 
     linkFixup: function (pos, id, reg, endParamName)
     {   // fixup external links (e.g. ensembl)
         var ele = $(document.getElementById(id));
         if (ele.length) {
             var link = ele.attr('href');
             var a = reg.exec(link);
             if (a && a[1]) {
                 ele.attr('href', a[1] + pos.start + "&" + endParamName + "=" + pos.end);
             }
         }
     },
 
     setByCoordinates: function (chrom, start, end)
     {
         var newPosition = chrom + ":" + start + "-" + end;
         genomePos.set(newPosition, end - start + 1);
         return newPosition;
     },
 
     getElement: function ()
     {
     // Return position box object
         var tags = document.getElementsByName("position");
         // There are multiple tags with name === "position" (the visible position text input
         // and a hidden with id='positionHidden'); we return value of visible element.
         for (var i = 0; i < tags.length; i++) {
                 var ele = tags[i];
                 if (ele.id !== "positionHidden") {
                     return ele;
                 }
         }
         return null;
     },
 
     get: function ()
     {
     // Return current value of position box
         var ele = genomePos.getElement();
         if (ele) {
             return ele.value;
         }
         return null;
     },
 
     getOriginalPos: function ()
     {
         return genomePos.original || genomePos.get();
     },
 
     revertToOriginalPos: function ()
     {
     // undo changes to position (i.e. after user aborts a drag-and-select).
         this.set(this.original, this.originalSize);
     },
 
     undisguisePosition: function(position) // UN-DISGUISE VMODE
     {   // find the virt position
         //  position should be real chrom span
         var pos = parsePosition(position);
         if (!pos)
             return position; // some parsing error, return original
         var start = pos.start - 1;
         var end = pos.end;
         var chromName = hgTracks.windows[0].chromName;
         if (pos.chrom !== chromName)
             return position; // return original
         var newStart = -1;
         var newEnd = -1;
         var lastW = null;
         var windows = null;
         for (j=0; j < 3; ++j) {
             if (j === 0) windows = hgTracks.windowsBefore;
             if (j === 1) windows = hgTracks.windows;
             if (j === 2) windows = hgTracks.windowsAfter;
             for (i=0,len=windows.length; i < len; ++i) {
                 var w = windows[i];
                 //  double check chrom is same thoughout all windows, otherwise warning, return original value
                 if (w.chromName != chromName) {
                     return position; // return original
                 }
                 // check that the regions are ascending and non-overlapping
                 if (lastW && w.winStart < lastW.winEnd) {
                     return position; // return original
                 }
                 // overlap with position?
                 //  if intersection, 
                 if (w.winEnd > start && end > w.winStart) {
                     var s = Math.max(start, w.winStart);
                     var e = Math.min(end, w.winEnd);
                     var cs = s - w.winStart + w.virtStart;
                     var ce = e - w.winStart + w.virtStart;
                     if (newStart === -1)
                         newStart = cs;
                     newEnd = ce;
                 }
                 lastW = w;
             }
         }
         //  return new virt undisguised position as a string
         var newPos = "multi:" + (newStart+1) + "-" + newEnd;
         return newPos;
     },
 
     disguiseSize: function(position) // DISGUISE VMODE
     {   // find the real size of the windows spanned
         //  position should be a real chrom span
         var pos = parsePosition(position);
         if (!pos)
             return 0;
         var start = pos.start - 1;
         var end = pos.end;
         var newSize = 0;
         var windows = null;
         for (j=0; j < 3; ++j) {
             if (j === 0) windows = hgTracks.windowsBefore;
             if (j === 1) windows = hgTracks.windows;
             if (j === 2) windows = hgTracks.windowsAfter;
             for (i=0,len=windows.length; i < len; ++i) {
                 var w = windows[i];
                 // overlap with position?
                 //  if intersection, 
                 if (w.winEnd > start && end > w.winStart) {
                     var s = Math.max(start, w.winStart);
                     var e = Math.min(end, w.winEnd);
                     newSize += (e - s);
                 }
             }
         }
         //  return real size of the disguised position 
         return newSize;
     },
 
     disguisePosition: function(position) // DISGUISE VMODE
     {   // find the single-chrom range spanned
         //  position should be virt
         var pos = parsePosition(position);
         if (!pos)
             return position; // some parsing error, return original
         var start = pos.start - 1;
         var end = pos.end;
         var chromName = hgTracks.windows[0].chromName;
         var newStart = -1;
         var newEnd = -1;
         var lastW = null;
         var windows = null;
         for (j=0; j < 3; ++j) {
             if (j === 0) windows = hgTracks.windowsBefore;
             if (j === 1) windows = hgTracks.windows;
             if (j === 2) windows = hgTracks.windowsAfter;
             for (i=0,len=windows.length; i < len; ++i) {
                 var w = windows[i];
                 //  double check chrom is same thoughout all windows, otherwise warning, return original value
                 if (w.chromName != chromName) {
                     return position; // return undisguised original
                 }
                 // check that the regions are ascending and non-overlapping
                 if (lastW && w.winStart < lastW.winEnd) {
                     return position; // return undisguised original
                 }
                 // overlap with position?
                 //  if intersection, 
                 if (w.virtEnd > start && end > w.virtStart) {
                     var s = Math.max(start, w.virtStart);
                     var e = Math.min(end, w.virtEnd);
                     var cs = s - w.virtStart + w.winStart;
                     var ce = e - w.virtStart + w.winStart;
                     if (newStart === -1)
                         newStart = cs;
                     newEnd = ce;
                 }
                 lastW = w;
             }
         }
         //  return new non-virt disguised position as a string
         var newPos = chromName + ":" + (newStart+1) + "-" + newEnd;
         return newPos;
     },
 
     set: function (position, size)
     {   // Set value of position and size (in hiddens and input elements).
         // We assume size has already been commified.
         // Either position or size may be null.
 
         // stack dump  // DEBUG
         //console.trace();
         // NOT work on safari
         //var obj = {};
         //Error.captureStackTrace(obj);
         //warn("genomePos.set() called "+obj.stack);
 
         position = position.replace(/,/g, ""); // strip out any commas
         position.replace("virt:", "multi:");
 
         if (position) {
             // DISGUISE VMODE
             //warn("genomePos.set() called, position = "+position);
             if (hgTracks.virtualSingleChrom && (position.search("multi:")===0)) {
                 var newPosition = genomePos.disguisePosition(position);
                 //warn("genomePos.set() position = "+position+", newPosition = "+newPosition);
                 position = newPosition;
             }
         }
         if (position) {
             // There are multiple tags with name === "position"
             // (one in TrackHeaderForm and another in TrackForm).
             var tags = document.getElementsByName("position");
             for (var i = 0; i < tags.length; i++) {
                 var ele = tags[i];
                 ele.value = position;
             }
         }
         var pos = parsePosition(position);
         if ($('#positionDisplay').length) {
             // add commas to positionDisplay
             var commaPosition = position;
             if (pos)
                 commaPosition = pos.chrom+":"+commify(pos.start)+"-"+commify(pos.end);  
             $('#positionDisplay').text(commaPosition);
         }
         if (size) {
             if (hgTracks.virtualSingleChrom && (position.search("multi:")!==0)) {
                 var newSize = genomePos.disguiseSize(position);
                 //warn("genomePos.set() position = "+position+", newSize = "+newSize);
                 if (newSize > 0)
                     size = newSize;
             }
             $('#size').text(commify(size)); // add commas
         }
         if (pos) {
             // fixup external static links on page'
 
             // Example ensembl link:
             // http://www.ensembl.org/Homo_sapiens/contigview?chr=21&start=33031934&end=33041241
             genomePos.linkFixup(pos, "ensemblLink", new RegExp("(.+start=)[0-9]+"), "end");
 
             // Example NCBI Map Viewer link (obsolete):
             // https://www.ncbi.nlm.nih.gov/mapview/maps.cgi?taxid=9606&CHR=21&BEG=33031934&END=33041241
             genomePos.linkFixup(pos, "ncbiLink", new RegExp("(.+BEG=)[0-9]+"), "END");
 
             // Example NCBI Genome Data Viewer link
             // https://www.ncbi.nlm.nih.gov/genome/gdv/browser/?id=GCF_000001405.37&chr=4&from=45985744&to=45991655&context=genome
             genomePos.linkFixup(pos, "ncbiLink", new RegExp("(.+from=)[0-9]+"), "to");
 
             // Example medaka link: 
             // http://utgenome.org/medakabrowser_ens_jump.php?revision=version1.0&chr=chromosome18&start=14435198&end=14444829
             genomePos.linkFixup(pos, "medakaLink", new RegExp("(.+start=)[0-9]+"), "end");
 
             var link;
             var reg;
             var a;
             if ($('#wormbaseLink').length) {
                 // e.g. http://www.wormbase.org/db/gb2/gbrowse/c_elegans?name=II:14646301-14667800
                 link = $('#wormbaseLink').attr('href');
                 reg = new RegExp("(.+:)[0-9]+");
                 a = reg.exec(link);
                 if (a && a[1]) {
                     $('#wormbaseLink').attr('href', a[1] + pos.start + "-" + pos.end);
                 }
             }
             // Fixup DNA link; e.g.: 
             // hgc?hgsid=2999470&o=114385768&g=getDna&i=mixed&c=chr7&l=114385768&r=114651696&db=panTro2&hgsid=2999470
             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();
     },
 
     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 imgOfs = jQuery(img).offset();
         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 [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;
         if (addHalfBp)
             halfBpWidth = (imgWidth / width) / 2; // how many pixels does one bp take up;
 
         var startDelta;   // startDelta is how many bp's to the right/left
         var x1;
 
         // The magic number three appear at another place in the code 
         // as LEFTADD. It was originally annotated as "borders or cgi item calc
         // ?" by Larry. It has to be used when going any time when converting 
         // between pixels and coordinates.
         selStart -= 3;
         selEnd -= 3;
 
         if (hgTracks.revCmplDisp) {
             x1 = Math.min(imgWidth, selStart);
             startDelta = Math.floor(mult * (imgWidth - x1 - halfBpWidth));
         } else {
             x1 = Math.max(hgTracks.insideX, selStart);
             startDelta = Math.floor(mult * (x1 - hgTracks.insideX + halfBpWidth));
         }
         var endDelta;
         var x2;
         if (hgTracks.revCmplDisp) {
             endDelta = startDelta;
             x2 = Math.min(imgWidth, selEnd);
             startDelta = Math.floor(mult * (imgWidth - x2 + halfBpWidth));
         } else {
             x2 = Math.max(hgTracks.insideX, selEnd);
             endDelta = Math.floor(mult * (x2 - hgTracks.insideX - halfBpWidth));
         }
         var newStart = hgTracks.winStart + startDelta;
         var newEnd = hgTracks.winStart + 1 + endDelta;
 
         // if user selects space between two bases, start>end can happen
         if (newStart >= newEnd)
             newStart = newEnd-1;
 
         if (newEnd > winEnd) {
             newEnd = winEnd;
         }
         return {chromStart : newStart, chromEnd : newEnd};
     },
 
     chromToVirtChrom: function (chrom, chromStart, chromEnd)
     {   // Convert regular chromosome position to virtual chrom coordinates using hgTracks.windows list
         // Consider the first contiguous set of overlapping regions to define the match (for now).
         // only works for regions covered by the current hgTracks.windows
         var virtStart = -1, virtEnd = -1;
         var s,e;
         var i, len;
         for (i = 0, len = hgTracks.windows.length; i < len; ++i) {
             var w = hgTracks.windows[i];
             var overlap = (chrom == w.chromName && chromEnd > w.winStart && w.winEnd > chromStart);
             if (virtStart == -1) {
                 if (overlap) {
                     // when they overlap the first time
                     s = Math.max(chromStart, w.winStart);
                     e = Math.min(chromEnd, w.winEnd);
                     virtStart = w.virtStart + (s - w.winStart);
                     virtEnd   = w.virtStart + (e - w.winStart);
                 } else {
                     // until they overlap
                     // do nothing
                 }
             } else {
                 if (overlap) {
                     // while they continue to overlap, extend
                     e = Math.min(chromEnd, w.winEnd);
                     virtEnd   = w.virtStart + (e - w.winStart);
                 } else {
                     // when they do not overlap anymore, stop
                     break;
                 }
             }
         }
         return {chromStart : virtStart, chromEnd : virtEnd};
     },
 
     selectionPixelsToBases: function (img, selection)
     {   // Convert selection x1/x2 coordinates to chromStart/chromEnd.
         return genomePos.pixelsToBases(img, selection.x1, selection.x2,
                                         hgTracks.winStart, hgTracks.winEnd, true);
     },
 
     update: function (img, selection, singleClick)
     {
         var pos = genomePos.pixelsToBases(img, selection.x1, selection.x2,
                                             hgTracks.winStart, hgTracks.winEnd, true);
         // singleClick is true when the mouse hasn't moved (or has only moved a small amount).
         if (singleClick) {
             var center = (pos.chromStart + pos.chromEnd)/2;
             pos.chromStart = Math.floor(center - hgTracks.newWinWidth/2);
             pos.chromEnd = pos.chromStart + hgTracks.newWinWidth;
             // clip
             if (pos.chromStart < hgTracks.chromStart)
                 pos.chromStart = hgTracks.chromStart; // usually  1
             if (pos.chromEnd > hgTracks.chromEnd)
                 pos.chromEnd = hgTracks.chromEnd; // usually virt chrom size
 
             // save current position so that that it may be restored after highlight or cancel.
             genomePos.original = genomePos.getOriginalPos();
             genomePos.originalSize = $('#size').text().replace(/,/g, ""); // strip out any commas
 
         }
         var newPosition = genomePos.setByCoordinates(hgTracks.chromName,
                                                             pos.chromStart+1, pos.chromEnd);
         return newPosition;
     },
 
     handleChange: function (response, status)
     {
         var json = JSON.parse(response);
         genomePos.set(json.pos);
     },
 
     changeAssemblies: function (ele)  // UNUSED?  Larry's experimental code
     {   // code to update page when user changes assembly select list.
         $.ajax({
                 type: "GET",
                 url: "../cgi-bin/hgApi",
                 data: cart.varsToUrlData({ 'hgsid': getHgsid(), 'cmd': 'defaultPos', 'db': getDb() }),
                 dataType: "html",
                 trueSuccess: genomePos.handleChange,
                 success: catchErrorOrDispatch,
                 error: errorHandler,
                 cache: true
             });
         return false;
     },
 
 
     convertedVirtCoords : {chromStart : -1, chromEnd : -1},
 
     handleConvertChromPosToVirtCoords: function (response, status)
     {
         var virtStart = -1, virtEnd = -1;
         var newJson = scrapeVariable(response, "convertChromToVirtChrom");
         if (!newJson) {
             warn("convertChromToVirtChrom object is missing from the response");
         } else {
             virtStart = newJson.virtWinStart;
             virtEnd   = newJson.virtWinEnd;
         }
         genomePos.convertedVirtCoords = {chromStart : virtStart, chromEnd : virtEnd};
     },
 
     convertChromPosToVirtCoords: function (chrom, chromStart, chromEnd)
     {   // code to convert chrom position to virt coords
         genomePos.convertedVirtCoords = {chromStart : -1, chromEnd : -1};  // reset
         var pos = chrom+":"+(chromStart+1)+"-"+chromEnd; // easier to pass 1 parameter than 3
         $.ajax({
                 type: "GET",
                 async: false, // wait for result
                 url: "../cgi-bin/hgTracks",
                 data: cart.varsToUrlData({ 'hgt.convertChromToVirtChrom': pos, 'hgt.trackImgOnly' : 1, 'hgsid': getHgsid(), 'db': getDb() }),
                 dataType: "html",
                 trueSuccess: genomePos.handleConvertChromPosToVirtCoords,
                 success: catchErrorOrDispatch,
                 error: errorHandler,
                 cache: false
             });
         return genomePos.convertedVirtCoords;
     },
 
     positionDisplayDialog: function ()
     // Show the virtual and real positions of the windows
     {   
         var position = genomePos.get();
         position.replace("virt:", "multi:");
         var positionDialog = $("#positionDialog")[0];
         if (!positionDialog) {
             $("body").append("<div id='positionDialog'><span id='positionDisplayPosition'></span>");
             positionDialog = $("#positionDialog")[0];
         }
         if (hgTracks.windows) {
             var i, len, end;
             var matches = /^multi:[0-9]+-([0-9]+)/.exec(position);
             var modeType = (hgTracks.virtModeType === "customUrl" ? "Custom regions on virtual chromosome" :
                             (hgTracks.virtModeType === "exonMostly" ? "Exon view of" :
                             (hgTracks.virtModeType === "geneMostly" ? "Gene view of" :
                             (hgTracks.virtModeType === "singleAltHaplo" ? "Alternate haplotype as virtual chromosome" :
                                         "Unknown mode"))));
             var str = modeType + "&nbsp;" + position;
             if (matches) {
                 end = matches[1];
                 if (end < hgTracks.chromEnd) {
                     str += ". Full virtual region is multi:1-" + hgTracks.chromEnd + ". Zoom out to view.";
                 }
             }
             if (!(hgTracks.virtualSingleChrom && (hgTracks.windows.length === 1))) {
                 var w;
                 if (hgTracks.windows.length <= 10) {
                     str += "<p><table>\n";
                     for (i=0,len=hgTracks.windows.length; i < len; ++i) {
                         w = hgTracks.windows[i];
                         str += "<tr><td>" + w.chromName + ":" + (w.winStart+1) + "-" + w.winEnd + "</td><td>" + 
                                     (w.winEnd - w.winStart) + " bp" + "</td></tr>\n";
                     }
                     str += "</table></p>\n";
                 } else {
                     str += "<br><ul style='list-style-type:none; max-height:200px; padding:0; width:80%; overflow:hidden; overflow-y:scroll;'>\n";
                     for (i=0,len=hgTracks.windows.length; i < len; ++i) {
                         w = hgTracks.windows[i];
                         str += "<li>" + w.chromName + ":" + (w.winStart+1) + "-" + w.winEnd +
                                     "&nbsp;&nbsp;&nbsp;" + (w.winEnd - w.winStart) + " bp" + "</li>\n";
                     }
                     str += "</ul>\n";
                 }
             }
             $("#positionDisplayPosition").html(str);
         } else {
             $("#positionDisplayPosition").html(position);
         }
         $(positionDialog).dialog({
                 modal: true,
                 title: "Multi-Region Position Ranges",
                 closeOnEscape: true,
                 resizable: false,
                 autoOpen: false,
                 minWidth: 400,
                 minHeight: 40,
 
                 close: function() {
                     // All exits to dialog should go through this
                     $(imageV2.imgTbl).imgAreaSelect({hide:true});
                     $(this).hide();
                     $('body').css('cursor', ''); // Occasionally wait cursor got left behind
                 }
         });
         $(positionDialog).dialog('open');
     }
 
 };
 
   /////////////////////////////////////
  //// Creating items             /////
 /////////////////////////////////////
 var myVariants = {
     createBedForm: function(dialogEle) {
         // Shared top fields (visible in all manual modes)
         const commonTopFields = [
             { label: "Label", id: "name", type: "text", placeholder: "Optional item label",
               info: "A short label for this annotation, displayed in the browser" },
             { label: "Color", id: "color", type: "text" },
         ];
         // SNV-only field (between commonTop and alt/sequence)
         const snvOnlyFields = [
             { label: "Ref", id: "ref", type: "text", placeholder: "Optional reference allele sequence",
               info: "Reference allele sequence at this position" },
         ];
         // Alt/Sequence field: shown for SNV (label="Alt") and CNV (label="Sequence")
         const altField = { label: "Alt", id: "alt", type: "text",
             placeholder: "Optional alternate allele sequence",
             info: "Alternate (variant) allele sequence" };
         // Position fields: shown always for Transcript; collapsible for SNV/CNV
         const positionFields = [
             { label: "Chromosome", id: "chrom", type: "text" },
             { label: "Start", id: "start", type: "number",
               info: "1-based start position on the chromosome" },
             { label: "End", id: "end", type: "number",
               info: "1-based end position on the chromosome (inclusive)" },
             { label: "Score", id: "score", type: "number",
               info: "Score from 0-1000. Higher scores display darker" },
             { label: "Strand", id: "strand", type: "text",
               info: "Strand: + for forward, - for reverse, . for unknown" },
         ];
         // Transcript-only CDS fields (displayed as CDS Start/End; stored as thickStart/thickEnd)
         const cdsFields = [
             { label: "CDS Start", id: "thickStart", type: "number",
               info: "Start of the coding region" },
             { label: "CDS End", id: "thickEnd", type: "number",
               info: "End of the coding region" },
         ];
         // Shared bottom fields
         const commonBottomFields = [
             { label: "Mouseover", id: "mouseover", type: "text", placeholder: "Short text shown on hover",
               info: "Short text shown when hovering over this item. If empty, the label and alleles are displayed" },
             { label: "Description", id: "description", type: "textarea", placeholder: "Longer description/notes",
               info: "Longer notes or comments about this annotation. Displayed on the details page" },
             { label: "Project", id: "project", type: "text", placeholder: "Optional project name",
               info: "Group annotations by project. Projects with no annotations are automatically removed from the list" },
         ];
         // CNV vocabulary, mirrored on the server in myVariantsTrack.c:validCnvTypes
         const cnvTypeOptions = ["deletion", "duplication", "insertion", "inversion",
                                 "translocation", "complex", "breakend"];
 
         const form = document.createElement("form");
         form.className = "myVariants-form";
         form.action = "hgTracks";
         form.method = "post";
         form.id = "myVariants-form";
 
         // First: HGVS/position input box (primary interaction method)
         let quickInpDiv = document.createElement("div");
         quickInpDiv.id = "hgvsInputDiv";
         form.appendChild(quickInpDiv);
 
         let quickInp = document.createElement("input");
         let quickInpLabel = document.createElement("label");
         quickInp.type = "text";
         quickInp.id = "hgvsInput";
         quickInp.name = "myVariantsHgvsInput";
         quickInp.style.width = "300px";
         quickInpLabel.textContent = "Enter HGVS, position, or gene symbol";
         quickInpLabel.style.display = "inline-block";
         quickInpLabel.style.minWidth = "200px";
         quickInpLabel.style.marginRight = "8px";
         quickInpLabel.for = "hgvsInput";
 
         let resizeDialog = function() {
             var dialog = $("#myVariantsDialog");
             var hgvsVisible = document.getElementById("hgvsInputDiv").style.display !== "none";
             if (hgvsVisible) {
                 dialog.dialog("option", "width", 580);
                 dialog.dialog("option", "height", "auto");
                 dialog.dialog("option", "position", { my: "center", at: "center", of: window });
             } else {
                 dialog.dialog("option", "width", Math.min(1000, window.innerWidth * 0.9));
                 dialog.dialog("option", "height", Math.min(800, window.innerHeight * 0.9));
                 dialog.dialog("option", "position", { my: "top+30", at: "top", of: window });
             }
         };
 
         let updatePositionSummary = function() {
             let summaryText = document.getElementById("positionSummaryText");
             if (!summaryText) return;
             let chrom = document.getElementById("chrom");
             let start = document.getElementById("start");
             let end = document.getElementById("end");
             if (chrom && start && end) {
                 let startVal = parseInt(start.value);
                 let endVal = parseInt(end.value);
                 let startFmt = isNaN(startVal) ? start.value : startVal.toLocaleString();
                 let endFmt = isNaN(endVal) ? end.value : endVal.toLocaleString();
                 summaryText.textContent = chrom.value + ":" + startFmt + "-" + endFmt;
             }
         };
 
         // Switch the form into one of four modes and remember the choice so the
         // next dialog open restarts in the same place.
         let applyMode = function(mode) {
             const isHgvs = mode === "hgvs";
             const isTranscript = mode === "transcript";
             const isSnv = mode === "snv";
             const isCnv = mode === "cnv";
 
             document.getElementById("hgvsInputDiv").style.display = isHgvs ? "" : "none";
             document.getElementById("manualInputDiv").style.display = isHgvs ? "none" : "";
             document.getElementById("hgvsManualToggle").textContent =
                 isHgvs ? "Or edit item fields manually" : "Back to quick input mode";
 
             if (!isHgvs) {
                 document.getElementById("typeTranscript").checked = isTranscript;
                 document.getElementById("typeSnv").checked = isSnv;
                 document.getElementById("typeCnv").checked = isCnv;
             }
 
             document.getElementById("refWrapper").style.display = isSnv ? "" : "none";
             document.getElementById("altWrapper").style.display = (isSnv || isCnv) ? "" : "none";
             document.getElementById("altLabel").textContent = isCnv ? "Sequence" : "Alt";
             document.getElementById("cnvTypeWrapper").style.display = isCnv ? "" : "none";
 
             if (isTranscript) {
                 advancedDiv.style.display = "none";
                 cdsBlocksDiv.style.display = "none";
                 posWraps.forEach(function(w) { w.style.display = ""; });
                 cdsWraps.forEach(function(w) { w.style.display = ""; });
                 blocksSection.style.display = "";
                 const order = [
                     typeRadioBar, posSummary,
                     posWraps[0], posWraps[1], posWraps[2],
                     nameWrap,
                     posWraps[3], posWraps[4],
                     cdsWraps[0], cdsWraps[1],
                     colorWrap,
                     mouseoverWrap, descriptionWrap, projectWrap,
                     blocksSection,
                     advancedDiv, cdsBlocksDiv,
                     refWrapper, cnvTypeWrapper, altWrapper,
                     customFieldsSection
                 ];
                 order.forEach(function(el) { manualInpDiv.appendChild(el); });
             } else {
                 // Pack wrappers back into their collapsible containers.
                 posWraps.forEach(function(w) { advancedDiv.appendChild(w); });
                 cdsWraps.forEach(function(w) { cdsBlocksDiv.appendChild(w); });
                 cdsBlocksDiv.appendChild(blocksSection);
                 advancedDiv.style.display = "none";
                 cdsBlocksDiv.style.display = "none";
                 const order = [
                     typeRadioBar, posSummary,
                     advancedDiv,
                     nameWrap, colorWrap,
                     refWrapper, cnvTypeWrapper, altWrapper,
                     cdsBlocksDiv,
                     mouseoverWrap, descriptionWrap, projectWrap,
                     customFieldsSection
                 ];
                 order.forEach(function(el) { manualInpDiv.appendChild(el); });
             }
             document.getElementById("positionSummaryDiv").style.display = isTranscript ? "none" : "";
             if (posEditLink) posEditLink.textContent = "[edit]";
 
             try { localStorage.setItem("myVariantsLastMode", mode); } catch (e) { /* private mode */ }
             resizeDialog();
         };
 
         let currentType = function() {
             if (document.getElementById("typeTranscript").checked) return "transcript";
             if (document.getElementById("typeCnv").checked) return "cnv";
             return "snv";
         };
 
         let toggleForm = function(event) {
             event.preventDefault();
             const inHgvs = document.getElementById("hgvsInputDiv").style.display !== "none";
             applyMode(inHgvs ? currentType() : "hgvs");
         };
         let toggleContainer = document.createElement("p");
         let toggle = document.createElement("a");
         toggle.href = "#";
         toggle.id = "hgvsManualToggle";
         toggle.addEventListener("click", toggleForm);
         toggle.textContent = "Or edit item fields manually";
         toggleContainer.appendChild(toggle);
 
         quickInpDiv.appendChild(quickInpLabel);
         quickInpDiv.appendChild(quickInp);
         form.appendChild(toggleContainer);
 
         // Manual input div (contains simple + advanced fields)
         let manualInpDiv = document.createElement("div");
         manualInpDiv.id = "manualInputDiv";
         manualInpDiv.style.display = "none";
 
         let posSummary = document.createElement("div");
         posSummary.id = "positionSummaryDiv";
         posSummary.style.cssText = "margin-bottom:12px; padding:6px 10px; background:#f0f4f8; border:1px solid #d0d7de; border-radius:4px; font-size:13px;";
         let posSummaryLabel = document.createElement("b");
         posSummaryLabel.textContent = "Position: ";
         posSummary.appendChild(posSummaryLabel);
         let posSummaryText = document.createElement("span");
         posSummaryText.id = "positionSummaryText";
         posSummary.appendChild(posSummaryText);
         let posSummarySuffix = document.createElement("span");
         posSummarySuffix.style.color = "#888";
         posSummarySuffix.textContent = " (from current view)";
         posSummary.appendChild(posSummarySuffix);
         let posEditLink = document.createElement("a");
         posEditLink.href = "#";
         posEditLink.textContent = "[edit]";
         posEditLink.style.cssText = "margin-left:8px; font-size:12px;";
         posEditLink.addEventListener("click", function(event) {
             event.preventDefault();
             let advDiv = document.getElementById("advancedFieldsDiv");
             if (!advDiv) return;
             if (advDiv.style.display === "none") {
                 advDiv.style.display = "";
                 posEditLink.textContent = "[hide]";
                 let chromField = document.getElementById("chrom");
                 if (chromField) {
                     chromField.scrollIntoView({behavior: "smooth", block: "nearest"});
                     chromField.focus();
                 }
             } else {
                 advDiv.style.display = "none";
                 posEditLink.textContent = "[edit]";
             }
         });
         posSummary.appendChild(posEditLink);
         manualInpDiv.appendChild(posSummary);
 
         // Helper function to create form field (uses createInfoIcon from utils.js)
         let createField = function(field, container) {
             const wrapper = document.createElement("div");
             wrapper.style.marginBottom = "8px";
 
             const label = document.createElement("label");
             label.htmlFor = field.id;
             label.textContent = field.label;
             label.style.display = "inline-block";
             label.style.minWidth = "140px";
 
             let input;
             if (field.type === "textarea") {
                 input = document.createElement("textarea");
                 input.rows = "4";
                 input.cols = "60";
             } else {
                 input = document.createElement("input");
                 input.type = field.type;
             }
             input.id = field.id;
 
             if (field.id === "chrom") {
                 input.value = hgTracks.chromName;
             }
             if (field.type === "number") {
                 input.min = 0;
                 if (field.id === "start" || field.id === "thickStart") {
                     input.value = hgTracks.winStart;
                 }
                 if (field.id === "end" || field.id === "thickEnd") {
                     input.value = hgTracks.winEnd;
                 }
                 if (field.id === "score") {
                     input.value = 0;
                     input.max = 1000;
                 }
             }
             if (field.id === "strand") {
                 input.value = ".";
             }
             if (field.id === "color") {
                 input.value = "#000000";
                 input.style.width = "70px";
             }
             if (field.placeholder) {
                 input.placeholder = field.placeholder;
             }
 
             wrapper.appendChild(label);
             wrapper.appendChild(input);
             if (field.info) {
                 wrapper.appendChild(createInfoIcon(field.info));
             }
             container.appendChild(wrapper);
 
             return input;
         };
 
         // Helper function to create project field with dropdown if projects exist
         let createProjectField = function(container) {
             const wrapper = document.createElement("div");
             wrapper.style.marginBottom = "8px";
 
             const label = document.createElement("label");
             label.htmlFor = "project";
             label.textContent = "Project";
             label.style.display = "inline-block";
             label.style.minWidth = "140px";
             wrapper.appendChild(label);
 
             // Check if we have existing projects from the server
             let existingProjects = (typeof hgTracks !== 'undefined' && hgTracks.myVariantsProjects)
                                    ? hgTracks.myVariantsProjects : [];
 
             if (existingProjects.length > 0) {
                 // Create dropdown with existing projects
                 let select = document.createElement("select");
                 select.id = "projectSelect";
                 select.style.marginRight = "8px";
 
                 // Add empty option
                 let emptyOpt = document.createElement("option");
                 emptyOpt.value = "";
                 emptyOpt.textContent = "(none)";
                 select.appendChild(emptyOpt);
 
                 // Add existing projects
                 existingProjects.forEach(proj => {
                     let opt = document.createElement("option");
                     opt.value = proj;
                     opt.textContent = proj;
                     select.appendChild(opt);
                 });
 
                 // Add "Add new..." option
                 let newOpt = document.createElement("option");
                 newOpt.value = "__new__";
                 newOpt.textContent = "Add new...";
                 select.appendChild(newOpt);
 
                 wrapper.appendChild(select);
 
                 // Hidden text input for new project (shown when "Add new..." selected)
                 let newProjectInput = document.createElement("input");
                 newProjectInput.type = "text";
                 newProjectInput.id = "project";
                 newProjectInput.placeholder = "Enter new project name";
                 newProjectInput.style.display = "none";
                 wrapper.appendChild(newProjectInput);
 
                 // Toggle between dropdown and text input
                 select.addEventListener("change", function() {
                     if (select.value === "__new__") {
                         newProjectInput.style.display = "";
                         newProjectInput.focus();
                     } else {
                         newProjectInput.style.display = "none";
                         newProjectInput.value = select.value;
                     }
                 });
 
                 // Keep text input synced with dropdown selection
                 newProjectInput.addEventListener("blur", function() {
                     if (newProjectInput.value === "" && select.value === "__new__") {
                         select.value = "";
                         newProjectInput.style.display = "none";
                     }
                 });
             } else {
                 // No existing projects - just show text input
                 let input = document.createElement("input");
                 input.type = "text";
                 input.id = "project";
                 input.placeholder = "Optional project name";
                 wrapper.appendChild(input);
             }
 
             // Add info icon
             wrapper.appendChild(createInfoIcon("Group annotations by project. Projects with no annotations are automatically removed from the list"));
             container.appendChild(wrapper);
         };
 
         // Type radio bar: Transcript | Variant -> Short | CNV. Inserted at the very
         // top of manualInpDiv (before the existing position summary).
         let typeRadioBar = document.createElement("div");
         typeRadioBar.id = "typeRadioBar";
         typeRadioBar.style.cssText = "margin-bottom:12px; padding:8px 10px; background:#f7f7f7; border:1px solid #ddd; border-radius:4px;";
         typeRadioBar.innerHTML =
             "<div style='font-weight:bold; font-size:12px; color:#555; margin-bottom:4px;'>Annotation type</div>" +
             "<div>" +
                 "<label style='margin-right:20px;'><input type='radio' name='myVariantsType' id='typeTranscript' value='transcript'> Transcript</label>" +
                 "<label style='margin-right:20px;'><input type='radio' name='myVariantsType' id='typeSnv' value='snv' checked> Short variant (snv)</label>" +
                 "<label><input type='radio' name='myVariantsType' id='typeCnv' value='cnv'> Copy number variant (cnv)</label>" +
             "</div>";
         manualInpDiv.insertBefore(typeRadioBar, manualInpDiv.firstChild);
 
         let onTypeRadioChange = function() {
             applyMode(currentType());
         };
         // The form is not yet in the document, so query the local subtree.
         typeRadioBar.querySelectorAll("input[type=radio]").forEach(function(r) {
             r.addEventListener("change", onTypeRadioChange);
         });
 
         let colorInput = null;
         let nameWrap, colorWrap;
         commonTopFields.forEach(function(field) {
             let input = createField(field, manualInpDiv);
             if (field.id === "color") { colorInput = input; colorWrap = input.parentNode; }
             else if (field.id === "name") { nameWrap = input.parentNode; }
         });
 
         // SNV-only ref input
         let refWrapper = document.createElement("div");
         refWrapper.id = "refWrapper";
         createField(snvOnlyFields[0], refWrapper);
         manualInpDiv.appendChild(refWrapper);
 
         // CNV-only type select
         let cnvTypeWrapper = document.createElement("div");
         cnvTypeWrapper.id = "cnvTypeWrapper";
         cnvTypeWrapper.style.marginBottom = "8px";
         let cnvTypeLabel = document.createElement("label");
         cnvTypeLabel.htmlFor = "cnvType";
         cnvTypeLabel.textContent = "CNV type";
         cnvTypeLabel.style.cssText = "display:inline-block; min-width:140px;";
         let cnvTypeSelect = document.createElement("select");
         cnvTypeSelect.id = "cnvType";
         cnvTypeOptions.forEach(function(t) {
             let opt = document.createElement("option");
             opt.value = t;
             opt.textContent = t;
             cnvTypeSelect.appendChild(opt);
         });
         cnvTypeWrapper.appendChild(cnvTypeLabel);
         cnvTypeWrapper.appendChild(cnvTypeSelect);
         cnvTypeWrapper.appendChild(createInfoIcon("CNV vocabulary follows gnomAD"));
         manualInpDiv.appendChild(cnvTypeWrapper);
 
         // Alt / Sequence input (shared between SNV and CNV; label switches in applyMode)
         let altWrapper = document.createElement("div");
         altWrapper.id = "altWrapper";
         altWrapper.style.marginBottom = "8px";
         let altLabel = document.createElement("label");
         altLabel.htmlFor = "alt";
         altLabel.id = "altLabel";
         altLabel.textContent = "Alt";
         altLabel.style.cssText = "display:inline-block; min-width:140px;";
         let altInput = document.createElement("input");
         altInput.type = "text";
         altInput.id = "alt";
         altInput.placeholder = altField.placeholder;
         altWrapper.appendChild(altLabel);
         altWrapper.appendChild(altInput);
         altWrapper.appendChild(createInfoIcon(altField.info));
         manualInpDiv.appendChild(altWrapper);
 
         let advancedDiv = document.createElement("div");
         advancedDiv.id = "advancedFieldsDiv";
         advancedDiv.style.display = "none";
         let posWraps = positionFields.map(function(field) {
             return createField(field, advancedDiv).parentNode;
         });
         manualInpDiv.appendChild(advancedDiv);
 
         let cdsBlocksDiv = document.createElement("div");
         cdsBlocksDiv.id = "cdsBlocksDiv";
         cdsBlocksDiv.style.display = "none";
         let cdsWraps = cdsFields.map(function(field) {
             return createField(field, cdsBlocksDiv).parentNode;
         });
 
         let blocksSection = document.createElement("div");
         blocksSection.id = "blocksSection";
         blocksSection.style.cssText = "margin-top:12px; padding-top:10px; border-top:1px solid #ddd;";
         let blocksLabel = document.createElement("div");
         blocksLabel.style.cssText = "font-weight:bold; margin-bottom:8px; font-size:13px;";
         blocksLabel.textContent = "Blocks (optional)";
         blocksSection.appendChild(blocksLabel);
         let blocksHint = document.createElement("div");
         blocksHint.style.cssText = "font-size:12px; color:#666; margin-bottom:6px;";
         blocksHint.textContent = "Offsets are relative to Start. First offset must be 0; " +
                                  "last block must reach End. Leave empty for a single full-span block.";
         blocksSection.appendChild(blocksHint);
         let blocksContainer = document.createElement("div");
         blocksContainer.id = "blocksContainer";
         blocksSection.appendChild(blocksContainer);
         let hCount = document.createElement("input"); hCount.type = "hidden"; hCount.id = "blockCount";
         let hSizes = document.createElement("input"); hSizes.type = "hidden"; hSizes.id = "blockSizes";
         let hStarts = document.createElement("input"); hStarts.type = "hidden"; hStarts.id = "chromStarts";
         blocksSection.appendChild(hCount);
         blocksSection.appendChild(hSizes);
         blocksSection.appendChild(hStarts);
         cdsBlocksDiv.appendChild(blocksSection);
         manualInpDiv.appendChild(cdsBlocksDiv);
 
         let mouseoverWrap, descriptionWrap, projectWrap;
         commonBottomFields.forEach(function(field) {
             if (field.id === "project") {
                 createProjectField(manualInpDiv);
                 projectWrap = manualInpDiv.lastElementChild;
             } else {
                 let input = createField(field, manualInpDiv);
                 if (field.id === "mouseover") mouseoverWrap = input.parentNode;
                 else if (field.id === "description") descriptionWrap = input.parentNode;
             }
         });
 
         let customFieldsSection = document.createElement("div");
         customFieldsSection.id = "customFieldsSection";
         customFieldsSection.style.cssText = "margin-top:12px; padding-top:10px; border-top:1px solid #ddd;";
 
         let customFieldsLabel = document.createElement("div");
         customFieldsLabel.style.cssText = "font-weight:bold; margin-bottom:8px; font-size:13px;";
         customFieldsLabel.textContent = "Custom Fields";
         customFieldsSection.appendChild(customFieldsLabel);
 
         let customFieldsList = document.createElement("div");
         customFieldsList.id = "customFieldsList";
         customFieldsSection.appendChild(customFieldsList);
 
         let reservedNames = ["bin", "chrom", "chromStart", "chromEnd", "name", "score",
             "strand", "thickStart", "thickEnd", "itemRgb", "blockCount", "blockSizes",
             "chromStarts", "description", "db", "ref", "alt", "project", "mouseover",
             "itemType", "cnvType", "id"];
 
         let validateFieldName = function(nameInput) {
             let name = nameInput.value.trim();
             if (!name) return; // empty is ok, will be skipped on submit
             let valid = /^[a-zA-Z_][a-zA-Z0-9_]*$/.test(name);
             if (!valid) {
                 alert("Invalid field name: '" + name + "'. Must start with a letter or underscore, " +
                       "and contain only letters, numbers, and underscores.");
                 nameInput.focus();
                 return false;
             }
             if (name.startsWith("_hidden_")) {
                 alert("Field names cannot start with '_hidden_'.");
                 nameInput.focus();
                 return false;
             }
             if (reservedNames.indexOf(name) >= 0) {
                 alert("'" + name + "' is a reserved field name.");
                 nameInput.focus();
                 return false;
             }
             // Check for duplicates among all custom field name inputs
             let allNames = document.querySelectorAll("#customFieldsList .customFieldName");
             let count = 0;
             allNames.forEach(function(inp) {
                 if (inp.value.trim() === name) count++;
             });
             if (count > 1) {
                 alert("Duplicate field name: '" + name + "'.");
                 nameInput.focus();
                 return false;
             }
             return true;
         };
 
         let addCustomFieldRow = function(existingName) {
             // existingName: if provided, this is a pre-populated existing field (read-only name)
             let row = document.createElement("div");
             row.className = "customFieldRow";
             row.style.cssText = "display:flex; align-items:center; gap:6px; margin-bottom:6px;";
             if (existingName)
                 row.dataset.existing = "true";
 
             let nameInput = document.createElement("input");
             nameInput.type = "text";
             nameInput.className = "customFieldName";
             nameInput.placeholder = "Field name";
             nameInput.style.cssText = "width:120px;";
 
             if (existingName) {
                 nameInput.value = existingName;
                 nameInput.readOnly = true;
                 nameInput.style.cssText = "width:120px; background:#e8e8e8; color:#555;";
             } else {
                 // Add blur validation for new field names
                 nameInput.addEventListener("blur", function() {
                     if (nameInput.value.trim())
                         validateFieldName(nameInput);
                 });
             }
 
             let valueInput = document.createElement("input");
             valueInput.type = "text";
             valueInput.className = "customFieldValue";
             valueInput.placeholder = "Value (optional)";
             valueInput.style.cssText = "width:180px;";
 
             row.appendChild(nameInput);
             row.appendChild(valueInput);
 
             if (existingName) {
                 // Hide button for existing fields (soft-delete via _hidden_ prefix)
                 let hideBtn = document.createElement("button");
                 hideBtn.type = "button";
                 hideBtn.textContent = "Hide";
                 hideBtn.title = "Hide this custom field (data preserved, can be restored later)";
                 hideBtn.style.cssText = "border:1px solid #ccc; background:#f5f5f5; color:#888; font-size:11px; cursor:pointer; padding:1px 6px; border-radius:3px;";
                 hideBtn.addEventListener("click", function() {
                     if (!confirm("Hide the '" + existingName + "' field? Data will be preserved but the field will no longer appear."))
                         return;
                     // Send ALTER TABLE CHANGE COLUMN request to rename with _hidden_ prefix
                     let hideUrl = "../cgi-bin/hgTracks?hgt_doJsCommand=" +
                         encodeURIComponent("myVariants myVariants " + JSON.stringify({hideField: existingName})) +
                         "&hgt.trackImgOnly=1&hgt.ideogramToo=1&hgsid=" + getHgsid() + "&db=" + getDb();
                     fetch(hideUrl, { method: "POST", credentials: "same-origin" })
                     .then(function() {
                         row.remove();
                     })
                     .catch(function(err) {
                         alert("Error hiding field: " + err.message);
                     });
                 });
                 row.appendChild(hideBtn);
             } else {
                 // Remove button for newly added rows
                 let removeBtn = document.createElement("button");
                 removeBtn.type = "button";
                 removeBtn.textContent = "\u00D7";
                 removeBtn.title = "Remove this field";
                 removeBtn.style.cssText = "border:none; background:none; color:#c00; font-size:18px; cursor:pointer; padding:0 4px; line-height:1;";
                 removeBtn.addEventListener("click", function() {
                     row.remove();
                 });
                 row.appendChild(removeBtn);
             }
 
             customFieldsList.appendChild(row);
             if (!existingName)
                 nameInput.focus();
         };
 
         // Pre-populate existing custom fields from server
         let existingCustomFields = (typeof hgTracks !== 'undefined' && hgTracks.myVariantsCustomFields)
                                     ? hgTracks.myVariantsCustomFields : [];
         existingCustomFields.forEach(function(fieldName) {
             addCustomFieldRow(fieldName);
         });
 
         let addBtn = document.createElement("button");
         addBtn.type = "button";
         addBtn.id = "addCustomFieldBtn";
         addBtn.textContent = "+ Add Custom Field";
         addBtn.style.cssText = "margin-top:4px; padding:3px 10px; font-size:12px; cursor:pointer;";
         addBtn.addEventListener("click", function(event) {
             event.preventDefault();
             addCustomFieldRow();
         });
         customFieldsSection.appendChild(addBtn);
 
         // Hidden fields restore UI
         let hiddenFields = (typeof hgTracks !== 'undefined' && hgTracks.myVariantsHiddenFields)
                             ? hgTracks.myVariantsHiddenFields : [];
         if (hiddenFields.length > 0) {
             let hiddenSection = document.createElement("div");
             hiddenSection.id = "hiddenFieldsSection";
             hiddenSection.style.cssText = "margin-top:8px; padding:4px 8px; background:#faf8f0; border:1px solid #e0dcc8; border-radius:3px; font-size:12px;";
 
             let hiddenLabel = document.createElement("span");
             hiddenLabel.style.cssText = "color:#888; margin-right:8px;";
             hiddenLabel.textContent = "Hidden fields:";
             hiddenSection.appendChild(hiddenLabel);
 
             hiddenFields.forEach(function(fieldName) {
                 let chip = document.createElement("span");
                 chip.style.cssText = "display:inline-block; margin:2px 4px; padding:2px 6px; background:#e8e8e8; border-radius:3px;";
                 chip.textContent = fieldName + " ";
                 let restoreBtn = document.createElement("a");
                 restoreBtn.href = "#";
                 restoreBtn.textContent = "restore";
                 restoreBtn.style.cssText = "color:#36c; font-size:11px;";
                 restoreBtn.addEventListener("click", function(event) {
                     event.preventDefault();
                     // Add it back as a pre-populated existing field row
                     addCustomFieldRow(fieldName);
                     // Remove the chip
                     chip.remove();
                     // Hide the section if no more hidden fields
                     if (hiddenSection.querySelectorAll("span[style]").length <= 1)
                         hiddenSection.style.display = "none";
                 });
                 chip.appendChild(restoreBtn);
                 hiddenSection.appendChild(chip);
             });
 
             customFieldsSection.appendChild(hiddenSection);
         }
 
         manualInpDiv.appendChild(customFieldsSection);
 
         // Keep the position summary in sync when position fields change
         ["chrom", "start", "end"].forEach(function(id) {
             let el = advancedDiv.querySelector("#" + id);
             if (el) el.addEventListener("input", updatePositionSummary);
         });
         let chromEl = advancedDiv.querySelector("#chrom");
         let startEl = advancedDiv.querySelector("#start");
         let endEl = advancedDiv.querySelector("#end");
         if (chromEl && startEl && endEl) {
             let startVal = parseInt(startEl.value);
             let endVal = parseInt(endEl.value);
             let startFmt = isNaN(startVal) ? startEl.value : startVal.toLocaleString();
             let endFmt = isNaN(endVal) ? endEl.value : endVal.toLocaleString();
             posSummaryText.textContent = chromEl.value + ":" + startFmt + "-" + endFmt;
         }
 
         form.appendChild(manualInpDiv);
 
         // Add hidden field to encode form values as JSON
         const hiddenInput = document.createElement('input');
         hiddenInput.type = 'hidden';
         hiddenInput.name = 'hgt_doJsCommand';
         form.appendChild(hiddenInput);
 
         const trackNameInput = document.createElement('input');
         trackNameInput.type = 'hidden';
         trackNameInput.id = 'trackName';
         trackNameInput.name = 'trackName';
         trackNameInput.value = "myVariants";
         form.appendChild(trackNameInput);
 
         dialogEle.appendChild(form);
 
         // Initialize Spectrum color picker after form is added to DOM
         if (colorInput) {
             $(colorInput).spectrum({
                 hideAfterPaletteSelect: true,
                 color: colorInput.value,
                 showPalette: true,
                 showInput: true,
                 showSelectionPalette: true,
                 showInitial: true,
                 preferredFormat: "hex",
                 localStorageKey: "myVariantsColors"
             });
         }
 
         // Mount the block editor; reads Start/End from the chrom range fields.
         // Pass the container element directly: at this point the form is in
         // the dialog div but the dialog hasn't been appended to body yet, so
         // getElementById would still miss "blocksContainer".
         // Stash the widget handle on the form so createItem can call validate().
         if (typeof myVariantsBlocks !== "undefined") {
             form.blocksWidget = myVariantsBlocks.mount(blocksContainer, {
                 getStart: function () {
                     return parseInt(document.getElementById("start").value, 10);
                 },
                 getEnd: function () {
                     return parseInt(document.getElementById("end").value, 10);
                 },
                 hiddenCountInput: hCount,
                 hiddenSizesInput: hSizes,
                 hiddenStartsInput: hStarts
             });
         }
 
         // Stash applyMode on the form so init() can restore last-used mode.
         form.applyMode = applyMode;
         return form;
     },
 
     init: function () {
         // show a jquery-ui dialog when a user clicks on the 'Add Annotation' button
         let dialog = document.getElementById('myVariantsDialog');
         if (!dialog) {
             dialog = document.createElement("div");
             dialog.id = "myVariantsDialog";
             dialog.style = "display: none";
 
             dialogButtons = {};
             // Call the function to build the form, but only if logged in already
             if (!userIsLoggedIn) {
                 let msg = document.createElement("div");
                 msg.id = "logInMessage";
                 let href = (typeof myVariantsLoginUrl !== "undefined" && myVariantsLoginUrl)
                            ? myVariantsLoginUrl : "./hgSession";
                 let link = document.createElement("a");
                 link.href = href;
                 link.textContent = "log in";
                 msg.appendChild(document.createTextNode("Please "));
                 msg.appendChild(link);
                 msg.appendChild(document.createTextNode(" to use this feature."));
                 dialog.appendChild(msg);
             } else {
                 let form = this.createBedForm(dialog);
 
                 document.body.append(dialog);
                 dialogButtons.Submit = function() {
                     // extract the form elements and check
                     myVariants.createItem(form);
                 };
             }
             dialogButtons.Cancel = function(){
                 $(this).dialog("close");
             };
             $(dialog).dialog({
                 title: "My Annotations",
                 resizable: false,
                 height: "auto",
                 width: 580,
                 modal: true,
                 closeOnEscape: true,
                 autoOpen: false,
                 buttons: dialogButtons,
                 open: function() {
                     // Restore the last input mode the user picked (or default to HGVS).
                     let form = document.getElementById("myVariants-form");
                     if (form && form.applyMode) {
                         let saved;
                         try { saved = localStorage.getItem("myVariantsLastMode"); } catch (e) { saved = null; }
                         const validModes = ["hgvs", "transcript", "snv", "cnv"];
                         form.applyMode(validModes.indexOf(saved) >= 0 ? saved : "hgvs");
                     }
                 },
                 close: function() {
                     // Reset block rows so the next open starts clean.
                     let form = document.getElementById("myVariants-form");
                     if (form && form.blocksWidget) {
                         form.blocksWidget.clear();
                     }
                 }
             });
         } else {
             // Reopening after an async image update; refresh the position fields.
             // The dialog's open callback re-applies the last-used mode.
             let form = document.getElementById("myVariants-form");
             let start = form.elements.start;
             let end = form.elements.end;
             let thickStart = form.elements.thickStart;
             let thickEnd = form.elements.thickEnd;
             if (start) start.value = hgTracks.winStart;
             if (end) end.value = hgTracks.winEnd;
             if (thickStart) thickStart.value = hgTracks.winStart;
             if (thickEnd) thickEnd.value = hgTracks.winEnd;
             let summaryText = document.getElementById("positionSummaryText");
             if (summaryText) {
                 let chromEl = document.getElementById("chrom");
                 let startFmt = parseInt(hgTracks.winStart).toLocaleString();
                 let endFmt = parseInt(hgTracks.winEnd).toLocaleString();
                 summaryText.textContent =
                     (chromEl ? chromEl.value : hgTracks.chromName) + ":" + startFmt + "-" + endFmt;
             }
         }
 
         // if we clicked outside of the pop up, close the popup:
         document.addEventListener('click', (e) => {
             let dialogEl = document.getElementById("myVariantsDialog");
             if (!dialogEl) return;
             // If the click handler that ran first removed its own target from
             // the document (eg a row remove button, or a Grammarly/extension
             // DOM swap on the description field), e.target is now detached
             // and `.contains(e.target)` would falsely report "outside". Skip.
             if (!document.contains(e.target)) return;
             let dialogContainer = dialogEl.parentElement;
             // Check if click target is inside the dialog (handles native dropdowns that render outside bounds)
             if (dialogContainer && !dialogContainer.contains(e.target)) {
                 $("#myVariantsDialog").dialog("close");
             }
         });
     },
 
     createItem: function(form) {
         // sends a post to hgTracks that adds a new item to the users custom track
         // and updates the image to include this track if it wasn't already there
         // Block validation only matters for the transcript path; SNV/CNV don't carry blocks.
         let blockResult = {ok: true, noBlocks: true};
         const isTranscript = !!(document.getElementById("typeTranscript") &&
                                 document.getElementById("typeTranscript").checked);
         if (isTranscript && form.blocksWidget && form.blocksWidget.getRowCount() > 0) {
             blockResult = form.blocksWidget.validate();
             if (!blockResult.ok) {
                 alert("Block error: " + blockResult.msg);
                 return;
             }
         }
         const data = {};
         if (form.elements.hgvsInput.value) {
             data.hgvsInput = form.elements.hgvsInput.value;
         } else {
             const itemType = isTranscript ? "transcript"
                 : (document.getElementById("typeCnv").checked ? "cnv" : "snv");
             Array.from(form.elements).forEach( (ele) => {
                 if (ele.name === "myVariantsHgvsInput" || ele.name === "hgt_doJsCommand" ||
                         ele.name === "myVariantsType" ||
                         (ele.tagName !== "INPUT" && ele.tagName !== "TEXTAREA")) {return;}
                 const key = ele.id;
                 let value = ele.value;
                 // Handle Spectrum color picker - get the value from spectrum if available
                 if (ele.id === "color" && $(ele).spectrum) {
                     let spectrumColor = $(ele).spectrum("get");
                     if (spectrumColor) {
                         value = spectrumColor.toHexString();
                     }
                 }
                 data[key] = value;
             });
             data.itemType = itemType;
             data.cnvType = (itemType === "cnv") ? document.getElementById("cnvType").value : "";
             if (itemType === "cnv") data.ref = "";
             else if (itemType === "transcript") { data.ref = ""; data.alt = ""; }
             // Collect custom fields from the dynamic rows
             let customRows = document.querySelectorAll("#customFieldsList .customFieldRow");
             if (customRows.length > 0) {
                 let customFields = [];
                 customRows.forEach(function(row) {
                     let name = row.querySelector(".customFieldName").value.trim();
                     if (name) {
                         let value = row.querySelector(".customFieldValue").value;
                         customFields.push({name: name, value: value});
                     }
                 });
                 if (customFields.length > 0) {
                     data.extraFields = customFields;
                 }
             }
             // Convert hidden block fields from CSV strings to arrays of ints.
             // Drop blocks entirely for SNV/CNV; server synthesizes a single full-span
             // block. For transcript with noBlocks (rows added but every size empty),
             // also drop and let the server synthesize.
             let bc = parseInt(data.blockCount, 10);
             if (!isTranscript || !bc || blockResult.noBlocks) {
                 delete data.blockCount;
                 delete data.blockSizes;
                 delete data.chromStarts;
             } else {
                 data.blockCount = bc;
                 data.blockSizes = data.blockSizes.split(",").map(Number);
                 data.chromStarts = data.chromStarts.split(",").map(Number);
             }
         }
 
         // Show loading indicator
         const loadingId = showLoadingImage("imgTbl");
         document.body.style.cursor = "wait";
 
         // Build request - use fetch() instead of form.submit()
         const trackName = form.elements.namedItem("trackName").value;
         const req = encodeURIComponent(`myVariants ${trackName} ${JSON.stringify(data)}`);
         const url = cart.addUpdatesToUrl(`../cgi-bin/hgTracks?hgt_doJsCommand=${req}&trackName=${trackName}&hgt.trackImgOnly=1&hgt.ideogramToo=1&hgsid=${getHgsid()}&db=${getDb()}`);
 
         fetch(url, {
             method: "POST",
             credentials: "same-origin"
         })
         .then(response => {
             if (!response.ok) {
                 throw new Error("Network response was not ok: " + response.status);
             }
             return response.text();
         })
         .then(html => {
             hideLoadingImage(loadingId);
             document.body.style.cursor = "";
             myVariants.handleCreateSuccess(html, data);
         })
         .catch(error => {
             hideLoadingImage(loadingId);
             document.body.style.cursor = "";
             warn("Error creating annotation: " + error.message);
             console.error("Fetch error:", error);
         });
     },
 
     handleCreateSuccess: function(response, data) {
         // Close the create dialog
         $("#myVariantsDialog").dialog("close");
 
         // Update the image using the existing pattern
         imageV2.updateImgAndMap.call({cmd: 'wholeImage'}, response, 'success');
 
         // Extract new item coordinates from server response
         const newItemPos = scrapeVariable(response, "newItemPos");
         let variantChrom, variantStart, variantEnd;
 
         if (newItemPos) {
             // Server returned the coordinates
             variantChrom = newItemPos.chrom;
             variantStart = newItemPos.start;
             variantEnd = newItemPos.end;
         } else {
             // Fallback: try to get from form data (manual entry)
             variantChrom = data.chrom || hgTracks.chromName;
             variantStart = parseInt(data.start, 10) || hgTracks.winStart;
             variantEnd = parseInt(data.end, 10) || hgTracks.winEnd;
         }
 
         // Check if variant is in current window
         const inCurrentWindow = (variantChrom === hgTracks.chromName &&
                                 variantStart < hgTracks.winEnd &&
                                 variantEnd > hgTracks.winStart);
 
         if (inCurrentWindow) {
             // Already visible - just show brief success message
             return;
         }
 
         // Check stored preference
         const navPref = localStorage.getItem("myVariants_navPref");
         if (navPref === "jump") {
             // Auto-navigate to variant
             myVariants.navigateToVariant(variantChrom, variantStart, variantEnd);
             return;
         } else if (navPref === "stay") {
             // Stay here, just show message
             warn("Annotation created at " + variantChrom + ":" +
                  (variantStart+1).toLocaleString() + "-" + variantEnd.toLocaleString());
             return;
         }
 
         // No preference saved - show dialog
         myVariants.showNavigationDialog(variantChrom, variantStart, variantEnd);
     },
 
     showNavigationDialog: function(chrom, start, end) {
         const posStr = chrom + ":" + (start+1).toLocaleString() + "-" + end.toLocaleString();
 
         // Create dialog content
         const content = document.createElement("div");
 
         // Build message with position
         const msg = document.createElement("p");
         msg.style.marginBottom = "0.5em";
         msg.innerHTML = "Annotation created at <strong>" + posStr + "</strong>";
         content.appendChild(msg);
 
         // Show dialog with buttons
         $(content).dialog({
             title: "Annotation Created",
             modal: true,
             width: 600,
             buttons: {
                 "Go to Annotation": function() {
                     if (document.getElementById("myVariantsRememberNav").checked) {
                         localStorage.setItem("myVariants_navPref", "jump");
                     }
                     $(this).dialog("close");
                     myVariants.navigateToVariant(chrom, start, end);
                 },
                 "Stay Here": function() {
                     if (document.getElementById("myVariantsRememberNav").checked) {
                         localStorage.setItem("myVariants_navPref", "stay");
                     }
                     $(this).dialog("close");
                 }
             },
             open: function() {
                 // Add checkbox to button pane, inline with buttons
                 const dialog = $(this);
                 const buttonPane = dialog.closest(".ui-dialog").find(".ui-dialog-buttonpane");
                 const checkboxSpan = document.createElement("span");
                 checkboxSpan.style.cssText = "display: inline-block; vertical-align: middle; margin-right: 1em;";
                 checkboxSpan.innerHTML = "<label><input type='checkbox' id='myVariantsRememberNav'> Remember this choice </label>";
                 checkboxSpan.appendChild(createInfoIcon(
                     "Save your preference. Future annotations outside the current view will automatically " +
                     "use this choice. Reset via Configure page or cartReset."
                 ));
                 // Insert before the button set
                 buttonPane.find(".ui-dialog-buttonset").before(checkboxSpan);
                 // Force dialog to recalculate its size
                 dialog.dialog("option", "height", "auto");
             }
         });
     },
 
     navigateToVariant: function(chrom, start, end) {
         // Add small padding around the variant (max 100bp)
         const padding = 100;
         const paddedStart = Math.max(0, start - padding);
         const paddedEnd = end + padding;
 
         // Navigate using existing mechanism
         const pos = chrom + ":" + paddedStart + "-" + paddedEnd;
         imageV2.navigateInPlace("position=" + pos, null, true);
     },
 
     showDialog: function() {
         let dialog = document.getElementById('myVariantsDialog');
         // Clear dynamically-added custom field rows; for existing fields, just clear the value
         let customFieldsList = document.getElementById("customFieldsList");
         if (customFieldsList) {
             let rows = customFieldsList.querySelectorAll(".customFieldRow");
             rows.forEach(function(row) {
                 if (row.dataset.existing === "true") {
                     // Existing field - just clear the value input
                     let valInput = row.querySelector(".customFieldValue");
                     if (valInput) valInput.value = "";
                 } else {
                     // Dynamically added row - remove it
                     row.remove();
                 }
             });
         }
         $(dialog).dialog("open");
     },
 };
 
   /////////////////
  //// posting ////
 /////////////////
 var posting = {
 
     blockUseMap: false,
 
     blockMapClicks: function () 
     // Blocks clicking on map items when in effect. Drag opperations frequently call this.
     { 
         posting.blockUseMap=true;  
     },
     
     allowMapClicks:function ()  
     // reallows map clicks.  Called after operations that compete with clicks (e.g. dragging) 
     { 
         $('body').css('cursor', ''); // Explicitly remove wait cursor.
         posting.blockUseMap=false; 
     },
 
     mapClicksAllowed: function () 
     // Verify that click-competing operation (e.g. dragging) isn't currently occurring.
     { 
         return (posting.blockUseMap === false); 
     },
 
     blockTheMapOnMouseMove: function (ev)
     {
         if (!posting.blockUseMap && mouse.hasMoved(ev)) {
             posting.blockUseMap=true;
         }
     },
 
     mapClk: function ()
     {
         var done = false;
         // if we clicked on a merged item then show all the items, similar to clicking a
         // dense track to turn it to pack
         if (!(this && this.href)) {
             writeToApacheLog(`no href for mapClk, this = `);
         }
         let parsedUrl = parseUrl(this.href);
         let cgi = parsedUrl.cgi;
 
         // for some reason, '-' characters are encoded here? unencode them so lookups into
         // hgTracks.trackDb will work
         let id = "";
         if (typeof parsedUrl.queryArgs.g !== "undefined") {
             id = parsedUrl.queryArgs.g.replace("%2D", "-");
         }
         if (parsedUrl.queryArgs.i === "mergedItem") {
             updateObj={};
             updateObj[id+".doMergeItems"] = 0;
             hgTracks.trackDb[id][id+".doMergeItems"] = 0;
             cart.setVarsObj(updateObj,null,false);
             imageV2.requestImgUpdate(id, id + ".doMergeItems=0");
             return false;
         }
 
         if (done)
             return false;
         else {
             // first check if we are allowed to click, we could be in the middle
             // of a drag select
             if (posting.blockUseMap === true) {
                 return false;
             } else if (cgi === "hgGene") {
                 window.hgcOrHgGeneArgs = parsedUrl.queryArgs;
                 id = parsedUrl.queryArgs.hgg_type;
                 popUpHgcOrHgGene.hgc(id, this.href);
                 return false;
             } else if (cgi === "hgTrackUi") {
                 rec = hgTracks.trackDb[id];
                 if (rec && tdbIsLeaf(rec)) {
                     popUp.hgTrackUi(id, false);
                 } else {
                     location.assign(href);
                 }
             } else if (cgi === "hgc") {
                 if (id.startsWith("multiz")) {
                     // multiz tracks have a form that lets you change highlighted bases
                     // that does not play well in a pop up
                     // toga tracks require bootstrap which does not work with something
                     location.assign(href);
                     return false;
                 }
                 popUpHgcOrHgGene.hgc(id, this.href);
                 return false;
             } else {
                 // must be changing the density of a track, save the settings and post the form:
                 return posting.saveSettings(this);
             }
         }
     },
 
     saveSettings: function (obj)
     {
         if (posting.blockUseMap === true) {
             return false;
         }
         if (!obj || !obj.href) // called directly with obj
             obj = this;                               // and from callback without obj
 
         if ($(obj).hasClass('noLink'))  // TITLE_BUT_NO_LINK
             return false;
 
         if (obj.href.match('#') || obj.target.length > 0) {
             //alert("Matched # ["+obj.href+"] or has target:"+obj.target);
             return true;
         }
         var thisForm = normed($(obj).parents('form').first());
         if (!thisForm)
             thisForm = normed($("FORM").first());
         if (thisForm) {
             //alert("posting form:"+$(thisForm).attr('name'));
             return postTheForm($(thisForm).attr('name'),cart.addUpdatesToUrl(obj.href));
         }
         return true;
     }
 };
 
 /////////////////////////
 //// cart updating /////
 ///////////////////////
 var cart = {
     // Controls queuing and ultimately updating cart variables vis ajax or submit. Queued vars
     // are held in an object with unique keys preventing duplicate updates and ensuring last update 
     // takes precedence.  WARNING: be careful creating an object with variables on the fly:
     // cart.setVarsObj({track: vis}) is invalid but cart.setVarsObj({'knownGene': vis}) is ok! 
 
     updateQueue: {},
     
     updatesWaiting: function ()
     {   // returns TRUE if updates are waiting.
         return objNotEmpty(cart.updateQueue);
     },
     
     addUpdatesToUrl: function (url)
     {   // adds any outstanding cart updates to the url, then clears the queue
         if (cart.updatesWaiting()) {
             //console.log('cart.addUpdatesToUrl: '+objKeyCount(cart.updateQueue)+' vars');
             var updates = cart.varsToUrlData(); // clears the queue
             if (!url || url.length === 0)
                 return updates;
 
             if (updates.length > 0) {
                 var dataOnly = (url.indexOf("cgi-bin") === -1); // all urls should be to our cgis
                 if (!dataOnly && url.lastIndexOf("?") === -1)
                     url += "?" + updates;
                 else
                     url += '&' + updates;
             }
         }
         return url;
     },
     
     varsToUrlData: function (varsObj)
     {   // creates a url data (var1=val1&var2=val2...) string from vars object and queue
         // The queue will be emptied by this call.
         cart.queueVarsObj(varsObj); // lay ontop of queue, to give new values precedence
         
         // Now convert to url data and clear queue
         var urlData = '';
         if (cart.updatesWaiting()) {
             //console.log('cart.varsToUrlData: '+objKeyCount(cart.updateQueue)+' vars');
             urlData = varHashToQueryString(cart.updateQueue);
             cart.updateQueue = {};
         }
         return urlData;
     },
     
     setVarsObj: function (varsObj, errFunc, async)
     {   // Set all vars in a var hash, appending any queued updates
         // The default behavior is async = true
         //console.log('cart.setVarsObj: were:'+objKeyCount(cart.updateQueue) + 
         //            ' new:'+objKeyCount(varsObj);
         cart.queueVarsObj(varsObj); // lay ontop of queue, to give new values precedence
         
         // Now ajax update all in queue and clear queue
         if (cart.updatesWaiting()) {
             setVarsFromHash(cart.updateQueue, errFunc, async);
             cart.updateQueue = {};
         }
     },
     
     setVars: function (names, values, errFunc, async)
     {   // ajax updates the cart, and includes any queued updates.
         cart.updateSessionPanel();      // handles hide from left minibutton
         cart.setVarsObj(arysToObj(names, values), errFunc, async);
     },
 
     queueVarsObj: function (varsObj)
     {   // Add object worth of cart updates to the 'to be updated' queue, so they can be sent to
         // the server later. Note: hash allows overwriting previous updates to the same variable.
         if (typeof varsObj !== 'undefined' && objNotEmpty(varsObj)) {
             //console.log('cart.queueVarsObj: were:'+objKeyCount(cart.updateQueue) + 
             //            ' new:'+objKeyCount(varsObj));
             for (var name in varsObj) {
                 cart.updateQueue[name] = varsObj[name];
             }
         }
     },
 
     addVarsToQueue: function (names,values)
     {   // creates a string of updates to save for ajax batch or a submit
         cart.queueVarsObj(arysToObj(names,values));
     },
 
     updateSessionPanel: function()
     /* This function tries to find out if the current cart changed enough. It is not used anymore, as the 
      * current active rec. track set name is not shown anymore */
     {
     // this is never set anymore
     if (typeof recTrackSetsDetectChanges === 'undefined' || recTrackSetsDetectChanges === null)
         return;
 
     // change color of text
     $('span.gbSessionChangeIndicator').addClass('gbSessionChanged');
 
     // change mouseover on the panel.  A bit fragile here inserting text in the mouseover specified in
     // hgTracks.js, so depends on match with text there, and should present same message as C code
     // (Perhaps this could be added as a script tag, so not duplicated)
     var txt = $('span.gbSessionLabelPanel').attr('title');
     if (txt && !txt.match(/with changes/)) {
         $('span.gbSessionLabelPanel').attr('title', txt.replace(
                                    "track set", 
                                    "track set, with changes (added or removed tracks) you have requested"));
         }
     }
 };
 
   ///////////////////////////////////////////////
  //// visibility (mixed with group toggle) /////
 ///////////////////////////////////////////////
 var vis = {
 
     // map cgi enum visibility codes to strings
     enumOrder: new Array("hide", "dense", "full", "pack", "squish"),  
 
     update: function (track, visibility)
     {   // Updates visibility state in hgTracks.trackDb and any visible elements on the page.
         // returns true if we modify at least one select in the group list
         var rec = hgTracks.trackDb[track];
         var selectUpdated = false;
         $("select[name=" + escapeJQuerySelectorChars(track) + "]").each(function(t) {
             $(this).attr('class', visibility === 'hide' ? 'hiddenText' : 'normalText');
             $(this).val(visibility);
             selectUpdated = true;
         });
         if (rec) {
             rec.localVisibility = visibility;
         }
         return selectUpdated;
     },
 
     get: function (track)
     {   // return current visibility for given track
         var rec = hgTracks.trackDb[track];
         if (rec) {
             if (rec.localVisibility) {
                 return rec.localVisibility;
             } else {
                 return vis.enumOrder[rec.visibility];
             }
         } else {
             return null;
         }
     },
 
     makeTrackVisible: function (track)
     {   // Sets the vis box to visible, and ques a cart update, but does not update the image
         // Trusts that the cart update will be submitted later.
         if (track && vis.get(track) !== "full") {
             vis.update(track, 'pack');
             cart.addVarsToQueue([track], ['pack']);
         }
     },
 
     toggleForGroup: function (button, prefix)
     {   // toggle visibility of a track group; prefix is the prefix of all the id's of tr's in the
         // relevant group. This code also modifies the corresponding hidden fields and the gif
         // of the +/- img tag.
         imageV2.markAsDirtyPage();
         if (arguments.length > 2)
             return setTableRowVisibility(button, prefix, "hgtgroup", "group",false,arguments[2]);
         else
             return setTableRowVisibility(button, prefix, "hgtgroup", "group", true);
     },
 
     expandAllGroups: function (newState)
     {   // Set visibility of all track groups to newState (true means expanded).
         // This code also modifies the corresponding hidden fields and the gif's of the +/- img tag.
         imageV2.markAsDirtyPage();
         $(".toggleButton[id$='_button']").each( function (i) {  
             // works for old img type AND new BUTTONS_BY_CSS      // - 7: clip '_button' suffix
             vis.toggleForGroup(this,this.id.substring(0,this.id.length - 7),newState);
         });
         return false;
     },
     
     initForAjax: function()
     {   // To better support the back-button, it is good to eliminate extraneous form puts
         // Towards that end, we support visBoxes making ajax calls to update cart.
         var sels = $('select.normalText,select.hiddenText');
         $(sels).on("change", function() {
             var track = $(this).attr('name');
             let newVis = $(this).val();
             if (newVis === 'hide') {
                 var rec = hgTracks.trackDb[track];
                 if (rec)
                     rec.visibility = 0;
                 // else Would be nice to hide subtracks as well but that may be overkill
                 $(document.getElementById('tr_' + track)).remove();
                 cart.updateSessionPanel();
                 imageV2.drawHighlights();
                 $(this).attr('class', 'hiddenText');
             } else
                 $(this).attr('class', 'normalText');
             document.querySelectorAll('[name="'+track+'"]').forEach( (sel) => {
                 sel.value = newVis;
             });
             
             cart.setVars([track], [$(this).val()]);
             imageV2.markAsDirtyPage();
             return false;
         });
         // Now we can rid the submt of the burden of all those vis boxes
         var form = $('form#TrackForm');
         $(form).on("submit", function () {
             $('select.normalText,select.hiddenText').prop('disabled',true);
         });
         $(form).attr('method','get');
     },
 
     restoreFromBackButton: function()
     // Re-enabling vis dropdowns is necessary because initForAjax() disables them on submit.
     {
         $('select.normalText,select.hiddenText').prop('disabled',false);
     }
 };
 
   ////////////////////////////////////////////////////////////
  // dragSelect is also known as dragZoom or shift-dragZoom //
 ////////////////////////////////////////////////////////////
 var dragSelect = {
 
     hlColor :       '#aac6ff', // current highlight color
     hlColorDefault: '#aac6ff', // default highlight color, if nothing specified
     areaSelector:    null, // formerly "imgAreaSelect". jQuery element used for imgAreaSelect
     originalCursor:  null,
     startTime:       null,
     escPressed :     false,  // flag is set when user presses Escape
 
     selectStart: function (img, selection)
     {
         initVars();
         dragSelect.escPressed = false;
         if (rightClick.menu) {
             rightClick.menu.hide();
         }
         var now = new Date();
         dragSelect.startTime = now.getTime();
         posting.blockMapClicks();
     },
 
     selectChange: function (img, selection)
     {
         if (selection.x1 !== selection.x2) {
             if (genomePos.check(img, selection)) {
                 genomePos.update(img, selection, false);
                 jQuery('body').css('cursor', dragSelect.originalCursor);
             } else {
                 jQuery('body').css('cursor', 'not-allowed');
             }
         }
         return true;
     },
 
     findHighlightIdxForPos : function(findPos) {
         // return the index of the highlight string e.g. hg19.chrom1:123-345#AABBDCC that includes a chrom range findPos
         // mostly copied from drawHighlights()
         var currDb = getDb();
         if (hgTracks.highlight) {
             var hlArray = hgTracks.highlight.split("|"); // support multiple highlight items
             for (var i = 0; i < hlArray.length; i++) {
                 hlString = hlArray[i];
                 pos = parsePositionWithDb(hlString);
                 imageV2.undisguiseHighlight(pos);
 
                 if (!pos) 
                     continue; // ignore invalid position strings
                 pos.start--;
 
                 if (pos.chrom === hgTracks.chromName && pos.db === currDb
                 &&  pos.start <= findPos.chromStart && pos.end >= findPos.chromEnd) {
                     return i;
                 }
             }
         }
         return null;
     },
 
     saveHlColor : function (hlColor) 
     // save the current hlColor to the object and also the cart variable hlColor and return it.
     // hlColor is a 6-character hex string prefixed by #
     {
             dragSelect.hlColor = hlColor;
             cart.setVars(["prevHlColor"], [dragSelect.hlColor], null, false);
             hgTracks.prevHlColor = hlColor; // cart.setVars does not update the hgTracks-variables. The cart-variable system is a problem.
             return hlColor;
     },
 
     loadHlColor : function () 
     // load hlColor from prevHlColor in the cart, or use default color, set and return it
     // color is a 6-char hex string prefixed by #
     {
         if (hgTracks.prevHlColor)
             dragSelect.hlColor = hgTracks.prevHlColor;
         else
             dragSelect.hlColor = dragSelect.hlColorDefault;
         return dragSelect.hlColor;
     },
 
     highlightThisRegion: function(newPosition, doAdd, hlColor)
     // set highlighting newPosition in server-side cart and apply the highlighting in local UI.
     // hlColor can be undefined, in which case it defaults to the last used color or the default light blue
     // if hlColor is set, it is also saved into the cart.
     // if doAdd is true, the highlight is added to the current list. If it is false, all old highlights are deleted.
     {
         newPosition.replace("virt:", "multi:");
         var hlColorName = null;
         if (hlColor==="" || hlColor===null || hlColor===undefined)
             hlColorName = dragSelect.loadHlColor();
         else
             hlColorName = dragSelect.saveHlColor( hlColor );
 
         var pos = parsePosition(newPosition);
         var start = pos.start;
         var end = pos.end;
         var newHighlight = makeHighlightString(getDb(), pos.chrom, start, end, hlColorName);
         newHighlight = imageV2.disguiseHighlight(newHighlight);
         var oldHighlight = hgTracks.highlight;
         if (oldHighlight===undefined || doAdd===undefined || doAdd===false || oldHighlight==="") {
             // just set/overwrite the old highlight position, this used to be the default
             hgTracks.highlight = newHighlight;
         }
         else {
             // add to the end of a |-separated list
             hgTracks.highlight = oldHighlight+"|"+newHighlight;
         }
         // we include enableHighlightingDialog because it may have been changed by the dialog
         var cartSettings = {             'highlight': hgTracks.highlight, 
                           'enableHighlightingDialog': hgTracks.enableHighlightingDialog ? 1 : 0 };
 
         if (hgTracks.windows && !hgTracks.virtualSingleChrom) {
             var nonVirtChrom = "";
             var nonVirtStart = -1; 
             var nonVirtEnd   = -1; 
             for (i=0,len=hgTracks.windows.length; i < len; ++i) {
                 var w = hgTracks.windows[i];
                 // overlap with new position?
                 if (w.virtEnd > start && end > w.virtStart) {
                     var s = Math.max(start, w.virtStart);
                     var e = Math.min(end, w.virtEnd);
                     var cs = s - w.virtStart + w.winStart;
                     var ce = e - w.virtStart + w.winStart;
                     if (nonVirtChrom === "") {
                         nonVirtChrom = w.chromName;
                         nonVirtStart = cs; 
                         nonVirtEnd   = ce;
                     } else {
                         if (w.chromName === nonVirtChrom) {
                             nonVirtEnd = Math.max(ce, nonVirtEnd);
                         } else {
                             break;
                         }
                     }
                 }
             }
             if (nonVirtChrom !== "")
                 cartSettings.nonVirtHighlight = makeHighlightString(getDb(), nonVirtChrom, nonVirtStart, (nonVirtEnd+1), hlColorName);
         } else if (hgTracks.windows && hgTracks.virtualSingleChrom) {
                 cartSettings.nonVirtHighlight = hgTracks.highlight;
         }
         // TODO if not virt, do we need to erase cart nonVirtHighlight ?
         cart.setVarsObj(cartSettings);
         imageV2.drawHighlights();
     },
 
     selectionEndDialog: function (newPosition)
     // Let user choose between zoom-in and highlighting.
     {   
         newPosition.replace("virt:", "multi:");
         // if the user hit Escape just before, do not show this dialo
         if (dragSelect.startTime===null)
             return;
         var dragSelectDialog = $("#dragSelectDialog")[0];
         if (!dragSelectDialog) {
             $("body").append("<div id='dragSelectDialog'>" + 
                              "<p><ul>"+
                              "<li>Hold <b>Shift+drag</b> to show this dialog" +
                              "<li>Hold <b>Alt+drag</b> (Windows) or <b>Option+drag</b> (Mac) to add a highlight" +
                              "<li>Hold <b>Ctrl+drag</b> (Windows) or <b>Cmd+drag</b> (Mac) to zoom" +
                              "<li>To cancel, press <tt>Esc</tt> anytime during the drag" +
                              "<li>Using the keyboard, highlight the current position with <tt>h then m</tt>" +
                              "<li>Clear all highlights with View - Clear Highlights or <tt>h then c</tt>" +
                              "<li>Clear specific highlights with right click &gt; Remove highlight" +
                              "<li>To merely save the color for the next keyboard or right-click &gt; Highlight operations, click 'Save Color' below" +
                              "</ul></p>");
             makeHighlightPicker("hlColor", document.getElementById("dragSelectDialog"), null);
             $("#dragSelectDialog").append("<div style='padding-top: 4px'><input style='float:left' type='checkbox' id='disableDragHighlight'>" + 
                              "<span style='border:solid 1px #DDDDDD; padding:3px;display:inline-block' id='hlNotShowAgainMsg'>Don't show this again and always zoom with shift.<br>" + 
                              "Re-enable via 'View - Configure Browser' (<tt>c then f</tt>)</span></div>"+ 
                              "Selected chromosome position: <span id='dragSelectPosition'></span>");
             dragSelectDialog = $("#dragSelectDialog")[0];
             // reset value
             // allow to click checkbox by clicking on the label
             $('#hlNotShowAgainMsg').on("click", function() { $('#disableDragHighlight').trigger("click");});
             // click "add highlight" when enter is pressed in color input box
             $("#hlColorInput").on("keyup", function(event){
                 if(event.keyCode == 13){
                     $(".ui-dialog-buttonset button:nth-child(3)").trigger("click");
                 }
             });
         }
 
         if (hgTracks.windows) {
             var i,len;
             var newerPosition = newPosition;
             if (hgTracks.virtualSingleChrom && (newPosition.search("multi:")===0)) {
                 newerPosition = genomePos.disguisePosition(newPosition);
             }
             var str = newerPosition + "<br>\n";
             var str2 = "<br>\n";
             str2 += "<ul style='list-style-type:none; max-height:200px; padding:0; width:80%; overflow:hidden; overflow-y:scroll;'>\n";
             var pos = parsePosition(newPosition);
             var start = pos.start - 1;
             var end = pos.end;
             var selectedRegions = 0;
             for (i=0,len=hgTracks.windows.length; i < len; ++i) {
                 var w = hgTracks.windows[i];
                 // overlap with new position?
                 if (w.virtEnd > start && end > w.virtStart) {
                     var s = Math.max(start, w.virtStart);
                     var e = Math.min(end, w.virtEnd);
                     var cs = s - w.virtStart + w.winStart;
                     var ce = e - w.virtStart + w.winStart;
                     str2 += "<li>" + w.chromName + ":" + (cs+1) + "-" + ce + "</li>\n";
                     selectedRegions += 1;
                 }
             }
             str2 += "</ul>\n";
             if (!(hgTracks.virtualSingleChrom && (selectedRegions === 1))) {
                 str += str2;
             }
             $("#dragSelectPosition").html(str);
         } else {
             $("#dragSelectPosition").html(newPosition);
         }
         // Build the button set in two passes so that "Create Item" only
         // appears when myVariants is enabled in hg.conf.  doMyVariants is
         // emitted by the server only inside the gated hg.conf block, so on
         // a server with the feature off the variable is undefined and the
         // button is omitted entirely.
         let dragSelectButtons = {
             "Zoom In": function() {
                 // Zoom to selection
                 $(this).dialog("option", "revertToOriginalPos", false);
                 if ($("#disableDragHighlight").prop('checked'))
                     hgTracks.enableHighlightingDialog = false;
                 if (imageV2.inPlaceUpdate) {
                     if (hgTracks.virtualSingleChrom && (newPosition.search("multi:")===0)) {
                         newPosition = genomePos.disguisePosition(newPosition); // DISGUISE
                     }
                     var params = "db=" + getDb() + "&position=" + newPosition;
                     if (!hgTracks.enableHighlightingDialog)
                         params += "&enableHighlightingDialog=0";
                     imageV2.navigateInPlace(params, null, true);
                 } else {
                     $('body').css('cursor', 'wait');
                     if (!hgTracks.enableHighlightingDialog)
                         cart.setVarsObj({'enableHighlightingDialog': 0 },null,false); // async=false
                     document.TrackHeaderForm.submit();
                 }
                 $(this).dialog("close");
             },
             "Single Highlight": function() {
                 // Clear old highlight and Highlight selection
                 $(imageV2.imgTbl).imgAreaSelect({hide:true});
                 if ($("#disableDragHighlight").prop('checked'))
                     hgTracks.enableHighlightingDialog = false;
                 var hlColor = $("#hlColorInput").val();
                 dragSelect.highlightThisRegion(newPosition, false, hlColor);
                 $(this).dialog("close");
             },
             "Add Highlight": function() {
                 // Highlight selection
                 if ($("#disableDragHighlight").prop('checked'))
                     hgTracks.enableHighlightingDialog = false;
                 var hlColor = $("#hlColorInput").val();
                 dragSelect.highlightThisRegion(newPosition, true, hlColor);
                 $(this).dialog("close");
             },
             "Save Color": function() {
                 var hlColor = $("#hlColorInput").val();
                 dragSelect.saveHlColor( hlColor );
                 $(this).dialog("close");
             }
         };
         if (typeof doMyVariants !== 'undefined' && doMyVariants) {
             dragSelectButtons["Add Annotation"] = function() {
                 let data = {};
                 let pos = parsePosition(newPosition);
                 data.chrom = pos.chrom;
                 data.start = data.thickStart = pos.start.toString();
                 data.end = data.thickEnd = pos.end.toString();
                 data.score = "0";
                 data.strand = ".";
                 data.color = $("#hlColorInput").val();
                 data.name = "";
                 data.description = "";
                 data.ref = "";
                 data.alt = "";
                 data.trackName = "myVariants";
                 $(this).dialog("close");
                 let req = encodeURIComponent(`myVariants myVariants ${JSON.stringify(data)}`);
                 jQuery('body').css('cursor', 'wait');
                 $.ajax({
                         type: "POST",
                         url: "../cgi-bin/hgTracks",
                         data: cart.addUpdatesToUrl(`hgt_doJsCommand=${req}&trackName=myVariants&hgsid=${getHgsid()}`),
                         dataType: "html",
                         trueSuccess: imageV2.updateImgAndMap,
                         success: catchErrorOrDispatch,
                         error: errorHandler,
                         cmd: 'wholeImage',
                         loadingId: showLoadingImage("imgTbl"),
                         cache: false
                     });
             };
         }
         dragSelectButtons.Cancel = function() {
             $(this).dialog("close");
         };
         $(dragSelectDialog).dialog({
                 modal: true,
                 title: "Drag-and-select",
                 closeOnEscape: true,
                 resizable: false,
                 autoOpen: false,
                 revertToOriginalPos: true,
                 minWidth: 750,
                 buttons: dragSelectButtons,
 
                 open: function () { // Make zoom the focus/default action
                    $(this).parents('.ui-dialog-buttonpane button:eq(0)').trigger("focus");
                 },
 
                 close: function() {
                     // All exits to dialog should go through this
                     $(imageV2.imgTbl).imgAreaSelect({hide:true});
                     if ($(this).dialog("option", "revertToOriginalPos"))
                         genomePos.revertToOriginalPos();
                     if ($("#disableDragHighlight").prop('checked'))
                         $(this).remove();
                     else
                         $(this).hide();
                     $('body').css('cursor', ''); // Occasionally wait cursor got left behind
                     $("#hlColorPicker").spectrum("hide");
                 }
         });
         $(dragSelectDialog).dialog('open');
         
     },
 
     selectEnd: function (img, selection, event)
     {
         var now = new Date();
         var doIt = false;
         var rulerClicked = selection.y1 <= hgTracks.rulerClickHeight; // = drag on base position track (no shift)
         if (dragSelect.originalCursor)
             jQuery('body').css('cursor', dragSelect.originalCursor);
         if (dragSelect.escPressed)
             return false;
         // ignore releases outside of the image rectangle (allowing a 10 pixel slop)
         if (genomePos.check(img, selection)) {
             // ignore single clicks that aren't in the top of the image
             // (this happens b/c the clickClipHeight test in dragSelect.selectStart
             // doesn't occur when the user single clicks).
             doIt = (dragSelect.startTime !== null || rulerClicked);
         }
 
         if (doIt) {
             // dragSelect.startTime is null if mouse has never been moved
             var singleClick = (  (selection.x2 === selection.x1)
                               || dragSelect.startTime === null
                               || (now.getTime() - dragSelect.startTime) < 100);
             var newPosition = genomePos.update(img, selection, singleClick);
             newPosition.replace("virt:", "multi:");
             if (newPosition) {
                 if (event.altKey) {
                     // with the alt-key, only highlight the region, do not zoom
                     dragSelect.highlightThisRegion(newPosition, true);
                     $(imageV2.imgTbl).imgAreaSelect({hide:true});
                 } else {
                     if (hgTracks.enableHighlightingDialog && !(event.metaKey || event.ctrlKey))
                         // don't show the dialog if: clicked on ruler, if dialog deactivated or meta/ctrl was pressed
                         dragSelect.selectionEndDialog(newPosition);
                     else {
                         // in every other case, show the dialog
                         $(imageV2.imgTbl).imgAreaSelect({hide:true});
                         if (imageV2.inPlaceUpdate) {
                             if (hgTracks.virtualSingleChrom && (newPosition.search("multi:")===0)) {
                                 newPosition = genomePos.disguisePosition(newPosition); // DISGUISE
                             }
                             imageV2.navigateInPlace("db=" + getDb() + "&position=" + newPosition, null, true);
                         } else {
                             jQuery('body').css('cursor', 'wait');
                             document.TrackHeaderForm.submit();
                         }
                     }
                 }
             } else {
                 $(imageV2.imgTbl).imgAreaSelect({hide:true});
                 genomePos.revertToOriginalPos();
             }
             dragSelect.startTime = null;
             // blockMapClicks/allowMapClicks() is necessary if selectEnd was over a map item.
             setTimeout(posting.allowMapClicks,50);
             return true;
         }
     },
 
     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).on("keyup", function(e){
                 if(e.keyCode === 27) {
                     $(imageV2.imgTbl).imgAreaSelect({hide:true});
                     dragSelect.escPressed = true;
                 }
             });
 
             // hide and redraw all current highlights when the browser window is resized
             $(window).on("resize", function() {
                 $(imageV2.imgTbl).imgAreaSelect({hide:true});
                 imageV2.drawHighlights();
             });
 
         }
     }
 };
 
   /////////////////////////////////////
  //// Chrom Drag/Zoom/Expand code ////
 /////////////////////////////////////
 jQuery.fn.chromDrag = function(){
 this.each(function(){
     // Plan:
     // mouseDown: determine where in map: convert to img location: pxDown
     // mouseMove: flag drag
     // mouseUp: if no drag, then create href centered on bpDown loc with current span
     //          if drag, then create href from bpDown to bpUp
     //          if ctrlKey then expand selection to containing cytoBand(s)
 
     // Image dimensions all in pix
     var img = { top: -1, scrolledTop: -1, height: -1, left: -1, scrolledLeft: -1, width: -1 };  
     // chrom Dimensions beg,end,size in bases, rest in pix
     var chr = { name: "", reverse: false, beg: -1, end: -1, size: -1,
                 top: -1, bottom: -1, left: -1, right: -1, width: -1 };   
     var pxDown = 0;     // pix X location of mouseDown
     var chrImg = $(this);
     var mouseIsDown   = false;
     var mouseHasMoved = false;
     var hilite = null;
 
     initialize();
 
     function initialize(){
 
         findDimensions();
 
         if (chr.top === -1)
             warn("chromIdeo(): failed to register "+this.id);
         else {
             hiliteSetup();
 
             $('area.cytoBand').off('mousedown');  // Make sure this is only bound once
             $('area.cytoBand').on("mousedown", function(e)
             {   // mousedown on chrom portion of image only (map items)
                 updateImgOffsets();
                 pxDown = e.clientX - img.scrolledLeft;
                 var pxY = e.clientY - img.scrolledTop;
                 if (mouseIsDown === false
                 && isWithin(chr.left,pxDown,chr.right) && isWithin(chr.top,pxY,chr.bottom)) {
                     mouseIsDown = true;
                     mouseHasMoved = false;
 
                     $(document).on('mousemove',chromMove);
                     $(document).on( 'mouseup', chromUp);
                     hiliteShow(pxDown,pxDown);
                     return false;
                 }
             });
         }
     }
 
     function chromMove(e)
     {   // If mouse was down, determine if dragged, then show hilite
         if ( mouseIsDown ) {
             var pxX = e.clientX - img.scrolledLeft;
             var relativeX = (pxX - pxDown);
             if (mouseHasMoved || (mouseHasMoved === false && Math.abs(relativeX) > 2)) {
                 mouseHasMoved = true;
                 if (isWithin(chr.left,pxX,chr.right))
                     hiliteShow(pxDown,pxX);
                 else if (pxX < chr.left)
                     hiliteShow(pxDown,chr.left);
                 else
                     hiliteShow(pxDown,chr.right);
             }
         }
     }
     function chromUp(e)
     {   // If mouse was down, handle final selection
         $(document).off('mousemove',chromMove);
         $(document).off('mouseup',chromUp);
         chromMove(e); // Just in case
         if (mouseIsDown) {
             updateImgOffsets();
             var bands;
             var pxUp = e.clientX - img.scrolledLeft;
             var pxY  = e.clientY - img.scrolledTop;
             if (isWithin(0,pxY,img.height)) {  // within vertical range or else cancel
                 var selRange = { beg: -1, end: -1, width: -1 };
                 var dontAsk = true;
 
                 if (e.ctrlKey) {
                     bands = findCytoBand(pxDown,pxUp);
                     if (bands.end > -1) {
                         pxDown = bands.left;
                         pxUp   = bands.right;
                         mouseHasMoved = true;
                         dontAsk = false;
                         selRange.beg = bands.beg;
                         selRange.end = bands.end;
                         hiliteShow(pxDown,pxUp);
                     }
                 }
                 else if (mouseHasMoved) {
                     // bounded by chrom dimensions: but must remain within image!
                     if (isWithin(-20,pxUp,chr.left)) 
                         pxUp = chr.left;
                     if (isWithin(chr.right,pxUp,img.width + 20))
                         pxUp = chr.right;
 
                     if ( isWithin(chr.left,pxUp,chr.right+1) ) {
 
                         selRange.beg = convertToBases(pxDown);
                         selRange.end = convertToBases(pxUp);
 
                         if (Math.abs(selRange.end - selRange.beg) < 20)
                             mouseHasMoved = false; // Drag so small: treat as simple click
                         else
                             dontAsk = false;
                     }
                 }
                 if (mouseHasMoved === false) { // Not else because small drag turns this off
 
                     hiliteShow(pxUp,pxUp);
                     var curWidth = hgTracks.winEnd - hgTracks.winStart;
                     // Notice that beg is based upon up position
                     selRange.beg = convertToBases(pxUp) - Math.round(curWidth/2); 
                     selRange.end  = selRange.beg + curWidth;
                 }
                 if (selRange.end > -1) {
                     // prompt, then submit for new position
                     selRange = rangeNormalizeToChrom(selRange,chr);
                     if (mouseHasMoved === false) { // Update highlight by converting bp back to pix
                         pxDown = convertFromBases(selRange.beg);
                         pxUp = convertFromBases(selRange.end);
                         hiliteShow(pxDown,pxUp);
                     }
                     //if ((selRange.end - selRange.beg) < 50000)
                     //    dontAsk = true;
                     if (dontAsk
                     || confirm("Jump to new position:\n\n"+chr.name+":"+commify(selRange.beg)+
                                "-"+commify(selRange.end)+" size:"+commify(selRange.width)) ) {
                         genomePos.setByCoordinates(chr.name, selRange.beg, selRange.end);
                         // Stop the presses :0)
                         $('area.cytoBand').on("mousedown",  function(e) { return false; });
                         if (imageV2.backSupport) {
                             imageV2.navigateInPlace("db=" + getDb() + "&position=" +
                                     encodeURIComponent(genomePos.get().replace(/,/g,'')) + 
                                     "&findNearest=1",null,true);
                             hiliteCancel();
                         } else
                             document.TrackHeaderForm.submit();
                         return true; // Make sure the setTimeout below is not called.
                     }
                 }
             }
             hiliteCancel();
             setTimeout(posting.allowMapClicks,50);
         }
         mouseIsDown = false;
         mouseHasMoved = false;
     }
 
     function isWithin(beg,here,end)
     {   // Simple utility
         return ( beg <= here && here < end );
     }
     function convertToBases(pxX)
     {   // Simple utility to convert pix to bases
         var offset = (pxX - chr.left)/chr.width;
         if (chr.reverse)
             offset = 1 - offset;
         return Math.round(offset * chr.size);
     }
     function convertFromBases(bases)
     {   // Simple utility to convert bases to pix
         var offset = bases/chr.size;
         if (chr.reverse)
             offset = 1 - offset;
         return Math.round(offset * chr.width) + chr.left;
     }
 
     function findDimensions()
     {   // Called at init: determine the dimensions of chrom from 'cytoband' map items
         var lastX = -1;
         $('area.cytoBand').each(function(ix) {
             var loc = this.coords.split(",");
             if (loc.length === 4) {
                 var myLeft  = parseInt(loc[0]);
                 var myRight = parseInt(loc[2]);
                 if (chr.top === -1) {
                     chr.left   = myLeft;
                     chr.right  = myRight;
                     chr.top    = parseInt(loc[1]);
                     chr.bottom = parseInt(loc[3]);
                 } else {
                     if (chr.left  > myLeft)
                         chr.left  = myLeft;
                     if (chr.right < parseInt(loc[2]))
                         chr.right = parseInt(loc[2]);
                 }
 
                 let title = this.getAttribute("data-tooltip") || this.getAttribute("title");
                 var range = title.substr(title.lastIndexOf(':')+1);
                 var pos = range.split('-');
                 if (pos.length === 2) {
                     if (chr.name.length === 0) {
                         chr.beg = parseInt(pos[0]);
                         //chr.end = parseInt(pos[1]);
                         chr.name = title.substring(title.lastIndexOf(' ')+1,
                                                         title.lastIndexOf(':'));
                     } else {
                         if (chr.beg > parseInt(pos[0]))
                             chr.beg = parseInt(pos[0]);
                     }
                     if (chr.end < parseInt(pos[1])) {
                         chr.end = parseInt(pos[1]);
                         if (lastX === -1)
                             lastX = myRight;
                         else if (lastX > myRight)
                             chr.reverse = true;  // end is advancing, but X is not, so reverse
                     } else if (lastX !== -1 && lastX < myRight)
                         chr.reverse = true;      // end is not advancing, but X is, so reverse
 
                 }
                 $(this).css( 'cursor', 'text');
                 $(this).attr("href","");
             }
         });
         chr.size  = (chr.end   - chr.beg );
         chr.width = (chr.right - chr.left);
     }
 
     function findCytoBand(pxDown,pxUp)
     {   // Called when mouseup and ctrl: Find the bounding cytoband dimensions (in pix and bases)
         var cyto = { left: -1, right: -1, beg: -1, end: -1 };
         $('area.cytoBand').each(function(ix) {
             var loc = this.coords.split(",");
             if (loc.length === 4) {
                 var myLeft  = parseInt(loc[0]);
                 var myRight = parseInt(loc[2]);
                 var range;
                 var pos;
                 if (cyto.left === -1 || cyto.left > myLeft) {
                     if ( isWithin(myLeft,pxDown,myRight) || isWithin(myLeft,pxUp,myRight) ) {
                         cyto.left  = myLeft;
                         range = this.title.substr(this.title.lastIndexOf(':')+1);
                         pos = range.split('-');
                         if (pos.length === 2) {
                             cyto.beg  = (chr.reverse ? parseInt(pos[1]) : parseInt(pos[0]));
                         }
                     }
                 }
                 if (cyto.right === -1 || cyto.right < myRight) {
                     if ( isWithin(myLeft,pxDown,myRight) || isWithin(myLeft,pxUp,myRight) ) {
                         cyto.right = myRight;
                         range = this.title.substr(this.title.lastIndexOf(':')+1);
                         pos = range.split('-');
                         if (pos.length === 2) {
                             cyto.end  = (chr.reverse ? parseInt(pos[0]) : parseInt(pos[1]));
                         }
                     }
                 }
             }
         });
         return cyto;
     }
     function rangeNormalizeToChrom(selection,chrom)
     {   // Called before presenting or using base range: make sure chrom selection
         // is within chrom range
         if (selection.end < selection.beg) {
             var tmp = selection.end;
             selection.end = selection.beg;
             selection.beg = tmp;
         }
         selection.width = (selection.end - selection.beg);
         selection.beg += 1;
         if (selection.beg < chrom.beg) {
             selection.beg = chrom.beg;
             selection.end = chrom.beg + selection.width;
         }
         if (selection.end > chrom.end) {
             selection.end = chrom.end;
             selection.beg = chrom.end - selection.width;
             if (selection.beg < chrom.beg) { // spans whole chrom
                 selection.width = (selection.end - chrom.beg);
                 selection.beg = chrom.beg + 1;
             }
         }
         return selection;
     }
 
     function hiliteShow(down,cur)
     {   // Called on mousemove, mouseup: set drag hilite dimensions
         var topY = img.top;
         var high = img.height;
         var begX = -1;
         var wide = -1;
         if (cur < down) {
             begX = cur + img.left;
             wide = (down - cur);
         } else {
             begX = down + img.left;
             wide = (cur - down);
         }
         $(hilite).css({ left: begX + 'px', width: wide + 'px', top: topY + 'px',
                         height: high + 'px', display:'' });
         $(hilite).show();
     }
     function hiliteCancel(left,width,top,height)
     {   // Called on mouseup: Make green drag hilite disappear when no longer wanted
         $(hilite).hide();
         $(hilite).css({ left: '0px', width: '0px', top: '0px', height: '0px' });
     }
 
     function hiliteSetup()
     {   // Called on init: setup of drag region hilite (but don't show yet)
         if (hilite === null) {  // setup only once
             hilite = jQuery("<div id='chrHi'></div>");
             $(hilite).css({ backgroundColor: 'green', opacity: 0.4, borderStyle: 'solid',
                             borderWidth: '1px', bordercolor: '#0000FF' });
             $(hilite).css({ display: 'none', position: 'absolute', overflow: 'hidden', zIndex: 1 });
             jQuery($(chrImg).parents('body')).append($(hilite));
         }
         return hilite;
     }
 
     function updateImgOffsets()
     {   // Called on mousedown: Gets the current offsets
         var offs = $(chrImg).offset();
         img.top  = Math.round(offs.top );
         img.left = Math.round(offs.left);
         img.scrolledTop  = img.top  - $("body").scrollTop();
         img.scrolledLeft = img.left - $("body").scrollLeft();
         if (theClient.isIePre11()) {
             img.height = $(chrImg).outerHeight();
             img.width  = $(chrImg).outerWidth();
         } else {
             img.height = $(chrImg).height();
             img.width  = $(chrImg).width();
         }
         return img;
     }
 });
 };
 
 
 
   //////////////////////////
  //// 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. 
 
     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
     }
 
     if (!pan || !pic) {
         throw "Not a div with child image! 'panImages' can only be used with divs contain images.";
     }
 
     // globals across all panImages
     portalWidth     = $(pan).width();
     portalAbsoluteX = $(pan).offset().left;
     // globals to one panImage
     var newX        = 0;
     var mouseDownX  = 0;
     var mouseIsDown = false;
     var beyondImage = false;
     var atEdge      = false;
 
     initialize();
 
     function initialize(){
 
         $(pan).parents('td.tdData').on("mousemove", function(e) {
             if (e.shiftKey)
                 $(this).css('cursor',"crosshair");  // shift-dragZoom
             else if ( theClient.isIePre11() )     // IE will override map item cursors if this gets set
                 $(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');
                 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()) {
                     // need to throw up a z-index div.  Wait mask?
                     savedPosition = genomePos.get();
                     dragMaskShow();
                     posting.blockMapClicks();
                 }
                 var decelerator = 1;
                 //var wingSize    = 1000; // 0 stops the scroll at the edges.
                 // Remeber that offsetX (prevX) is negative
                 newX = prevX + relativeX;
                 if ( newX >= leftLimit ) { // scrolled all the way to the left
                     if (atEdge) {  // Do not drag straight off edge.  Force second drag
                         beyondImage = true;
                         newX = leftLimit + (newX - leftLimit)/decelerator;// slower
                         //if (newX >= leftLimit + wingSize) // Don't go too far over the edge!
                         //    newX =  leftLimit + wingSize;
                     } else
                         newX = leftLimit;
 
                 } else if ( newX < rightLimit ) { // scrolled all the way to the right
                     if (atEdge) {  // Do not drag straight off edge.  Force second drag
                         beyondImage = true;
                         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);
 
                 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);
             mouseIsDown = false;
             // timeout incase the dragSelect.selectEnd was over a map item. select takes precedence.
             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 } );
                 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";
                 }
             }
         }
     }
     });  // 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.
                                 Math.round(portalScrolledX*hgTracks.imgBoxBasesPerPixel);
         else
             newPortalStart = closedPortalStart -     // As offset goes down, bases seen goes up!
                                 Math.round(portalScrolledX*hgTracks.imgBoxBasesPerPixel);
         if (newPortalStart < hgTracks.chromStart && bounded) {     // Stay within bounds
             newPortalStart = hgTracks.chromStart;
             recalculate = true;
         }
         var newPortalEnd = newPortalStart + portalWidthBases;
         if (newPortalEnd > hgTracks.chromEnd && bounded) {
             newPortalEnd = hgTracks.chromEnd;
             newPortalStart = newPortalEnd - portalWidthBases;
             recalculate = true;
         }
         if (newPortalStart > 0) {
             var newPos = hgTracks.chromName + ":" + newPortalStart + "-" + newPortalEnd;
             genomePos.set(newPos); // no need to change the size
         }
         if (recalculate && hgTracks.imgBoxBasesPerPixel > 0) { 
             // Need to recalculate X for bounding drag
             portalScrolledX = (closedPortalStart - newPortalStart) / hgTracks.imgBoxBasesPerPixel;
             newOffsetX = portalScrolledX - (hgTracks.imgBoxPortalOffsetX+hgTracks.imgBoxLeftLabel);
         }
 
         if (typeof (igv) !== "undefined") {
            igv.updateIgvStartPosition(newPortalStart);
         }
 
 
         ret = {};
         ret.newX = newOffsetX;
         ret.isOutsideChrom = recalculate;
         return ret;
     }
     function mapTopAndBottom(mapName,east,west)
     {
     // Find the top and bottom px given left and right boundaries
         var mapPortal = { top: -10, bottom: -10 };
         var items = $("map[name='"+mapName+"']").children();
         if ($(items).length>0) {
             $(items).each(function(t) {
                 var loc = this.coords.split(",");
                 var aleft   = parseInt(loc[0]);
                 var aright  = parseInt(loc[2]);
                 if (aleft < west && aright >= east) {
                     var atop    = parseInt(loc[1]);
                     var abottom = parseInt(loc[3]);
                     if (mapPortal.top    < 0 ) {
                         mapPortal.top    = atop;
                         mapPortal.bottom = abottom;
                     } else if (mapPortal.top > atop) {
                             mapPortal.top = atop;
                     } else if (mapPortal.bottom < abottom) {
                             mapPortal.bottom = abottom;
                     }
                 }
             });
         }
         return mapPortal;
     }
     function panAdjustHeight(newOffsetX) {
         // Adjust the height of the track data images so that bed items scrolled off screen
         // do not waste vertical real estate
 
         // Is the > 1x?
         if (only1xScrolling)
             return;
 
         var east = newOffsetX * -1;
         var west = east + portalWidth;
         $(".panImg").each(function(t) {
             var mapid  = this.id.replace('img_','map_');
             var hDiv   = $(this).parent();
             var north  = parseInt($(this).css("top")) * -1;
             var south  = north + $(hDiv).height();
 
             var mapPortal = mapTopAndBottom(mapid,east,west);
             if (mapPortal.top > 0) {
                 var topdif = Math.abs(mapPortal.top - north);
                 var botdif = Math.abs(mapPortal.bottom - south);
                 if (topdif > 2 || botdif > 2) {
                     $(hDiv).height( mapPortal.bottom - mapPortal.top );
                     north = mapPortal.top * -1;
                     $(this).css( {'top': north.toString() + "px" });
 
                     // Need to adjust side label height as well!
                     var imgId = this.id.split("_");
                     var titlePx = 0;
                     var center = $("#img_center_"+imgId[2]);
                     if (center.length > 0) {
                         titlePx = $(center).parent().height();
                         north += titlePx;
                     }
                     var side = $("#img_side_"+imgId[2]);
                     if (side.length > 0) {
                         $(side).parent().height( mapPortal.bottom - mapPortal.top + titlePx);
                         $(side).css( {'top': north.toString() + "px" });
                     }
                     var btn = $("#p_btn_"+imgId[2]);
                     if (btn.length > 0) {
                         $(btn).height( mapPortal.bottom - mapPortal.top + titlePx);
                     } else {
                         btn = $("#img_btn_"+imgId[2]);
                         if (btn.length > 0) {
                             $(btn).parent().height( mapPortal.bottom - mapPortal.top + titlePx);
                             $(btn).css( {'top': top.toString() + "px" });
                         }
                     }
                 }
             }
         });
         dragMaskResize();  // Resizes the dragMask to match current image size
     }
 
     function dragMaskShow() 
     {   // Sets up the dragMask to show grabbing cursor within image
         // and not allowed north and south of image
         var imgTbl = $('#imgTbl');
         // Find or create the waitMask (which masks the whole page)
         var dragMask = normed($('div#dragMask'));
         if (!dragMask) {
             $("body").prepend("<div id='dragMask' class='waitMask'></div>");
             dragMask = $('div#dragMask');
         }
 
         $('body').css('cursor','not-allowed');
         $(dragMask).css('cursor',"url(../images/grabbing.cur),w-resize");
         $(dragMask).css({opacity:0.0,display:'block',
                         top: $(imgTbl).position().top.toString() + 'px',
                         height: $(imgTbl).height().toString() + 'px' });
     }
 
     function dragMaskResize() 
     {   // Resizes dragMask (called when image is dynamically resized in >1x scrolling)
         var imgTbl = $('#imgTbl');
         // Find or create the waitMask (which masks the whole page)
         var dragMask = normed($('div#dragMask'));
         if (dragMask) {
             $(dragMask).height( $(imgTbl).height() );
         }
     }
 
     function dragMaskClear() {        // Clears the dragMask
         $('body').css('cursor','auto');
         var  dragMask = normed($('#dragMask'));
         if (dragMask)
             $(dragMask).hide();
     }
 
     function scrollHighlight(relativeX) 
     // Scrolls the highlight region if one exists
     {        
         if (highlightAreas) {
             for (i=0; i<highlightAreas.length; i++) {
                 highlightArea = highlightAreas[i];
                 // Best to have a left and right, then min/max the edges, then set width
                 var hiOffset = $(highlightArea).offset();
                 var hiDefinedLeft  = $(highlightArea).data('leftPixels');
                 var hiDefinedWidth = $(highlightArea).data('widthPixels');
                 hiOffset.left = Math.max(hiDefinedLeft + relativeX,
                                          portalAbsoluteX);
                 var right     = Math.min(hiDefinedLeft + hiDefinedWidth + relativeX,
                                          portalAbsoluteX + portalWidth);
                 var newWidth = Math.max(right - hiOffset.left,0);
                 if (hiDefinedWidth !== newWidth)
                     $(highlightArea).width(newWidth);
                 $(highlightArea).offset(hiOffset);
             }
         }
     }
 
 };
 
   ///////////////////////////////////////
  //// rightClick (aka context menu) ////
 ///////////////////////////////////////
 var rightClick = {
 
     menu: null,
     selectedMenuItem: null,   // currently choosen context menu item (via context menu).
     floatingMenuItem: null,
     currentMapItem:   null,
     supportZoomCodon: true,  // add zoom to exon and zoom to codon to right click menu
     clickedHighlightIdx : null,  // the index (0,1,...) of the highlight item that overlaps the last right-click
 
     moveTo : function(id, topOrBottom) {
         /* move a track to either "top" or "bottom" position */
         let newPos = "0.5";
         if (hgTracks.trackDb[0]!=="ruler")
             newPos = 0;
 
         if (topOrBottom==="bottom") {
             newPos = String(parseInt($(".imgOrd").last().attr("abbr"))+1);
         }
 
         let trEl = $(document.getElementById('tr_' + id));
         trEl.attr('abbr', newPos);
 
         dragReorder.sort($("#imgTbl"));
         dragReorder.setOrder($("#imgTbl"));
     },
     hideLegends : function() {
         /* if no pliBy track is shown, hide the pli legend */
         hasPliTracks = false;
         for (var trDomEl of $(".imgOrd")){
             var trackName = trDomEl.id.split("_")[1];
             if (trackName.startsWith("pliBy"))
                 hasPliTracks = true;
         }
         if (!hasPliTracks)
             $("#gnomadColorKeyLegend").hide();
     },
     hideTracks: function (ids)
         /* hide specified list of tracks, take care to hide parents rather than children, whenever possible. This is
          * addressing a basic problem of how we handle container tracks: if you right-click hide the last child, the container is still 
          * in the track list on the screen as not-hidden, but there are no
          * tracks shown of this container. This is confusing for the user. The
          * code below analyzes the track hierarchy and finds out if hiding a
          * track would lead to a container becoming empty and instead of hiding
          * just this track, will hide the container. It does this does both on
          * screen and in the cart. This means that you cannot end up with a container that is
          * not hidden but no tracks shown of this container, at least not with right-click. */
     {
         var cartVars = [];
         var cartVals = [];
 
         // find parent tracks that are losing all their children (lone parents)
         var familyAnalysis = tdbFindChildless(hgTracks.trackDb, ids);
 
         // lone parents get special treatment
         for (var delFam of familyAnalysis.loneParents) {
             var loneParent = delFam[0];
             var loneParentChildren = delFam[1];
 
             // remove all the lone parent children now from the track image
             // and also unselect them, if they are children of a composite
             for (var childName of loneParentChildren) {
                 $(document.getElementById('tr_' + childName)).remove();
                 var rec = hgTracks.trackDb[childName];
                 // the following means that all composite children are always unselected, so you cannot get the
                 // current selection easily back, since we always hide them all, instead of just hiding the parent.
                 // The problem is that it's not easy to find out if there is an easier way to hide them, the code
                 // would have to go over all possible parents, not just topParents. Maybe one day.
                 //if (tdbIsSubtrack(rec)) {
                  //  cartVars.push(childName+"_sel");
                  //   cartVals.push('0');
                 //}
             }
 
             // and set the lone parent to hide in the cart
             cartVars.push(loneParent);
             cartVals.push('hide');  // need to explicitely set to "hide", not "[]", to hide the default tracks
              
             // update the track list below the image
             vis.update(loneParent, 'hide');
             rightClick.hideLegends();
             delete hgTracks.trackDb[loneParent]; // for the next right-click
         }
 
         // handle all other tracks, they are either not parents or parents with at least one child left
         var delIds = familyAnalysis.others;
         for (var i = 0; i<delIds.length; i++) {
             var id = delIds[i];
             cartHideAnyTrack(id, cartVars, cartVals);
             $(document.getElementById('tr_' + id)).remove();
             delete hgTracks.trackDb[id]; // for the next right-click
         }
         imageV2.afterImgChange(true);
         cart.setVars( cartVars, cartVals );
     },
 
     hideOthers: function (id) {
         /* hide all tracks but 'id'. Hide parents of composites/folders, rather than their children */
         var myParent = hgTracks.trackDb[id].parentTrack;
 
         var hideList = [];
         for (var otherId in hgTracks.trackDb) {
             if (otherId===id || otherId==="ruler")
                 continue;
 
             hideList.push(otherId);
         }
         rightClick.hideTracks(hideList);
     },
     makeMapItem: function (id)
     {   // Create a dummy mapItem on the fly
         // (for objects that don't have corresponding entry in the map).
         if (id && id.length > 0 && hgTracks.trackDb) {
             var title;
             var rec = hgTracks.trackDb[id];
             if (rec) {
                 title = rec.shortLabel;
             } else {
                 title = id;
             }
             return {id: id, title: "configure " + title};
         } else {
             return null;
         }
     },
 
     findMapItem: function (e)
     {   // Find mapItem for given event; returns item object or null if none found.
 
         if (rightClick.currentMapItem) {
             return rightClick.currentMapItem;
         }
 
         // rightClick for non-map items that can be resolved to their parent tr and
         // then trackName (e.g. items in gray bar)
         var tr = $( e.target ).parents('tr.imgOrd');
         if ($(tr).length === 1) {
             var a = /tr_(.*)/.exec($(tr).attr('id'));  // voodoo
             if (a && a[1]) {
                 var id = a[1];
                 return rightClick.makeMapItem(id);
             }
         }
         return null;
     },
 
     windowOpenFailedMsg: function ()
     {
         warn("Your web browser prevented us from opening a new window.\n\n" +
              "Please change your browser settings to allow pop-up windows from " +
              document.domain + ".");
     },
 
     handleZoomCodon: function (response, status)
     {
         var json = JSON.parse(response);
         if (json.pos) {
             imageV2.navigateInPlace("db=" + getDb() + "&position="+json.pos);
         } else {
             alert(json.error);
         }
     },
 
     handleViewImg: function (response, status)
     {   // handles view image response, which must get new image without imageV2 gimmickery
         jQuery('body').css('cursor', '');
         var str = "<IMG[^>]*SRC='([^']+)'";
         var reg = new RegExp(str);
         var a = reg.exec(response);
         if (a && a[1]) {
             if ( ! window.open(a[1]) ) {
                 rightClick.windowOpenFailedMsg();
             }
             return;
         }
         warn("Couldn't parse out img src");
     },
 
     myPrompt: function (msg, callback)
     {   // replacement for prompt; avoids misleading/confusing security warnings which are caused
         // by prompt in IE 7+.   Callback is called if user presses "OK".
         $("body").append("<div id = 'myPrompt'><div id='dialog' title='Basic dialog'><form>" +
                             msg + "<input id='myPromptText' value=''></form>");
         $('#myPromptText').on('keypress', function(e) {
             if (e.which === 13) {  // listens for return key
                 e.preventDefault();   // prevents return from also submitting whole form
                 $("#myPrompt").dialog("close");
                 callback($("#myPromptText").val());
             }
         });
         $("#myPrompt").dialog({
                                 modal: true,
                                 closeOnEscape: true,
                                 buttons: { "OK": function() {
                                                     var myPromptText = $("#myPromptText").val();
                                                     $(this).dialog("close");
                                                     callback(myPromptText);
                                                 }
                                         }
                             });
     },
 
     hit: function (menuItemClicked, menuObject, cmd, args)
     {
         setTimeout( function() {
                         rightClick.hitFinish(menuItemClicked, menuObject, cmd, args);
                     }, 1);
     },
 
     hitFinish: function (menuItemClicked, menuObject, cmd, args)
     {   // dispatcher for context menu hits
         var id = rightClick.selectedMenuItem.id;
         var url = null;  // TODO: Break this giant routine with shared vars into some sub-functions
         var href = null;
         var rec = null;
         var row = null;
         var rows = null;
         var selectUpdated = null;
                 function mySuccess() {}
         if (menuObject.shown) {
             // warn("Spinning: menu is still shown");
             setTimeout(function() { rightClick.hitFinish(menuItemClicked, menuObject, cmd); }, 10);
             return;
         }
         if (cmd === 'selectWholeGene' || cmd === 'getDna' || cmd === 'highlightItem' || cmd === 'highlightThisRegion') {
                 // bring whole gene into view or redirect to DNA screen.
                 let href = rightClick.selectedMenuItem.href;
                 let url = URL.parse(rightClick.selectedMenuItem.href);
                 let chrom = url.searchParams.get('hgg_chrom');
                 if (!chrom)
                     chrom = url.searchParams.get('c');
                 let chromStart = url.searchParams.get('hgg_start');
                 if (!chromStart)
                     chromStart = url.searchParams.get('o');
                 let chromEnd = url.searchParams.get('hgg_end');
                 if (!chromEnd)
                     chromEnd = url.searchParams.get('t');
                 chromStart = parseInt(chromStart) + 1;
                 chromEnd = parseInt(chromEnd);
                 // Many links leave out the chrom (b/c it's in the server side cart as "c")
                 // var chrom = hgTracks.chromName; // This is no longer acceptable
                 // with multi-window capability drawing multiple positions on multiple chroms.
                 if (!chrom || chrom.length === 0 || !chromStart || !chromEnd) {// 1-based chromStart
                     warn("couldn't parse out genomic coordinates");
                 } else {
                     if (cmd === 'getDna') {
                         // NOTE: this should be shared with URL generation for getDna blue bar menu
                         url = "../cgi-bin/hgc?g=getDna&i=mixed&c=" + chrom;
                         url += "&l=" + (chromStart - 1) + "&r=" + chromEnd;
                         url += "&db=" + getDb() + "&hgsid=" + getHgsid();
                         if ( ! window.open(url) ) {
                             rightClick.windowOpenFailedMsg();
                         }
                     } else if (cmd === 'highlightItem') {
                         if (hgTracks.windows && !hgTracks.virtualSingleChrom) {
                             // orig way only worked if the entire item was visible in the windows.
                             //var result = genomePos.chromToVirtChrom(chrom, parseInt(chromStart-1), parseInt(chromEnd));
 
                             var result = genomePos.convertChromPosToVirtCoords(chrom, parseInt(chromStart-1), parseInt(chromEnd));
 
                             if (result.chromStart != -1)
                                 {
                                 var newPos2 = hgTracks.chromName+":"+(result.chromStart+1)+"-"+result.chromEnd;
                                 dragSelect.highlightThisRegion(newPos2, true);
                                 }
 
                         } else {
                             var newChrom = hgTracks.chromName;
                             if (hgTracks.windows && hgTracks.virtualSingleChrom) {
                                 newChrom = hgTracks.windows[0].chromName;
                             }
                             var newPos3 = newChrom+":"+(parseInt(chromStart))+"-"+parseInt(chromEnd);
                             dragSelect.highlightThisRegion(newPos3, true);
                         }
                     } else if (cmd === 'highlightThisItem') {
 
                     } else {
                         var newPosition = genomePos.setByCoordinates(chrom, chromStart, chromEnd);
                         var reg = new RegExp("hgg_gene=([^&]+)");
                         var b = reg.exec(href);
                         var name;
                         // pull item name out of the url so we can set hgFind.matches (redmine 3062)
                         if (b && b[1]) {
                             name = b[1];
                         } else {
                             reg = new RegExp("[&?]i=([^&]+)");
                             b = reg.exec(href);
                             if (b && b[1]) {
                                 name = b[1];
                             }
                         }
                         if (imageV2.inPlaceUpdate) {
                             // XXXX This attempt to "update whole track image in place" didn't work
                             // for a variety of reasons (e.g. safari doesn't parse map when we
                             // update on the client side), so this is currently dead code.
                             // However, this now works in all other browsers, so we may turn this
                             // on for non-safari browsers (see redmine #4667).
                             jQuery('body').css('cursor', '');
                             var data = "hgt.trackImgOnly=1&hgt.ideogramToo=1&position=" +
                                        newPosition + "&hgsid=" + getHgsid() + "&db=" + getDb();
                             if (name)
                                 data += "&hgFind.matches=" + name;
                             $.ajax({
                                     type: "GET",
                                     url: "../cgi-bin/hgTracks",
                                     data: cart.addUpdatesToUrl(data),
                                     dataType: "html",
                                     trueSuccess: imageV2.updateImgAndMap,
                                     success: catchErrorOrDispatch,
                                     error: errorHandler,
                                     cmd: cmd,
                                     loadingId: showLoadingImage("imgTbl"),
                                     cache: false
                                 });
                         } else {
                             // do a full page refresh to update hgTracks image
                             jQuery('body').css('cursor', 'wait');
                             var ele;
                             if (document.TrackForm)
                                 ele = document.TrackForm;
                             else
                                 ele = document.TrackHeaderForm;
                             if (name)
                                 // Add or update form input with gene to highlight
                                 suggestBox.updateFindMatches(name);
                             ele.submit();
                         }
                     }
                 }
         } else if (cmd === 'zoomCodon' || cmd === 'zoomExon') {
             var num, ajaxCmd, msg;
             if (cmd === 'zoomCodon') {
                 msg = "Please enter the codon number to zoom to:";
                 ajaxCmd = 'codonToPos';
             } else {
                 msg = "Please enter the exon number to zoom to:";
                 ajaxCmd = 'exonToPos';
             }
             rightClick.myPrompt(msg, function(results) {
                 $.ajax({
                         type: "GET",
                         url: "../cgi-bin/hgApi",
                         data: cart.varsToUrlData({ 'hgsid': getHgsid(), 'db': getDb(), 'cmd': ajaxCmd, 'num': results,
                               'table': args.table, 'name': args.name, 'chrom': hgTracks.chromName}),
                         trueSuccess: rightClick.handleZoomCodon,
                         success: catchErrorOrDispatch,
                         error: errorHandler,
                         cache: true
                     });
                     });
         } else if (cmd === 'hgTrackUi_popup') {
 
             // Launches the popup but shields the ajax with a waitOnFunction
             popUp.hgTrackUi( rightClick.selectedMenuItem.id, false );  
 
         } else if (cmd === 'hgTrackUi_popup_description') {
 
             // Launches the popup but shields the ajax with a waitOnFunction
             popUp.hgTrackUi( rightClick.selectedMenuItem.id, true );
 
         } else if (cmd === 'changeTrackColor') {
 
             rightClick.showColorPicker(id);
 
         } else if (cmd === 'hgTrackUi_follow') {
 
             url = "hgTrackUi?hgsid=" + getHgsid() + "&g=";
             rec = hgTracks.trackDb[id];
             if (tdbHasParent(rec) && tdbIsLeaf(rec))
                 url += rec.parentTrack;
             else {
                 // The button already has the ref
                 var link = normed($( 'td#td_btn_'+ rightClick.selectedMenuItem.id ).children('a')); 
                 if (link)
                     url = $(link).attr('href');
                 else
                     url += rightClick.selectedMenuItem.id;
             }
             location.assign(url);
 
         } else if (cmd === 'newCollection') {
             $.ajax({
                 type: "PUT",
                 async: false,
                 url: "../cgi-bin/hgCollection",
                 data:  "cmd=newCollection&track=" + id + "&hgsid=" + getHgsid(),
                 trueSuccess: mySuccess,
                 success: catchErrorOrDispatch,
                 error: errorHandler,
             });
 
             imageV2.fullReload();
         } else if (cmd === 'addCollection') {
             var shortLabel = $(menuItemClicked).text().substring(9).slice(0,-1); 
             var ii;
             var collectionName;
             for(ii=0; ii < hgTracks.collections.length; ii++) {
                 if ( hgTracks.collections[ii].shortLabel === shortLabel) {
                     collectionName = hgTracks.collections[ii].track;
                     break;
                 }
             }
 
             $.ajax({
                 type: "PUT",
                 async: false,
                 url: "../cgi-bin/hgCollection",
                 data: "cmd=addTrack&track=" + id + "&collection=" + collectionName + "&hgsid=" + getHgsid(),
                 trueSuccess: mySuccess,
                 success: catchErrorOrDispatch,
                 error: errorHandler,
             });
 
             imageV2.fullReload();
         } else if (cmd === "hideOthers") {
             rightClick.hideOthers(id);
         } else if (cmd === "moveTop") {
             rightClick.moveTo(id, "top");
         } else if (cmd === "moveBottom") {
             rightClick.moveTo(id, "bottom");
         } else if ((cmd === 'sortExp') || (cmd === 'sortSim')) {
             url = "hgTracks?hgsid=" + getHgsid() + "&" + cmd + "=";
             rec = hgTracks.trackDb[id];
             if (tdbHasParent(rec) && tdbIsLeaf(rec))
                 url += rec.parentTrack;
             else {
                 // The button already has the ref
                 var link2 = normed($( 'td#td_btn_'+ rightClick.selectedMenuItem.id ).children('a')); 
                 if (link2)
                     url = $(link2).attr('href');
                 else
                     url += rightClick.selectedMenuItem.id;
             }
             location.assign(url);
 
         } else if (cmd === 'viewImg') {
             // Fetch a new copy of track img and show it to the user in another window. This code
             // assume we have updated remote cart with all relevant chages (e.g. drag-reorder).
             jQuery('body').css('cursor', 'wait');
             $.ajax({
                     type: "GET",
                     url: "../cgi-bin/hgTracks",
                     data: cart.varsToUrlData({ 'hgt.imageV1': '1','hgt.trackImgOnly': '1', 
                                                'hgsid': getHgsid(), 'db': getDb() }),
                     dataType: "html",
                     trueSuccess: rightClick.handleViewImg,
                     success: catchErrorOrDispatch,
                     error: errorHandler,
                     cmd: cmd,
                     cache: false
                 });
         } else if (cmd === 'openLink' || cmd === 'followLink') {
             href = rightClick.selectedMenuItem.href;
             var vars = new Array("c", "l", "r", "db");
             var valNames = new Array("chromName", "winStart", "winEnd");
             for (var i in vars) {
                 // make sure the link contains chrom and window width info
                 // (necessary b/c we are stripping hgsid and/or the cart may be empty);
                 // but don't add chrom to wikiTrack links (see redmine #2476).
                 var v = vars[i];
                 var val;
                 if (v === "db") {
                     val = getDb();
                 } else {
                     val = hgTracks[valNames[i]];
                 }
                 if (val
                 && id !== "wikiTrack"
                 && (href.indexOf("?" + v + "=") === -1)
                 && (href.indexOf("&" + v + "=") === -1)) {
                     href = href + "&" + v + "=" + val;
                 }
             }
             if (cmd === 'followLink') {
                 popUpHgcOrHgGene.hgc(rightClick.selectedMenuItem.id, href);
             } else {
                 // XXXX This is blocked by Safari's popup blocker (without any warning message).
                 href = removeHgsid(href);
                 if ( ! window.open(href) ) {
                     rightClick.windowOpenFailedMsg();
                 }
             }
         } else if (cmd === 'float') {
             if (rightClick.floatingMenuItem && rightClick.floatingMenuItem === id) {
                 $.floatMgr.FOArray = [];
                 rightClick.floatingMenuItem = null;
             } else {
                 if (rightClick.floatingMenuItem) {
                     // This doesn't work.
                     $('#img_data_' + rightClick.floatingMenuItem).parent().restartFloat();
                     // This does work
                     $.floatMgr.FOArray = [];
                 }
                 rightClick.floatingMenuItem = id;
                 rightClick.reloadFloatingItem();
                 imageV2.requestImgUpdate(id, "hgt.transparentImage=0", "");
             }
         } else if (cmd === 'hideSet') {
             row = $( 'tr#tr_' + id );
             rows = dragReorder.getContiguousRowSet(row);
             if (rows && rows.length > 0) {
                 var varsToUpdate = {};
                 // from bottom up, just in case remove screws with us
                 for (var ix=rows.length - 1; ix >= 0; ix--) { 
                     var rowId = $(rows[ix]).attr('id').substring('tr_'.length);
                     // Remove subtrack level vis and explicitly uncheck.
                     varsToUpdate[rowId]        = '[]';
                     varsToUpdate[rowId+'_sel'] = 0;
                     $(rows[ix]).remove();
                 }
                 if (objNotEmpty(varsToUpdate)) {
                     cart.setVarsObj(varsToUpdate);
                 }
                 imageV2.afterImgChange(true);
             }
         } else if (cmd === 'hideComposite') {
             rec = hgTracks.trackDb[id];
             if (tdbIsSubtrack(rec)) {
                 let trid = id.replaceAll(".","\\.");
                 row = $( 'tr#tr_' + trid );
                 rows = dragReorder.getCompositeSet(row);
                 // from bottom up, just in case remove screws with us
                 if (rows && rows.length > 0) {
                     for (var rIx=rows.length - 1; rIx >= 0; rIx--) {
                         $(rows[rIx]).remove();
                     }
                 selectUpdated = vis.update(rec.parentTrack, 'hide');
                 cart.setVars( [rec.parentTrack], ['hide']);
                 imageV2.afterImgChange(true);
                 }
             }
         } else if (cmd === 'jumpToHighlight') { // If highlight exists for this assembly, jump to it
             if (hgTracks.highlight && rightClick.clickedHighlightIdx!==null) {
                 var newPos = getHighlight(hgTracks.highlight, rightClick.clickedHighlightIdx);
                 if (newPos && newPos.db === getDb()) {
                     if ( $('#highlightItem').length === 0) { // not visible? jump to it
                         var curPos = parsePosition(genomePos.get());
                         var diff = ((curPos.end - curPos.start) - (newPos.end - newPos.start));
                         if (diff > 0) { // new position is smaller then current, then center it
                             newPos.start = Math.max( Math.floor(newPos.start - (diff/2) ), 0 );
                             newPos.end   = newPos.start + (curPos.end - curPos.start);
                         }
                     }
                     if (imageV2.inPlaceUpdate) {
                         var params = "db=" + getDb() + "&position=" + newPos.chrom+':'+newPos.start+'-'+newPos.end;
                         imageV2.navigateInPlace(params, null, true);
                     } else {
                         genomePos.setByCoordinates(newPos.chrom, newPos.start, newPos.end);
                         jQuery('body').css('cursor', 'wait');
                         document.TrackHeaderForm.submit();
                     }
                 }
             }
 
         } else if (cmd === 'removeHighlight') {
 
             var highlights = hgTracks.highlight.split("|");
             highlights.splice(rightClick.clickedHighlightIdx, 1); // splice = remove element from array
             hgTracks.highlight = highlights.join("|");
             cart.setVarsObj({'highlight' : hgTracks.highlight});
             imageV2.drawHighlights();
         } else if (cmd === 'toggleMerge') {
             // toggle both the cart (if the user goes to trackUi)
             // and toggle args[key], if the user doesn't leave hgTracks
             var key = id + ".doMergeItems";
             var updateObj = {};
             if (args[key] === 1) {
                 args[key] = 0;
                 updateObj[key] = 0;
                 cart.setVarsObj(updateObj,null,false);
                 imageV2.requestImgUpdate(id, id + ".doMergeItems=0");
             } else {
                 args[key] = 1;
                 updateObj[key] = 1;
                 cart.setVarsObj(updateObj,null,false);
                 imageV2.requestImgUpdate(id, id + ".doMergeItems=1");
             }
         } else {   // if ( cmd in 'hide','dense','squish','pack','full','show' )
             // Change visibility settings:
             //
             // First change the select on our form:
             rec = hgTracks.trackDb[id];
             selectUpdated = vis.update(id, cmd);
 
             // Now change the track image
             if (imageV2.enabled && cmd === 'hide') {
                 // Hide local display of this track and update server side cart.
                 // Subtracks controlled by 2 settings so del vis and set sel=0.
                 rightClick.hideTracks([id]);
             } else if (!imageV2.mapIsUpdateable) {
                 jQuery('body').css('cursor', 'wait');
                 if (selectUpdated) {
                     // assert(document.TrackForm);
                     document.TrackForm.submit();
                 } else {
                         // Add vis update to queue then submit
                         cart.setVars([id], [cmd], null, false); // synchronous
                         document.TrackHeaderForm.submit();
                 }
             } else {
                 imageV2.requestImgUpdate(id, id + "=" + cmd, "", cmd);
             }
         }
     },
 
     makeHitCallback: function (title)
     {   // stub to avoid problem with a function closure w/n a loop
         return function(menuItemClicked, menuObject) {
             rightClick.hit(menuItemClicked, menuObject, title); return true;
         };
     },
 
     reloadFloatingItem: function ()
     {   // currently dead (experimental code)
         if (rightClick.floatingMenuItem) {
             $('#img_data_' + rightClick.floatingMenuItem).parent().makeFloat(
                 {x:"current",y:"current", speed: 'fast', alwaysVisible: true, alwaysTop: true});
         }
     },
 
     makeImgTag: function (img)
     {   // Return img tag with explicit dimensions for img (dimensions are currently hardwired).
         // This fixes the "weird shadow problem when first loading the right-click menu"
         // seen in FireFox 3.X, which occurred b/c FF doesn't actually fetch the image until
         // the menu is being shown.
         return "<img style='width:16px; height:16px; border-style:none;' src='../images/" +
                 img + "' />";
     },
 
     showColorPicker: function (trackName)
     {   // Show a small dialog with a spectrum color picker for changing track color
         var rec = hgTracks.trackDb[trackName];
         if (!rec || !rec.defaultColor)
             return;
         var currentColor = (rec.colorOverrideOn && rec.colorOverride) ?
                            rec.colorOverride : rec.defaultColor;
         var dialogId = "trackColorDialog";
         $("#" + dialogId).remove();
         // Build with static template + data injected via .text()/.val()/.prop() so that
         // hub-provided shortLabel cannot inject HTML.
         var $dlg = $("<div>").attr("id", dialogId).html(
             "<p>Pick a new color for <b></b>:</p>" +
             "<input type='text' id='trackColorText' size='8' />" +
             "&nbsp;<input id='trackColorPicker' />" +
             "<br><br><label><input type='checkbox' id='trackColorOn' /> " +
             "Enable color override</label>");
         $dlg.find("p b").text(rec.shortLabel);
         $dlg.find("#trackColorText").val(currentColor);
         $dlg.find("#trackColorOn").prop("checked", !!rec.colorOverrideOn);
         $("body").append($dlg);
         var hexColorRe = /^#[0-9a-fA-F]{6}$/;
         $("#trackColorPicker").spectrum({
             color: currentColor,
             showPalette: true,
             showSelectionPalette: true,
             showInitial: true,
             showInput: true,
             preferredFormat: "hex",
             localStorageKey: "genomebrowser",
             hideAfterPaletteSelect: true,
             change: function(color) {
                 $("#trackColorText").val(color.toHexString());
                 $("#trackColorOn").prop("checked", true);
             }
         });
         $("#trackColorText").on("change", function() {
             var val = $(this).val();
             if (!hexColorRe.test(val))
                 return;
             $("#trackColorPicker").spectrum("set", val);
             $("#trackColorOn").prop("checked", true);
         });
         var applyColor = function() {
             var color = $("#trackColorText").val();
             if (!hexColorRe.test(color)) {
                 warn("Invalid color '" + color + "'. Expected hex format like #1a2b3c.");
                 return false;
             }
             var isOn = $("#trackColorOn").is(":checked") ? "1" : "0";
             rec.colorOverride = color;
             rec.colorOverrideOn = (isOn === "1");
             cart.setVars(
                 [trackName + ".colorOverride", trackName + ".colorOverrideOn"],
                 [color, isOn], null, false);
             imageV2.requestImgUpdate(trackName,
                 trackName + ".colorOverride=" + encodeURIComponent(color) +
                 "&" + trackName + ".colorOverrideOn=" + isOn);
             return true;
         };
         $("#" + dialogId).dialog({
             modal: true,
             title: "Change Track Color",
             closeOnEscape: true,
             resizable: false,
             minWidth: 400,
             buttons: {
                 "Apply": function() { applyColor(); },
                 "Ok": function() {
                     if (applyColor())
                         $(this).dialog("close");
                 }
             },
             close: function() {
                 $("#trackColorPicker").spectrum("destroy");
                 $(this).remove();
             }
         });
     },
 
     // CGIs now use HTML tags, e.g. "<b>Transcript:</b> ENST00000297261.7<br><b>Strand:</b>"
     mouseOverToLabel: function(title)
     {
         if (title.search(/<b>Transcript: ?<[/]b>/) !== -1) {
             title = title.split("<br>")[0].split("</b>")[1];
         }
         // for older UCSC genes tracks, the protein name is forced onto the item name
         if (title.search(/&hgg_prot=/) !== -1) {
             title = title.split("&hgg_prot=")[0];
         }
         return title;
     },
 
     // when "exonNumbers on", the mouse over text is not a good item description for the right-click menu
     // "exonNumbers on" is the default for genePred/bigGenePred tracks but can also be actived for bigBed and others
     // We don't have the value of the tdb variable "exonNumbers" here, so just use a heuristic to see if it's on
     mouseOverToExon: function(title)
     {
         var exonNum = 0;
         var exonRe = /(Exon) (\d+) /;
         var matches = exonRe.exec(title);
         if (matches !== null && matches[2].length > 0)
             exonNum = matches[2];
         return exonNum;
     },
 
     load: function (img)
     {
         rightClick.menu = img.contextMenu(function() {
             popUp.cleanup();   // Popup box is not getting closed properly so must do it here
             if ( ! rightClick.selectedMenuItem )  // This is literally an edge case so ignore
                 return;
 
             var o; // TODO: Break this giant routine with shared vars into some sub-functions
             var str;
             var rec = null;
             var menu = [];
             var selectedImg = rightClick.makeImgTag("greenChecksm.png");
             var blankImg    = rightClick.makeImgTag("invisible16.png");
             var done = false;
             if (rightClick.selectedMenuItem && rightClick.selectedMenuItem.id) {
                 var href = rightClick.selectedMenuItem.href;
                 var isHgc, isGene;
                 if (href) {
                     isGene = href.match("hgGene");
                     isHgc = href.match("hgc");
                 }
                 var id = rightClick.selectedMenuItem.id;
                 rec = hgTracks.trackDb[id];
                 var offerHideSubset    = false;
                 var offerHideComposite = false;
                 var offerSingles       = true;
                 let trid = id.replaceAll(".","\\.");
                 var row = $( 'tr#tr_' + trid );
                 if (row) {
                     var btn = $(row).find('p.btnBlue'); // btnBlue means cursor over left button
                     if (btn.length === 1) {
                         var compositeSet = dragReorder.getCompositeSet(row);
                         if (compositeSet && compositeSet.length > 0) {  // There is composite set
                             offerHideComposite = true;
                             $( compositeSet ).find('p.btn').addClass('blueButtons');// blue persists
 
                             var subSet = dragReorder.getContiguousRowSet(row);
                             if (subSet && subSet.length > 1) {
                                 offerSingles = false;
                                 if (subSet.length < compositeSet.length) {
                                     offerHideSubset = true;
                                     $( subSet ).addClass("greenRows"); // green persists
                                 }
                             }
                         }
                     }
                 }
 
                 // First option is hide sets
                 if (offerHideComposite) {
                     if (offerHideSubset) {
                         o = {};
                         o[blankImg + " hide track subset (green)"] = {
                                             onclick: rightClick.makeHitCallback('hideSet')};
                         menu.push(o);
                     }
 
                     o = {};
                     str = blankImg + " hide track set";
                     if (offerHideSubset)
                         str += " (blue)";
                     o[str] = {onclick: rightClick.makeHitCallback('hideComposite')};
                     menu.push(o);
                 }
 
                 // Second set of options: visibility for single track
                 if (offerSingles) {
                     if (offerHideComposite)
                         menu.push($.contextMenu.separator);
 
                     // XXXX what if select is not available (b/c trackControlsOnMain is off)?
                     // Move functionality to a hidden variable?
                     var select = $("select[name=" + escapeJQuerySelectorChars(id) + "]");
                     if (select.length > 1)  
                         // Not really needed if $('#hgTrackUiDialog').html(""); has worked
                         select =  [ $(select)[0] ];
                     var cur = $(select).val();
                     if (cur) {
                         $(select).children().each(function(index, o) {
                             var title = $(this).val();
                             str = blankImg + " " + title;
                             if (title === cur)
                                 str = selectedImg + " " + title;
                             o = {};
                             o[str] = {onclick: function (menuItemClicked, menuObject) {
                                         rightClick.hit(menuItemClicked, menuObject, title);
                                         return true;}};
                             menu.push(o);
                         });
                         done = true;
                     } else {
                         if (rec) {
                             // XXXX check current state from a hidden variable.
                             var visStrings = new Array("hide","dense","squish","pack","full");
                             for (var i in visStrings) {
                                 // use maxVisibility and change hgTracks so it can hide subtracks
                                 o = {};
                                 str = blankImg + " " + visStrings[i];
                                 if (rec.onlyVisibility) {
                                     if (visStrings[i] == "hide" || visStrings[i] === rec.onlyVisibility) {
 
                                         if (rec.localVisibility) {
                                             if (visStrings[i] === rec.localVisibility) {
                                                 str = selectedImg + " " + visStrings[i];
                                             }
                                         } else if (visStrings[i] === vis.enumOrder[rec.visibility]) {
                                             str = selectedImg + " " + visStrings[i];
                                         }
                                         o[str] = { onclick:
                                                     rightClick.makeHitCallback(visStrings[i])
                                                  };
                                         menu.push(o);
 
 
                                     }
                                 }
                                 else {
                                     if (rec.canPack
                                     || (visStrings[i] !== "pack" && visStrings[i] !== "squish")) {
                                         if (rec.localVisibility) {
                                             if (visStrings[i] === rec.localVisibility) {
                                                 str = selectedImg + " " + visStrings[i];
                                             }
                                         } else if (visStrings[i] === vis.enumOrder[rec.visibility]) {
                                             str = selectedImg + " " + visStrings[i];
                                         }
                                         o[str] = { onclick:
                                                     rightClick.makeHitCallback(visStrings[i])
                                                  };
                                         menu.push(o);
                                     }
                                 }
                             }
                             done = true;
                         }
                     }
                 }
 
                 if (done) {
                     o = {};
                     var any = false;
                     var title = rightClick.selectedMenuItem.title || "feature";
                     var maxLength = 60;
 
                     if ((isGene || isHgc || id === "wikiTrack") && href.indexOf("i=mergedItem") === -1) {
                         // Add "Open details..." item
                         var displayItemFunctions = false;
                         if (rec) {
                             if (rec.type.indexOf("wig") === 0
                             ||  rec.type.indexOf("bigWig") === 0
                             ||  id === "wikiTrack") {
                                 displayItemFunctions = false;
                             } else if (rec.type.indexOf("expRatio") === 0) {
                                 displayItemFunctions = title !== "zoomInMore";
                             } else {
                                 displayItemFunctions = true;
                             }
                             // For barChart mouseovers, replace title (which may be a category 
                             // name+value) with item name
                             if (rec.type.indexOf("barChart") === 0
                             || rec.type.indexOf("bigBarChart") === 0) {
                                 let a = /i=([^&]+)/.exec(href);
                                 if (a && a[1]) {
                                     title = a[1];
                                 }
                             }
                         }
 
                         // pick out the exon number from the mouseover text
                         // Probably should be a data-exonNum tag on the DOM element
                         var exonNum = rightClick.mouseOverToExon(title);
 
                         // remove special genePred exon mouseover html text
                         // CGIs now use HTML tags, e.g. "<b>Transcript:</b> ENST00000297261.7<br><b>Strand:</b>"
                         title = rightClick.mouseOverToLabel(decodeURIComponent(title));
 
                         if (title.length > maxLength) {
                             title = title.substring(0, maxLength) + "...";
                         }
 
                         if (isHgc) {
                             // For GTEx gene and UniProt mouseovers, replace title (which may be a tissue name) with 
                             // item (gene) name. Also need to unescape the urlencoded characters and the + sign.
                             let a = /i=([^&]+)/.exec(href);
                             if (a && a[1]) {
                                 title = decodeURIComponent(a[1].replace(/\+/g, " "));
                             }
                         }
 
                         if (displayItemFunctions) {
                             o[rightClick.makeImgTag("magnify.png") + " Zoom to " +  title] = {
                                 onclick: function(menuItemClicked, menuObject) {
                                             rightClick.hit(menuItemClicked, menuObject,
                                                     "selectWholeGene"); return true;
                                           }
                                 };
                             o[rightClick.makeImgTag("highlight.png") + " Highlight " + title] = 
                                 {   onclick: function(menuItemClicked, menuObject) {
                                         rightClick.hit(menuItemClicked, menuObject,
                                                        "highlightItem"); 
                                         return true;
                                     }
                                 };
                             //o[rightClick.makeImgTag("highlight.png") + " Highlight THIS item"] = 
                             //    {   onclick: function(menuItemClicked, menuObject) {
                             //            rightClick.hit(menuItemClicked, menuObject,
                             //                           "highlightThisItem"); 
                             //            return true;
                             //        }
                             //    };
                             if (rightClick.supportZoomCodon &&
                                     (rec.type.indexOf("genePred") !== -1 || rec.type.indexOf("bigGenePred") !== -1)) {
                                 // http://hgwdev-larrym.gi.ucsc.edu/cgi-bin/hgGene?hgg_gene=uc003tqk.2&hgg_prot=P00533&hgg_chrom=chr7&hgg_start=55086724&hgg_end=55275030&hgg_type=knownGene&db=hg19&c=chr7
                                 var name, table;
                                 var reg = new RegExp("hgg_gene=([^&]+)");
                                 let a = reg.exec(href);
                                 if (a && a[1]) {
                                     name = a[1];
                                     reg = new RegExp("hgg_type=([^&]+)");
                                     a = reg.exec(href);
                                     if (a && a[1]) {
                                         table = a[1];
                                     }
                                 } else {
                                     // http://hgwdev-larrym.gi.ucsc.edu/cgi-bin/hgc?o=55086724&t=55275031&g=refGene&i=NM_005228&c=chr7
                                     // http://hgwdev-larrym.gi.ucsc.edu/cgi-bin/hgc?o=55086713&t=55270769&g=wgEncodeGencodeManualV4&i=ENST00000455089&c=chr7
                                     reg = new RegExp("i=([^&]+)");
                                     a = reg.exec(href);
                                     if (a && a[1]) {
                                         name = a[1];
                                         reg = new RegExp("g=([^&]+)");
                                         a = reg.exec(href);
                                         if (a && a[1]) {
                                             table = a[1];
                                         }
                                     }
                                 }
                                 if (name && table) {
                                     if (exonNum > 0) {
                                         o[rightClick.makeImgTag("magnify.png")+" Zoom to this exon"] = {
                                             onclick: function(menuItemClicked, menuObject) {
                                                 $.ajax({
                                                         type: "GET",
                                                         url: "../cgi-bin/hgApi",
                                                         data: cart.varsToUrlData({ 'hgsid': getHgsid(), 'db': getDb(),
                                                                 'cmd': "exonToPos", 'num': exonNum,
                                                                 'table': table, 'name': name, 'chrom': hgTracks.chromName}),
                                                         trueSuccess: rightClick.handleZoomCodon,
                                                         success: catchErrorOrDispatch,
                                                         error: errorHandler,
                                                         cache: true
                                                     });
                                                 return true; }
                                         };
                                     o[rightClick.makeImgTag("magnify.png")+" Enter codon to zoom to..."] =
                                     {   onclick: function(menuItemClicked, menuObject) {
                                             rightClick.hit(menuItemClicked, menuObject,
                                                         "zoomCodon",
                                                         {name: name, table: table, 'chrom': hgTracks.chromName});
                                             return true;}
                                     };
                                         o[rightClick.makeImgTag("magnify.png")+" Enter exon to zoom to..."] =
                                         {   onclick: function(menuItemClicked, menuObject) {
                                                 rightClick.hit(menuItemClicked, menuObject,
                                                             "zoomExon",
                                                             {name: name, table: table, 'chrom': hgTracks.chromName});
                                                 return true;}
                                         };
                                     }
                                 }
                             }
                             o[rightClick.makeImgTag("dnaIcon.png")+" Get DNA for "+title] = {
                                 onclick: function(menuItemClicked, menuObject) {
                                     rightClick.hit(menuItemClicked, menuObject, "getDna");
                                     return true; }
                             };
                         }
                         o[rightClick.makeImgTag("bookOut.png")+
                                                 " Open details page in new window..."] = {
                             onclick: function(menuItemClicked, menuObject) {
                                 rightClick.hit(menuItemClicked, menuObject, "openLink");
                                 return true; }
                         };
                         any = true;
                     }
                     if (href && href.length  > 0 && href.indexOf("i=mergedItem") === -1) {
                         // Add "Show details..." item
                         if (title.indexOf("Click to alter ") === 0) {
                             // suppress the "Click to alter..." items
                         } else if (rightClick.selectedMenuItem.href.indexOf("cgi-bin/hgTracks")
                                                                                         !== -1) {
                             // suppress menu items for hgTracks links (e.g. Next/Prev map items).
                         } else {
                             var item;
                             if (title === "zoomInMore")
                                 // avoid showing menu item that says
                                 // "Show details for zoomInMore..." (redmine 2447)
                                 item = rightClick.makeImgTag("book.png") + " Show details...";
                             else
                                 item = rightClick.makeImgTag("book.png")+" Show details for "+
                                        title + "...";
                             o[item] = {onclick: function(menuItemClicked, menuObject) {
                                        rightClick.hit(menuItemClicked,menuObject,"followLink");
                                        return true; }
                             };
                             any = true;
                         }
                     }
                     if (any) {
                         menu.push($.contextMenu.separator);
                         menu.push(o);
                     }
                 }
             }
 
 
             menu.push($.contextMenu.separator);
             o = {};
             o[rightClick.makeImgTag("hiddenIcon.png") + " Hide all other tracks "] = {
                 onclick: function(menuItemClicked, menuObject) {
                     rightClick.hit(menuItemClicked, menuObject, "hideOthers");
                     return true; }
             };  
             menu.push(o);
 
             //o = {};
             //o[" Float "] = {
                 //onclick: function(menuItemClicked, menuObject) {
                     //rightClick.hit(menuItemClicked, menuObject, "float");
                     //return true; }
             //};  
             //menu.push(o);
 
             o = {};
             o[rightClick.makeImgTag("ab_up.gif") + " Move to top "] = {
                 onclick: function(menuItemClicked, menuObject) {
                     rightClick.hit(menuItemClicked, menuObject, "moveTop");
                     return true; }
             };  
             menu.push(o);
 
             o = {};
             o[rightClick.makeImgTag("ab_down.gif") + " Move to bottom "] = {
                 onclick: function(menuItemClicked, menuObject) {
                     rightClick.hit(menuItemClicked, menuObject, "moveBottom");
                     return true; }
             };  
             menu.push(o);
 
             if (rightClick.selectedMenuItem && rec) {
                 // Add cfg options at just shy of end...
                 o = {};
                 if (tdbIsLeaf(rec)) {
 
                     if (rec.configureBy !== 'none'
                     && (!tdbIsCompositeSubtrack(rec) || rec.configureBy !== 'clickThrough')) {
                         // Note that subtracks never do clickThrough because
                         // parentTrack cfg is the desired clickThrough
                         o[rightClick.makeImgTag("wrench.png")+" Configure "+rec.shortLabel] = {
                             onclick: function(menuItemClicked, menuObject) {
                                 rightClick.hit(menuItemClicked, menuObject, "hgTrackUi_popup");
                                 return true; }
                         };
 
                     }
                     if (rec.parentTrack) {
                         o[rightClick.makeImgTag("folderWrench.png")+" Configure "+
                           rec.parentLabel + " track set..."] = {
                             onclick: function(menuItemClicked, menuObject) {
                                 rightClick.hit(menuItemClicked,menuObject,"hgTrackUi_follow");
                                 return true; }
                           };
                     }
                 } else {
 
                     o[rightClick.makeImgTag("folderWrench.png")+" Configure "+rec.shortLabel +
                       " track set..."] = {
                         onclick: function(menuItemClicked, menuObject) {
                             rightClick.hit(menuItemClicked, menuObject, "hgTrackUi_follow");
                             return true; }
                       };
                 }
                 if (jQuery.floatMgr) {
                     o[(rightClick.selectedMenuItem.id === rightClick.floatingMenuItem ?
                             selectedImg : blankImg) + " float"] = {
                         onclick: function(menuItemClicked, menuObject) {
                             rightClick.hit(menuItemClicked, menuObject, "float");
                             return true; }
                     };
                 }
                 // add a toggle to hide/show the merged item(s)
                 mergeTrack = rightClick.selectedMenuItem.id + ".doMergeItems";
                 if (rec.hasOwnProperty(mergeTrack)) {
                     var hasMergedItems = rec[mergeTrack] === 1;
                     titleStr = rightClick.makeImgTag("wrench.png") + " ";
                     if (hasMergedItems) {
                         titleStr += "Show merged items";
                     } else {
                         titleStr += "Merge items that span the current region";
                     }
                     o[titleStr] = {onclick: function(menuItemClick, menuObject) {
                         rightClick.hit(menuItemClick, menuObject, "toggleMerge", rec);
                         return true; }
                     };
                 }
 
 		o[rightClick.makeImgTag("book.png")+" Track Description "+rec.shortLabel] = {
 		    onclick: function(menuItemClicked, menuObject) {
 			rightClick.hit(menuItemClicked, menuObject, "hgTrackUi_popup_description");
 			return true; }
 		    };
 
                 if (rec.defaultColor) {
                     o[rightClick.makeImgTag("palette.png")+" Change Track Color"] = {
                         onclick: function(menuItemClicked, menuObject) {
                             rightClick.hit(menuItemClicked, menuObject, "changeTrackColor");
                             return true; }
                     };
                 }
 
                 menu.push($.contextMenu.separator);
                 menu.push(o);
             }
 
             menu.push($.contextMenu.separator);
             if (hgTracks.highlight && rightClick.clickedHighlightIdx!==null) {
                 var currentlySeen = ($('#highlightItem').length > 0); 
                 o = {};
                 // Jumps to highlight when not currently seen in image
                 var text = (currentlySeen ? " Zoom" : " Jump") + " to highlight";
                 o[rightClick.makeImgTag("highlightZoom.png") + text] = {
                     onclick: rightClick.makeHitCallback('jumpToHighlight')
                 };
 
                 if ( currentlySeen ) {   // Remove only when seen
                     o[rightClick.makeImgTag("highlightRemove.png") + 
                                                                " Remove highlight"] = {
                         onclick: rightClick.makeHitCallback('removeHighlight')
                     };
                 }
                 menu.push(o);
             }
 
             if (rec.isCustomComposite)
                 {
                 // add delete from composite
                 }
             else if ((!rec.type.startsWith("wigMaf")) &&
                 (rec.type.startsWith("bigWig") || rec.type.startsWith("multiWig") || rec.type.startsWith("wig") || rec.type.startsWith("bedGraph"))) {
                 o = {};
                 o[" Make a New Collection with \"" + rec.shortLabel + "\""] = {
                     onclick: rightClick.makeHitCallback("newCollection")
                 };  
                 menu.push(o);
 
                 if (hgTracks.collections) {
                     var ii;
                     for(ii=0; ii < hgTracks.collections.length; ii++) {
                         o = {};
                         o[" Add to \"" + hgTracks.collections[ii].shortLabel + "\""] = {
                             onclick: rightClick.makeHitCallback("addCollection")
                         };  
                         menu.push(o);
                     }
                 }
                 menu.push($.contextMenu.separator);
             }
 
             // add sort options if this is a custom composite
             if (rec.isCustomComposite && tdbHasParent(rec) && tdbIsLeaf(rec)) {
 
                 o = {};
                 o[" Sort by Magnitude "] = {
                     onclick: function(menuItemClicked, menuObject) {
                         rightClick.hit(menuItemClicked, menuObject, "sortExp");
                         return true; }
                 };  
                 menu.push(o);
 
                 o = {};
                 o[" Sort by Similarity "] = {
                     onclick: function(menuItemClicked, menuObject) {
                         rightClick.hit(menuItemClicked, menuObject, "sortSim");
                         return true; }
                 };  
                 menu.push(o);
 
                 menu.push($.contextMenu.separator);
             }
 
             // Add view image at end
             o = {};
             o[rightClick.makeImgTag("eye.png") + " View image"] = {
                 onclick: function(menuItemClicked, menuObject) {
                     rightClick.hit(menuItemClicked, menuObject, "viewImg");
                     return true; }
             };
             menu.push(o);
 
             return menu;
         },
         {
             beforeShow: function(e) {
                 // console.log(mapItems[rightClick.selectedMenuItem]);
                 rightClick.selectedMenuItem = rightClick.findMapItem(e);
                 
                 // find the highlight that was clicked
                 var imageX = (imageV2.imgTbl[0].getBoundingClientRect().left) + imageV2.LEFTADD;
                 var xDiff = (e.clientX) - imageX;
                 var clickPos = genomePos.pixelsToBases(img, xDiff, xDiff+1, hgTracks.winStart, hgTracks.winEnd, false);
                 rightClick.clickedHighlightIdx = dragSelect.findHighlightIdxForPos(clickPos);
 
                 // XXXX? posting.blockUseMap = true;
                 return true;
             },
             hideTransition:'hide', // hideCallback fails if these are not defined.
             hideSpeed:10,
             hideCallback: function() {
                 $('p.btn.blueButtons').removeClass('blueButtons');
                 $('tr.trDraggable.greenRows').removeClass('greenRows');
             }
         });
         return;
     }
 };
 
   //////////////////////////////////
  //// external tools           ////
 //////////////////////////////////
 
 function showExtToolDialog() {
         /* show the 'send to external tool' dialog */
         // information about external tools is stored in the extTools global list
         // defined by a <script> at the end of the body
 
         // remove an existing dialog box
         var extToolDialog = $("#extToolDialog").remove();
 
         // construct the contents
         var htmlLines = ["<ul class='indent'>"];
         var winSize = hgTracks.winEnd - hgTracks.winStart;
         for (i = 0; i < extTools.length; i++) {
             var tool = extTools[i];
             var toolId = tool[0];
             var shortLabel = tool[1];
             var longLabel = tool[2];
             var maxSize = tool[3];
             if ((maxSize===0) || (winSize < maxSize))
                 {
                 var url = "hgTracks?hgsid="+getHgsid()+"&hgt.redirectTool="+toolId;
                 //var onclick = "$('#extToolDialog').dialog('close');";
                 //htmlLines.push("<li><a onclick="+'"'+onclick+'"'+"id='extToolLink' target='_BLANK' href='"+url+"'>"+shortLabel+"</a>: <small>"+longLabel+"</small></li>");
 		// onclick js code moved to jsInline
                 htmlLines.push("<li><a class='extToolLink2' target='_BLANK' href='"+url+"'>"+shortLabel+"</a>: <small>"+longLabel+"</small></li>");
                 }
             else
                 {
                 note = "<br><b>Needs zoom to &lt; "+maxSize/1000+" kbp.</b></small></span></li>";
                 htmlLines.push('<li><span style="color:grey">'+shortLabel+": <small>"+longLabel+note);
                 }
         }
         htmlLines.push("</ul>");
         content = htmlLines.join("");
             
         var title = hgTracks.chromName + ":" + (hgTracks.winStart+1) + "-" + hgTracks.winEnd;
         if (hgTracks.nonVirtPosition)
             title = hgTracks.nonVirtPosition;
         title += " on another website";
         $("body").append("<div id='extToolDialog' title='"+title+"'><p>" + content + "</p>");
 
 	$('a.extToolLink2').on("click", function(){$('#extToolDialog').dialog('close');});
 
         // copied from the hgTrackUi function below
         var popMaxHeight = ($(window).height() - 40);
         var popMaxWidth  = ($(window).width() - 40);
         var popWidth     = 600;
         if (popWidth > popMaxWidth)
             popWidth = popMaxWidth;
 
         // also copied from the hgTrackUi code below
         $('#extToolDialog').dialog({
             resizable: false,
             height: popMaxHeight,
             width: popWidth,
             minHeight: 200,
             minWidth: 600,
             maxHeight: popMaxHeight,
             maxWidth: popMaxWidth,
             modal: true,
             closeOnEscape: true,
             autoOpen: false,
             buttons: { "Close": function() {
                     $(this).dialog("close");
             }},
         });
         
         $('#extToolDialog').dialog('open');
 }
 
   /////////////////////////////////////////////////////////
  //// popupHgt popup for hgTracks  (aka modal dialog) ////
 /////////////////////////////////////////////////////////
 var popUpHgt = {
 
     whichHgTracksMethod: "",
     title: "",
 
     cleanup: function ()
     {  // Clean out the popup box on close
         if ($('#hgTracksDialog').html().length > 0 ) {
             // clear out html after close to prevent problems caused by duplicate html elements
             $('#hgTracksDialog').html("");
             popUpHgt.whichHgTracksMethod = "";
             popUpHgt.title = "";
         }
     },
 
     _uiDialogRequest: function (whichHgTracksMethod)
     { // popup cfg dialog
         popUpHgt.whichHgTracksMethod = whichHgTracksMethod;
         var myLink = "../cgi-bin/hgTracks?hgsid=" + getHgsid() + "&db=" + getDb();
         if (popUpHgt.whichHgTracksMethod === "multi-region config") {
             myLink += "&hgTracksConfigMultiRegionPage=multi-region";
             popUpHgt.title = "Configure Multi-Region View";
         }
 
         $.ajax({
                     type: "GET",
                     url: cart.addUpdatesToUrl(myLink),
                     dataType: "html",
                     trueSuccess: popUpHgt.uiDialog,
                     success: catchErrorOrDispatch,
                     error: errorHandler,
                     cache: false
                 });
     },
 
     hgTracks: function (whichHgTracksMethod)
     {   // Launches the popup but shields the ajax with a waitOnFunction
         waitOnFunction( popUpHgt._uiDialogRequest, whichHgTracksMethod);
     },
 
     uiDialogOk: function (popObj)
     {   // When popup closes with ok
 
     },
 
     uiDialog: function (response, status)
     {
     // Take html from hgTracks and put it up as a modal dialog.
 
         // make sure all links (e.g. help links) open up in a new window
         response = response.replace(/<a /ig, "<a target='_blank' ");
 
         var cleanHtml = response;
         //cleanHtml = stripCspHeader(cleanHtml,false); // DEBUG msg with true
         cleanHtml = stripJsFiles(cleanHtml,false);   // DEBUG msg with true
         cleanHtml = stripCssFiles(cleanHtml,false);  // DEBUG msg with true
         //cleanHtml = stripJsEmbedded(cleanHtml,false);// DEBUG msg with true // Obsolete by CSP2?
         var nonceJs = {};
         cleanHtml = stripCSPAndNonceJs(cleanHtml, false, nonceJs); // DEBUG msg with true
 
         cleanHtml = stripMainMenu(cleanHtml,false);  // DEBUG msg with true
 
         $('#hgTracksDialog').html("<div id='pop' style='font-size:.9em;'>"+ cleanHtml +"</div>");
 
         appendNonceJsToPage(nonceJs);
 
 
         // Strategy for popups with js:
         // - jsFiles and CSS should not be included in html.  Here they are shluped out.
         // - The resulting files ought to be loadable dynamically (with getScript()), 
         //   but this was not working nicely with the modal dialog
         //   Therefore include files must be included with hgTracks CGI !
         // - embedded js should not be in the popup box.
         // - Somethings should be in a popup.ready() function, and this is emulated below, 
         //   as soon as the cleanHtml is added
         //   Since there are many possible popup cfg dialogs, the ready should be all inclusive.
 
         // -- popup.ready() -- Here is the place to do things that might otherwise go
         //                     into a $('#pop').ready() routine!
 
         // Searching for some semblance of size suitability
         var popMaxHeight = ($(window).height() - 40);
         var popMaxWidth  = ($(window).width() - 40);
         var popWidth     = 700;
         if (popWidth > popMaxWidth)
             popWidth = popMaxWidth;
 
         $('#hgTracksDialog').dialog({
             ajaxOptions: {
                 // This doesn't work
                 cache: true
             },
             resizable: false,
             height: 'auto',
             width: popWidth,
             minHeight: 200,
             minWidth: 400,
             maxHeight: popMaxHeight,
             maxWidth: popMaxWidth,
             modal: true,
             closeOnEscape: true,
             autoOpen: false,
             buttons: { 
                 /* NOT NOW
                 "OK": function() {
                     popUpHgt.uiDialogOk($('#pop'));
                     $(this).dialog("close");
                 }
                 */
             },
             // popup.ready() doesn't seem to work in open.
 
             //create: function () { 
                 //$(this).siblings().find(".ui-dialog-title").html('<span style="">Test </span>'); 
                 //$(this).siblings().find(".ui-dialog-title").html('<span style="       visibility: hidden;"></span>'); 
             //},
             
             open: function () {
                 $('#hgTracksDialog').find('.filterBy,.filterComp').each(
                     function(i) {  // ddcl.js is dropdown checklist lib support
                         if ($(this).hasClass('filterComp'))
                             ddcl.setup(this);
                         else
                             ddcl.setup(this, 'noneIsAll');
                     }
                 );
 
             },
 
             close: function() {
                 popUpHgt.cleanup();
             }
         });
         
     
         $('#hgTracksDialog').dialog('option' , 'title' , popUpHgt.title);
         $('#hgTracksDialog').dialog('open');
 
         // Initialize autocomplete for alt/fix sequence names
         autocompleteCat.init($('#singleAltHaploId'),
                              { baseUrl: 'hgSuggest?db=' + getDb() + '&type=altOrPatch&prefix=',
                                enterSelectsIdentical: true });
         // Make multi-region option inputs select their associated radio buttons
         $('input[name="emPadding"]').on("keyup", function() {
             $('#virtModeType[value="exonMostly"]').prop('checked', true); });
         $('input[name="gmPadding"]').on("keyup", function() {
             $('#virtModeType[value="geneMostly"]').prop('checked', true); });
         $('#multiRegionsBedInput').on("keyup", function() {
             $('#virtModeType[value="customUrl"]').prop('checked', true); });
         $('#singleAltHaploId').on("keyup", function() {
             $('#virtModeType[value="singleAltHaplo"]').prop('checked', true); });
 
         // Customize message based on current mode
         var msg = "<em>Select a multi-region viewing mode below.</em>";  // default
         if (hgTracks.virtModeType) {
             msg = "The display is currently in <em><b> ";
             var mode = "unknown";
             if (hgTracks.virtModeType === "exonMostly") {
                 msg += "exon";
             } else if (hgTracks.virtModeType == "geneMostly") {
                 msg += "gene";
             } else if (hgTracks.virtModeType == "customUrl") {
                 msg += "custom regions";
             } else if (hgTracks.virtModeType == "singleAltHaplo") {
                 msg += "alt haplotype";
             } 
             msg += " </b></em> view. &nbsp;&nbsp;"
                 + "<em>Select a different viewing mode, or exit and return to normal view</em>.";
         }
         $('#multiRegionConfigStatusMsg').html(msg);
 
         // Make 'Cancel' button close dialog
         $('input[name="Cancel"]').on("click", function() {
             $('#hgTracksDialog').dialog('close');
         });
     }
 };
 
 var popUpHgcOrHgGene = {
 
     whichHgcMethod: "", // either hgc or hgGene or whatever else
     table: "", // the g= parameter
     title: "",
     saveAllVars: null, // when a click brings up hgTrackUi or something else with a form
     loadingId: null, // the id of the loading overlay
     href: "", // the link we're populating the pop up with
 
     cleanup: function ()
     {  // Clean out the popup box on close
         if ($('#hgcDialog').html().length > 0 ) {
             // clear out html after close to prevent problems caused by duplicate html elements
             $('#hgcDialog').html("");
             popUpHgcOrHgGene.whichHgcMethod = "";
             popUpHgcOrHgGene.title = "";
             popUpHgcOrHgGene.table = "";
             if (loadingId) {
                 hideLoadingImage(loadingId);
             }
         }
     },
 
     _uiDialogRequest: function (table, href)
     { // popup cfg dialog
         let cgi = parseUrl(href).pathInfo.split('/')[1];
         popUpHgcOrHgGene.whichHgcMethod = cgi;
         // the table name gets passed in
         popUpHgcOrHgGene.table = table;
         popUpHgcOrHgGene.title  = hgTracks.trackDb[table].shortLabel;
         popUpHgcOrHgGene.href = href;
         var rec = hgTracks.trackDb[table];
         if (popUpHgcOrHgGene.whichHgcMethod === "hgTrackUi" && rec && rec.configureBy) {
             if (rec.configureBy === 'none')
                 return;
             else if (rec.configureBy === 'clickThrough') {
                 window.location = cart.addUpdatesToUrl(href);
                 return;
             }  // default falls through to configureBy popup
         }
         loadingId = showLoadingImage("imgTbl");
         $.ajax({
                     type: "GET",
                     url: cart.addUpdatesToUrl(href),
                     dataType: "html",
                     trueSuccess: popUpHgcOrHgGene.uiDialog,
                     success: catchErrorOrDispatch,
                     error: errorHandler,
                     loadingId: loadingId,
                     cache: true
                 });
     },
 
     hgc: function (table, url)
     {   // Launches the popup but shields the ajax with a waitOnFunction
         if (typeof doHgcInPopUp !== 'undefined' && doHgcInPopUp === true) {
             waitOnFunction(popUpHgcOrHgGene._uiDialogRequest, table, url);
         } else {
             window.location = cart.addUpdatesToUrl(url);
         }
     },
 
     uiDialogOk: function (trackName)
     {
         // See popUp.uiDialogOk for a detailed explanation of the below vis-setting
         // code
         var rec = hgTracks.trackDb[trackName];
         var subtrack = tdbIsSubtrack(rec) ? trackName : undefined;  // subtrack vis rules differ
         var allVars = getAllVars($('#hgcDialog'), subtrack );
         var changedVars = varHashChanges(allVars,popUpHgcOrHgGene.saveAllVars);
 
         // special case these hprc tracks that allow you to turn on different tracks
         if (trackName.startsWith("hprcDeletions") || trackName.startsWith("hprcInserts") ||
                 trackName.startsWith("hprcArr") || trackName.startsWith("hprcDouble")) {
             trackName = "chainHprc";
         }
         var newVis = changedVars[trackName];
         // subtracks do not have "hide", thus '[]'
         var hide = (newVis && (newVis === 'hide' || newVis === '[]'));
         if ( ! normed($('#imgTbl')) ) { // On findTracks or config page
             if (objNotEmpty(changedVars))
                 cart.setVarsObj(changedVars);
         }
         else {  // On image page
             if (hide) {
                 if (objNotEmpty(changedVars))
                     cart.setVarsObj(changedVars);
                 $(document.getElementById('tr_' + trackName)).remove();
                 imageV2.afterImgChange(true);
                 cart.updateSessionPanel();
             } else {
                 // Keep local state in sync if user changed visibility
                 if (newVis) {
                     vis.update(trackName, newVis);
                 }
                 if (objNotEmpty(changedVars)) {
                     var urlData = cart.varsToUrlData(changedVars);
                     if (imageV2.mapIsUpdateable) {
                         imageV2.requestImgUpdate(trackName,urlData,"fake");
                     } else {
                         window.location = "../cgi-bin/hgTracks?" + urlData + "&hgsid=" + getHgsid();
                     }
                 }
             }
         }
     },
 
     uiDialog: function (response, status)
     {
     // Take html from hgc/hgGene and put it up as a modal dialog.
 
         // make sure all links (e.g. help links) open up in a new window
         //response = response.replace(/<a /ig, "<a target='_blank' ");
 
         var cleanHtml = response;
         cleanHtml = stripJsFiles(cleanHtml,false);   // DEBUG msg with true
         cleanHtml = stripCssFiles(cleanHtml,false);  // DEBUG msg with true
         var nonceJs = {};
         cleanHtml = stripCSPAndNonceJs(cleanHtml, false, nonceJs); // DEBUG msg with true
         cleanHtml = stripMainMenu(cleanHtml, false, nonceJs); // DEBUG msg with true
 
         // this is dumb but all relative links need to be stripped of _target = blank so we
         // can jump down the page rather than out to a new tab
         cleanHtml = cleanHtml.replace(/_target ?= ?["']blank["']/g,"");
 
         $('#hgcDialog').html("<div id='pop' style='font-size:1.1em;'>"+ cleanHtml +"</div>");
         appendNonceJsToPage(nonceJs);
         let subtrack = tdbIsSubtrack(hgTracks.trackDb[popUpHgcOrHgGene.table]) ? popUpHgcOrHgGene.table : "";
         popUpHgcOrHgGene.saveAllVars = getAllVars( $('#hgcDialog'), subtrack );
 
 
 
         // Strategy for popups with js:
         // - jsFiles and CSS should not be included in html.  Here they are shluped out.
         // - The resulting files ought to be loadable dynamically (with getScript()),
         //   but this was not working nicely with the modal dialog
         //   Therefore include files must be included with hgc CGI !
         // - embedded js should not be in the popup box.
         // - Somethings should be in a popup.ready() function, and this is emulated below,
         //   as soon as the cleanHtml is added
         //   Since there are many possible popup cfg dialogs, the ready should be all inclusive.
 
         // -- popup.ready() -- Here is the place to do things that might otherwise go
         //                     into a $('#pop').ready() routine!
 
         // Searching for some semblance of size suitability
         var popMaxHeight = (window.innerHeight - (window.innerHeight * 0.15)); // make 15% of the bottom of the screen still visible
         var popMaxWidth     = (window.innerWidth - (window.innerWidth * 0.1)); // take up 90% of the window
 
         // Create dialog buttons for UI popup
         // this could be more buttons later
         var uiDialogButtons = {};
         uiDialogButtons.Close = function() {
             // if there was a form to submit, submit it:
             popUpHgcOrHgGene.uiDialogOk(popUpHgcOrHgGene.table);
             $(this).dialog("close");
         };
 
         let openIcon = "<a class='dialogNewWindowIcon' target='_blank' href='" + popUpHgcOrHgGene.href + "'><svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 512 512'><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z'/></svg></a>";
         let titleText = hgTracks.trackDb[popUpHgcOrHgGene.table].shortLabel + " (Item Details)" + openIcon;
 
         $('#hgcDialog').dialog({
             resizable: false,
             height: popMaxHeight,
             width: popMaxWidth,
             minHeight: 200,
             minWidth: 400,
             modal: true,
             closeOnEscape: true,
             autoOpen: false,
             buttons: uiDialogButtons,
 
             open: function (event) {
                 // fix popup to a location -- near the top and somewhat centered on the browser image
                 $(event.target).parent().css('position', 'fixed');
                 $(event.target).parent().css('top', '10%');
                 $('#hgcDialog').find('.filterBy,.filterComp').each(
                     function(i) {  // ddcl.js is dropdown checklist lib support
                         if ($(this).hasClass('filterComp'))
                             ddcl.setup(this);
                         else
                             ddcl.setup(this, 'noneIsAll');
                     }
                 );
             },
 
             close: function() {
                 popUpHgcOrHgGene.cleanup();
             },
             title: function() {
                 this.innerHTML = titleText;
             }
         });
 
         // override the _title function to show custom html:
         //$('#hgcDialog').dialog('option' , 'title', titleText);
         $('#hgcDialog').dialog('open');
         // if there is anything on the hgc page that would normally run
         // on document.ready, run it now
         hgc.initPage();
         document.addEventListener('click', e => {
             // if we clicked outside of the pop up, close the popup
             // Use contains() instead of coordinates because native browser
             // dropdowns (select elements) render outside the dialog bounds
             let dialogEl = document.getElementById("hgcDialog");
             if (!dialogEl) return;
             let dialogContainer = dialogEl.parentElement;
             if (dialogContainer && !dialogContainer.contains(e.target)) {
                 $("#hgcDialog").dialog("close");
             }
         });
 
         // Customize message based on current mode
         // Make 'Cancel' button close dialog
         $('input[name="Cancel"]').on("click", function() {
             $('#hgcDialog').dialog('close');
         });
     }
 };
 
 // Show the exported data hubs popup
 function showExportedDataHubsPopup() {
     let popUp = document.getElementById("exportedDataHubsPopup");
     title = popUp.title;
     if (title.length === 0 && popUp.getAttribute("mouseovertext") !== "") {title = popUp.getAttribute("mouseovertext");}
     $('#exportedDataHubsPopup').dialog({resizable: false, width:'650', title: title});
 }
 
 // Show the recommended track sets popup
 function showRecTrackSetsPopup() {
     // Update links with current position
     $('a.recTrackSetLink').each(function() {
         var $this = $(this);
         var link = $this.attr("href").replace(/position=.*/, 'position=');
         $this.attr("href", link + genomePos.original);
     });
     $('#recTrackSetsPopup').dialog({resizable: false, width:'650'});
 }
 
 function removeSessionPanel() {
     $('#recTrackSetsPanel').remove();
     setCartVar("hgS_otherUserSessionLabel", "off", null, false);
 }
 
 // A function to show the keyboard help dialog box, bound to ? and called from the menu bar
 function showHotkeyHelp() {
     $("#hotkeyHelp").dialog({width:'600', resizable: false});
 }
 
 // A function to add an entry for the keyboard help dialog box to the menubar 
 // and add text that indicates the shortcuts to many static menubar items as suggested by good old IBM CUA/SAA
 function addKeyboardHelpEntries() {
     var html = '<li><a id="keybShorts" title="List all possible keyboard shortcuts" href="#">Keyboard Shortcuts</a><span class="shortcut">?</span></li>';
     $('#help .last').before(html);
     $("#keybShorts").on("click", function(){showHotkeyHelp();} );
 
     html = '<span class="shortcut">s s</span>';
     $('#sessionsMenuLink').after(html);
 
     html = '<span class="shortcut">p s</span>';
     $('#publicSessionsMenuLink').after(html);
 
     html = '<span class="shortcut">c t</span>';
     $('#customTracksMenuLink').after(html);
 
     html = '<span class="shortcut">t c</span>';
     $('#customCompositeMenuLink').after(html);
 
     html = '<span class="shortcut">t h</span>';
     $('#trackHubsMenuLink').after(html);
 
     html = '<span class="shortcut">t b</span>';
     $('#blatMenuLink').after(html);
 
     html = '<span class="shortcut">t t</span>';
     $('#tableBrowserMenuLink').after(html);
 
     html = '<span class="shortcut">t i</span>';
     $('#ispMenuLink').after(html);
 
     html = '<span class="shortcut">t s</span>';
     $('#trackSearchMenuLink').after(html);
 
     html = '<span class="shortcut">c f</span>';
     $('#configureMenuLink').after(html);
 
     html = '<span class="shortcut">c r</span>';
     $('#cartResetMenuLink').after(html);
 }
 
 // A function for the keyboard shortcut:
 // View DNA
 function gotoGetDnaPage() {
     var position = hgTracks.chromName+":"+hgTracks.winStart+"-"+hgTracks.winEnd;
     if (hgTracks.virtualSingleChrom && (pos.chrom.search("multi") === 0)) {
         position = genomePos.get().replace(/,/g,'');
     } else if (hgTracks.windows && hgTracks.nonVirtPosition) {
         position = hgTracks.nonVirtPosition;
     }
     var pos = parsePosition(position);
     if (pos) {
         var url = "hgc?hgsid="+getHgsid()+"&g=getDna&i=mixed&c="+pos.chrom+"&l="+pos.start+"&r="+pos.end+"&db="+getDb();
         window.location.href = url;
     }
     return false;
 }
 
 function hubQuickConnect() {
     /* open a little dialog window that accepts a URL to a hub.txt file */
     const dialogHtml = 
         '<div id="hubQuickDialog" title="Track hub quick connect">'+
         '<b>Track hub URL:</b><br>'+
         '<form action="hgTracks" method="GET">'+
         '<input type="text" name="hubUrl" maxlength="1024" size="60" />'+
         '<input type="hidden" hgsid="'+getHgsid()+'"/>'+
         '<input type="submit" value="OK" />'+
         '</form>'+
         'To connect to public hubs, more options when connecting via URL or hub development tools, select from the menu My Data &gt; Track Hubs.'+
         '</div>';
     $('body').append(dialogHtml);
 
     // Initialize the dialog
     $("#hubQuickDialog").dialog({
         autoOpen: false,
         width: 600,
         height: 400,
         modal: true,
         // not showing a Cancel button, the standard X should be sufficient and the user can always use Esc
     });
 
     // Show dialog
     $("#hubQuickDialog").dialog("open");
 }
 
 function gotoConfigurePage() {
     let inp = $('input[name="hgTracksConfigPage"]');
     if (inp.length) {
         inp.submit().click();
     } else {
         // form a url to go there manually
         let url = window.location.href;
         url += "&hgTracksConfigPage=configure";
         window.location.assign(url);
     }
 }
 
 function onHideAllGroupButtonClick(ev) {
     /* called when 'hide all' button is clicked on group blue bar menu */
     let groupName = ev.target.getAttribute("data-group-name");
     let visSelects = document.querySelectorAll(`tr[id^="${groupName}"] select`);
     let trackNames = [];
     let values = [];
     for (let sel of visSelects) {
         sel.value = "hide";
         trackNames.push(sel.name);
         values.push("hide");
     }
     cart.setVars(trackNames, values, null, false);
     imageV2.fullReload();
 }
 
 // A function for the keyboard shortcuts "zoom to x bp"
 function zoomTo(zoomSize) {
     var flankSize = Math.floor(zoomSize/2);
     var posStr = genomePos.get();
     posStr = posStr.replace("virt:", "multi:");
     var pos = parsePosition(posStr);
     var mid = pos.start+(Math.floor((pos.end-pos.start)/2));
     var newStart = Math.max(mid - flankSize, 0);
     var newEnd = mid + flankSize - 1;
     var newPos = genomePos.setByCoordinates(pos.chrom, newStart, newEnd);
     if (hgTracks.virtualSingleChrom && (newPos.search("multi:")===0))
         newPos = genomePos.disguisePosition(newPosition); // DISGUISE?
     imageV2.navigateInPlace("db=" + getDb() + "&position="+newPos, null, true);
 }
 
 // A function for the keyboard shortcuts "highlight add/clear/new"
 function highlightCurrentPosition(mode) {
     var pos = genomePos.get();
     if (mode=="new")
         dragSelect.highlightThisRegion(pos, false);
     else if (mode=="add")
         dragSelect.highlightThisRegion(pos, true);
     else {
         hgTracks.highlight = "";
         var cartSettings = {'highlight': ""};
         cart.setVarsObj(cartSettings);
         imageV2.drawHighlights();
     }
 }
 
 function onTrackDelIconClick (ev) {
     /* delete custom track if user clicks its trash icon */
     // https://genome.ucsc.edu/cgi-bin/hgCustom?hgsid=1645697744_i0Yp2Di71NytSDdb6r0vUbupIvKO&hgct_do_delete=delete&hgct_del_ct_UserTrack_3545=on
     var divEl = ev.target.closest("div"); // must use .closest(), as user can click on either the SVG or the DIV space.
     var trackName = divEl.getAttribute("data-track");
     var hgsid = getHgsid();
     var url = 'hgCustom?hgsid='+hgsid+'&hgct_do_delete=delete&hgct_del_'+trackName+'=on';
     xhttp = new XMLHttpRequest();
     // this cannot be asyncronous, as users can click quickly here and the hgCustom calls above cannot run in parallel
     // since we store custom tracks as a text file, not mysql tables
     xhttp.open("GET", url, false);
     xhttp.send();
     divEl.closest("td").remove();
 }
 
 function onQuickLiftDelIconClick (ev) {
     /* Remove this track's stanza from the quickLift hub in trash, and
      * remove all rows referencing it from the page (it can appear both in
      * its hub group and in the Visible Tracks group). */
     var divEl = ev.target.closest("div");
     var trackName = divEl.getAttribute("data-track");
     var sourceDb = divEl.getAttribute("data-sourcedb");
     var hgsid = getHgsid();
     var url = 'hgTrackUi?hgsid=' + hgsid +
               '&hgTrackUi_op=quickLiftRemove' +
               '&g=' + encodeURIComponent(trackName) +
               '&qlSourceDb=' + encodeURIComponent(sourceDb);
     var xhttp = new XMLHttpRequest();
     // synchronous: the hub file is a shared text file, parallel rewrites would race
     xhttp.open("GET", url, false);
     xhttp.send();
     var selector = 'div.quickLiftDelIcon[data-track="' + trackName + '"]';
     document.querySelectorAll(selector).forEach(function(d) {
         var td = d.closest("td");
         if (td) td.remove();
     });
 }
 
 
   //////////////////////////////////
  //// popup (aka modal dialog) ////
 //////////////////////////////////
 var popUp = {
 
     trackName:            "",
     trackDescriptionOnly: false,
     saveAllVars:          null,
 
     cleanup: function ()
     {  // Clean out the popup box on close
         if ($('#hgTrackUiDialog').html().length > 0 ) {
             // clear out html after close to prevent problems caused by duplicate html elements
             $('#hgTrackUiDialog').html("");
             popUp.trackName = ""; //set to defaults
             popUp.trackDescriptionOnly = false;
             popUp.saveAllVars = null;
         }
     },
 
     _uiDialogRequest: function (trackName,descriptionOnly)
     { // popup cfg dialog
         popUp.trackName = trackName;
         var myLink = "../cgi-bin/hgTrackUi?g=" + trackName + "&hgsid=" + getHgsid() +
                      "&db=" + getDb();
         popUp.trackDescriptionOnly = descriptionOnly;
         if (popUp.trackDescriptionOnly)
             myLink += "&descriptionOnly=1";
 
         var rec = hgTracks.trackDb[trackName];
         if (!descriptionOnly && rec && rec.configureBy) {
             if (rec.configureBy === 'none')
                 return;
             else if (rec.configureBy === 'clickThrough') {
                 jQuery('body').css('cursor', 'wait');
                 window.location = cart.addUpdatesToUrl(myLink);
                 return;
             }  // default falls through to configureBy popup
         }
         myLink += "&ajax=1";
         $.ajax({
                     type: "GET",
                     url: cart.addUpdatesToUrl(myLink),
                     dataType: "html",
                     trueSuccess: popUp.uiDialog,
                     success: catchErrorOrDispatch,
                     error: errorHandler,
                     cmd: rightClick.selectedMenuItem,
                     cache: false
                 });
     },
 
     hgTrackUi: function (trackName,descriptionOnly)
     {   // Launches the popup but shields the ajax with a waitOnFunction
         waitOnFunction( popUp._uiDialogRequest, trackName, descriptionOnly );  
     },
 
     uiDialogOk: function (popObj, trackName)
     {   // When hgTrackUi Cfg popup closes with ok, then update cart and refresh parts of page
         var rec = hgTracks.trackDb[trackName];
         var subtrack = tdbIsSubtrack(rec) ? trackName : undefined;  // subtrack vis rules differ
         // For unknown reasons IE8 fails to find $('#pop'), occasionally
         var allVars = getAllVars($('#hgTrackUiDialog'), subtrack );
         //  Since 2010, when Tim changed this to only report changed vars instead of all form vars,
         // it no longer matches the behavior of hgTrackUi when called the non-popup way.
         // A few places in the hgTracks C code have been patched to explicitly set the cart vars
         // for some default checkboxes. So now this still means that QA must explicitly test
         // both paths through the code: as a separate full hgTracksUi page, and as a popup config window.
         // hgTrackUi always sends in its form all variables causing them to be explicitly set in the cart.  
         // The popup only sends things that have changed, causing those changes to appear explicitly
         // and even then it skips over disabled form items.
         // There is some C code that was written before the popup config, 
         // and it expects all the variables are set or none are.
         // If just some are set, and not the default ones, it gets confused.
         // I fixed just such a bug in the code that handles refSeq.
         // See commit daf92c0f9eb331ea60740e6802aabd241d4be363.
         var changedVars = varHashChanges(allVars,popUp.saveAllVars);
          // DEBUG Examples:
         //debugDumpFormCollection("saveAllVars", popUp.saveAllVars);
         //debugDumpFormCollection("allVars", allVars);
         //debugDumpFormCollection("changedVars", changedVars);
         var newVis = changedVars[trackName];
         // subtracks do not have "hide", thus '[]'
         var hide = (newVis && (newVis === 'hide' || newVis === '[]'));  
         if ( ! normed($('#imgTbl')) ) { // On findTracks or config page
             if (objNotEmpty(changedVars))
                 cart.setVarsObj(changedVars);
         }
         else {  // On image page
             if (hide) {
                 if (objNotEmpty(changedVars))
                     cart.setVarsObj(changedVars);
                 $(document.getElementById('tr_' + trackName)).remove();
                 imageV2.afterImgChange(true);
                 cart.updateSessionPanel();
             } else {
                 // Keep local state in sync if user changed visibility
                 if (newVis) {
                     vis.update(trackName, newVis);
                 }
                 if (objNotEmpty(changedVars)) {
                     var urlData = cart.varsToUrlData(changedVars);
                     if (imageV2.mapIsUpdateable) {
                         imageV2.requestImgUpdate(trackName,urlData,"");
                     } else {
                         window.location = "../cgi-bin/hgTracks?" + urlData + "&hgsid=" + getHgsid();
                     }
                 }
             }
         }
     },
 
     uiDialog: function (response, status)
     {
     // Take html from hgTrackUi and put it up as a modal dialog.
 
         // make sure all links (e.g. help links) open up in a new window
         response = response.replace(/<a /ig, "<a target='_blank' ");
 
         var cleanHtml = response;
         cleanHtml = stripJsFiles(cleanHtml,false);   // DEBUG msg with true
         cleanHtml = stripCssFiles(cleanHtml,false);  // DEBUG msg with true
         //cleanHtml = stripJsEmbedded(cleanHtml,false);// DEBUG msg with true // OBSOLETE BY CSP2?
 	var nonceJs = {};
 	cleanHtml = stripCSPAndNonceJs(cleanHtml, false, nonceJs); // DEBUG msg with true
 
 	//alert(cleanHtml);  // DEBUG REMOVE
         $('#hgTrackUiDialog').html("<div id='pop' style='font-size:.9em;'>"+ cleanHtml +"</div>");
 
 	appendNonceJsToPage(nonceJs);
 
         // Strategy for popups with js:
         // - jsFiles and CSS should not be included in html.  Here they are shluped out.
         // - The resulting files ought to be loadable dynamically (with getScript()), 
         //   but this was not working nicely with the modal dialog
         //   Therefore include files must be included with hgTracks CGI !
         // - embedded js should not be in the popup box.
         // - Somethings should be in a popup.ready() function, and this is emulated below, 
         //   as soon as the cleanHtml is added
         //   Since there are many possible popup cfg dialogs, the ready should be all inclusive.
 
         if ( ! popUp.trackDescriptionOnly ) {
             // If subtrack then vis rules differ
             var subtrack = tdbIsSubtrack(hgTracks.trackDb[popUp.trackName]) ? popUp.trackName :"";  
             // Saves the original vars (and vals) that may get changed by the popup cfg.
             popUp.saveAllVars = getAllVars( $('#hgTrackUiDialog'), subtrack ); 
 
             // -- popup.ready() -- Here is the place to do things that might otherwise go
             //                     into a $('#pop').ready() routine!
         }
 
         // Searching for some semblance of size suitability
         var popMaxHeight = ($(window).height() - 40);
         var popMaxWidth  = ($(window).width() - 40);
         var popWidth     = 640;
         if (popWidth > popMaxWidth)
             popWidth = popMaxWidth;
 
         // Create dialog buttons for UI popup
         var uiDialogButtons = {};
         if (popUp.trackDescriptionOnly) {
             uiDialogButtons.OK = function() {
                 $(this).dialog("close");
             };
         } else {
             uiDialogButtons.Apply = function() {
                  popUp.uiDialogOk($('#pop'), popUp.trackName);
                  // thanks to JAT for this cleverness to keep button functioning
                  popUp.saveAllVars = getAllVars( $('#hgTrackUiDialog'), popUp.trackName);
                  if (popUp.saveAllVars[popUp.trackName+"_sel"] === 0) {       // hide
                     // NOTE: once hidden, can't be unhidden by popup, so shut it down
                     $(this).dialog("close");
                 }
             };
             uiDialogButtons.OK = function() {
                 popUp.uiDialogOk($('#pop'), popUp.trackName);
                 $(this).dialog("close");
             };
         }
 
         $('#hgTrackUiDialog').dialog({
             resizable: true,               // Let description scroll vertically
             height: (popUp.trackDescriptionOnly ? popMaxHeight : 'auto'),
             width: popWidth,
             minHeight: 200,
             minWidth: 400,
             maxHeight: popMaxHeight,
             maxWidth: popMaxWidth,
             modal: true,
             closeOnEscape: true,
             autoOpen: false,
             buttons: uiDialogButtons,
 
             // popup.ready() doesn't seem to work in open.
             open: function(event) {
                 // fix popup to a location -- near the top and somewhat centered on the browser image
                 $(event.target).parent().css('position', 'fixed');
                 $(event.target).parent().css('top', '18%');
                 if (popUp.trackDescriptionOnly) {
                     $(event.target).parent().css('left', '15%');
                 } else {
                     $(event.target).parent().css('left', '30%');
                 }
                 var offsetTop = $(event.target).parent()[0].offsetTop;
                 // from popMaxHeight calculation above:
                 var offsetBottom = 40;
                 var maxContainerHeight = $(window).height() - offsetTop - offsetBottom;
                 $(event.target).css('max-height', maxContainerHeight - 100);
 
                 if (!popUp.trackDescriptionOnly) {
                     $('#hgTrackUiDialog').find('.filterBy,.filterComp').each(
                         function(i) {
                             if ($(this).hasClass('filterComp'))
                                 ddcl.setup(this);
                             else
                                 ddcl.setup(this, 'noneIsAll');
                         }
                     );
                 }
             },
             close: function() {
                 popUp.cleanup();
             }
         });
         
         $(".ui-dialog").on("keypress", function(e) {
             var key = e.charCode || e.keyCode || 0;     
             if (key == 13) {
                 e.preventDefault();
                 $(".ui-button:contains('OK')").click();
             }
         });
 
         // FIXME: Why are open and close no longer working!!!
         if (popUp.trackDescriptionOnly) {
             var myWidth =  $(window).width() - 300;
             if (myWidth > 900)
                 myWidth = 900;
             $('#hgTrackUiDialog').dialog("option", "maxWidth", myWidth);
             $('#hgTrackUiDialog').dialog("option", "width", myWidth);
             $('#hgTrackUiDialog').dialog('option' , 'title' ,
                                hgTracks.trackDb[popUp.trackName].shortLabel+" Track Description");
             $('#hgTrackUiDialog').dialog('open');
         } else {
             $('#hgTrackUiDialog').dialog('option' , 'title' ,
                                   hgTracks.trackDb[popUp.trackName].shortLabel+" Track Settings");
             $('#hgTrackUiDialog').dialog('open');
         }
         var buttOk = $('button.ui-state-default');
         $(buttOk).trigger("focus");
     }
 };
 
   ///////////////////////////////
  //// imageV2  (aka imgTbl) ////
 ///////////////////////////////
 var imageV2 = {
 
     enabled:        false,  // Will be set to true unless advancedJavascriptFeatures
                             // is turned off OR if track search of config page
     imgTbl:         null,   // formerly "trackImgTbl"  The imgTbl or null if non-imageV2.
     inPlaceUpdate:  false,  // modified based on value of hgTracks.inPlaceUpdate & mapIsUpdateable
     mapIsUpdateable:true,
     lastTrack:      null,   // formerly (lastMapItem) this is used to try to keep what the
                             // last track the cursor passed.
 
     LEFTADD: 3,             // when going from pixels to chrom coords, these 3 pixels
                             // are somehow used for "borders or cgi item calc ?" (original comment)
 
     markAsDirtyPage: function ()
     {   // Page is marked as dirty so that the back-button knows page doesn't match cart
         var dirty = normed($('#dirty'));
         if (dirty)
             $(dirty).val('true');
     },
 
     markAsCleanPage: function ()
     {   // Clears signal that history may be out of sync with cart.
         var dirty = normed($('#dirty'));
         if (dirty)
             $(dirty).val('false');
     },
 
     isDirtyPage: function ()
     { // returns true if page was marked as dirty
     // This will allow the backbutton to be overridden
 
         var dirty = normed($('#dirty'));
         if (dirty && $(dirty).val() === 'true')
             return true;
         return false;
     },
     
     manyTracks: function ()
     {   // image-reload is slower than whole page reload when there are too many tracks
         if (!hgTracks || !hgTracks.trackDb || objKeyCount(hgTracks.trackDb) > 50)
             return true;
         return false;
     },
 
     moveTiming: function() 
     {    // move measure timing messages to the end of the page
         if ($(".timing").length > 0) {
             $("body").append("<div id='timingDiv'></div>");
             $(".timing").detach().appendTo('#timingDiv');
         }
     },
 
     updateTiming: function (response)
     {   // update measureTiming text on current page based on what's in the response
         var reg = new RegExp("(<span class='timing'>.+?</span>)", "g");
         var strs = [];
         for (var a = reg.exec(response); a && a[1]; a = reg.exec(response)) {
             strs.push(a[1]);
         }
         if (strs.length > 0) {
             $('.timing').remove();
             for (var ix = strs.length; ix > 0; ix--) {
                 $('#timingDiv').append(strs[ix - 1]);
             }
         }
         reg = new RegExp("(<span class='trackTiming'>[\\S\\s]+?</span>)");
         a = reg.exec(response);
         if (a && a[1]) {
             $('.trackTiming').replaceWith(a[1]);
         }
     },
 
     loadSuggestBox: function ()
     {
         if ($('#positionInput').length) {
             if (!suggestBox.initialized) { // only call init once
                 suggestBox.init(getDb(),
                             $("#suggestTrack").length > 0,
                             function (item) {
                                 if (["helpDocs", "publicHubs", "trackDb"].includes(item.type) ||
                                         item.id.startsWith("hgc")) {
                                     if (item.geneSymbol) {
                                         selectedGene = item.geneSymbol;
                                         // Overwrite item's long value with symbol after the autocomplete plugin is done:
                                         window.setTimeout($('#positionInput').val(item.geneSymbol), 0);
                                     } else {
                                         selectedGene = item.value;
                                     }
                                     window.location.assign(item.id);
                                 } else if (item.type === "hgvs") {
                                     let newPos = genomePos.setByCoordinates(item.chrom, item.start, item.end);
                                     dragSelect.highlightThisRegion(newPos, true, "#fcfcac");
                                     let withPadding = genomePos.setByCoordinates(item.chrom, item.start-5, item.end+5);
                                     $("#goButton").trigger("click");
                                 } else {
                                     genomePos.set(item.id, getSizeFromCoordinates(item.id));
                                     if ($("#suggestTrack").length && $('#hgFindMatches').length) {
                                         // Set cart variables to open the hgSuggest gene track and highlight
                                         // the chosen transcript.  These variables will be submittted by the goButton
                                         // click handler.
                                         vis.makeTrackVisible($("#suggestTrack").val());
                                         cart.addVarsToQueue(["hgFind.matches"],[$('#hgFindMatches').val()]);
                                     }
                                     $("#goButton").trigger("click");
                                 }
                             },
                             function (position) {
                                 genomePos.set(position, getSizeFromCoordinates(position));
                             }
                 );
             }
         }
     },
     
     afterImgChange: function (dirty)
     {   // Standard things to do when manipulations change image without ajax update.
         dragReorder.init();
         dragSelect.load(false);
         imageV2.drawHighlights();
         if (dirty)
             imageV2.markAsDirtyPage();
     },
     
     afterReload: function (id)
     {   // Reload various UI widgets after updating imgTbl map.
         dragReorder.init();
         dragSelect.load(false);
         // Do NOT reload context menu (otherwise we get the "context menu sticks" problem).
         // rightClick.load($('#tr_' + id));
         if (imageV2.imgTbl.tableDnDUpdate)
             imageV2.imgTbl.tableDnDUpdate();
         rightClick.reloadFloatingItem();
         // Turn on drag scrolling.
         if (hgTracks.imgBoxPortal) {
             $("div.scroller").panImages();
         }
         if (imageV2.backSupport) {
             if (id) { // The remainder is only needed for full reload
                 imageV2.markAsDirtyPage(); // vis of cfg change
                 imageV2.drawHighlights();
                 if (typeof showMouseovers !== 'undefined' && showMouseovers) {
                     convertTitleTagsToMouseovers();
                 }
                 return;
             }
         }
         
         imageV2.loadRemoteTracks();
         imageV2.loadSuggestBox();
         imageV2.drawHighlights();
 
         if (imageV2.backSupport) {
             // try/catch: browser extensions that proxy history.pushState can throw
             // "Permission denied to access property apply" under Firefox cross-origin
             // security. Swallow it so zoom/drag still complete; only the URL-bar
             // position update is lost.
             try {
                 imageV2.setInHistory(false);    // Set this new position into History stack
             } catch (e) {
                 console.warn("setInHistory failed, continuing:", e);
             }
         } else {
             imageV2.markAsDirtyPage();
         }
         if (typeof showMouseovers !== 'undefined' && showMouseovers) {
             convertTitleTagsToMouseovers();
         }
         if(typeof window.igvBrowser !== "undefined") {
            window.igvBrowser.search(genomePos.get());
         }
 
         if (typeof doMyVariants !== 'undefined' && doMyVariants) {
             myVariants.init();
         }
     },
 
     updateImgForId: function (html, id, fullImageReload, newJsonRec)
     {   // update row in imgTbl for given id.
         // return true if we successfully pull slice for id and update it in imgTrack.
         var newTr = $(html).find("tr[id='tr_" + id + "']");
         if (newTr.length > 0) {
             var tr = $(document.getElementById("tr_" + id));
             if (tr.length > 0) {
                 $(tr).html(newTr.children());
 
                 // Need to update tr class list too
                 var classes = $(html).find("tr[id='tr_"+ id + "']")[0].className;
                 if (classes && classes.length > 0) {
                     $(tr).removeClass();
                     $(tr).addClass(classes);
                 }
 
                 // NOTE: Want to examine the png? Uncomment:
                 //var img = $('#tr_' + id).find("img[id^='img_data_']").attr('src');
                 //warn("Just parsed image:<BR>"+img);
 
                 // >1x dragScrolling needs some extra care.
                 if (hgTracks.imgBoxPortal && (hgTracks.imgBoxWidth > hgTracks.imgBoxPortalWidth)) {
                     if (hgTracks.imgBoxPortalLeft !== undefined
                     &&  hgTracks.imgBoxPortalLeft !== null) {
                         $(tr).find('.panImg').css({'left': hgTracks.imgBoxPortalLeft });
                         $(tr).find('.tdData').css(
                                 {'backgroundPosition': hgTracks.imgBoxPortalLeft});
                     }
                 }
 
                 // Need to update vis box (in case this is reached via back-button)
                 if (imageV2.backSupport && fullImageReload) {
                     // Update abbr so that rows can be resorted properly
                     var abbr = $(newTr).attr('abbr');
 
                     if (abbr) {
                         $(tr).attr('abbr', abbr);
                     }
 
                     if (newJsonRec)
                         vis.update(id, vis.enumOrder[newJsonRec.visibility]);
                 }
                 // hg.conf will turn this on 2020-10 - Hiram
                 if (window.mouseOverEnabled) { mouseOver.updateMouseOver(id, newJsonRec); }
                 return true;
             }
         }
         return false;
     },
 
     updateImgForAllIds: function (response, oldJson, newJson)
     {   // update all rows in imgTbl based upon navigateInPlace response.
         var imgTbl = $('#imgTbl');
 
         // We update rows one at a time 
         // (b/c updating the whole imgTbl at one time doesn't work in IE).
         var id;
         for (id in newJson.trackDb) {
             var newJsonRec = newJson.trackDb[id];
             var oldJsonRec = oldJson.trackDb[id];
             
             // use limitedVis as visibility if set
             if (newJsonRec.limitedVis !== undefined)
                 newJsonRec.visibility = newJsonRec.limitedVis;
             if (newJsonRec.visibility === 0)  // hidden 'ruler' is in newJson.trackDb!
                 continue;
             if (newJsonRec.type === "remote")
                 continue;
             var escapedId = id.replace('.', '\\.');
             if (oldJsonRec &&  oldJsonRec.visibility !== 0 && $('tr#tr_' + escapedId).length === 1) {
                 // New track replacing old:
                 if (!imageV2.updateImgForId(response, id, true, newJsonRec))
                     warn("Couldn't parse out new image for id: " + id);
             } else { //if (!oldJsonRec || oldJsonRec.visibility === 0)
                 // New track seen for the first time
                 if (imageV2.backSupport) {
                     $(imgTbl).append("<tr id='tr_" + id + "' abbr='0'" + // abbr gets filled in
                                         " class='imgOrd trDraggable'></tr>");
                     if (!imageV2.updateImgForId(response, id, true, newJsonRec)) {
                         warn("Couldn't insert new image for id: " + id);
                     } else {
                         cart.updateSessionPanel();
                     }
                 }
             }
         }
         if (imageV2.backSupport) {
             // Removes OLD: those in oldJson but not in newJson
             for (id in oldJson.trackDb) {
                 if ( ! newJson.trackDb[id] )
                     $(document.getElementById('tr_' + id)).remove();
             }
             
             // Need to reorder the rows based upon abbr
             dragReorder.sort($(imgTbl));
         }
     },
     
     updateChromImg: function (response)
     {   // Parse out new chrom 'ideoGram' (if available)
         // e.g.: <IMG SRC = "../trash/hgtIdeo/hgtIdeo_hgwdev_larrym_61d1_8b4a80.gif"
         //                BORDER=1 WIDTH=1039 HEIGHT=21 USEMAP=#ideoMap id='chrom' style='display: inline;'>
         // If the ideo is hidden or missing, we supply a place-holder for dynamic update later.
         // e.g.: <IMG SRC = ""
         //                BORDER=1 WIDTH=1039 HEIGHT=0 USEMAP=#ideoMap id='chrom' style='display: none'>
         // Larry's regex voodoo:
         var a = /<IMG([^>]+SRC[^>]+id='chrom'[^>]*)>/.exec(response);
         if (a && a[1]) {
             var b = /SRC\s*=\s*"([^")]*)"/.exec(a[1]);
             if (b) { // tolerate empty SRC= string when no ideo
                 $('#chrom').attr('src', b[1]);
                 var c = /style\s*=\s*'([^')]+)'/.exec(a[1]);
                 if (c && c[1]) {
                     $('#chrom').attr('style', c[1]);
                 }
                 var d = /HEIGHT\s*=\s*(\d*)/.exec(a[1]);
                 if (d && d[1]) {
                     $('#chrom').attr('HEIGHT', d[1]);
                 }
                 // Even if we're on the same chrom, ideoMap may change because the label
                 // on the left changes width depending on band name, and that changes px scaling.
                 var ideoMapMatch = /<MAP Name=ideoMap>[\s\S]+?<\/MAP>/.exec(response);
                 if (ideoMapMatch) {
                     var $oldMap = $("map[name='ideoMap']");
                     var $container = $oldMap.parent();
                     $oldMap.remove();
                     $container.append(ideoMapMatch[0]);
                 }
                 if (imageV2.backSupport) {
                     // Reinit chrom dragging.
                     if ($('area.cytoBand').length >= 1) {
                         $('img#chrom').chromDrag();
                     }
                 }
             }
         }
     },
 
     updateBackground: function (response)
     {
         // Added by galt to update window separators
         // Parse out background image url
         // background-image:url("../trash/hgt/blueLines1563-118-12_hgwdev_galt_9df9_e33b30.png")
         // background-image:url("../trash/hgt/winSeparators_hgwdev_galt_5bcb_baff60.png")
         // This will only need to update when multi-region is on and is using winSeparators.
 
         var a = /background-image:url\("(..\/trash\/hgt\/winSeparators[^"]+[.]png)"\)/.exec(response);
         if (a && a[1]) {
             $('td.tdData').css("background-image", "url("+a[1]+")");
         }
 
     },
 
         
     requestImgUpdate: function (trackName,extraData,loadingId,newVisibility)
     {
         // extraData, loadingId and newVisibility are optional
         var data = "hgt.trackImgOnly=1&hgsid=" + getHgsid() + "&hgt.trackNameFilter=" + trackName + "&db=" + getDb();
         if (extraData && extraData !== "")
             data += "&" + extraData;
         if (!loadingId || loadingId === "")
             loadingId = showLoadingImage("tr_" + trackName);
         var getOrPost = "GET";
         if ((data.length) > 2000) // extraData could contain a bunch of changes from the cfg dialog
             getOrPost = "POST";
         $.ajax({
                     type: getOrPost,
                     url: "../cgi-bin/hgTracks",
                     data: cart.addUpdatesToUrl(data),
                     dataType: "html",
                     trueSuccess: imageV2.updateImgAndMap,
                     success: catchErrorOrDispatch,
                     error: errorHandler,
                     cmd: 'refresh',
                     loadingId: loadingId,
                     id: trackName,
                     newVisibility: newVisibility,
                     cache: false
                 });
     },
 
     fullReload: function(extraData)
     {
         // force reload of whole page via trackform submit
         // This function does not return
         jQuery('body').css('cursor', 'wait');
         if (extraData || cart.updatesWaiting()) {
             var url = cart.addUpdatesToUrl(window.location.href);
             if (extraData) {
                 if ( url.lastIndexOf("?") === -1)
                     url += "?" + extraData;
                 else
                     url += '&' + extraData;
             }
             window.location.assign(url);
             return false;
         }
         document.TrackHeaderForm.submit();
         window.igv.initUcsc();
     },
 
     updateImgAndMap: function (response, status)
     {   // Handle ajax response with an updated trackMap image, map and optional ideogram. 
         //    and maybe the redLines background too.
         // this.cmd can be used to figure out which menu item triggered this.
         // this.id === appropriate track if we are retrieving just a single track.
 
         // update local hgTracks.trackDb to reflect possible side-effects of ajax request.
 
         var newJson = scrapeVariable(response, "hgTracks");
 
         //alert(JSON.stringify(newJson)); // DEBUG Example
 
         var oldJson = hgTracks;
         var valid = false;
         var stripped = {};
         if (!newJson) {
             stripJsEmbedded(response, true, stripped);
             if ( ! stripped.warnMsg )
                 warn("An unexpected error has occurred. Please consider letting us know " +
                      "by emailing genome-www@soe.ucsc.edu with the steps that resulted in " +
                      "this state and any info on how we could reproduce it. Using the " +
                      "sessions (My Data > My Sessions) tool can simplify the process by " +
                      "saving all configuration settings.");
         } else {
             if (this.id) {
                 if (newJson.trackDb[this.id]) {
                     var visibility = vis.enumOrder[newJson.trackDb[this.id].visibility];
                     var limitedVis;
                     if (newJson.trackDb[this.id].limitedVis)
                         limitedVis = vis.enumOrder[newJson.trackDb[this.id].limitedVis];
                     if (this.newVisibility && limitedVis && this.newVisibility !== limitedVis)
                         // see redmine 1333#note-9
                         alert("There are too many items to display the track in " +
                                 this.newVisibility + " mode.");
                     var rec = oldJson.trackDb[this.id];
                     rec.limitedVis = newJson.trackDb[this.id].limitedVis;
                     rec.imgOffsetY = newJson.trackDb[this.id].imgOffsetY;
                     vis.update(this.id, visibility);
                     if (visibility === "hide")
                         cart.updateSessionPanel(); // notify when vis change to hide track
                     valid = true;
                 } else {
                     // what got returned from the AJAX request was a different
                     // set of tracks.  Let's do a reload and hope for the best
                     imageV2.fullReload();
                 }
             } else {
                 valid = true;
             }
 
             suggestBox.restoreWatermark(getDb(), $("#suggestTrack").length > 0);
 
             // the ajax request may have generated an error or warning in the warnbox
             // so make sure those warnings still get to the user
             stripJsEmbedded(response, false, stripped);
         }
         if (valid) {
             if (imageV2.enabled
             && this.id
             && this.cmd
             && this.cmd !== 'wholeImage'
             && this.cmd !== 'selectWholeGene'
             && !newJson.virtChromChanged) {
                 // Extract <TR id='tr_ID'>...</TR> and update appropriate row in imgTbl;
                 // this updates src in img_left_ID, img_center_ID and img_data_ID
                 // and map in map_data_ID
                 var id = this.id;
                 if (imageV2.updateImgForId(response, id, false, newJson)) {
                     imageV2.afterReload(id);
                     imageV2.updateBackground(response);  // Added by galt to update window separators
                 } else {
                     warn("Couldn't parse out new image for id: " + id);
                     // Very helpful when debugging and alert doesn't render the html:
                     //alert("Couldn't parse out new image for id: " + id+"BR"+response);
                 }
             } else {
                 if (imageV2.enabled) {
                     // Implement in-place updating of hgTracks image
                     // GALT delaying this until after newJson updated in hgTracks so disguising works
                     //genomePos.setByCoordinates(newJson.chromName, newJson.winStart + 1, newJson.winEnd);
                     $("input[name='c']").val(newJson.chromName);
                     $("input[name='l']").val(newJson.winStart);
                     $("input[name='r']").val(newJson.winEnd);
 
                     if (newJson.cgiVersion !== oldJson.cgiVersion || newJson.virtChromChanged) {
                         // Must reload whole page because of a new version on the server;
                         // this should happen very rarely. Note that we have already updated 
                         // position based on the user's action.
                         imageV2.fullReload();
                     } else {
                         // Will rebuild image adding new, removing old and resorting tracks
                         imageV2.updateImgForAllIds(response,oldJson,newJson);
                         imageV2.updateChromImg(response);
                         imageV2.updateBackground(response);  // Added by galt to update window separators
                         hgTracks = newJson;
                         genomePos.original = undefined;
                         genomePos.setByCoordinates(hgTracks.chromName, hgTracks.winStart + 1, hgTracks.winEnd); // MOVED HERE GALT
                         initVars();
                         imageV2.afterReload();
                     }
                 } else {
                     warn("ASSERT: Attempt to update track without advanced javascript features.");
                 }
             }
             if (hgTracks.measureTiming) {
                 imageV2.updateTiming(response);
             }
         }
         if (this.disabledEle) {
             this.disabledEle.prop('disabled', false);
         }
         if (this.loadingId) {
             hideLoadingImage(this.loadingId);
         }
         jQuery('body').css('cursor', '');
         if (valid && this.currentId) {
             var top = $(document.getElementById("tr_" + this.currentId)).position().top;
             $(window).scrollTop(top - this.currentIdYOffset);
         }
     },
 
     loadRemoteTracks: function ()
     {
         if (hgTracks.trackDb) {
             for (var id in hgTracks.trackDb) {
                 var rec = hgTracks.trackDb[id];
                 if (rec.type === "remote") {
                     if ($("#img_data_" + id).length > 0) {
                         // load the remote track renderer via jsonp
                         rec.loadingId = showLoadingImage("tr_" + id);
                         var script = document.createElement('script');
                         var pos = parsePosition(genomePos.get());
                         var name = rec.remoteTrack || id;
                         script.setAttribute('src',
                                 rec.url + "?track=" + name +
                                 "&jsonp=imageV2.remoteTrackCallback&position=" +
                                 encodeURIComponent(pos.chrom + ":" + pos.start + "-" + pos.end) +
                                 "&pix=" + $('#imgTbl').width()
                         );
                         document.getElementsByTagName('head')[0].appendChild(script);
                     }
                 }
             }
         }
     },
 
     remoteTrackCallback: function (rec)
     // jsonp callback to load a remote track.
     {
         if (rec.error) {
             alert("retrieval from remote site failed with error: " + rec.error);
         } else {
             var remoteTrack = rec.track;
             for (var track in hgTracks.trackDb) {
                 if (hgTracks.trackDb[track].remoteTrack === remoteTrack) {
                     $('#img_data_' + track).attr('style', "left:-116px; top: -23px;");
                     $('#img_data_' + track).attr('height', rec.height);
                     // XXXX use width in some way?
            //       $('#img_data_' + track).attr('width', rec.width);
                     $('#img_data_' + track).attr('width', $('#img_data_ruler').width());
                     $('#img_data_' + track).attr('src', rec.img);
           /* jshint loopfunc: true */// function inside loop works and replacement is awkward.
                     $('#td_data_' + track + ' > div').each(function(index) {
                         if (index === 1) {
                             var style = $(this).attr('style');
                             style = style.replace(/height:\s*\d+/i, "height:" + rec.height);
                             $(this).attr('style', style);
                         }
                     });
                     var style = $('#p_btn_' + track).attr('style');
                     style = style.replace(/height:\s*\d+/i, "height:" + rec.height);
                     $('#p_btn_' + track).attr('style', style);
                     if (hgTracks.trackDb[track].loadingId) {
                         hideLoadingImage(hgTracks.trackDb[track].loadingId);
                     }
                 }
             }
         }
     },
 
     navigateButtonClick: function (ele) // called from hgTracks.c
     {   // code to update just the imgTbl in response to navigation buttons (zoom-out etc.).
         if (imageV2.inPlaceUpdate) {
             var params = ele.name + "=" + ele.value;
             $(ele).prop('disabled', 'disabled');
             // dinking navigation needs additional data
             if (ele.name === "hgt.dinkLL" || ele.name === "hgt.dinkLR") {
                 params += "&dinkL=" + $("input[name='dinkL']").val();
             } else if (ele.name === "hgt.dinkRL" || ele.name === "hgt.dinkRR") {
                 params += "&dinkR=" + $("input[name='dinkR']").val();
             }
             if (ele.name !== "db") {
                 params += "&db=" + getDb();
             }
             imageV2.navigateInPlace(params, $(ele), false);
             return false;
         } else {
             return true;
         }
     },
 
     updateButtonClick: function (ele) // UNUSED?
     {   // code to update the imgTbl based on changes in the track controls.
         // This is currently experimental code and is dead in the main branch.
         if (imageV2.mapIsUpdateable) {
             var data = "";
             $("select").each(function(index, o) {
                 var cmd = $(this).val();
                 if (cmd === "hide") {
                     if (hgTracks.trackDb[this.name]) {
                         alert("Need to implement hide");
                     }
                 } else {
                     if ( ! hgTracks.trackDb[this.name]
                     ||  cmd !== vis.enumOrder[hgTracks.trackDb[this.name].visibility]) {
                         if (data.length > 0) {
                             data = data + "&";
                         }
                         data = data + this.name + "=" + cmd;
                     }
             }
             });
             if (data.length > 0) {
                 imageV2.navigateInPlace("db=" + getDb() + "&" + data, null, false);
             }
             return false;
         } else {
             return true;
         }
     },
 
     navigateInPlace: function (params, disabledEle, keepCurrentTrackVisible)
     {   // request an hgTracks image, using params
         // disabledEle is optional; this element will be enabled when update is complete
         // If keepCurrentTrackVisible is true, we try to maintain relative position of the item
         // under the mouse after the in-place update.
         // Tim thinks we should consider disabling all UI input while we are doing in-place update.
         // TODO: waitOnFuction?
     
         // No ajax image update if there are too many tracks!
         if (imageV2.manyTracks()) {
             imageV2.fullReload(params);
             return false;  // Shouldn't return from fullReload but I have seen it in FF
         }
     
         jQuery('body').css('cursor', 'wait');
         var currentId, currentIdYOffset;
         if (keepCurrentTrackVisible) {
             var item = rightClick.currentMapItem || imageV2.lastTrack;
             if (item) {
                 var top = $(document.getElementById("tr_" + item.id)).position().top;
                 if (top >= $(window).scrollTop()
                 || top < $(window).scrollTop() + $(window).height()) {
                     // don't bother if the item is not currently visible.
                     currentId = item.id;
                     currentIdYOffset = top - $(window).scrollTop();
                 }
             }
         }
         $.ajax({
                 type: "GET",
                 url: "../cgi-bin/hgTracks",
                 data: cart.addUpdatesToUrl(params + 
                                       "&hgt.trackImgOnly=1&hgt.ideogramToo=1&hgsid=" + getHgsid() + "&db=" + getDb()),
                 dataType: "html",
                 trueSuccess: imageV2.updateImgAndMap,
                 success: catchErrorOrDispatch,
                 error: errorHandler,
                 cmd: 'wholeImage',
                 loadingId: showLoadingImage("imgTbl"),
                 disabledEle: disabledEle,
                 currentId: currentId,
                 currentIdYOffset: currentIdYOffset,
                 cache: false
             });
     },
 
     disguiseHighlight: function(position)
     // disguise highlight position
     {
         pos = parsePositionWithDb(position);
         // DISGUISE
         if (hgTracks.virtualSingleChrom && (pos.chrom.search("multi") === 0)) {
             var positionStr = pos.chrom+":"+pos.start+"-"+pos.end;
             var newPosition = genomePos.disguisePosition(positionStr);
             var newPos = parsePosition(newPosition);
             pos.chrom = newPos.chrom;
             pos.start = newPos.start;
             pos.end   = newPos.end;
         }
         return makeHighlightString(pos.db, pos.chrom, pos.start, pos.end, pos.color);
     },
 
     undisguiseHighlight: function(pos)
     // undisguise highlight pos
     {
         // UN-DISGUISE
         if (hgTracks.virtualSingleChrom && (pos.chrom.search("multi") !== 0)) {
             var position = pos.chrom+":"+pos.start+"-"+pos.end;
             var newPosition = genomePos.undisguisePosition(position);
             var newPos = parsePosition(newPosition);
             if (newPos) {
                 pos.chrom = newPos.chrom;
                 pos.start = newPos.start;
                 pos.end   = newPos.end;
             }
         }
     },
 
     drawHighlights: function()
     // highlight vertical region in imgTbl based on hgTracks.highlight (#709).
     // For PDF/hgRenderTracks output, the highlights are drawn by hgTracks.c:drawHighlights()
     {
         var pos;
         var hexColor = dragSelect.hlColorDefault;
         // if possible, re-use the color that the user picked last time
         if (hgTracks.prevHlColor)
             hexColor = hgTracks.prevHlColor;
         var defHexColor = hexColor;
 
         $('.highlightItem').remove();
         var db = getDb();
 
         if (hgTracks.highlight) {
             var hlArray = hgTracks.highlight.split("|"); // support multiple highlight items
             for (var i = 0; i < hlArray.length; i++) {
                 hlString = hlArray[i];
                 pos = parsePositionWithDb(hlString);
                 // UN-DISGUISE
                 imageV2.undisguiseHighlight(pos);
 
                 if (pos && pos.db===db && pos.chrom === hgTracks.chromName
                 &&  (pos.start-1) <= hgTracks.imgBoxPortalEnd && pos.end >= hgTracks.imgBoxPortalStart) {
                     pos.start--;  // make start 0-based to match hgTracks.winStart
                     var portalWidthBases = hgTracks.imgBoxPortalEnd - hgTracks.imgBoxPortalStart;
                     var portal = $('#imgTbl td.tdData')[0];
                     var leftPixels = $(portal).offset().left + imageV2.LEFTADD;
                     var pixelsPerBase = ($(portal).width() - 2) / portalWidthBases;
                     var clippedStartBases = Math.max(pos.start, hgTracks.imgBoxPortalStart);
                     var clippedEndBases = Math.min(pos.end, hgTracks.imgBoxPortalEnd);
                     var widthPixels = (clippedEndBases - clippedStartBases) * pixelsPerBase;
                     if (hgTracks.revCmplDisp)
                         leftPixels += (hgTracks.imgBoxPortalEnd - clippedEndBases) * pixelsPerBase - 1;
                     else
                         leftPixels += (clippedStartBases - hgTracks.imgBoxPortalStart) * pixelsPerBase;
                     // Impossible to get perfect... Okay to overrun by a pixel on each side
                     leftPixels  = Math.floor(leftPixels);
                     widthPixels = Math.ceil(widthPixels);
                     if (widthPixels < 2) {
                         widthPixels = 3;
                         leftPixels -= 1;
                     }
     
                     var area = jQuery("<div id='highlightItem' class='highlightItem'></div>");
                     if (pos.color)
                         hexColor = pos.color;
                     else
                         hexColor = defHexColor;
 
                     $(area).css({ backgroundColor: hexColor,
                                 left: leftPixels + 'px', top: $('#imgTbl').offset().top + 1 + 'px',
                                 width: widthPixels + 'px',
                                 height: $('#imgTbl').css('height') });
                     $(area).data({leftPixels: leftPixels, widthPixels: widthPixels});// needed by dragScroll
     
                     // Larry originally appended to imgTbl, but discovered that doesn't work on IE 8 and 9.
                     $('body').append($(area)); 
                     // z-index is done in css class, so highlight is beneath transparent data images.
                     // NOTE: ideally highlight would be below transparent blue-lines, but THAT is a  
                     // background-image so z-index can't get below it!  PS/PDF looks better for blue-lines!
                 }
             }
         }
     },
 
     backSupport: (window.History.enabled !== undefined), // support of our back button via: 
     history: null,                                     //  jquery.history.js and HTML5 history API
     
     setupHistory: function ()
     {   // Support for back-button using jquery.history.js.
         // Sets up the history and initializes a state.
     
         // Since ajax updates leave the browser cached pages different from the server state, 
         // simple back-button fails.  Using a 'dirty flag' we had forced an update from server,
         // whenever the back button was hit, meaning there was no going back from server-state!
         // NOW using the history API, the back-button triggers a 'statechange' event which can 
         // contain data.  We save the position in the data and ajax update the image when the
         // back-button is pressed.  This works great for going back through ajax-updated position
         // changes, but is a bit messier when going back past a full-page retrieved state (as
         // described below).
     
         // NOTE: many things besides position could be ajax updated (e.g. track visibility). We are
         // using the back-button to keep track of position only.  Since the image should be updated
         // every-time the back button is pressed, all track settings should persist (not go back).
         // What will occasionally fail is vis box state and group expansion state. This is because
         // the back-button goes to a browser cached page and then the image alone is updated.
     
         imageV2.history = window.History;
         
         // The 'statechange' function triggerd by the back-button.
         // Whenever the position changes, then use ajax-update to refetch the position
         imageV2.history.Adapter._bind(window, 'statechange',function(){
             var prevDbPos = imageV2.history.getState().data.lastDbPos;
             var prevPos = imageV2.history.getState().data.position;
             var curDbPos = hgTracks.lastDbPos;
             if (prevDbPos && prevDbPos !== curDbPos) {
                 // NOTE: this function is NOT called when backing past a full retrieval boundary
                 genomePos.set(decodeURIComponent(prevPos));
                 imageV2.navigateInPlace("db=" + getDb() + "&" + prevDbPos, null, false);
             }
         });
         
         // With history support it is best that most position changes will ajax-update the image
         // This ensures that the 'go' and 'refresh' button will do so unless the chrom changes.
         $("#goButton,input[value='refresh']").on("click", function () {
             var newPos = genomePos.get().replace(/,/g,'');
             if (newPos.length > 2000) {
                alert("Sorry, you cannot paste identifiers or sequences with more than 2000 characters into this box.");
                $('input[name="hgt.positionInput"]').val("");
                return false;
             }
 
             var newDbPos = hgTracks.lastDbPos;
             if ( ! imageV2.manyTracks() ) {
                 var newChrom = newPos.split(':')[0];
                 var oldChrom  = genomePos.getOriginalPos().split(':')[0];
                 if (newChrom === oldChrom) {
                     imageV2.markAsDirtyPage();
                     imageV2.navigateInPlace("db=" + getDb() + "&position=" + encodeURIComponent(newPos), null, false);
                     window.scrollTo(0,0);
                     return false;
                 }
             }
             
             // If not just image update AND there are vis updates waiting...
             if (cart.updatesWaiting()) {
                 var url = "../cgi-bin/hgTracks?position=" + newPos + "&" + cart.varsToUrlData({ 'db': getDb(), 'hgsid': getHgsid() });
                 window.location.assign(url);
                 return false;
             }
 
             // redirect to hgBlat if the input looks like a DNA sequence
             // minimum length=19 so we do not accidentally redirect to hgBlat for a gene identifier 
             // like ATG5
             var dnaRe = new RegExp("^(>[^\n\r ]+[\n\r ]+)?(\\s*[actgnACTGN \n\r]{19,}\\s*)$");
             if (dnaRe.test(newPos)) {
                 var blatUrl = "hgBlat?type=BLAT%27s+guess&userSeq="+newPos;
                 window.location.href = blatUrl;
                 return false;
             }
 
             // helper functions for checking whether a plain chrom name was searched for
             term = genomePos.get().replace(/[\u200b-\u200d\u2060\uFEFF]/g,''); // remove 0-width chars
             term = encodeURIComponent(term.replace(/^[\s]*/,'').replace(/[\s]*$/,''));
             function onSuccess(jqXHR, textStatus) {
                 if (jqXHR.chromName !== null) {
                     imageV2.markAsDirtyPage();
                     imageV2.navigateInPlace("db=" + getDb() + "&position=" + encodeURIComponent(newPos), null, false);
                     window.scrollTo(0,0);
                 } else  {
                     window.location.assign("../cgi-bin/hgSearch?search=" + term  + "&hgsid="+ getHgsid());
                 }
             }
             function onFail(jqXHR, textStatus) {
                 window.location.assign("../cgi-bin/hgSearch?search=" + term  + "&hgsid="+ getHgsid());
             }
 
             // redirect to search disambiguation page if it looks like we didn't enter a regular position:
             var canonMatch = newPos.match(canonicalRangeExp);
             var gbrowserMatch = newPos.match(gbrowserRangeExp);
             var lengthMatch = newPos.match(lengthRangeExp);
             var bedMatch = newPos.match(bedRangeExp);
             var sqlMatch = newPos.match(sqlRangeExp);
             var singleMatch = newPos.match(singleBaseExp);
             var gnomadRangeMatch = newPos.match(gnomadRangeExp);
             var gnomadVarMatch = newPos.match(gnomadVarExp);
             var positionMatch = canonMatch || gbrowserMatch || lengthMatch || bedMatch || sqlMatch || singleMatch || gnomadRangeMatch || gnomadVarMatch;
             if (positionMatch === null) {
                 // user may have entered a full chromosome name, check for that asynchronosly:
                 $.ajax({
                     type: "GET",
                     url: "../cgi-bin/hgSearch",
                     data: cart.varsToUrlData({ 'cjCmd': '{"getChromName": {"db": "' + getDb() + '", "searchTerm": "' + term + '"}}' }),
                     dataType: "json",
                     trueSuccess: onSuccess,
                     success: onSuccess,
                     error: onFail,
                     cache: true
                 });
                 return false;
             } else {
                 // about to do a form submit with a regular position range, save this to the recents stack
                 // strip any html content first
                 newPos = newPos.replace(/<[^>]*>/g, '');
                 addRecentSearch(getDb(), newPos, {id: newPos, value: newPos, label: newPos});
             }
                 
             return true;
         });
         // Have vis box changes update cart through ajax.  This helps keep page/cart in sync.
         vis.initForAjax();
 
         // We reach here from these possible paths:
         // A) Forward: Full page retrieval: hgTracks is first navigated to (or chrom change)
         // B) Back-button past a full retrieval (B in: ->A,->b,->c(full page),->d,<-c,<-B(again))
         //    B1) Dirty page: at least one non-position change (e.g. 1 track vis changed in b)
         //    B2) Clean page: only position changes from A->b->| 
         var curPos = encodeURIComponent(genomePos.get().replace(/,/g,''));
         var curDbPos = hgTracks.lastDbPos;
         var cachedPos = imageV2.history.getState().data.position;
         var cachedDbPos = imageV2.history.getState().data.lastDbPos;
         // A) Forward: Full page retrieval: hgTracks is first navigated to (or chrom change)
         if (!cachedDbPos) { // Not a back-button operation
             // set the current position into history outright (will replace). No img update needed
             // try/catch: see comment on the other setInHistory call site.
             try {
                 imageV2.setInHistory(true);
             } catch (e) {
                 console.warn("setInHistory failed, continuing:", e);
             }
         } else { // B) Back-button past a full retrieval
             genomePos.set(decodeURIComponent(cachedPos));
             // B1) Dirty page: at least one non-position change 
             if (imageV2.isDirtyPage()) {
                 imageV2.markAsCleanPage();
                 // Only forcing a full page refresh if chrom changes
                 var cachedChrom = decodeURIComponent(cachedPos).split(':')[0];
                 var curChrom    = decodeURIComponent(   curPos).split(':')[0];
                 if (cachedChrom === curChrom) {
                     imageV2.navigateInPlace("db="+getDb()+"&"+cachedDbPos, null, false);
                 } else {
                     imageV2.fullReload();
                 }
             } else {
                 // B2) Clean page: only position changes from a->b 
                 if (cachedDbPos !== curDbPos) {
                     imageV2.navigateInPlace("db="+getDb()+"&"+cachedDbPos, null, false);
                 }
             }
             // Special because FF is leaving vis drop-downs disabled
             vis.restoreFromBackButton();
         }
     },
     
     setInHistory: function (fullPageLoad)
     {   // Keep a position history and allow the back-button to work (sort of)
         // replaceState on initial page load, pushState on each advance
         // When call triggered by back button, the lastPos===newPos, so no action.
         var lastDbPos = imageV2.history.getState().data.lastDbPos;
         var newPos  = encodeURIComponent(genomePos.get().replace(/,/g,''));  // no commas
         var newDbPos  = hgTracks.lastDbPos;
         
         // A full page load could be triggered by back-button, but then there will be a lastPos
         // if this is the case then don't set the position in history again!
         if (fullPageLoad && lastDbPos)
             return;
 
         if (!lastDbPos || lastDbPos !== newDbPos) {
             // Swap the position into the title
             var title = $('TITLE')[0].text;
             var ttlWords = title.split(' ');
             if (ttlWords.length >= 2) {
                 for (var i=1; i < ttlWords.length; i++) {
                     if (ttlWords[i].indexOf(':') >= 0) {
                         ttlWords[i] = genomePos.get();
                     }
                 }
                 title = ttlWords.join(' ');
             } else
                 title = genomePos.get();
 
             var sid = getHgsid();
             if (fullPageLoad) { 
                 // Should only be on initial set-up: first navigation to page
                 imageV2.history.replaceState({lastDbPos: newDbPos, position: newPos, hgsid: + sid },title,
                                  "hgTracks?db="+getDb()+"&"+newDbPos+"&hgsid="+sid);
             } else {  
                 // Should be when advancing (not-back-button)
                 imageV2.history.pushState({lastDbPos: newDbPos, position: newPos, hgsid: + sid },title,
                                  "hgTracks?db="+getDb()+"&"+newDbPos+"&hgsid="+sid);
             }
         }
     }
 };
 
   ///////////////////////////////////////
  //// mouseOver data display 2020-10 ///
 ///////////////////////////////////////
 var mouseOver = {
 
     items: {},  // items[trackName][] - data for each item in this track
     visible: false,     // keeping track of popUp window visibility
     tracks: {}, // tracks[trackName] - number of data items for this track
     trackType: {},	// key is track name, value is track type from hgTracks
     mouseOverFunction: {}, // key is track name, value mouseOverFunction string
     jsonUrl: {},       // list of json files from hidden DIV elements
     maximumWidth: {},   // maximumWidth[trackName] - largest string to display
     popUpDelay: 200,   // 0.2 second delay before popUp appears
     popUpTimer: null,// handle from setTimeout to use in clearTimout(popUpTimer)
     delayDone: true,   // mouse has not left element, still receiving move evts
     delayInProgress: false,        // true while waiting for delay timer
     mostRecentMouseEvt: null,   // to use when mouse delay is finished
     browserTextSize: 12,        // default if not found otherwise
     measureTextBox: null,
     noDataString: "no&nbsp;data",	// message for no data at this position
     noDataSize: 0,	// will be set to size of text 'no data'
     noAverageString: "&nbsp;zoom&nbsp;in&nbsp;to&nbsp;see&nbsp;values&nbsp;",	// "noAverage" function
 
     // items{} - key name is track name, value is an array of data items
     //           where the format of each item can be different for different
     //           data tracks.  For example, the wiggle track is an array of:
     //                   objects: {x1, x2, v, c}
     //           where [x1..x2) is the array index where the value 'v'
     //           is found, and 'c' is the data value count in this value
     //           i.e. when c > 1 the value is a 'mean' of 'c' data values
     // visible - keep track of window visible or not, value: true|false
     //           shouldn't need to do this here, the window knows if it
     //           is visible or not, just ask it for status
     // tracks{}  - tracks that were set up initially, key is track name
     //             value is the number of items (for debugging)
     // maximumWidth{} - key is track name, value is length of longest
     //                  number string as measured when rendered
 
     // given hgt_....png file name, change to hgt_....json file name
     jsonFileName: function(imgDataId)
     {
       var jsonFile=imgDataId.src.replace(".png", ".json");
       return jsonFile;
     },
 
     // called from: updateImgForId when it has updated a track in place
     // need to refresh the event handlers and json data
     updateMouseOver: function (trackName, newJson)
     {
       if (! newJson ) { return; }
       // this newJson object appears to be a single trackDb, not
       //  an array of them
       var trackDb = null;
       // so, if the type attribute exists, then it is the trackDb
       if (newJson.type) {
          trackDb = newJson;
       } else {	// otherwise, search through the array
         for ( var id in newJson.trackDb ) {
            if (id === trackName) {
               trackDb = newJson.trackDb[id];
               break;
            }
         }
       }
       var trackType = null;
       var hasChildren = null;
       if (trackDb) {
 	trackType = trackDb.type;
 	hasChildren = trackDb.hasChildren;
       } else if (hgTracks.trackDb && hgTracks.trackDb[trackName]) {
 	trackType = hgTracks.trackDb[trackName].type;
       } else if (mouseOver.trackType[trackName]) {
 	trackType = mouseOver.trackType[trackName];
       }
       var validType = false;
       if (trackType) {
 	if (trackType.indexOf("wig") === 0) { validType = true; }
 	if (trackType.indexOf("bigWig") === 0) { validType = true; }
 	if (trackType.indexOf("wigMaf") === 0) { validType = false; }
 	if (hasChildren) { validType = false; }
       }
       if (! validType ) { return; }
       var tdData = "td_data_" + trackName;
       var tdDataId  = document.getElementById(tdData);
       var imgData = "img_data_" + trackName;
       var imgDataId  = document.getElementById(imgData);
       if (imgDataId && tdDataId) {
 	var url = mouseOver.jsonFileName(imgDataId);
         $( tdDataId ).on("mousemove", mouseOver.mouseMoveDelay);
         $( tdDataId ).on("mouseout", mouseOver.popUpDisappear);
         mouseOver.fetchJsonData(url);  // may be a refresh, don't know
       }
     },
 
     // given an X coordinate: x, find the index idx
     // in the rects[idx] array where rects[idx].x1 <= x < rects[idx].x2
     // returning -1 when not found
     // if we knew the array was sorted on x1 we could get out early
     //   when x < x1
     // Note, different track types could have different intersection
     //       procedures.  For example, the HiC track will need to intersect
     //       the mouse position within the diamond/square defined by the
     //       items in the display.
     findRange: function (x, rects)
     {
       var answer = -1;  // assmume not found
       var idx = 0;
       if (hgTracks.revCmplDisp) {
         var rectsLen = rects.length - 1;
         for ( idx in rects ) {
            if ((rects[rectsLen-idx].x1 <= x) && (x < rects[rectsLen-idx].x2)) {
              answer = rectsLen-idx;
              break;
            }
         }
       } else {
         for ( idx in rects ) {
            if ((rects[idx].x1 <= x) && (x < rects[idx].x2)) {
              answer = idx;
              break;
            }
         }
       }
       return answer;
     },
 
     popUpDisappear: function () {
       if (mouseOver.visible) {        // should *NOT* have to keep track !*!
         mouseOver.visible = false;
         $('#mouseOverText').css('display','none');
         $('#mouseOverVerticalLine').css('display','none');
       }
       if (mouseOver.popUpTimer) {
          clearTimeout(mouseOver.popUpTimer);
          mouseOver.popUpTimer = null;
       }
       mouseOver.delayDone = true;
       mouseOver.delayInProgress = false;
     },
 
     popUpVisible: function () {
       if (! mouseOver.visible) {        // should *NOT* have to keep track !*!
         mouseOver.visible = true;
         $('#mouseOverText').css('display','block');
         $('#mouseOverVerticalLine').css('display','block');
       }
     },
 
     //  the evt.currentTarget.id is the td_data_<trackName> element of
     //     the track graphic.  There doesn't seem to be a evt.target.id ?
     mouseInTrackImage: function (evt)
     {
     // the center label also events here, can't use that
     //  plus there is a one pixel line under the center label that has no
     //   id name at all, so verify we are getting the event from the correct
     //   element.
     if (! evt.currentTarget.id.includes("td_data_")) { return; }
     var trackName = evt.currentTarget.id.replace("td_data_", "");
     if (trackName.length < 1) { return; }	// verify valid trackName
 
     // location of mouse relative to the whole page
     //     even when the top of page has scolled off
     var evtX = Math.floor(evt.pageX);
 //  var evtY = Math.floor(evt.pageY);
 //  var offX = Math.floor(evt.offsetX);       // no need for evtY or offX
 
     // find location of this <td> slice in the image, this is the track
     //   image in the graphic, including left margin and center label
     //   This location follows the window scrolling, could go negative
     var tdId  = document.getElementById(evt.currentTarget.id);
     var tdRect = tdId.getBoundingClientRect();
     var tdLeft = Math.floor(tdRect.left);
     var tdTop = Math.floor(tdRect.top);
 //    if (tdTop < 0) { return; }  // track is scrolled off top of screen
     var tdWidth = Math.floor(tdRect.width);
     var tdHeight = Math.floor(tdRect.height);
     var tdRight = tdLeft + tdWidth;
     // clientX is the X coordinate of the mouse hot spot
     var clientX = Math.floor(evt.clientX);
     var clientY = Math.floor(evt.clientY);
     // the graphOffset is the index (x coordinate) into the 'items' definitions
     //  of the data value boxes for the graph.  The magic number three
     //   is used elsewhere in this code, note the comment on the constant
     //   LEFTADD.
     var graphOffset = Math.max(0, clientX - tdLeft - 3);
     if (hgTracks.revCmplDisp) {
        graphOffset = Math.max(0, tdRight - clientX);
     }
 
     var windowUp = false;     // see if window is supposed to become visible
     var foundIdx = -1;
     if (mouseOver.items[trackName]) {
        foundIdx = mouseOver.findRange(graphOffset, mouseOver.items[trackName]);
     }
     // can show 'no data' when not found
     var mouseOverValue = mouseOver.noDataString;
     if (mouseOver.mouseOverFunction[trackName] === "noAverage") {
        mouseOverValue = mouseOver.noAverageString;
     }
     if (foundIdx > -1) { // value to display
         mouseOverValue = "&nbsp;" + mouseOver.items[trackName][foundIdx].v + "&nbsp;";
     }
     $('#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 - 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");
     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
     delayCompleted: function()
     {
        mouseOver.delayDone = true;
        // mouse could just be sitting there with no events, if there
        // have been events during the timer, the evt has been recorded
        // so the popUp appears where the mouse is while it moved during the
        // time delay since mostRecentMouseEvt is up to date to now
        // If mouse has moved out of element during timeout, the
        // delayInProgress will be false and nothing happens.
        if (mouseOver.delayInProgress) {
           mouseOver.mouseInTrackImage(mouseOver.mostRecentMouseEvt);
        }
     },
 
     // all mouse move events come here even during timeout
     mouseMoveDelay: function (evt)
     {
       mouseOver.mostRecentMouseEvt = evt;   // record evt for delayCompleted
 
       if (mouseOver.delayInProgress) {
         if (mouseOver.delayDone) {
           mouseOver.mouseInTrackImage(evt);	// OK to trigger event now
           return;
         } else {
           return; // wait for delay to be done
         }
       }
       mouseOver.delayDone = false;
       mouseOver.delayInProgress = true;
       if (mouseOver.popUpTimer) {
          clearTimeout(mouseOver.popUpTimer);
          mouseOver.popUpTimer = null;
       }
       mouseOver.popUpTimer = setTimeout(mouseOver.delayCompleted, mouseOver.popUpDelay);
     },
 
     // given a string of text, return width of rendered text size
     // using an off-screen span element that is created here first time through
     getWidthOfText: function (measureThis)
     {
     if(mouseOver.measureTextBox === null){  // set up first time only
         mouseOver.measureTextBox = document.createElement('span');
         var cssText = "position: fixed; width: auto; display: block; text-align: right; left:-999px; top:-999px; font-style:normal; font-size:" + mouseOver.browserTextSize + "px; font-family:" + jQuery('body').css('font-family');
         mouseOver.measureTextBox.style.cssText = cssText;
         document.body.appendChild(mouseOver.measureTextBox);
     }
     mouseOver.measureTextBox.innerHTML = measureThis;
     return Math.ceil(mouseOver.measureTextBox.clientWidth);
     },
 
     // =======================================================================
     // receiveData() callback for successful JSON request, receives incoming
     //             JSON data and gets it into global variables for use here.
     //  The incoming 'arr' is a a set of objects where the object key name is
     //      the track name, used here as an array reference: arr[trackName]
     //        (currently only one object per json file, one file for each track,
     //           this may change to have multiple tracks in one json file.)
     //  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.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;
       if (arr[trackName].hasOwnProperty('mo')) {
          mouseOver.mouseOverFunction[trackName] = arr[trackName].mo;
       } else {
          delete mouseOver.mouseOverFunction[trackName];
       }
       // 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" ).
       $( tdDataId ).on("mousemove", mouseOver.mouseMoveDelay);
       $( tdDataId ).on("mouseout", mouseOver.popUpDisappear);
       var itemCount = 0;	// just for monitoring purposes
       // save incoming x1,x2,v data into the mouseOver.items[trackName][] array
       var lengthLongestNumberString = 0;
       var longestNumber = 0;
       var hasMean = false;
       for (var datum in arr[trackName].d) {      // .d is the data array
          if (arr[trackName].d[datum].c > 1) { hasMean = true; }
          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 = "&nbsp;~&nbsp;" + longestNumber + "&nbsp;";
       } else {
          mouseOverValue = "&nbsp;" + longestNumber + "&nbsp;";
       }
       if (mouseOver.mouseOverFunction[trackName] === "noAverage") {
          mouseOverValue = mouseOver.noAverageString;
       }
       $('#mouseOverText').css('fontSize',mouseOver.browserTextSize + "px");
       var maximumWidth = mouseOver.getWidthOfText(mouseOverValue);
       if ( 0 === mouseOver.noDataSize) {  // only need to do this once
         mouseOver.noDataSize = mouseOver.getWidthOfText(mouseOver.noDataString);
       }
       if (mouseOver.noDataSize > maximumWidth) {
           maximumWidth = mouseOver.noDataSize;
       }
       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)
     {
        // avoid fetching the same URL multiple times.  Multiple track data
        // can be in a single json file
        if (mouseOver.jsonUrl[url]) {
           mouseOver.jsonUrl[url] += 1;
           return;
        }
        mouseOver.jsonUrl[url] = 1;     // remember already done this one
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
          if (4 === this.readyState && 200 === this.status) {
             var mapData = JSON.parse(this.responseText);
             mouseOver.receiveData(mapData);
          } else {
             if (4 === this.readyState && 404 === this.status) {
                mouseOver.failedRequest(url);
             }
          }
        };
     xmlhttp.open("GET", url, true);
     xmlhttp.send();  // sends request and exits this function
                      // the onreadystatechange callback above will trigger
                      // when the data has safely arrived
     },
 
     getData: function ()
     {
       // check for the hidden div elements for mouseOverData
       // single file version can find many trackNames, but will all
       // be the same URL
       var trackList = document.getElementsByClassName("mouseOverData");
       for (var i = 0; i < trackList.length; i++) {
         var trackName = trackList[i].getAttribute('name');
         var jsonFileUrl = trackList[i].getAttribute('jsonUrl');
         if (jsonFileUrl) { mouseOver.fetchJsonData(jsonFileUrl); }
       }
     },
 
     // any scrolling turns the popUp message off
     scroll: function()
     {
     if (mouseOver.visible) { mouseOver.popUpDisappear(); }
     },
 
     addListener: function () {
         mouseOver.visible = false;
         if (window.browserTextSize) {
            mouseOver.browserTextSize = window.browserTextSize;
         }
         window.addEventListener('scroll', mouseOver.scroll, false);
         // Call getData directly since the DOM is already parsed by the time
         // $(document).ready() calls addListener.
         mouseOver.getData();
     }
 };	//	var mouseOver
 
   //////////////////////
  //// track search ////
 //////////////////////
 var trackSearch = {
 
     searchKeydown: function (event)
     {
         if (event.which === 13) {
             // Required to fix problem on IE and Safari where value of hgt_tSearch is "-"
             //    (i.e. not "Search").
             // NOTE: must match TRACK_SEARCH_PAGER in hg/inc/searchTracks.h
             $("input[name=hgt_tsPage]").val(0);  
             $('#trackSearch').submit();
             // This doesn't work with IE or Safari.
             // $('#searchSubmit').trigger("click");
         }
     },
 
     init: function ()
     {
         // Track search uses tabs
         if ($("#tabs").length > 0) {
             // Search page specific code
 
             var val = $('#currentTab').val();
             $("#tabs").tabs({
                                 show: function(event, ui) {
                                     $('#currentTab').val(ui.newPanel[0].id);
                                 },
                                 activate: function(event, ui) { findTracks.switchTabs(ui); }
                             });
             $('#tabs').show();
             if (val === 'simpleTab' && $('div#found').length < 1) {
                 $('input#simpleSearch').trigger("focus");
             }
             $("#tabs").css('font-family', jQuery('body').css('font-family'));
             $("#tabs").css('font-size', jQuery('body').css('font-size'));
             $('.submitOnEnter').on("keydown", trackSearch.searchKeydown);
             findTracks.normalize();
             findTracks.updateMdbHelp(0);
         }
     }
 };
 
 ////////
 // Download Current Tracks in window Dialog
 ////////
 var downloadCurrentTrackData = {
     downloadData: {}, // container for holding data while it comes in from the api
     currentRequests: {}, // pending requests
     intervalId: null, // the id of the timer that waits on the api
 
     failedTrackDataRequest: function(msg) {
         msgJson = JSON.parse(msg);
         alert("Download failed. Error message: '" + msgJson.error);
     },
 
     receiveTrackData: function(track, data) {
         downloadCurrentTrackData.downloadData[track] = data;
     },
 
     convertJson: function(data, outType, withHeaders) {
         if (outType !== "tsv" && outType !== "csv") {
             alert("ERROR: incorrect output format option");
             return null;
         }
         let outSep = outType === "tsv" ? '\t' : ',';
         // TODO: someday we will probably want to include some of these fields
         // for each track downloaded, perhaps as an option
         let ignoredKeys = new Set(["chrom", "dataTime", "dataTimeStamp", "downloadTime", "downloadTimeStamp",
             "start", "end", "track", "trackType", "genome", "itemsReturned", "columnTypes",
             "bigDataUrl", "chromSize", "hubUrl"]);
         let columnTypes;
         let cleanData = {};
         // first get rid of top level non track object keys
         _.each(data, function(val, key) {
             if (ignoredKeys.has(key)) {
                 // squirrel away the columnTypes if requested
                 if (key === "columnTypes") {
                     columnTypes = data[key];
                 }
             } else {
                 cleanData[key] = data[key];
             }
         });
         // now go through each track and format it correctly
         let str = "";
         _.each(cleanData, function(val, track) {
             str += "track name=\"" + track + "\"\n";
             if (withHeaders) {
                 let headers = [];
                 if (columnTypes) {
                     for (let i of columnTypes[track]) {
                         headers.push(i.name);
                     }
                     if (headers.length) {
                         str += headers.join(outSep) + "\n";
                     }
                 }
             }
             for (let row of val) {
                 for (let i = 0; i < row.length; i++) {
                     str += JSON.stringify(row[i]);
                     if (i+1 < row.length) { str += outSep; }
                 }
                 str += "\n";
             }
             str += "\n"; // extra new line after each track oh well
         });
         return new Blob([str], {type: "text/plain"});
     },
 
     makeDownloadFile: function(key) {
         if (_.keys(downloadCurrentTrackData.currentRequests).length === 0) {
             // first stop the timer so we don't execute again
             clearInterval(downloadCurrentTrackData.intervalId);
             let outType = $("#outputFormat")[0].selectedOptions[0].value;
             let withHeaders = document.getElementById("downloadTrackHeaders").checked;
             var blob = null;
             if (outType === 'json') {
                 blob = new Blob([JSON.stringify(downloadCurrentTrackData.downloadData[key])], {type: "text/plain"});
             } else {
                 blob = downloadCurrentTrackData.convertJson(downloadCurrentTrackData.downloadData[key], outType, withHeaders);
             }
             if (blob) {
                 anchor = document.createElement("a");
                 anchor.href = URL.createObjectURL(blob);
                 fname = $("#downloadFileName")[0].value;
                 if (fname.length === 0) {
                     fname = "trackDownload.txt";
                 }
                 switch (outType) {
                     case "tsv":
                         if (!fname.endsWith(".tsv")) {fname += ".tsv";}
                         break;
                     case "csv":
                         if (!fname.endsWith(".csv")) {fname += ".csv";}
                         break;
                     default:
                         if (!fname.endsWith(".txt")) {fname += ".txt";}
                         break;
                 }
                 anchor.download = fname;
                 anchor.click();
                 window.URL.revokeObjectURL(anchor.href);
                 downloadCurrentTrackData.downloadData = {};
             }
         }
     },
 
     startDownload: function() {
         trackList = [];
         $(".downloadTrackName:checked").each(function(i, elem) {
             trackName = elem.id;
             if (getDb().startsWith("hub_")) {
                 // when we are working with assembly hubs, we undecorate the name
                 trackName = undecoratedTrack(elem.id);
             }
             trackList.push(trackName);
         });
         if (trackList.length == 0) {
             alert("At least one track must be selected");
             return;
         } else if (trackList.length > 100) {
             alert("Too many tracks requested. Please limit requests to 100 tracks or less");
             return;
         } else if (trackList.join(',').length > 7000) {
             // tracks with too long of names and we hit the max URI length allowed
             // by Apache, I doubt this could happen without requesting more than the
             // 100 tracks allowed above, but just in case:
             alert("Too many tracks requested");
             return;
         }
         chrom = hgTracks.chromName;
         start = hgTracks.winStart;
         end = hgTracks.winEnd;
         db = getDb();
         apiUrl = "../cgi-bin/hubApi/getData/track?";
         apiUrl += "chrom=" + chrom;
         apiUrl += ";start=" + start;
         apiUrl += ";end=" + end;
         apiUrl += ";genome=" + db;
         apiUrl += ";jsonOutputArrays=1";
         apiUrl += ";track=" + trackList.join(',');
         var xmlhttp = new XMLHttpRequest();
         downloadCurrentTrackData.currentRequests[apiUrl] = true;
         xmlhttp.onreadystatechange = function() {
             if (4 === this.readyState && 200 === this.status) {
                 var mapData = JSON.parse(this.responseText);
                 downloadCurrentTrackData.receiveTrackData(apiUrl, mapData);
                 delete downloadCurrentTrackData.currentRequests[apiUrl];
             } else {
                 if (4 === this.readyState && this.status >= 400) {
                     clearInterval(downloadCurrentTrackData.intervalId);
                     downloadCurrentTrackData.failedTrackDataRequest(this.responseText);
                     delete downloadCurrentTrackData.currentRequests[apiUrl];
                 }
             }
         };
         xmlhttp.open("GET", apiUrl, true);
         xmlhttp.send();  // sends request and exits this function
         // the onreadystatechange callback above will trigger
         // when the data has safely arrived
         // wait for the request to complete before making the download file
         downloadCurrentTrackData.intervalId = setInterval(downloadCurrentTrackData.makeDownloadFile, 200, apiUrl);
     },
 
 
     showDownloadUi: function() {
         // Populate the dialog with the current list of tracks
         // and allow the user to select which ones to download
         // Grey out tracks that are currently unsupported by the api
         // or are protected data
         var downloadDialog = $("#downloadDialog")[0];
         if (!downloadDialog) {
             downloadDialog = document.createElement("div");
             downloadDialog.id = "downloadDialog";
             downloadDialog.style = "display: none";
             document.body.append(downloadDialog);
             var popMaxHeight = ($(window).height() - 40);
             var popMaxWidth  = ($(window).width() - 40);
             var popWidth     = 700;
             if (popWidth > popMaxWidth)
                 popWidth = popMaxWidth;
             downloadTrackDataButtons = {};
             downloadTrackDataButtons.Download = downloadCurrentTrackData.startDownload;
             downloadTrackDataButtons.Cancel = function(){
                 $(this).dialog("close");
             };
             $(downloadDialog).dialog({
                 title: "Download track data in view",
                 resizable: false,
                 height: 'auto',
                 width: popWidth,
                 minHeight: 200,
                 minWidth: 400,
                 maxHeight: popMaxHeight,
                 maxWidth: popMaxWidth,
                 modal: true,
                 closeOnEscape: true,
                 autoOpen: false,
                 buttons: downloadTrackDataButtons
             });
         }
         htmlStr = "<p>Use this selection window to download track data" +
             " for the current region (" + genomePos.get() + "). Please note that large regions" +
             " may be slow to download.</p>";
         htmlStr  += "<div><button id='checkAllDownloadTracks'>Check All</button>" +
             "&nbsp;" +
             "<button id='uncheckAllDownloadTracks'>Clear All</button>" +
             "</div>";
         _.each(hgTracks.trackDb, function(track, trackName) {
             showDisabledMsg = false;
             if (!trackName.includes("Squish") && trackName !== "ruler" && track.visibility > 0) {
                 htmlStr += "<input type=checkbox class='downloadTrackName' id='" + trackName + "'";
                 if (trackName.startsWith("ct_") || trackName === "hgPcrResult" ||
                         track.type === "mathWig" || !tdbIsLeaf(track)) {
                     showDisabledMsg = true;
                     htmlStr += " disabled ";
                 } else {
                     htmlStr += " checked ";
                 }
                 htmlStr +=  ">";
                 htmlStr += "<label>" + track.shortLabel + "</label>";
                 htmlStr += "</input>";
                 if (showDisabledMsg) {
                     htmlStr += "&nbsp;<span id='" + trackName + "Tooltip'><a href='#'>(?)</a></span>";
                 }
                 htmlStr += "<br>";
             }
         });
         htmlStr += "<div ><label style='padding-right: 10px' for='downloadFileName'>Enter an output file name</label>";
         htmlStr += "<input type=text size=30 class='downloadFileName' id='downloadFileName'" +
             " value='" + getDb() + ".tracks'></input>";
         htmlStr += "<br>";
         htmlStr += "<label style='padding-right: 10px' for='outputFormat'>Choose an output format</label>";
         htmlStr += "<select name='outputFormat' id='outputFormat'>";
         htmlStr += "<option selected value='json'>JSON</option>";
         htmlStr += "<option value='csv'>CSV</option>";
         htmlStr += "<option value='tsv'>TSV</option>";
         htmlStr += "</select>";
         htmlStr += "<br>";
         htmlStr += "<label style='padding-right: 10px' for='downloadTrackHeaders'>Include track column headers</label>";
         htmlStr += "<input type='checkbox' checked id='downloadTrackHeaders'></input>";
         htmlStr += "</div>";
         downloadDialog.innerHTML = htmlStr;
         $("#checkAllDownloadTracks").on("click", function() {
             $(".downloadTrackName").each(function(i, elem) {
                 elem.checked = true;
             });
         });
         $("#uncheckAllDownloadTracks").on("click", function() {
             $(".downloadTrackName").each(function(i, elem) {
                 elem.checked = false;
             });
         });
         $(downloadDialog).dialog('open');
         $("[id$='Tooltip'").each(function(i, elem) {
             addMouseover(elem, "This track must be downloaded with the Table Browser");
         });
     }
 };
 
   ///////////////
  //// READY ////
 ///////////////
 $(document).ready(function()
 {
     imageV2.moveTiming();
 
     // hg.conf will turn this on 2020-10 - Hiram
     if (window.mouseOverEnabled) { mouseOver.addListener(); }
 
     // custom tracks get little trash icons
     $("div.trackDeleteIcon").on("click", onTrackDelIconClick );
 
     // quickLift tracks get a little 'x' icon
     $("div.quickLiftDelIcon").on("click", onQuickLiftDelIconClick );
 
     // on Safari the back button doesn't call the ready function.  Reload the page if
     // the back button was pressed.
     $(window).on("pageshow", function(event) {
         if (event.originalEvent.persisted) {
                 window.location.reload() ;
         }
     });
 
     // The page may be reached via browser history (back button)
     // If so, then this code should detect if the image has been changed via js/ajax
     // and will reload the image if necessary.
     // NOTE: this is needed for IE but other browsers can detect the dirty page much earlier
     if (!imageV2.backSupport) {
         if (imageV2.isDirtyPage()) {
             // mark as non dirty to avoid infinite loop in chrome.
             imageV2.markAsCleanPage();
             jQuery('body').css('cursor', 'wait');
             window.location = "../cgi-bin/hgTracks?hgsid=" + getHgsid();
             return false;
         }
     }
 
     initVars();
     imageV2.loadSuggestBox();
     if ($('#pdfLink').length === 1) {
         $('#pdfLink').on("click", function(i) {
             var thisForm = normed($('#TrackForm'));
             if (thisForm) {
                 //alert("posting form:"+$(thisForm).attr('name'));
                 updateOrMakeNamedVariable($(thisForm),'hgt.psOutput','on');
                 return postTheForm($(thisForm).attr('name'),this.href);
             }
             return true;
         });
     }
 
     if (imageV2.enabled) {
 
         // Make imgTbl allow drag reorder of imgTrack rows
         dragReorder.init();
         var imgTable = $(".tableWithDragAndDrop");
         if ($(imgTable).length > 0) {
             $(imgTable).tableDnD({
                 onDragClass: "trDrag",
                 dragHandle: "dragHandle",
                 scrollAmount: 40,
                 onDragStart: function(ev, table, row) {
                     mouse.saveOffset(ev);
                     $(document).on('mousemove',posting.blockTheMapOnMouseMove);
 
                     // Can drag a contiguous set of rows if dragging blue button
                     table.tableDnDConfig.dragObjects = [ row ]; // defaults to just the one
                     var btn = $( row ).find('p.btnBlue');  // btnBlue means cursor over left button
                     if (btn.length === 1) {
                         table.tableDnDConfig.dragObjects = dragReorder.getContiguousRowSet(row);
                         var compositeSet = dragReorder.getCompositeSet(row);
                         if (compositeSet && compositeSet.length > 0)
                             $( compositeSet ).find('p.btn').addClass('blueButtons');// blue persists
                     }
                 },
                 onDrop: function(table, row, dragStartIndex) {
                     var compositeSet = dragReorder.getCompositeSet(row);
                     if (compositeSet && compositeSet.length > 0)
                         $( compositeSet ).find('p.btn').removeClass('blueButtons');// blue persists
                      // NOTE: As of jquery 1.6, attr() can no longer be used to get/set values
                      // that are not explicitly attributes, instead prop() should be used instead.
                      // However this can cause problems in our legacy code because prop() returns
                      // undefined if the property was not set! rowIndex is a property set by
                      // tableDnd so we must use prop() to check for it's value, not attr()
                     let rowIndex = $(row).prop('rowIndex');
                     if (typeof rowIndex !== "undefined" && rowIndex !== dragStartIndex) {
                         // NOTE Even if dragging a contiguous set of rows,
                         // still only need to check the one under the cursor.
                         if (dragReorder.setOrder) {
                             dragReorder.setOrder(table);
                         }
                         dragReorder.zipButtons( table );
                     }
                     $(document).off('mousemove',posting.blockTheMapOnMouseMove);
                     // Timeout necessary incase the onDrop over map item. onDrop takes precedence.
                     setTimeout(posting.allowMapClicks,100);
                 }
             });
         }
 
         // Drag scroll init
         if (hgTracks.imgBoxPortal) {
             // Turn on drag scrolling.
             $("div.scroller").panImages();
         }
 
         // Retrieve tracks via AJAX that may take too long to draw initialliy (i.e. a remote bigWig)
         var retrievables = $('#imgTbl').find("tr.mustRetrieve");
         if ($(retrievables).length > 0) {
             $(retrievables).each( function (i) {
                 var trackName = $(this).attr('id').substring(3);
                 imageV2.requestImgUpdate(trackName,"","");
             });
         }
         imageV2.loadRemoteTracks();
 
         if (typeof clinicalTour !== 'undefined') {
             if (typeof startClinicalOnLoad !== 'undefined' && startClinicalOnLoad){
                 clinicalTour.start();
             }
         }
         // show a tutorial page if this is a new user
         if (typeof basicTour !== 'undefined') {
             if (typeof startTutorialOnLoad !== 'undefined' && startTutorialOnLoad) {
                 basicTour.start();
             }
             let lsKey = "hgTracks_hideTutorial";
             let isUserLoggedIn = (typeof userLoggedIn !== 'undefined' && userLoggedIn === true);
             let hideTutorial = localStorage.getItem(lsKey);
             let tutMsgKey = "hgTracks_tutMsgCount";
             let tmp = localStorage.getItem(tutMsgKey), tutMsgCount = 0;
             if (tmp !== null) {tutMsgCount = parseInt(tmp);}
             // if the user is not logged in and they have not already gone through the
             // tutorial
             if (!isUserLoggedIn && !hideTutorial && tutMsgCount < 5) {
                 let msg = "New to the Genome Browser? See our short (2-3 minute) guided tutorial. " +
                     "All tutorials can be found in the top blue bar menu under <b>Help</b> > <b>Interactive Tutorial</b>.<br>" +
                     "<button id='showTutorialLink' href=\"#showTutorial\">Start tutorial</button>";
                 notifBoxSetup("hgTracks", "hideTutorial", msg, true);
                 notifBoxShow("hgTracks", "hideTutorial");
                 localStorage.setItem("hgTracks_tutMsgCount", ++tutMsgCount);
                 $("#showTutorialLink").on("click", function() {
                     $("#hgTracks_hideTutorialnotifyHideForever").trigger("click");
                     basicTour.start();
                 });
             }
         }
         // allow the user to bring the tutorials popup via a new help menu button
         let tutorialLinks = document.createElement("li");
         tutorialLinks.id = "hgTracksHelpTutorialLinks";
         tutorialLinks.innerHTML = "<a id='hgTracksHelpTutorialLinks' href='#showTutorialPopup'>" +
             "Interactive Tutorials</a>";
         $("#help > ul")[0].appendChild(tutorialLinks);
         $("#hgTracksHelpTutorialLinks").on("click", function () {
             // Check to see if the tutorial popup has been generated already
             let tutorialPopupExists = document.getElementById ("tutorialContainer");
             if (!tutorialPopupExists) {
                 // Create the tutorial popup if it doesn't exist
                 createTutorialPopup();
             } else {
                 //otherwise use jquery-ui to open the popup
                 $("#tutorialContainer").dialog("open");
             }
         });
         
         // Any highlighted region must be shown and warnBox must play nice with it.
         imageV2.drawHighlights();
         // When warnBox is dismissed, any image highlight needs to be redrawn.
         $('#warnOK').on("click", function (e) { imageV2.drawHighlights();});
         // Also extend the function that shows the warn box so that it too redraws the highlight.
         showWarnBox = (function (oldShowWarnBox) {
             function newShowWarnBox() {
                 oldShowWarnBox.apply();
                 imageV2.drawHighlights();
             }
             return newShowWarnBox;
         })(showWarnBox);
         // redraw highlights if the notification box is closed
         $("[id$=notifyHide],[id$=notifyHideForever]").on("click", function(e) {
             imageV2.drawHighlights();
         });
         notifBoxShow = (function(oldNotifBoxShow) {
             function newNotifBoxShow() {
                 oldNotifBoxShow.apply(null, arguments);
                 imageV2.drawHighlights();
             }
             return newNotifBoxShow;
         })(notifBoxShow);
     }
 
     // Drag select in chromIdeogram
     if ($('img#chrom').length === 1) {
         if ($('area.cytoBand').length >= 1) {
             $('img#chrom').chromDrag();
         }
     }
 
     // Track search uses tabs
     trackSearch.init();
 
     // Drag select initialize
     if (imageV2.enabled) {   // moved from window.load().
         dragSelect.load(true);
 
         if ($('#hgTrackUiDialog'))
             $('#hgTrackUiDialog').hide();
 
         // Don't load contextMenu if jquery.contextmenu.js hasn't been loaded
         if (jQuery.fn.contextMenu) {
             rightClick.load(imageV2.imgTbl);
         }
     }
 
     // jquery.history.js Back-button support
     if (imageV2.enabled && imageV2.backSupport) {
         imageV2.setupHistory();
     }
 
     // ensure clicks into hgTrackUi save the cart state
     $("td a").each( function (tda) {
         if (this.href && this.href.indexOf("hgTrackUi") !== -1) {
             this.onclick = posting.saveSettings;
         }
     });
 
 
     // add a 'link' to download the current track data (under hg.conf control)
     if (typeof showDownloadButton !== 'undefined' && showDownloadButton) {
         newListEl = document.createElement("li");
         newLink = document.createElement("a");
         newLink.setAttribute("id", "hgTracksDownload");
         newLink.setAttribute("name", "downloadTracks");
         newLink.textContent = "Download Current Track Data";
         newLink.href = "#";
         newListEl.appendChild(newLink);
         let opt = document.querySelector("#downloads > ul");
         if (opt) {
             opt.appendChild(newListEl);
             $("#hgTracksDownload").on("click", downloadCurrentTrackData.showDownloadUi);
         }
     }
 
     if (typeof doMyVariants !== 'undefined' && doMyVariants) {
         myVariants.init();
         document.getElementById("myVariantsButton").addEventListener("click", (e) => {
             e.preventDefault();
             e.stopPropagation();
             myVariants.showDialog();
         });
+        // Add a "My Annotations" link to the My Data menu that opens the same
+        // dialog as the Add Annotation button below the image.
+        let myDataList = document.querySelector("#myData > ul");
+        if (myDataList) {
+            newListEl = document.createElement("li");
+            newLink = document.createElement("a");
+            newLink.setAttribute("id", "myAnnotationsMenuLink");
+            newLink.setAttribute("title", "Add an item to the My Annotations track");
+            newLink.textContent = "My Annotations";
+            newLink.href = "#";
+            newListEl.appendChild(newLink);
+            // Place it right after Custom Tracks; fall back to the top of the menu.
+            let customTracksItem = document.getElementById("customTracksMenuLink");
+            if (customTracksItem && customTracksItem.parentNode.parentNode === myDataList)
+                myDataList.insertBefore(newListEl, customTracksItem.parentNode.nextSibling);
+            else
+                myDataList.insertBefore(newListEl, myDataList.firstElementChild);
+            newLink.addEventListener("click", (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                myVariants.showDialog();
+            });
+        }
     }
 
     if (typeof showMouseovers !== 'undefined' && showMouseovers) {
         convertTitleTagsToMouseovers();
     }
 
 });
 
 function hgtWarnTiming(maxSeconds) {
     /* show a dialog box if the page load time was slower than x seconds. Has buttons to hide or never show this again. */
     var loadTime = window.performance.timing.domContentLoadedEventStart-window.performance.timing.navigationStart; /// in msecs
     var loadSeconds = loadTime/1000;
     if (loadSeconds < maxSeconds)
         return;
 
     var skipNotification = localStorage.getItem("hgTracks.hideSpeedNotification");
     dumpCart(loadSeconds, skipNotification);
         
     if (skipNotification)
         return;
 
     msg = "This page took "+loadSeconds+" seconds to load, more than "+maxSeconds+" seconds. We strive to keep "+
         "the UCSC Genome Browser quick and responsive. See our "+
         "<b><a href='../FAQ/FAQtracks.html#speed' target='_blank'>display speed FAQ</a></b> for "+
         "common causes and solutions to slow performance. If this problem continues, you can create a  "+
         "session link via <b>My Data</b> &gt; <b>My Sessions</b> and send the link to <b>genome-www@soe.ucsc.edu</b>.";
     notifBoxSetup("hgTracks", "hideSpeedNotification", msg);
     notifBoxShow("hgTracks", "hideSpeedNotification");
 }
 
 //////////////////////////
 // Attempt to support panning by dragging IGV track.  The dragging works, but its not clear to do on drag end.
 
 document.addEventListener('DOMContentLoaded', function () {
     if (typeof igv !== 'undefined') {
 
         // TODO -- probably should use genomePos.get() and set() here, but I (JTR) don't fully understand that
         // object and calling set() seems to have side effects.  So this variable is a placeholder.
 
         const pos = {};
 
         igv.ucscTrackpan = (newPosition) => {
 
             const positionOffset = (newPosition - hgTracks.imgBoxPortalStart);
             const pixelOffset = Math.round(positionOffset / hgTracks.imgBoxBasesPerPixel);
             const newX = -(pixelOffset + hgTracks.imgBoxLeftLabel);
             var nowPos = newX.toString() + "px";
             $(".panImg").css({'left': nowPos});
             $('.tdData').css({'backgroundPosition': nowPos});
 
             pos.chrom = hgTracks.chromName;
             pos.start = Math.round(newPosition + 1);
             pos.end = pos.start + (hgTracks.winEnd - hgTracks.winStart);  // Dragging will not change the bp width
 
             $('#positionDisplay').text(pos.chrom + ":" + commify(pos.start) + "-" + commify(pos.end));
         };
 
         igv.ucscTrackpanEnd = () => {
             if (imageV2.inPlaceUpdate) {
                 imageV2.navigateInPlace("db=" + getDb() + "&position=" +
                     encodeURIComponent(pos.chrom + ":" + pos.start + "-" + pos.end),
                     null, false);
             } else {
                 document.TrackHeaderForm.submit();
             }
         };
     }
 });