d5783cef7d27b9f734131828ea4af40850e35d94
chmalee
  Mon Jul 1 15:52:26 2024 -0700
hgc on hgTracks changes: 1: clicks outside of the pop up close the pop up. 2: item details is now in parens. 3: link to open in a new window is in an icon on the top right near the close icon. 4: Bottom button now just says close instead of ok, refs #33216

diff --git src/hg/js/hgTracks.js src/hg/js/hgTracks.js
index 247ccc1..86524a0 100644
--- src/hg/js/hgTracks.js
+++ src/hg/js/hgTracks.js
@@ -3425,31 +3425,31 @@
             waitOnFunction(popUpHgcOrHgGene._uiDialogRequest, table, url);
         } else {
             window.location = cart.addUpdatesToUrl(url);
         }
     },
 
     uiDialogOk: function (trackName)
     {
         // See popUp.uiDialogOk for a detailed explanation of the below vis-setting
         // code
         var rec = hgTracks.trackDb[trackName];
         var subtrack = tdbIsSubtrack(rec) ? trackName : undefined;  // subtrack vis rules differ
         var allVars = getAllVars($('#hgcDialog'), subtrack );
         var changedVars = varHashChanges(allVars,popUpHgcOrHgGene.saveAllVars);
 
-        // special case thses hprc tracks that allow you to turn on different tracks
+        // special case these hprc tracks that allow you to turn on different tracks
         if (trackName.startsWith("hprcDeletions") || trackName.startsWith("hprcInserts") ||
                 trackName.startsWith("hprcArr") || trackName.startsWith("hprcDouble")) {
             trackName = "chainHprc";
         }
         var newVis = changedVars[trackName];
         // subtracks do not have "hide", thus '[]'
         var hide = (newVis && (newVis === 'hide' || newVis === '[]'));
         if ( ! normed($('#imgTbl')) ) { // On findTracks or config page
             if (objNotEmpty(changedVars))
                 cart.setVarsObj(changedVars);
         }
         else {  // On image page
             if (hide) {
                 if (objNotEmpty(changedVars))
                     cart.setVarsObj(changedVars);
@@ -3509,31 +3509,31 @@
         // - embedded js should not be in the popup box.
         // - Somethings should be in a popup.ready() function, and this is emulated below,
         //   as soon as the cleanHtml is added
         //   Since there are many possible popup cfg dialogs, the ready should be all inclusive.
 
         // -- popup.ready() -- Here is the place to do things that might otherwise go
         //                     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.OK = function() {
+        uiDialogButtons.Close = function() {
             // if there was a form to submit, submit it:
             popUpHgcOrHgGene.uiDialogOk(popUpHgcOrHgGene.table);
             $(this).dialog("close");
         };
 
         $('#hgcDialog').dialog({
             resizable: true,               // Let scroll vertically
             height: popMaxHeight,
             width: popMaxWidth,
             minHeight: 200,
             minWidth: 400,
             modal: true,
             closeOnEscape: true,
             autoOpen: false,
             buttons: uiDialogButtons,
@@ -3544,35 +3544,45 @@
                 $(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();
             }
         });
-        let titleText = hgTracks.trackDb[popUpHgcOrHgGene.table].shortLabel +
-                " Item Details <a style='font-size: .75em' target='_blank' href='" + popUpHgcOrHgGene.href + "'>" +
-                "Open in new window</a>";
+        let openIcon = '<a class="dialogNewWindowIcon" target="_blank" href="' + popUpHgcOrHgGene.href + '"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5"/> <path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z"/> </svg></a>';
+        let titleText = hgTracks.trackDb[popUpHgcOrHgGene.table].shortLabel + " (Item Details)" + openIcon;
+
         $('#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() {
             $('#hgcDialog').dialog('close');
         });
     }
 };
 
 // Show the exported data hubs popup
 function showExportedDataHubsPopup() {
     let popUp = document.getElementById("exportedDataHubsPopup");
     title = popUp.title;
     if (title.length === 0 && popUp.getAttribute("mouseovertext") !== "") {title = popUp.getAttribute("mouseovertext");}
     $('#exportedDataHubsPopup').dialog({width:'650', title: title});