4e620539ffe19c3fff4e3cd3d3f9070f42df342f
jnavarr5
  Thu Nov 14 16:20:36 2024 -0800
Changing the name of the function that generates the Tutorial popup to 'createTutorialPopup'. Removing the 'getDb()' function since it already exists it utils.js. Using the already existing function to open the Recommended Track Sets in the clinical tutorial. Making a change to only export the tutorials if they don't already exist. Making text changes to the popup, refs #34208

diff --git src/hg/js/tutorials/hgTracksPopup.js src/hg/js/tutorials/hgTracksPopup.js
index d7c20c3..3ded1dc 100644
--- src/hg/js/tutorials/hgTracksPopup.js
+++ src/hg/js/tutorials/hgTracksPopup.js
@@ -1,85 +1,77 @@
 
 
 
 
 // funtion to create the pop-up on hgTracks
-window.openTutorialPopup = function() {
+window.createTutorialPopup = function() {
   // Create the pop-up container
   const tutorialDiv = document.createElement("div");
   tutorialDiv.id = "tutorialContainer";
+  tutorialDiv.style.display = "none";
  
   // Create the contents for the popup
   tutorialDiv.innerHTML = `
     <p>
     These interactive tutorials will provide step-by-step guides to help
     navigate through various tools and pages on the UCSC Genome Browser.</p>
-    <h4 id="hgTracksTutorials">Genome Browser tutorials</h4>
     <table style="width:600px; border-color:#666666; border-collapse:collapse; margin: auto;">
       <tr><td style="padding: 8px;width: 200px; text-align: center; border: 1px solid #666666;">
           <a href="#" id="basicTutorial">Basic tutorial</a></td>
           <td style="padding: 8px; width: 450px; word-wrap: break-word; border: 1px solid #666666; text-align:center">
           <small>
           An introductory tutorial designed to help new users navigate the UCSC Genome Browser.
           Learn how to configure display settings, search for tracks, and view the negative
           strand (3' to 5').</small>
           </td></tr>
       <tr><td style="width: 250px; padding: 8px; text-align: center; border: 1px solid #666666;">
           <a href="#" id="clinicalTutorial">Advanced tutorial for clinicians</a><br>
           <em style="font-size: 11px">(only available on hg19 & hg38)</em></td>
           <td style="padding: 8px; width: 450px; word-wrap: break-word; border: 1px solid #666666; text-align:center">
           <small>
           A tutorial aimed to educate clinical geneticists and showcase resources that
           may be useful in variant interpretation.
           <br>
           Learn how to search for variants,
           view recommended track sets, and save your configuration settings to share with others.
           </small>
           </td></tr>
-    </table>
-  `;
+    </table>`;
 
-  document.body.appendChild(tutorialDiv);
+  document.body.appendChild(tutorialDiv); // Add tutorial popup <div> to the page
 
   $("#tutorialContainer").dialog({
-    modal: true,
-    title: "All Interactive Tutorials Available",
+    modal: false,
+    title: "All Interactive Tutorials",
     draggable: true,
     resizable: false,
     width: 650,
     /*
     buttons: [{
       text: "Close",
       click: function() {
         $(this).dialog("close");
       }
     }],*/
     position: {my: "center top", at: "center top+100", of: window}
   });
   
-  // Function to get which databse you are on
-  function getDb (){
-    const currentUrl = window.location.href;
-    const dbValue = new URLSearchParams(window.location.search).get("db");
-    return dbValue;
-  }
-
   // Function to control the basic tutorial link
   document.getElementById('basicTutorial').addEventListener('click', function(event) {
     event.preventDefault();
     $("#tutorialContainer").dialog("close");
     basicTour.start();
   });
 
   // Function to control the clincial tutorial link
   document.getElementById('clinicalTutorial').addEventListener('click', function(event) {
     event.preventDefault();
     $("#tutorialContainer").dialog("close");
     const db = getDb(); // Get which database you are viewing
     if (db == "hg38" || db =="hg19") {
         clinicalTour.start(); // If you are on hg38 or hg19, then start the tutorial
     } else {
         // Otherwise go to hg38 and start the tutorial.
         window.location.href = "/cgi-bin/hgTracks?db=hg38&startClinical=true";
     }
   });
 };