0f6dbe96fa46d69d5f198bdd5b5ed242b069fab9
chmalee
  Mon Sep 23 15:17:40 2024 -0700
Make sure there is only one highlight color picker for the track highlightBy settings, since they all share the same highlight color. Add an info icon to note that all highlights use the same color and are additive.

diff --git src/hg/js/hui.js src/hg/js/hui.js
index e256136..6e43673 100644
--- src/hg/js/hui.js
+++ src/hg/js/hui.js
@@ -1499,55 +1499,59 @@
     };
 
     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 (typeof prevHlColor !== "undefined" && prevHlColor.length > 0) {
             hlColor = prevHlColor;
         } else if (typeof cartHighlightColor !== "undefined" && cartHighlightColor.length > 0) {
             hlColor = cartHighlightColor;
         } else {
             hlColor = cartColor;
         }
         return hlColor;
     };
 
-    let colorPickerContainer = document.createElement("p");
+    let colorPickerContainer = document.createElement("div");
     colorPickerContainer.textContent = typeof label !== "undefined" && label.length > 0 ? label : "Highlight color: ";
+    // display: inline means if there is an info icon it will show up in line with the color picker
+    colorPickerContainer.style = "display: inline";
     let inpText = document.createElement("input");
     // special case the drag select highlight feature because it has special code:
     if (cartVar === "hlColor") {
         inpText.id = cartVar + "Input";
     } else {
         inpText.id = "colorPicker." + cartVar + "Input";
     }
     inpText.value = loadHlColor();
     inpText.type = "text";
     inpText.style = "width: 70px";
     // The actual color picker:
     let inpSpec = document.createElement("input");
     if (cartVar === "hlColor") {
         inpSpec.id = cartVar + "Picker";
     } else {
         inpSpec.id = "colorPicker." + cartVar + "Picker";
     }
     let inpResetLink  = document.createElement("a");
     inpResetLink.href = "#";
     inpResetLink.id = cartVar + "Reset";
     inpResetLink.textContent = "Reset";
     colorPickerContainer.appendChild(inpText);
+    colorPickerContainer.append(" ");
     colorPickerContainer.appendChild(inpSpec);
+    colorPickerContainer.append(" ");
     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,
         showSelectionPalette: true,
         showInitial: true,