174d30f5d63b5c167a5af0457d1901a9620ec573
jnavarr5
  Tue May 13 16:50:29 2025 -0700
Adding the Gateway and Table Browser tutorials to the Interactive Tutorial popup. Also adding the Help menu link to open the popup on the Gateway and Table Browser pages. Renaming the popup file to something more generic since it is no longer exclusive to hgTracks. Updating the makefile for the popup name change. refs #35716

diff --git src/hg/js/hgGateway.js src/hg/js/hgGateway.js
index 4b1eb3c962a..fe6f25eab33 100644
--- src/hg/js/hgGateway.js
+++ src/hg/js/hgGateway.js
@@ -1623,30 +1623,49 @@
     function displaySurvey() {
         // If hg.conf specifies a survey link, then hgGateway.c has set corresponding global vars.
         // Use those to display a labeled link (possibly an <img>) in the otherwise empty
         // #surveyContainer.
         var label;
         if (surveyLink && (surveyLabel || surveyLabelImage)) {
             if (surveyLabelImage) {
                 label = '<img src="' + surveyLabelImage + '" alt="' + surveyLabel + '">';
             } else {
                 label = surveyLabel;
             }
             $('#surveyContainer').html('<a href="' + surveyLink + '" target=_blank>' +
                                        label + '</a>');
         }
     }
+    function createTutorialLink() {
+        // allow the user to bring the tutorials popup via a new help menu button
+        var tutorialLinks = document.createElement("li");
+        tutorialLinks.id = "hgGatewayHelpTutorialLinks";
+        tutorialLinks.innerHTML = "<a id='hgGatewayHelpTutorialLinks' href='#showTutorialPopup'>" +
+            "Interactive Tutorials</a>";
+        $("#help > ul")[0].appendChild(tutorialLinks);
+        $("#hgGatewayHelpTutorialLinks").on("click", function () {
+            // Check to see if the tutorial popup has been generated already
+            var tutorialPopupExists = document.getElementById ("tutorialContainer");
+            if (!tutorialPopupExists) {
+                // Create the tutorial popup if it doesn't exist
+                createTutorialPopup();
+            } else {
+                //otherwise use jquery-ui to open the popup
+                $("#tutorialContainer").dialog("open");
+            }
+        });
+    }
 
     function init() {
         // Boot up the page; initialize elements and install event handlers.
         var searchObj = {};
         // We need a bound function to pass into autocompleteCat.init below;
         // however, autocompleteFromTree is even slower than drawing the tree because of
         // all the copying.  So bind now, fill in searchObj later.
         var processSpeciesResults = processSpeciesAutocompleteItems.bind(null, searchObj);
         cart.setCgi('hgGateway');
         cart.debug(debugCartJson);
         // Get state from cart
         cart.send({ getUiState: {} }, handleRefreshState);
         cart.flush();
 	activeTaxIds = _.invert(activeGenomes);
         // Prune inactive genomes from dbDbTree.
@@ -1666,33 +1685,35 @@
                                  { baseUrl: 'hgGateway?hggw_term=',
                                    watermark: speciesWatermark,
                                    onSelect: setDbFromAutocomplete,
                                    onServerReply: processSpeciesResults,
                                    enterSelectsIdentical: false });
             $('#selectAssembly').on("change", onChangeDbMenu);
             $('#positionDisplay').on("click", onClickCopyPosition);
             $('#copyPosition').on("click", onClickCopyPosition);
             $('.jwGoButtonContainer').on("click", goToHgTracks);
             $(window).on("resize", setRightColumnWidth.bind(null, scrollbarWidth));
             displaySurvey();
             replaceHgsidInLinks();
             // Fill in searchObj here once everything is displayed.
             autocompleteFromTree(prunedDbDbTree, searchObj);
 
+
 	    // Gateway tutorial
             if (typeof gatewayTour !== 'undefined') {
-                if (typeof startTutorialOnLoad !== 'undefined' && startTutorialOnLoad) {
+                if (typeof startGatewayOnLoad !== 'undefined' && startGatewayOnLoad) {
                     gatewayTour.start();
                 }
             }
 
         });
+        createTutorialLink();
     }
 
     return { init: init,
              // For use by speciesTree.draw SVG (text-only onclick):
              onClickSpeciesLabel: onClickSpeciesLabel,
              onClickHubName: onClickHubName
            };
 
 }()); // hgGateway