f69a8b38592faaedf9c6f254ce5d56e73d91ac64
jnavarr5
  Tue Sep 30 10:48:18 2025 -0700
Initial commit of the customTrack tutorial, refs #34354

diff --git src/hg/js/tutorials/customTrackTutorial.js src/hg/js/tutorials/customTrackTutorial.js
new file mode 100644
index 00000000000..816c950b79d
--- /dev/null
+++ src/hg/js/tutorials/customTrackTutorial.js
@@ -0,0 +1,71 @@
+/* jshint esnext: true */
+/* global Shepherd */
+
+//Creating an IIFE to prevent global variable conflicts
+(function() {
+    const customTrackTour = new Shepherd.Tour({
+        defaultStepOptions: {
+            cancelIcon: { enabled: true },
+            classes: 'class-1 class-2',
+            scrollTo: { behavior: 'smooth', block: 'center' }
+        },
+      useModalOverlay: true,
+      canClickTarget: false
+    });
+    
+    // log when a tutorial is started (commented out for now)
+    customTrackTour.on('start', function() {
+        writeToApacheLog("customTrackTutorial start " + getHgsid());
+    });
+    
+    var tutorialButtons = {
+        'back': {
+            action() {
+                return this.back();
+            },
+            classes: 'shepherd-button-secondary',
+            text: 'Back'
+        },
+        'next': {
+            action() {
+                return this.next();
+            },
+            text: 'Next'
+        },
+        'quit': {
+            action() {
+                return this.complete();
+            },
+            classes: 'shepherd-button-secondary',
+            text: 'Exit'
+        },
+        'end': {
+            action() {
+                hideMenu('#help > ul');
+                return this.complete();
+            },
+            //classes: 'shepherd-button-secondary',
+            text: 'Finish'
+        }
+    };
+
+    
+    // Function to add steps to the customTrackTour
+    function customTrackSteps() {
+        customTrackTour.addStep({
+            title: 'Adding custom data to the Genome Browser',
+            text: 'In this tutorial, we '+
+                  'will explore how to configure custom tracks '+
+                  'in the various formats available for a track.',
+            buttons: [tutorialButtons.quit, tutorialButtons.next],
+            id: 'intro'
+        });
+    
+    }
+
+    if (typeof window.customTrackTour === 'undefined') {
+        customTrackSteps();
+        //Export the customTrackTour globalally
+        window.customTrackTour = customTrackTour;
+    }
+})();