733ba7b804e84d7b60ccad1f137398ecd52db983
chmalee
  Tue Apr 23 18:15:09 2024 -0700
Add a general highlight trackDb variable(s), working like trackDb filters, except put a color behind the item, refs #24507

diff --git src/hg/js/hui.js src/hg/js/hui.js
index 518d666..43ee980 100644
--- src/hg/js/hui.js
+++ src/hg/js/hui.js
@@ -1,19 +1,20 @@
 // JavaScript Especially for hui.c
 
 // Don't complain about line break before '||' etc:
 /* jshint -W014 */
+/* jshint esnext: true */
 
 // The 'mat*' functions are designed to support subtrack config by 2D+ matrix of controls
 
 function _matSelectViewForSubTracks(obj,view)
 {
 // viewDD:onchange Handle any necessary changes to subtrack checkboxes when the view changes
 // views are "select" drop downs on a subtrack configuration page
     var classesHidden = ""; // Needed for later
     var matCBs = null;
 
     if (obj.selectedIndex === 0) { // hide
         matSubCBsEnable(false,view);
         hideConfigControls(view);
 
         // Needed for later
@@ -1461,15 +1462,103 @@
             if ($(advancedControls).css('display') === 'none') {
                 newStyle='display:visible';
                 $(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(inputId, parentEl, trackName) {
+/* 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([common.track + ".highlightColor"], [hlColor], null, true);
+        } else if (trackName) {
+            // hgTrackUi pop up
+            cart.setVars([trackName + ".highlightColor"], [hlColor], null, false);
+        } else {
+            // hgTracks dragSelect, uses different cart variable
+            cart.setVars(["prevHlColor"], [hlColor], null, false);
+        }
+        prevHlColor = hlColor;
+        return hlColor;
+    };
+
+    let 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 (prevHlColor) {
+            hlColor = prevHlColor;
+        } else if (cartHighlightColor) {
+            hlColor = cartHighlightColor;
+        } else {
+            hlColor = hlColorDefault;
+        }
+        return hlColor;
+    };
+
+    let colorPickerContainer = document.createElement("p");
+    colorPickerContainer.textContent = "Highlight color:";
+    let inpText = document.createElement("input");
+    inpText.id = inputId + "Input";
+    inpText.value = loadHlColor();
+    inpText.type = "text";
+    inpText.style = "width: 70px";
+    // The actual color picker:
+    let inpSpec = document.createElement("input");
+    inpSpec.id = inputId + "Picker";
+    let inpResetLink  = document.createElement("a");
+    inpResetLink.href = "#";
+    inpResetLink.id = inputId + "Reset";
+    inpResetLink.textContent = "Reset";
+    colorPickerContainer.appendChild(inpText);
+    colorPickerContainer.appendChild(inpSpec);
+    colorPickerContainer.appendChild(inpResetLink);
+
+    if (typeof parentEl !== undefined) {
+        parentEl.appendChild(colorPickerContainer);
+    } else {
+        alert("Must supply parentNode to append color picker");
+        throw new Error();
+    }
+
+    let opt = {
+        hideAfterPaletteSelect: true,
+        color: $(inpSpec).val(),
+        showPalette: true,
+        showInput: true,
+        preferredFormat: "hex",
+        change: function() {
+            let color = $(inpSpec).spectrum("get");
+            $(inpText).val(color);
+            saveHlColor(color, trackName);
+        },
+    };
+    $(inpSpec).spectrum(opt);
+
+    // update the color picker if you change the input box
+    $(inpSpec).change(function() {
+        $(inpSpec).spectrum("set", $(inpSpec).val());
+    });
+    // Restore the default on Reset link click
+    $(inpResetLink).click(function() {
+        let hlDefault = hlColorDefault;
+        $(inpText).val(hlDefault);
+        $(inpSpec).spectrum("set", hlDefault);
+        saveHlColor(hlDefault, trackName);
+    });
+    $(inpSpec).spectrum("set", $(inpText).val());
+}