1232f755d4aa14f66ee0efef07552fed021683ed
jnavarr5
  Fri Jun 14 15:42:23 2024 -0700
Adding a step to serve as the introduction to the tutorial, refs #33732

diff --git src/hg/js/clinicalTutorial.js src/hg/js/clinicalTutorial.js
index 459a69c..cb9f4d3 100644
--- src/hg/js/clinicalTutorial.js
+++ src/hg/js/clinicalTutorial.js
@@ -56,46 +56,53 @@
 // Function to show the popup
 function showPopup() {
     const recTrackSetsPopup = document.querySelector('.ui-dialog[aria-labelledby="ui-dialog-title-recTrackSetsPopup"]');
     if (recTrackSetsPopup) recTrackSetsPopup.style.display = 'block';
 }
 
 // Function to close the popup
 function closePopup() {
   const popupDialog = document.querySelector('.ui-dialog[aria-labelledby="ui-dialog-title-recTrackSetsPopup"]');
   if (popupDialog) popupDialog.style.display = 'none';
 }
 
 // Function to add steps to the tour
 function setupSteps() {
     tour.addStep({
+        title: 'Introduction for Clinicians',
+        text: 'This tutorial is for clinicians and is no where near being complete in terms of '+
+              'content but should be fully functioning without any bugs (hopefully). ',
+        buttons: [tutorialButtons.next, tutorialButtons.end],
+        id: 'intro',
+        classes: 'dark-background'
+    });
+    tour.addStep({
         title: 'Recommended Track Sets',
         text: 'Some text about the recommended track sets',
         attachTo: {
             element: '#recTrackSetsMenuItem',
             on: 'bottom'
         },
-        buttons: [
+        buttons: [ tutorialButtons.back,
            {
                 text: 'Next',
                 action: function() {
                     const rtsMenuItem = document.querySelector('#tools2 #recTrackSetsMenuItem');
                     rtsMenuItem.click();
                     tour.next();
                 }
-            },
-            tutorialButtons.end
+            }
         ],
         id: 'navbar',
         classes: 'dark-background',
         when: {
             show: () => {
                 const toolsMenu = document.querySelector('#tools2 > ul');
                 toolsMenu.style.display = 'block';
                 toolsMenu.style.visibility = 'visible';
 
                 toolsMenu.addEventListener('mouseover', keepMenuVisible);
                 toolsMenu.addEventListener('mouseout', keepMenuVisible);
             },
             hide: () => {
                 const toolsMenu = document.querySelector('#tools2 > ul');
                 toolsMenu.style.display = 'none';