8593c40cb74ab6ee9f2318056626305d9d9544d3
braney
  Fri Apr 10 12:54:44 2026 -0700
Fix color picker from code review, refs #37329, refs #20460

- Replace Spectrum JS color picker with native HTML5 color input,
matching existing Hi-C picker
- Color saved on form submit, not immediately via AJAX
- Add checkbox to enable/disable color override; auto-checks when
user picks a color
- Gate color picker behind hg.conf showColorPicker=on (off by default)
- Only show picker for non-composite tracks that support it: bed,
bigBed, genePred, bigGenePred, wig, bigWig, rmsk, interact,
bigInteract, bigLolly, vcfTabix, vcf
- Add colorFromCart calls to interact, lolly, vcf phased, and pgSnp
drawing code
- Revert hui.js Spectrum changes from cfeb4d4 (no longer needed)
- Use htmlColorForCode()/htmlColorToRGB() from htmlColor.h instead of
hand-rolled hex parsing in colorFromCart

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 f2651b68917..4b3ce46764b 100644
--- src/hg/js/hui.js
+++ src/hg/js/hui.js
@@ -1497,31 +1497,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, defaultColor = hlColorDefault, hasItemRgb = false, hasOverride = true) {
+function makeHighlightPicker(cartVar, parentEl, trackName, label, cartColor = hlColorDefault) {
 /* 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);
         }
@@ -1580,63 +1580,46 @@
         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() {
-        $(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";
-            }
-        }
+        let hlDefault = hlColorDefault;
+        $(inpText).val(hlDefault);
+        $(inpSpec).spectrum("set", hlDefault);
+        saveHlColor(hlDefault, trackName);
     });
     $(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;