1de1fe76385950b7d2bd5b63e1ba2eac60c5af39
chmalee
  Wed May 7 06:37:32 2025 -0700
Set mouseover ids to random ints rather than the full mouseover text to reduce size of DOM, refs Max email

diff --git src/hg/js/utils.js src/hg/js/utils.js
index 6127580c972..eeebbe63898 100644
--- src/hg/js/utils.js
+++ src/hg/js/utils.js
@@ -4168,30 +4168,37 @@
         return;
     }
 
     // wait for the mouse to stop moving:
     if (currTooltipIsDelayed) {
         mousemoveTimer = setTimeout(mousemoveTimerHelper, 1500, e, this);
         mousedNewItem = true;
     } else {
         mousemoveTimer = setTimeout(mousemoveTimerHelper, 500, e, this);
         if (!(mouseIsOverPopup(e, this) || mouseIsOverItem(e, this))) {
             return;
         }
     }
 }
 
+function getRandomInt() {
+    // get a random integer between 1 and 1000000
+    let min = 1;
+    let max = 1000000;
+    return Math.floor(Math.random() * (max + min) + min);
+}
+
 function showMouseoverText(ev) {
     /* If a tooltip is not visible, show the tooltip text right away. If a tooltip
      * is visble, do nothing as the mousemove event helper will re-call us
      * after hiding the tooltip that is shown */
     ev.preventDefault();
     let referenceElement = lastMouseoverEle;
 
     if (!tooltipIsVisible() &&
             // wiggle mouseovers have special code, don't use these tooltips for those:
             (typeof mouseOver === "undefined" || !mouseOver.visible)) {
         let tooltipDivId = "#" + referenceElement.getAttribute("mouseoverid");
         let tooltipDiv = $(tooltipDivId)[0];
         if (!tooltipDiv) {
             return;
         }
@@ -4232,38 +4239,35 @@
 
     // make the mouseover div:
     let ele1 = e.currentTarget;
     let text = ele1.getAttribute("mouseoverText");
     if (ele1.getAttribute("mouseoverid") === null) {
         if (text.length > 0) {
             let newEl = document.createElement("span");
             newEl.style = "max-width: 400px"; // max width of the mouseover text
             newEl.innerHTML = text;
 
             let newDiv = document.createElement("div");
             newDiv.className = "tooltip";
             newDiv.style.position = "fixed";
             newDiv.style.display = "inline-block";
             if (ele1.title) {
-                newDiv.id = replaceReserved(ele1.title);
+                newDiv.id = getRandomInt();
                 ele1.setAttribute("originalTitle", ele1.title);
                 ele1.title = "";
             } else {
-                newDiv.id = replaceReserved(text);
-            }
-            if (ele1.coords) {
-                newDiv.id += "_" + ele1.coords.replaceAll(",","_");
+                newDiv.id = getRandomInt();
             }
             ele1.setAttribute("mouseoverid", newDiv.id);
             newDiv.append(newEl);
             ele1.parentNode.append(newDiv);
         } else {
             // shouldn't show a mouseover for something that doesn't have a mouseoverText attr,
             // meaning we got here without calling addMouseover(), this should not happen
             // but catch it to be safe
             return;
         }
     }
 
     // if a tooltip is currently visible, we need to wait for its mousemove
     // event to clear it before we can show this one, ie a user "hovers"
     // this element on their way to mousing over the shown mouseover