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/hgTracks.js src/hg/js/hgTracks.js
index 72896e0..5fe1052 100644
--- src/hg/js/hgTracks.js
+++ src/hg/js/hgTracks.js
@@ -990,32 +990,30 @@
         $(form).attr('method','get');
     },
 
     restoreFromBackButton: function()
     // Re-enabling vis dropdowns is necessary because initForAjax() disables them on submit.
     {
         $('select.normalText,select.hiddenText').attr('disabled',false);
     }
 };
 
   ////////////////////////////////////////////////////////////
  // dragSelect is also known as dragZoom or shift-dragZoom //
 ////////////////////////////////////////////////////////////
 var dragSelect = {
 
-    //hlColorDefault: '#aaedff', // default highlight color, if nothing specified
-    //hlColor :       '#aaedff', // current highlight color
     hlColor :       '#aac6ff', // current highlight color
     hlColorDefault: '#aac6ff', // default highlight color, if nothing specified
     areaSelector:    null, // formerly "imgAreaSelect". jQuery element used for imgAreaSelect
     originalCursor:  null,
     startTime:       null,
     escPressed :     false,  // flag is set when user presses Escape
 
     selectStart: function (img, selection)
     {
         initVars();
         dragSelect.escPressed = false;
         if (rightClick.menu) {
             rightClick.menu.hide();
         }
         var now = new Date();
@@ -1153,70 +1151,48 @@
         newPosition.replace("virt:", "multi:");
         // if the user hit Escape just before, do not show this dialo
         if (dragSelect.startTime===null)
             return;
         var dragSelectDialog = $("#dragSelectDialog")[0];
         if (!dragSelectDialog) {
             $("body").append("<div id='dragSelectDialog'>" + 
                              "<p><ul>"+
                              "<li>Hold <b>Shift+drag</b> to show this dialog" +
                              "<li>Hold <b>Alt+drag</b> (Windows) or <b>Option+drag</b> (Mac) to add a highlight" +
                              "<li>Hold <b>Ctrl+drag</b> (Windows) or <b>Cmd+drag</b> (Mac) to zoom" +
                              "<li>To cancel, press <tt>Esc</tt> anytime during the drag" +
                              "<li>Using the keyboard, highlight the current position with <tt>h then m</tt>" +
                              "<li>Clear all highlights with View - Clear Highlights or <tt>h then c</tt>" +
                              "<li>To merely save the color for the next keyboard or right-click &gt; Highlight operations, click 'Save Color' below" +
-                             "</ul></p>" +
-                             "<p>Highlight color: <input type='text' style='width:70px' id='hlColorInput' value='"+dragSelect.loadHlColor()+"'>" +
-                             "&nbsp;&nbsp;<input id='hlColorPicker'>" + 
-                             "&nbsp;&nbsp;<a href='#' id='hlReset'>Reset</a></p>" + 
-                             "<input style='float:left' type='checkbox' id='disableDragHighlight'>" + 
+                             "</ul></p>");
+            makeHighlightPicker("hlColor", document.getElementById("dragSelectDialog"), null);
+            document.body.append("<input style='float:left' type='checkbox' id='disableDragHighlight'>" + 
                              "<span style='border:solid 1px #DDDDDD; padding:3px;display:inline-block' id='hlNotShowAgainMsg'>Don't show this again and always zoom with shift.<br>" + 
                              "Re-enable via 'View - Configure Browser' (<tt>c then f</tt>)</span></p>"+ 
                              "Selected chromosome position: <span id='dragSelectPosition'></span>");
             dragSelectDialog = $("#dragSelectDialog")[0];
             // reset value
-            $('#hlReset').click(function() { 
-                var hlDefault = dragSelect.hlColorDefault;
-                $('#hlColorInput').val(hlDefault);
-                $("#hlColorPicker").spectrum("set", hlDefault);
-                dragSelect.saveHlColor(hlDefault);
-            });
             // allow to click checkbox by clicking on the label
             $('#hlNotShowAgainMsg').click(function() { $('#disableDragHighlight').click();});
             // click "add highlight" when enter is pressed in color input box
             $("#hlColorInput").keyup(function(event){
                 if(event.keyCode == 13){
                     $(".ui-dialog-buttonset button:nth-child(3)").click();
                 }
             });
-            // activate the color picker
-            var opt = {
-                hideAfterPaletteSelect : true,
-                color : $('#hlColorInput').val(),
-                showPalette: true,
-                showInput: true,
-                preferredFormat: "hex",
-                change: function() { var color = $("#hlColorPicker").spectrum("get"); $('#hlColorInput').val(color); },
-                };
-            $("#hlColorPicker").spectrum(opt);
-            // update the color picker if you change the input box
-            $("#hlColorInput").change(function(){ $("#hlColorPicker").spectrum("set", $('#hlColorInput').val()); });
         }
 
-        $("#hlColorPicker").spectrum("set", $('#hlColorInput').val());
-
         if (hgTracks.windows) {
             var i,len;
             var newerPosition = newPosition;
             if (hgTracks.virtualSingleChrom && (newPosition.search("multi:")===0)) {
                 newerPosition = genomePos.disguisePosition(newPosition);
             }
             var str = newerPosition + "<br>\n";
             var str2 = "<br>\n";
             str2 += "<ul style='list-style-type:none; max-height:200px; padding:0; width:80%; overflow:hidden; overflow-y:scroll;'>\n";
             var pos = parsePosition(newPosition);
             var start = pos.start - 1;
             var end = pos.end;
             var selectedRegions = 0;
             for (i=0,len=hgTracks.windows.length; i < len; ++i) {
                 var w = hgTracks.windows[i];