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 > Highlight operations, click 'Save Color' below" + - "</ul></p>" + - "<p>Highlight color: <input type='text' style='width:70px' id='hlColorInput' value='"+dragSelect.loadHlColor()+"'>" + - " <input id='hlColorPicker'>" + - " <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];