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 = 'Description
\n' +
+ '\n'+
+ 'Replace this text with a summary describing the concepts or \n'+
+ 'analysis represented by your data.
\n'+
+ '\n'+
+ 'Methods
\n'+
+ '\n'+
+ 'Replace this text with a description of the methods used to \n'+
+ 'generate and analyze the data.
\n'+
+ '\n'+
+ 'Verification
\n'+
+ '\n'+
+ 'Replace this text with a description of the methods used to \n'+
+ 'verify the data.
\n'+
+ '\n'+
+ 'Credits
\n'+
+ '\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.
\n'+
+ '\n'+
+ 'References
\n'+
+ '\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.
';
+
+ // 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. '+
'
'+
'An example HTML 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 '+
'Submit button to send the data to the UCSC Genome Browser. ',
buttons: [tutorialButtons.back, tutorialButtons.submit],
when: {