ff7bcaa5d7a4d6648d943a464d0b603f251daf0c
chmalee
  Wed Aug 21 14:50:27 2024 -0700
Fix some broken track ui pages from jquery upgrade, and try to clean up
jquery-ui styles

diff --git src/hg/js/hgTracks.js src/hg/js/hgTracks.js
index 29deda6..ad3020d 100644
--- src/hg/js/hgTracks.js
+++ src/hg/js/hgTracks.js
@@ -986,39 +986,39 @@
                 // else Would be nice to hide subtracks as well but that may be overkill
                 $(document.getElementById('tr_' + track)).remove();
                 cart.updateSessionPanel();
                 imageV2.drawHighlights();
                 $(this).attr('class', 'hiddenText');
             } else
                 $(this).attr('class', 'normalText');
             
             cart.setVars([track], [$(this).val()]);
             imageV2.markAsDirtyPage();
             return false;
         });
         // Now we can rid the submt of the burden of all those vis boxes
         var form = $('form#TrackForm');
         $(form).submit(function () {
-            $('select.normalText,select.hiddenText').attr('disabled',true);
+            $('select.normalText,select.hiddenText').prop('disabled',true);
         });
         $(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);
+        $('select.normalText,select.hiddenText').prop('disabled',false);
     }
 };
 
   ////////////////////////////////////////////////////////////
  // dragSelect is also known as dragZoom or shift-dragZoom //
 ////////////////////////////////////////////////////////////
 var dragSelect = {
 
     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
 
@@ -1228,85 +1228,85 @@
         } else {
             $("#dragSelectPosition").html(newPosition);
         }
         $(dragSelectDialog).dialog({
                 modal: true,
                 title: "Drag-and-select",
                 closeOnEscape: true,
                 resizable: false,
                 autoOpen: false,
                 revertToOriginalPos: true,
                 minWidth: 550,
                 buttons: {  
                     "Zoom In": function() {
                         // Zoom to selection
                         $(this).dialog("option", "revertToOriginalPos", false);
-                        if ($("#disableDragHighlight").attr('checked'))
+                        if ($("#disableDragHighlight").prop('checked'))
                             hgTracks.enableHighlightingDialog = false;
                         if (imageV2.inPlaceUpdate) {
                             if (hgTracks.virtualSingleChrom && (newPosition.search("multi:")===0)) {
                                 newPosition = genomePos.disguisePosition(newPosition); // DISGUISE
                             }
                             var params = "position=" + newPosition;
                             if (!hgTracks.enableHighlightingDialog)
                                 params += "&enableHighlightingDialog=0";
                             imageV2.navigateInPlace(params, null, true);
                         } else {
                             $('body').css('cursor', 'wait');
                             if (!hgTracks.enableHighlightingDialog)
                                 cart.setVarsObj({'enableHighlightingDialog': 0 },null,false); // async=false
                             document.TrackHeaderForm.submit();
                         }
                         $(this).dialog("close");
                     },
                     "Single Highlight": function() {
                         // Clear old highlight and Highlight selection
                         $(imageV2.imgTbl).imgAreaSelect({hide:true});
-                        if ($("#disableDragHighlight").attr('checked'))
+                        if ($("#disableDragHighlight").prop('checked'))
                             hgTracks.enableHighlightingDialog = false;
                         var hlColor = $("#hlColorInput").val();
                         dragSelect.highlightThisRegion(newPosition, false, hlColor);
                         $(this).dialog("close");
                     },
                     "Add Highlight": function() {
                         // Highlight selection
-                        if ($("#disableDragHighlight").attr('checked'))
+                        if ($("#disableDragHighlight").prop('checked'))
                             hgTracks.enableHighlightingDialog = false;
                         var hlColor = $("#hlColorInput").val();
                         dragSelect.highlightThisRegion(newPosition, true, hlColor);
                         $(this).dialog("close");
                     },
                     "Save Color": function() {
                         var hlColor = $("#hlColorInput").val();
                         dragSelect.saveHlColor( hlColor );
                         $(this).dialog("close");
                     },
                     "Cancel": function() {
                         $(this).dialog("close");
                     }
                 },
 
                 open: function () { // Make zoom the focus/default action
                    $(this).parents('.ui-dialog-buttonpane button:eq(0)').focus(); 
                 },
 
                 close: function() {
                     // All exits to dialog should go through this
                     $(imageV2.imgTbl).imgAreaSelect({hide:true});
                     if ($(this).dialog("option", "revertToOriginalPos"))
                         genomePos.revertToOriginalPos();
-                    if ($("#disableDragHighlight").attr('checked'))
+                    if ($("#disableDragHighlight").prop('checked'))
                         $(this).remove();
                     else
                         $(this).hide();
                     $('body').css('cursor', ''); // Occasionally wait cursor got left behind
                     $("#hlColorPicker").spectrum("hide");
                 }
         });
         $(dragSelectDialog).dialog('open');
         
     },
 
     selectEnd: function (img, selection, event)
     {
         var now = new Date();
         var doIt = false;
@@ -3221,31 +3221,31 @@
     },
 
     uiDialogOk: function (popObj)
     {   // When popup closes with ok
 
     },
 
     uiDialog: function (response, status)
     {
     // Take html from hgTracks and put it up as a modal dialog.
 
         // make sure all links (e.g. help links) open up in a new window
         response = response.replace(/<a /ig, "<a target='_blank' ");
 
         var cleanHtml = response;
-        cleanHtml = stripCspHeader(cleanHtml,false); // DEBUG msg with true
+        //cleanHtml = stripCspHeader(cleanHtml,false); // DEBUG msg with true
         cleanHtml = stripJsFiles(cleanHtml,false);   // DEBUG msg with true
         cleanHtml = stripCssFiles(cleanHtml,false);  // DEBUG msg with true
         //cleanHtml = stripJsEmbedded(cleanHtml,false);// DEBUG msg with true // Obsolete by CSP2?
         var nonceJs = {};
         cleanHtml = stripCSPAndNonceJs(cleanHtml, false, nonceJs); // DEBUG msg with true
 
         cleanHtml = stripMainMenu(cleanHtml,false);  // DEBUG msg with true
 
         $('#hgTracksDialog').html("<div id='pop' style='font-size:.9em;'>"+ cleanHtml +"</div>");
 
         appendNonceJsToPage(nonceJs);
 
 
         // Strategy for popups with js:
         // - jsFiles and CSS should not be included in html.  Here they are shluped out.
@@ -3312,43 +3312,43 @@
             close: function() {
                 popUpHgt.cleanup();
             }
         });
         
     
         $('#hgTracksDialog').dialog('option' , 'title' , popUpHgt.title);
         $('#hgTracksDialog').dialog('open');
 
         // Initialize autocomplete for alt/fix sequence names
         autocompleteCat.init($('#singleAltHaploId'),
                              { baseUrl: 'hgSuggest?db=' + getDb() + '&type=altOrPatch&prefix=',
                                enterSelectsIdentical: true });
         // Make multi-region option inputs select their associated radio buttons
         $('input[name="emPadding"]').keyup(function() {
-            $('#virtModeType[value="exonMostly"]').attr('checked', true); });
+            $('#virtModeType[value="exonMostly"]').prop('checked', true); });
         $('input[name="gmPadding"]').keyup(function() {
-            $('#virtModeType[value="geneMostly"]').attr('checked', true); });
+            $('#virtModeType[value="geneMostly"]').prop('checked', true); });
         $('#multiRegionsBedInput').keyup(function() {
-            $('#virtModeType[value="customUrl"]').attr('checked', true); });
+            $('#virtModeType[value="customUrl"]').prop('checked', true); });
         $('#singleAltHaploId').keyup(function() {
-            $('#virtModeType[value="singleAltHaplo"]').attr('checked', true); });
+            $('#virtModeType[value="singleAltHaplo"]').prop('checked', true); });
 
         // disable exit if not in MR mode
         if (!hgTracks.virtModeType) {
             $('#virtModeTypeDefaultLabel').addClass('disabled');
-            $('#virtModeType[value="exonMostly"]').attr('checked', true);
-            $('#virtModeType[value="default"]').attr('disabled', 'disabled');
+            $('#virtModeType[value="exonMostly"]').prop('checked', true);
+            $('#virtModeType[value="default"]').prop('disabled', 'disabled');
         } else {
             $('#virtModeType[value="default"]').removeAttr('disabled');
         }
 
         // Customize message based on current mode
         var msg = "<em>Select a multi-region viewing mode below.</em>";  // default
         if (hgTracks.virtModeType) {
             msg = "The display is currently in <em><b> ";
             var mode = "unknown";
             if (hgTracks.virtModeType === "exonMostly") {
                 msg += "exon";
             } else if (hgTracks.virtModeType == "geneMostly") {
                 msg += "gene";
             } else if (hgTracks.virtModeType == "customUrl") {
                 msg += "custom regions";
@@ -3516,63 +3516,68 @@
         //                     into a $('#pop').ready() routine!
 
         // Searching for some semblance of size suitability
         var popMaxHeight = (window.innerHeight - (window.innerHeight * 0.15)); // make 15% of the bottom of the screen still visible
         var popMaxWidth     = (window.innerWidth - (window.innerWidth * 0.1)); // take up 90% of the window
 
         // Create dialog buttons for UI popup
         // this could be more buttons later
         var uiDialogButtons = {};
         uiDialogButtons.Close = function() {
             // if there was a form to submit, submit it:
             popUpHgcOrHgGene.uiDialogOk(popUpHgcOrHgGene.table);
             $(this).dialog("close");
         };
 
+        let openIcon = "<a class='dialogNewWindowIcon' target='_blank' href='" + popUpHgcOrHgGene.href + "'><svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 512 512'><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z'/></svg></a>";
+        let titleText = hgTracks.trackDb[popUpHgcOrHgGene.table].shortLabel + " (Item Details)" + openIcon;
+
         $('#hgcDialog').dialog({
             resizable: true,               // Let scroll vertically
             height: popMaxHeight,
             width: popMaxWidth,
             minHeight: 200,
             minWidth: 400,
             modal: true,
             closeOnEscape: true,
             autoOpen: false,
             buttons: uiDialogButtons,
 
             open: function (event) {
                 // fix popup to a location -- near the top and somewhat centered on the browser image
                 $(event.target).parent().css('position', 'fixed');
                 $(event.target).parent().css('top', '10%');
                 $('#hgcDialog').find('.filterBy,.filterComp').each(
                     function(i) {  // ddcl.js is dropdown checklist lib support
                         if ($(this).hasClass('filterComp'))
                             ddcl.setup(this);
                         else
                             ddcl.setup(this, 'noneIsAll');
                     }
                 );
             },
 
             close: function() {
                 popUpHgcOrHgGene.cleanup();
+            },
+            title: function() {
+                this.innerHTML = titleText;
             }
         });
-        let openIcon = "<a class='dialogNewWindowIcon' target='_blank' href='" + popUpHgcOrHgGene.href + "'><svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 512 512'><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z'/></svg></a>";
-        let titleText = hgTracks.trackDb[popUpHgcOrHgGene.table].shortLabel + " (Item Details)" + openIcon;
 
-        $('#hgcDialog').dialog('option' , 'title', titleText);
+        // override the _title function to show custom html:
+        //$('#hgcDialog').dialog('option' , 'title', titleText);
         $('#hgcDialog').dialog('open');
         document.addEventListener('click', e => {
             // if we clicked outside of the pop up, close the popup:
             mouseX = e.clientX;
             mouseY = e.clientY;
             popUpBox = document.getElementById("hgcDialog").parentElement.getBoundingClientRect();
             if (mouseX < popUpBox.left || mouseX > popUpBox.right ||
                     mouseY < popUpBox.top || mouseY > popUpBox.bottom) {
                 $("#hgcDialog").dialog("close");
             }
         });
 
         // Customize message based on current mode
         // Make 'Cancel' button close dialog
         $('input[name="Cancel"]').click(function() {
@@ -4497,31 +4502,31 @@
                     var style = $('#p_btn_' + track).attr('style');
                     style = style.replace(/height:\s*\d+/i, "height:" + rec.height);
                     $('#p_btn_' + track).attr('style', style);
                     if (hgTracks.trackDb[track].loadingId) {
                         hideLoadingImage(hgTracks.trackDb[track].loadingId);
                     }
                 }
             }
         }
     },
 
     navigateButtonClick: function (ele) // called from hgTracks.c
     {   // code to update just the imgTbl in response to navigation buttons (zoom-out etc.).
         if (imageV2.inPlaceUpdate) {
             var params = ele.name + "=" + ele.value;
-            $(ele).attr('disabled', 'disabled');
+            $(ele).prop('disabled', 'disabled');
             // dinking navigation needs additional data
             if (ele.name === "hgt.dinkLL" || ele.name === "hgt.dinkLR") {
                 params += "&dinkL=" + $("input[name='dinkL']").val();
             } else if (ele.name === "hgt.dinkRL" || ele.name === "hgt.dinkRR") {
                 params += "&dinkR=" + $("input[name='dinkR']").val();
             }
             imageV2.navigateInPlace(params, $(ele), false);
             return false;
         } else {
             return true;
         }
     },
 
     updateButtonClick: function (ele) // UNUSED?
     {   // code to update the imgTbl based on changes in the track controls.