cfeb4d454d22011d7f637d060e7a51057d168504
braney
  Mon Mar 30 12:01:16 2026 -0700
Add color picker support for most track types, refs #20460

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

diff --git src/hg/js/hui.js src/hg/js/hui.js
index 76c8485771f..6e72f50a4d1 100644
--- src/hg/js/hui.js
+++ src/hg/js/hui.js
@@ -1483,31 +1483,31 @@
                 $(this).find('img').attr('src','../images/upBlue.png');
             } else {
                 newStyle = 'display:none'; 
                 $(this).find('img').attr('src','../images/downBlue.png');
             }
 
             for (var control in advancedControls ) 
                 advancedControls[control].style = newStyle;
         });
 }
 
 
 var hlColor = '#aac6ff';
 var prevHlColor;
 var hlColorDefault = '#aac6ff';
-function makeHighlightPicker(cartVar, parentEl, trackName, label, cartColor = hlColorDefault) {
+function makeHighlightPicker(cartVar, parentEl, trackName, label, cartColor = hlColorDefault, defaultColor = hlColorDefault, hasItemRgb = false, hasOverride = true) {
 /* Create an input with a color selection field, optionally append the resulting
  * html to parentEl, if parent is not null */
     /* Some helper function for keeping track of colors */
     let saveHlColor = function(hlColor, trackName) {
         hlColor = hlColor;
         if (typeof common !== "undefined" && common.track) {
             // regular hgTrackUi
             setCartVars([cartVar], [hlColor], null, true);
         } else if (trackName) {
             // hgTrackUi pop up
             cart.setVars([cartVar], [hlColor], null, false);
         } else {
             // hgTracks dragSelect, uses different cart variable
             cart.setVars(["prevHlColor"], [hlColor], null, false);
         }
@@ -1566,45 +1566,63 @@
         throw new Error();
     }
     let opt = {
         hideAfterPaletteSelect: true,
         color: $(inpSpec).val(),
         showPalette: true,
         showInput: true,
         showSelectionPalette: true,
         showInitial: true,
         preferredFormat: "hex",
         localStorageKey: "genomebrowser",
         change: function() {
             let color = $(inpSpec).spectrum("get");
             $(inpText).val(color);
             saveHlColor(color, trackName);
+            if (statusSpan) statusSpan.textContent = "";
         },
     };
     $(inpSpec).spectrum(opt);
 
     // update the color picker if you change the input box
     $(inpText).on("change", function() {
         $(inpSpec).spectrum("set", $(inpText).val());
         saveHlColor($(inpText).val(), trackName);
+        if (statusSpan) statusSpan.textContent = "";
     });
+    let statusSpan = document.createElement("span");
+    statusSpan.style = "margin-left: 10px; font-style: italic";
+    colorPickerContainer.appendChild(statusSpan);
+
+    // show initial status if itemRgb is active and no color override is set
+    if (hasItemRgb && !hasOverride) {
+        statusSpan.textContent = "items are currently being colored per item";
+    }
+
     // Restore the default on Reset link click
     $(inpResetLink).on("click", function() {
-        let hlDefault = hlColorDefault;
-        $(inpText).val(hlDefault);
-        $(inpSpec).spectrum("set", hlDefault);
-        saveHlColor(hlDefault, trackName);
+        $(inpText).val(defaultColor);
+        $(inpSpec).spectrum("set", defaultColor);
+        if (cartVar === "hlColor") {
+            saveHlColor(defaultColor, trackName);
+        } else {
+            // clear the cart variable so itemRgb and other per-item coloring is restored
+            saveHlColor("", trackName);
+            if (hasItemRgb) {
+                statusSpan.textContent = "items are currently being colored per item";
+            }
+        }
     });
     $(inpSpec).spectrum("set", $(inpText).val());
 }
 
 function superUiSetAllTracks(onlyVisible) {
     /* called when user clicks the 'Apply to all' buttons: sets all viz dropdowns to the #superSubViz value */
     let newVal = $('#superSubViz').val();
     var selects = document.querySelectorAll('#superTrackTable select');
     for (var i = 0; i < selects.length; i++) {
         var sel = selects[i];
         if (sel.id==="superSubViz")
             continue;
         if (onlyVisible && sel.value === 'hide')
             continue;
         sel.value = newVal;