68137bd66978c21a5d168b5216f07f03caf34f3c
chmalee
  Fri Oct 10 15:10:09 2025 -0700
Also create the 'x' icons with display:none so mouseover/mouseleave and track drag work correctly, refs #34420

diff --git src/hg/js/utils.js src/hg/js/utils.js
index 580c5d0c564..bf776f59a68 100644
--- src/hg/js/utils.js
+++ src/hg/js/utils.js
@@ -3843,30 +3843,32 @@
         if (a && a[1]) {
             id = a[1];
         }
         if (id.length > 0) {
             if ( ! imageV2.lastTrack || imageV2.lastTrack.id !== id) {
                 imageV2.lastTrack = rightClick.makeMapItem(id);
                 // currentMapItem gets set by mapItemMapOver.   This is just backup
             }
 
             if (typeof greyBarIcons !== 'undefined' && greyBarIcons === true) {
                 // show the gear icon over the grey bar to bring up the context menu
                 let tdBtn = document.getElementById("td_btn_" + id);
                 if (tdBtn) {
                     let span = document.getElementById("gear_btn_" + id);
                     if (span) {
+                        // hide any gears that may be present from dragging
+                        $(document.querySelectorAll("[id^=gear_btn]")).hide();
                         $(span).show();
                         tdBtn.style.position = "relative";
                         let tdbKey = tdBtn.id.replace("td_btn_","");
                         let tdb = hgTracks.trackDb[tdbKey];
                         let tooltip = " click or right click to configure... drag to reorder";
                         if (typeof tdb.parentLabel !== 'undefined') {
                             addMouseover(span, tdb.parentLabel + tooltip + " highlighted subtracks");
                         } else {
                             addMouseover(span, tdb.shortLabel + tooltip);
                         }
                         span.addEventListener("click", (e) => {
                             // trigger a click on the <a> of the td
                             e.preventDefault();
                             e.stopPropagation();
                             e.stopImmediatePropagation();
@@ -3887,68 +3889,67 @@
                                 dragReorder.buttonMouseOver.call(tdp, e);
                             });
                             span.addEventListener("pointerleave", (e) => {
                                 dragReorder.buttonMouseOut.call(tdp, e);
                             });
                         }
                     }
                 }
 
                 // add an 'x' icon in the label area to hide the track
                 let tdSide = document.getElementById("td_side_" + id);
                 if (tdSide) {
                     // mouseover event fires if you stop moving the mouse while still
                     // hovering the element and then move it again, don't make
                     // duplicate btns in that case
-                    if (!document.getElementById("close_btn_" + id)) {
-                        let btn = document.createElement("span");
-                        btn.id = "close_btn_" + id;
-                        btn.classList.add("hgTracksCloseIcon", "ui-icon", "ui-icon-close");
-                        btn.title = "Hide track";
-                        tdSide.appendChild(btn);
+                    let btn = document.getElementById("close_btn_" + id);
+                    if (btn) {
+                        // hide any shown 'x' buttons from dragging
+                        $(document.querySelectorAll("[id^=close_btn]")).hide();
+                        $(btn).show();
                         addMouseover(btn, btn.title);
                         tdSide.style.position = "relative";
                         if (hgTracks && hgTracks.revCmplDisp) {
                             // set up 'x' icon to the right
                             btn.classList.add("hgTracksCloseIconRight");
                         } else {
                             // set up 'x' icon to the left
                             btn.classList.add("hgTracksCloseIconLeft");
                         }
                         btn.addEventListener("click", (e) => {
                            rightClick.hideTracks([id]);
                         });
                     }
                 }
             }
         }
     },
 
     trMouseLeave: function(e)
     {
         var id = '';
         var a = /tr_(.*)/.exec($(this).attr('id'));  // voodoo
         if (a && a[1]) {
             id = a[1];
         }
         if (id.length > 0) {
-            // remove 'x' icon in the label area to hide the track
+            // hide 'x' icon in the label area to hide the track
             let tdSide = document.getElementById("td_side_" + id);
             if (tdSide) {
                 let btn = document.getElementById("close_btn_" + id);
                 if (btn) {
-                    btn.remove();
+                    $(btn).hide();
                 }
             }
 
             // hide gear icon over the grey bar
             let tdBtn = document.getElementById("td_btn_" + id);
             if (tdBtn) {
                 let btn = document.getElementById("gear_btn_" + id);
                 if (btn) {
                     $(btn).hide();
                 }
             }
         }
     },
 
     mapItemMouseOver: function ()