e016f7eae81edd3cfac1f65219dc6c18e91c7e22
chmalee
  Wed May 22 10:47:12 2024 -0700
Unify the different color pickers (drag select highlights, track item highlights and track item colors) into hui.js. Ensure the text box and palette selector work, refs #24507

diff --git src/hg/lib/hui.c src/hg/lib/hui.c
index 37a81db..5390003 100644
--- src/hg/lib/hui.c
+++ src/hg/lib/hui.c
@@ -6004,47 +6004,38 @@
 {
 printf("<DIV><B>Show only transcripts with these accessions:</B> ");
 char varName[1024];
 safef(varName, sizeof(varName), "%s.nameFilter", name);
 
 char *onlyTransStr = cartUsualString(cart, varName, "");
 
 cgiMakeTextVar(varName, onlyTransStr, 60);
 printf("&nbsp;<small>Separate multiple accessions with commas</small>");
 puts("</DIV>\n\n");
 }
 
 void colorTrackOption(struct cart *cart, char *name, struct trackDb *tdb)
 /* color picker for overriding track color */
 {
-printf("<DIV><B>Color for all features:</B> ");
 char varName[1024];
 safef(varName, sizeof(varName), "%s.colorOverride", name);
 
 char *colorValue = cartUsualString(cart, varName, "");
 
-cgiMakeTextVar(varName, colorValue, 10);
-puts("&nbsp;<input id='colorPicker'>");
-puts("&nbsp;&nbsp;<span class='link' id='colorReset'>Reset</span>");
-jsInlineF("activateColorPicker('[id=\"%s\"]', '#colorPicker');", varName); // id="xx" is necessary as id contains a dot
-jsInlineF("$('#colorPicker').spectrum('set', '#%s');", colorValue);
-jsInlineF("$('#colorReset').click(function() { "
-    "$('[id=\"%s\"]').val('');"
-    "$('#colorPicker').spectrum('set', '#000000');"
-    "});", varName);
-
-puts("</DIV>\n\n");
+puts("&nbsp;<div id='colorPicker'>");
+jsInlineF("makeHighlightPicker('%s', document.getElementById('colorPicker'), '%s', 'Color for all features:', '%s');", varName, name, colorValue); // id="xx" is necessary as id contains a dot
+puts("</div>\n\n");
 }
 
 void wiggleScaleDropDownJavascript(char *name)
 /* print some js that deactivates the min/max range if autoscaling is activated */
 {
 struct dyString *dy = dyStringNew(1024);
 dyStringPrintf(dy, "  $(\"[name='%s.autoScale']\").change(function()\n", name);
 dyStringPrintf(dy, "  {\n");
 dyStringPrintf(dy, "  val= $(this).find(':selected').val(); \n");
 dyStringPrintf(dy, "  if (val!=\"use vertical viewing range setting\")\n");
 dyStringPrintf(dy, "     {\n");
 dyStringPrintf(dy, "     $(\"[name='%s.minY']\")[0].disabled=true;\n", name);
 dyStringPrintf(dy, "     $(\"[name='%s.maxY']\")[0].disabled=true;\n", name);
 dyStringPrintf(dy, "     $(\".%sAutoScaleDesc\").attr('style', 'color:grey;');\n", name);
 dyStringPrintf(dy, "     }\n");
@@ -6790,31 +6781,31 @@
 
 char *prevHighlightColor(struct cart *cart, struct trackDb *tdb)
 /* Return the cart string for the highlight color if it has been changed else the default */
 {
 return cartOrTdbString(cart, tdb, HIGHLIGHT_COLOR_CART_VAR, HIGHLIGHT_COLOR_DEFAULT);
 }
 
 void printHighlightColorPicker(struct cart *cart, struct trackDb *tdb)
 {
 jsIncludeFile("ajax.js", NULL);
 jsIncludeFile("hui.js", NULL);
 puts("<br>");
 puts("Choose highlight color:");
 puts("<div id='hgTrackUiColorPicker'></div>");
 jsInlineF("var cartHighlightColor = \"%s\"\n;", prevHighlightColor(cart, tdb));
-jsInlineF("makeHighlightPicker(\"hgTrackUiHighlight\", document.getElementById(\"hgTrackUiColorPicker\"), \"%s\");\n", tdb->track);
+jsInlineF("makeHighlightPicker(\"%s.highlightColor\", document.getElementById(\"hgTrackUiColorPicker\"), \"%s\");\n", tdb->track, tdb->track);
 }
 
 int defaultFieldLocation(char *field)
 /* Sometimes we get bigBed filters with field names that are not in the AS file.  
  * Try to guess what the user means. */
 {
 if (sameString("score", field))
     return 4;
 if (sameString("signal", field))
     return 6;
 if (sameString("signalValue", field))
     return 6;
 if (sameString("pValue", field))
     return 7;
 if (sameString("qValue", field))