98487640ecf986c00fb0a13739323cc78d107601
jnavarr5
  Wed Nov 13 16:52:46 2024 -0800
Updating the basic tutorial link to use the basic tutorial now that it is working. Updating the popup to have more descriptive text and other CSS options, refs #34208

diff --git src/hg/js/tutorials/hgTracksPopup.js src/hg/js/tutorials/hgTracksPopup.js
index 21e3714..a8eabb0 100644
--- src/hg/js/tutorials/hgTracksPopup.js
+++ src/hg/js/tutorials/hgTracksPopup.js
@@ -1,62 +1,71 @@
 
 
 // funtion to create the pop-up on hgTracks
 
 window.openTutorialPopup = function() {
   // Create the pop-up container
   const tutorialDiv = document.createElement("div");
   tutorialDiv.id = "tutorialContainer";
  
   // 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;">
+      <tr><td style="padding: 8px;width: 200px; text-align: center; border: 1px solid #666666;">
           <a href="#" id="basicTutorial">Basic tutorial</a></td>
-          <td style="width: 350px; word-wrap: break-word;">
-          Some description about the first tutorial
+          <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: 200px; padding: 8px;">
-          <a href="#" id="clinicalTutorial">Advanced tutorial for clinicians</a></td>
-          <td style="width: 350px; word-wrap: break-word;">
-          Some explaination about why you would use this tutorial over another
-          (only available on hg19 & hg38)
+      <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>
   `;
 
   document.body.appendChild(tutorialDiv);
 
   $("#tutorialContainer").dialog({
     modal: true,
     title: "All Interactive Tutorials Available",
     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 control the basic tutorial link
   document.getElementById('basicTutorial').addEventListener('click', function(event) {
     event.preventDefault();
     $("#tutorialContainer").dialog("close");
-    clinicalTour.start();
+    basicTour.start();
   });
 
   // Function to control the clincial tutorial link
   document.getElementById('clinicalTutorial').addEventListener('click', function(event) {
     event.preventDefault();
     $("#tutorialContainer").dialog("close");
     clinicalTour.start();
   });
 };