d78cf5974051daa4a48a8195c8aaf754d4757edb
jnavarr5
  Tue Dec 2 16:11:49 2025 -0800
Adding a new style of button for loading the examples in the hgCustom tutorial. Making it so the button does nothing after clicking it the first time. refs #34354

diff --git src/hg/js/tutorials/customTrackTutorial.js src/hg/js/tutorials/customTrackTutorial.js
index 140b97cdfdc..a100284c100 100644
--- src/hg/js/tutorials/customTrackTutorial.js
+++ src/hg/js/tutorials/customTrackTutorial.js
@@ -29,112 +29,204 @@
         'next': {
             action() {
                 return this.next();
             },
             text: 'Next'
         },
         'quit': {
             action() {
                 return this.complete();
             },
             classes: 'shepherd-button-secondary',
             text: 'Exit'
         },
         'load_bigWig': {
             text: 'Load a bigWig example',
-            action () {
+            classes: 'shepherd-button-optional',
+            action (event) {
+              // If button was clicked already, do nothing
+              if (event.currentTarget.textContent === 'bigWig example added'){
+                  return;
+              }
+              // Change button color when clicked
+              if (event && event.currentTarget) {
+                  event.currentTarget.style.backgroundColor = '#87CEEB'; // Light blue
+                  event.currentTarget.textContent = 'bigWig example added';
+              }
+
               // Add text to the textarea
               const textarea = document.querySelector('textarea[name="hgct_customText"]');
               if (textarea.value.trim() === '') {
                   textarea.value = 'browser position chr21:33031596-33041570\n';
               }
               textarea.value += 'track type=bigWig name="bigWig variableStep" '+
                                 'description="bigWig variableStep format" visibility=full '+
                                 'autoScale=off viewLimits=5.0:25.0 color=255,200,0 '+
                                 'yLineMark=11.76 yLineOnOff=on '+
                                 'bigDataUrl="http://genome-test.gi.ucsc.edu/~hiram/ctDb/wigVariableStep.bw"\n';
               
               // Optional: trigger any change events if the page listens for them
               textarea.dispatchEvent(new Event('change', { bubbles: true }));
               textarea.dispatchEvent(new Event('input', { bubbles: true }));
             }
         },
         'load_bigBed': {
             text: 'Load a bigBed example',
-            action () {
+            classes: 'shepherd-button-optional',
+            action (event) {
+              // If button was clicked already, do nothing
+              if (event.currentTarget.textContent === 'bigBed example added'){
+                  return;
+              }
+              // Change button color when clicked
+              if (event && event.currentTarget) {
+                  event.currentTarget.style.backgroundColor = '#87CEEB'; // Light blue
+                  event.currentTarget.textContent = 'bigBed example added';
+              }
+
               // Add text to the textarea
               const textarea = document.querySelector('textarea[name="hgct_customText"]');
               if (textarea.value.trim() === '') {
                   textarea.value = 'browser position chr21:33031596-33041570\n';
               }
               textarea.value += 'track type=bigBed db="hg19" name="bigBed12" type="bigBed 12" '+
                                 'bigDataUrl="http://genome-test.gi.ucsc.edu/~hiram/ctDb/bigBedType12.bb "'+
                                 'visibility=pack itemRgb="On"\n';
               
               // Optional: trigger any change events if the page listens for them
               textarea.dispatchEvent(new Event('change', { bubbles: true }));
               textarea.dispatchEvent(new Event('input', { bubbles: true }));
             }
         },
         'load_bed': {
             text: 'Load a BED example',
-            action () {
+            classes: 'shepherd-button-optional',
+            action (event) {
+              // If button was clicked already, do nothing
+              if (event.currentTarget.textContent === 'BED example added'){
+                  return;
+              }
+              // Change button color when clicked
+              if (event && event.currentTarget) {
+                  event.currentTarget.style.backgroundColor = '#87CEEB'; // Light blue
+                  event.currentTarget.textContent = 'BED example added';
+              }
+
               // Add text to the textarea
               const textarea = document.querySelector('textarea[name="hgct_customText"]');
               if (textarea.value.trim() === '') {
                   textarea.value = 'browser position chr21:33031596-33041570\n';
               }
               textarea.value += 'track name="BED 6 example" priority="40" visibility=pack\n'+
                                 'chr21	33031596	33033258	item_0	0	-\n'+
                                 'chr21	33033258	33034920	item_1	100	+\n'+
                                 'chr21	33034920	33036582	item_2	200	-\n'+
                                 'chr21	33036582	33038244	item_3	300	+\n'+
                                 'chr21	33038244	33039906	item_4	400	-\n'+
                                 'chr21	33039906	33041570	item_5	500	+\n';
               
               // Optional: trigger any change events if the page listens for them
               textarea.dispatchEvent(new Event('change', { bubbles: true }));
               textarea.dispatchEvent(new Event('input', { bubbles: true }));
             }
         },
         'load_wig': {
             text: 'Load a WIG example',
-            action () {
+            classes: 'shepherd-button-optional',
+            action (event) {
+              // If button was clicked already, do nothing
+              if (event.currentTarget.textContent === 'WIG example added'){
+                  return;
+              }
+              // Change button color when clicked
+              if (event && event.currentTarget) {
+                  event.currentTarget.style.backgroundColor = '#87CEEB'; // Light blue
+                  event.currentTarget.textContent = 'WIG example added';
+              }
+
               // Add text to the textarea
               const textarea = document.querySelector('textarea[name="hgct_customText"]');
               if (textarea.value.trim() === '') {
                   textarea.value = 'browser position chr21:33031596-33041570\n';
               }
               textarea.value += 'track type=wiggle_0 priority="110" name="Wiggle variableStep" '+
                                 'visibility=full autoScale=off viewLimits=5.0:25.0 color=255,200,0 '+
                                 'yLineMark=11.76 yLineOnOff=on\n'+
                                 'variableStep chrom=chr21 span=1108\n'+
                                 '33031597	10.0\n'+
                                 '33032705	12.5\n'+
                                 '33033813	15.0\n'+
                                 '33034921	17.5\n'+
                                 '33036029	20.0\n'+
                                 '33037137	17.5\n'+
                                 '33038245	15.0\n'+
                                 '33039353	12.5\n'+
                                 '33040461	10.0\n';
               
               // Optional: trigger any change events if the page listens for them
               textarea.dispatchEvent(new Event('change', { bubbles: true }));
               textarea.dispatchEvent(new Event('input', { bubbles: true }));
             }
         },
+        'load_html': {
+            text: 'Load HTML example',
+            classes: 'shepherd-button-optional',
+            action (event) {
+              // If button was clicked already, do nothing
+              if (event.currentTarget.textContent === 'HTML example added'){
+                  return;
+              }
+              // Change button color when clicked
+              if (event && event.currentTarget) {
+                  event.currentTarget.style.backgroundColor = '#87CEEB'; // Light blue
+                  event.currentTarget.textContent = 'HTML example added';
+              }
+
+              // Add text to the textarea
+              const textarea = document.querySelector('textarea[name="hgct_docText"]');
+              textarea.value = '<h2>Description</h2>\n' +
+                               '<p>\n'+
+                               'Replace this text with a summary describing the concepts or \n'+
+                               'analysis represented by your data.</p>\n'+
+                               '\n'+
+                               '<h2>Methods</h2>\n'+
+                               '<p>\n'+
+                               'Replace this text with a description of the methods used to \n'+
+                               'generate and analyze the data.</p>\n'+
+                               '\n'+
+                               '<h2>Verification</h2>\n'+
+                               '<p>\n'+
+                               'Replace this text with a description of the methods used to \n'+
+                               'verify the data.</p>\n'+
+                               '\n'+
+                               '<h2>Credits</h2>\n'+
+                               '<p>\n'+
+                               'Replace this text with a list of the individuals and/or \n'+
+                               'organizations who contributed to the collection and analysis \n'+
+                               'of the data.</p>\n'+
+                               '\n'+
+                               '<h2>References</h2>\n'+
+                               '<p>\n'+
+                               'Replace this text with a list of relevant literature references \n'+
+                               'and/or websites that provide background or supporting \n'+
+                               'information about the data.</p>';
+
+              // Optional: trigger any change events if the page listens for them
+              textarea.dispatchEvent(new Event('change', { bubbles: true }));
+              textarea.dispatchEvent(new Event('input', { bubbles: true }));
+            }
+        },
         'submit': {
             text: 'Submit & continue',
             action() {
               // Save the tour so it continues after page reload
               sessionStorage.setItem('customTrackTourActive', 'true');
               sessionStorage.setItem('customTrackTourStep', 'after-submit');
               // Click the submit button
               const submitButton = document.getElementById('Submit');
               submitButton.click();
             }
         },
         'end': {
             action() {
                 hideMenu('#help > ul');
                 return this.complete();
@@ -276,31 +368,31 @@
                 {
                 element: '#data-input',
                 on: 'right'
                 },
             id: 'bigCustom-tracks'
         });
         customTrackTour.addStep({
             title: '(Optional) Upload track documentation',
             text:
                   'In this dialoge box, you can add HTML that will be shown on the custom '+
                   'track\'s description page. '+
                   '<br><br>'+
                   'An <a href="/goldenPath/help/ct_description.txt" '+
                   'target="_blank">example HTML</a> text is provided, and can '+
                   'be edited to fit your needs. ',
-            buttons: [tutorialButtons.back, tutorialButtons.next],
+            buttons: [tutorialButtons.back, tutorialButtons.load_html, tutorialButtons.next],
             attachTo: 
                 {
                 element: '#description-input',
                 on: 'right'
                 },
             id: 'documentation-box'
         });
     
         customTrackTour.addStep({
             title: 'Submit the custom track',
             text:
                   'Once you paste/upload your custom track data, you can use the '+
                   '<em><b>Submit</b></em> button to send the data to the UCSC Genome Browser. ',
             buttons: [tutorialButtons.back, tutorialButtons.submit],
             when: {