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/hgTables/mainPage.c src/hg/hgTables/mainPage.c
index 4ea5fd10bc8..cbb0498df4f 100644
--- src/hg/hgTables/mainPage.c
+++ src/hg/hgTables/mainPage.c
@@ -452,37 +452,45 @@
     "} else {\n"
     "   document.getElementById('%s').parentElement.style.display='none';\n"
     "   document.getElementById('excelOutNote').style.display='none';\n"
     "}\n"
     "}\n"
     "$(document).ready(checkForCsv);\n"
     , hgtaOutSep, hgtaOutSep);
 jsAddEventForId("change", "outputTypeDropdown", "checkForCsv");
 
 /*
  * Code to add in the interactive tutorial*/
 if (cfgOptionBooleanDefault("showTutorial", TRUE))
     {
     puts("<script src=\"https://cdn.jsdelivr.net/npm/shepherd.js@11.0.1/dist/js/shepherd.min.js\"></script>");
     puts("<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/shepherd.js@11.0.1/dist/css/shepherd.css\"/>");
+    jsIncludeFile("jquery.js", NULL);
+    jsIncludeFile("jquery-ui.js", NULL);
+    webIncludeResourceFile("jquery-ui.css");
+
+    jsIncludeFile("tutorialPopup.js", NULL);
     jsIncludeFile("tableBrowserTutorial.js",NULL);
     if (sameOk(cgiOptionalString("startTutorial"), "true"))
         {
+        jsInline("var startTableBrowserOnLoad = true;");
         jsInline("tableBrowserTour.start();");
         }
     }
 
+
+
 if (!cfgOptionBooleanDefault("hgta.disableSendOutput", FALSE))
     {
     hPrintf(" Send output to ");
     struct dyString *dy = dyStringNew(256);
     dyStringAppend(dy, 
 	"document.getElementById('checkboxGreat').checked=false;");
     if (isGenomeSpaceEnabled())
 	dyStringAppend(dy, 
 	      	  "document.getElementById('checkboxGenomeSpace').checked=false;");
     dyStringAppend(dy, 
 	      	  "return true;");
     cgiMakeCheckBoxWithId("sendToGalaxy", doGalaxy(), "checkboxGalaxy");
     jsOnEventById("click", "checkboxGalaxy", dy->string);
     hPrintf("<A HREF=\""GALAXY_URL_BASE"\" target=_BLANK>Galaxy</A>\n");
     nbSpaces(2);
@@ -1121,57 +1129,80 @@
 // Show more or less intro text
 char jsText[1024];
 safef(jsText, sizeof jsText,
         "$('#tbHelpMore').hide();"
         "$('#tbHelp').show();"
         "$('#tbHelpLess').show();"
         );
 jsOnEventById("click", "tbHelpMore", jsText);
 safef(jsText, sizeof jsText,
         "$('#tbHelpMore').show();"
         "$('#tbHelp').hide();"
         "$('#tbHelpLess').hide();"
         );
 jsOnEventById("click", "tbHelpLess", jsText);
 
+
 // When GREAT is selected, disable the other checkboxes and force output to BED
 jsInline(
     "function onSelectGreat() {\n"
     " document.getElementById('checkboxGalaxy').checked=false;\n");
 if (isGenomeSpaceEnabled())
     jsInline(
     " document.getElementById('checkboxGenomeSpace').checked=false;\n");
 jsInline(
     " document.getElementById('outBed').selected=true;\n"
     " return true;\n"
     "}\n");
 
 // Disable/enable noGenome tracks depending on whether region is genome.
 jsInline(
     "function maybeDisableNoGenome() {\n"
     "   var regionTypeSelected = $('input[name=\"hgta_regionType\"]:checked').val();\n"
     "   var regionIsGenome = (regionTypeSelected === 'genome');\n"
     "   var $noGenomeOptions = $('select[name=\"hgta_track\"] option.hgtaNoGenome,select[name=\"hgta_table\"] option.hgtaNoGenome');\n"
     "   $noGenomeOptions.attr('disabled', regionIsGenome)\n"
     "                   .css('color', regionIsGenome ? '' : 'black');\n"
     "}\n"
     "$(document).ready(function() {\n"
     // once when the page loads, and every time the user changes the region type:
     "    maybeDisableNoGenome();\n"
     "    $('input[name=\"hgta_regionType\"]').change(maybeDisableNoGenome);\n"
     "});\n");
 
+jsInline(
+  "function createTutorialLink() {\n"
+  "  // allow the user to bring the tutorials popup via a new help menu button\n"
+  "  var tutorialLinks = document.createElement('li');\n"
+  "  tutorialLinks.id = 'hgGatewayHelpTutorialLinks';\n"
+  "  tutorialLinks.innerHTML = \"<a id='hgGatewayHelpTutorialLinks' href='#showTutorialPopup'>Interactive Tutorials</a>\";\n"
+  "  $(\"#help > ul\")[0].appendChild(tutorialLinks);\n"
+  "  $(\"#hgGatewayHelpTutorialLinks\").on(\"click\", function () {\n"
+  "    // Check to see if the tutorial popup has been generated already\n"
+  "    var tutorialPopupExists = document.getElementById(\"tutorialContainer\");\n"
+  "    if (!tutorialPopupExists) {\n"
+  "      // Create the tutorial popup if it doesn't exist\n"
+  "      createTutorialPopup();\n"
+  "    } else {\n"
+  "      // Otherwise use jQuery UI to open the popup\n"
+  "      $(\"#tutorialContainer\").dialog(\"open\");\n"
+  "    }\n"
+  "  });\n"
+  "}\n"
+  "$(document).ready(createTutorialLink);\n"
+);
+
 /* Main form. */
 hPrintf("<FORM ACTION=\"%s\" NAME=\"mainForm\" METHOD=%s>\n",
 	getScriptName(), cartUsualString(cart, "formMethod", "POST"));
 cartSaveSession(cart);
 jsInit();
 showMainControlTable(conn);
 hPrintf("</FORM>\n");
 
 /* Hidden form - for benefit of javascript. */
     {
     static char *saveVars[] = {
       "clade", "org", "db", hgtaGroup, hgtaTrack, hgtaTable, hgtaRegionType,
       hgtaRange, hgtaOutputType, hgtaOutFileName};
     jsCreateHiddenForm(cart, getScriptName(), saveVars, ArraySize(saveVars));
     }