984a3761c1300e20e463304a81098b312da7bd66
jnavarr5
Wed Nov 26 15:49:51 2025 -0800
Adding the custom track tutorial, refs #34354
diff --git src/hg/js/tutorials/tutorialPopup.js src/hg/js/tutorials/tutorialPopup.js
index 9793f41ef1b..e68b2f0893a 100644
--- src/hg/js/tutorials/tutorialPopup.js
+++ src/hg/js/tutorials/tutorialPopup.js
@@ -1,122 +1,143 @@
// funtion to create the pop-up on hgTracks
window.createTutorialPopup = function() {
// Create the pop-up container
const tutorialDiv = document.createElement("div");
tutorialDiv.id = "tutorialContainer";
tutorialDiv.style.display = "none";
// Create the contents for the popup
tutorialDiv.innerHTML = `
These interactive tutorials will provide step-by-step guides to help
navigate through various tools and pages on the UCSC Genome Browser.
|
Basic tutorial |
An introductory tutorial to help users navigate the UCSC Genome Browser tracks
display. Learn how to configure display settings, search for tracks, and view the
negative strand (3' to 5').
|
Advanced tutorial for clinicians
(only available on hg19 & hg38) |
A tutorial focused on clinical genetics to showcase resources that
may be useful in variant interpretation.
Learn how to search for variants,
view recommended track sets, and save your configuration settings to share with others.
|
+
+ Custom Track tutorial
+ (only available on hg38) |
+
+
+ An introductory tutorial to guide users with steps to upload their own data into the
+ UCSC Genome Browser. Learn how to upload a BED, Wiggle, bigBed, or bigWigs for the
+ hg38 genome assembly.
+ |
|
Table Browser tutorial |
An introductory tutorial to navigate and configure the UCSC Table Browser.
Learn how to switch between assemblies, select primary or related tables for a track,
and select your output format.
|
|
Gateway tutorial |
An introductory tutorial covering key features of the UCSC Gateway page.
Learn how to locate and search genome assemblies, view the assembly
browser sequences page, examine detailed assembly information, and more.
|
`;
document.body.appendChild(tutorialDiv); // Add tutorial popup to the page
$("#tutorialContainer").dialog({
modal: false,
title: "Interactive Tutorials",
draggable: true,
resizable: false,
width: 650,
/*
buttons: [{
text: "Close",
click: function() {
$(this).dialog("close");
}
}],*/
position: {my: "center top", at: "center top+100", of: window}
});
const url = new URL (window.location.href); // Get which CGI you are viewing
const pathParts = url.pathname.split('/');
const cgi = pathParts[pathParts.length -1];
const db = getDb(); // Get which database you are viewing
// Function to control the basic tutorial link
document.getElementById('basicTutorial').addEventListener('click', function(event) {
event.preventDefault();
$("#tutorialContainer").dialog("close");
if (cgi == "hgTracks") {
basicTour.start();
} else {
window.location.href = "/cgi-bin/hgTracks?startTutorial=true";
}
});
// Function to control the clincial tutorial link
document.getElementById('clinicalTutorial').addEventListener('click', function(event) {
event.preventDefault();
$("#tutorialContainer").dialog("close");
if (cgi == "hgTracks" && (db == "hg38" || db =="hg19")) {
clinicalTour.start(); // If you are on hg38 or hg19, then start the tutorial
} else {
// Otherwise go to hg38 and start the tutorial.
window.location.href = "/cgi-bin/hgTracks?db=hg38&startClinical=true";
}
});
+ // Function to control the clincial tutorial link
+ document.getElementById('customTrackTutorial').addEventListener('click', function(event) {
+ event.preventDefault();
+ $("#tutorialContainer").dialog("close");
+ if (cgi == "hgCustom" && db == "hg38") {
+ customTrackTour.start(); // If you are on hg38, then start the tutorial
+ } else {
+ // Otherwise go to hg38 and start the tutorial.
+ window.location.href = "/cgi-bin/hgCustom?db=hg38&startCustomTutorial=true&hgct_do_add=1";
+ }
+ });
+
// Function to control the Table Browser tutorial link
document.getElementById('tableBrowserTutorial').addEventListener('click', function(event) {
event.preventDefault();
$("#tutorialContainer").dialog("close");
if (cgi == "hgTables" && (typeof startTableBrowserOnLoad !== 'undefined' && startTableBrowserOnLoad)) {
tableBrowserTour.start(); // If you are on hgTables, start the tutorial
} else {
// Go to hgTables and start the tutorial
window.location.href = "/cgi-bin/hgTables?startTutorial=true";
}
});
// Function to control the Gateway tutorial link
document.getElementById('gatewayTutorial').addEventListener('click', function(event) {
event.preventDefault();
$("#tutorialContainer").dialog("close");
if (cgi == "hgGateway" && (typeof startGatewayOnLoad !== 'undefined' && startGatewayOnLoad)) {
gatewayTour.start(); // If you are on hgGateway, start the tutorial
} else {
// Go to the Gateway page and start the tutorial
window.location.href = "/cgi-bin/hgGateway?startTutorial=true";
}
});
};