From 5ad0d5b5268418300c8c560c0ff745fe84bba4d4 Mon Sep 17 00:00:00 2001
From: jrobinso <933148+jrobinso@users.noreply.github.com>
Date: Tue, 9 Dec 2025 11:11:45 -0800
Subject: [PATCH 1/2] allow grouped "track hub" style menu configuration from
 json

---
 js/widgets/trackSelectionListModal.js | 18 +++++-----
 js/widgets/trackSelectionModal.js     | 32 +++++++++---------
 js/widgets/trackWidgets.js            | 23 +++++++------
 resources/tracks/mm10_sample.json     | 48 +++++++++++++++++++++++++++
 4 files changed, 86 insertions(+), 35 deletions(-)
 create mode 100644 resources/tracks/mm10_sample.json

diff --git a/js/widgets/trackSelectionListModal.js b/js/widgets/trackSelectionListModal.js
index a778e56..5820549 100644
--- a/js/widgets/trackSelectionListModal.js
+++ b/js/widgets/trackSelectionListModal.js
@@ -1,22 +1,22 @@
-export default function createTrackSelectionListModal({id, label = '', sections, description = '', okHandler}) {
+export default function createTrackSelectionListModal({id, label = '', groups, description = '', okHandler}) {
 
-    // Flatten sections to get all tracks.
+    // Flatten groups to get all tracks.
     const tracks = []
     const trackMap = new Map()
-    const flattenSections = (sections) => {
-        sections.forEach(section => {
-            if (section.tracks) {
-                section.tracks.forEach(track => {
+    const flattenGroups = (groups) => {
+        groups.forEach(group => {
+            if (group.tracks) {
+                group.tracks.forEach(track => {
                     tracks.push(track)
                     trackMap.set(track._id, track)
                 })
             }
-            if (section.children) {
-                flattenSections(section.children)
+            if (group.children) {
+                flattenGroups(group.children)
             }
         })
     }
-    flattenSections(sections)
+    flattenGroups(groups)
 
     // Generate the HTML for the modal
     const renderTracks = (tracks) => {
diff --git a/js/widgets/trackSelectionModal.js b/js/widgets/trackSelectionModal.js
index cfe1e09..43e6547 100644
--- a/js/widgets/trackSelectionModal.js
+++ b/js/widgets/trackSelectionModal.js
@@ -1,4 +1,4 @@
-export default function createTrackSelectionModal({id, label = '', sections, description = '', okHandler}) {
+export default function createTrackSelectionModal({id, label = '', groups, description = '', okHandler}) {
     const html = `
   <div id="${id}" class="modal fade igv-app-track-select-modal" tabindex="-1">
     <div class="modal-dialog modal-lg">
@@ -9,7 +9,7 @@ export default function createTrackSelectionModal({id, label = '', sections, des
           <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
         <div class="modal-body overflow-auto" style="max-height: 70vh;">
-          ${renderSections(sections, 0)}
+          ${renderGroups(groups, 0)}
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
@@ -20,15 +20,15 @@ export default function createTrackSelectionModal({id, label = '', sections, des
   </div>
 `
 
-    function renderSections(sections, level) {
-        return sections.map((section, index) => {
-            //console.log(`Rendering section: ${section.label}, level: ${level}`);
+    function renderGroups(groups, level) {
+        return groups.map((group, index) => {
+            //console.log(`Rendering group: ${group.label}, level: ${level}`);
             return `
     <div class="mb-3">
     
       ${level === 0 ? `
       <div class="bg-light text-center py-2 d-flex justify-content-between align-items-center" role="button" data-bs-toggle="collapse" data-bs-target="#collapseSection${index}" aria-expanded="true" aria-controls="collapseSection${index}">
-        <span style="font-size: 1.2rem;">${section.label}</span>
+        <span style="font-size: 1.2rem;">${group.label}</span>
         <span id="collapseIcon${index}" class="bi bi-dash"></span>
       </div>` : ''}        
 
@@ -36,12 +36,12 @@ export default function createTrackSelectionModal({id, label = '', sections, des
                 `<div class="collapse show mt-3" id="collapseSection${index}">` :
                 `<fieldset class="border rounded-3 p-3">
           <legend class="form-check-label float-none w-auto px-3" style="font-size: 1.0rem;">
-             ${section.label}
+             ${group.label}
           </legend><div>`}
         <form>
           <div class="container">
             <div class="row g-2">
-              ${section.tracks ? section.tracks.map((track) => `
+              ${group.tracks ? group.tracks.map((track) => `
                 <div class="col-6 col-md-4">
                   <div class="form-check d-flex align-items-center">
                     <input class="form-check-input" type="checkbox" id="${track._id}" ${track._loaded ? 'checked' : ''} ${track.disabled ? 'disabled' : ''}>
@@ -56,7 +56,7 @@ export default function createTrackSelectionModal({id, label = '', sections, des
                 </div>
               `).join('') : ''}
             </div>
-            ${section.children ? `<div class="mt-3">${renderSections(section.children, level + 1)}</div>` : ''}
+            ${group.children ? `<div class="mt-3">${renderGroups(group.children, level + 1)}</div>` : ''}
           </div>
         </form>
       ${level === 0 ? `</div>` : '</div></fieldset>'}
@@ -85,19 +85,19 @@ export default function createTrackSelectionModal({id, label = '', sections, des
     })
 
     const trackMap = new Map()
-    const fillTrackMap = (sections) => {
-        sections.forEach(section => {
-            if (section.tracks) {
-                section.tracks.forEach(track => {
+    const fillTrackMap = (groups) => {
+        groups.forEach(group => {
+            if (group.tracks) {
+                group.tracks.forEach(track => {
                     trackMap.set(track._id, track)
                 })
             }
-            if (section.children) {
-                fillTrackMap(section.children)
+            if (group.children) {
+                fillTrackMap(group.children)
             }
         })
     }
-    fillTrackMap(sections)
+    fillTrackMap(groups)
 
 
     // Listen for the modal close event
diff --git a/js/widgets/trackWidgets.js b/js/widgets/trackWidgets.js
index dca085c..b159b23 100644
--- a/js/widgets/trackWidgets.js
+++ b/js/widgets/trackWidgets.js
@@ -229,18 +229,18 @@ async function trackMenuGenomeChange(browser, genome) {
                     const loadedIDs = browser ? new Set(browser.findTracks(true).map(t => trackId(t))) : new Set()
 
                     // Annotate track config objects with a unique ID comprised of url + name
-                    const annotateTracks = (section) => {
-                        if (section.tracks) {
-                            for (const track of section.tracks) {
+                    const annotateTracks = (groups) => {
+                        if (groups.tracks) {
+                            for (const track of groups.tracks) {
                                 track._id = trackId(track)
                                 track._loaded = loadedIDs.has(track._id)
                             }
                         }
-                        if (section.children) for (const child of section.children) {
+                        if (groups.children) for (const child of groups.children) {
                             annotateTracks(child)
                         }
                     }
-                    for (const group of config.sections) {
+                    for (const group of config.groups) {
                         annotateTracks(group)
                     }
 
@@ -292,15 +292,18 @@ function prepRegistryConfig(registry) {
         registry.customModalTable = customModalTable
         return registry
     } else {
+
+        const groups = registry.groups || [{
+            label: registry.label,
+            tracks: registry.tracks
+        }]
+
         return {
             type: registry.type || 'track-selection-modal',
             id: `_${Math.random().toString(36).substring(2, 9)}`,
             label: registry.label,
             description: registry.description,
-            sections: [{
-                label: registry.label,
-                tracks: registry.tracks
-            }],
+            groups: groups
         }
     }
 }
@@ -315,7 +318,7 @@ async function prepHubConfig(hubURL, genomeID) {
         id: `_${Math.random().toString(36).substring(2, 9)}`,
         label: `${hub.getShortLabel()}`,
         description: descriptionUrl ? `<a target=_blank href="${descriptionUrl}">${hub.getLongLabel()}</a>` : '',
-        sections: groups
+        groups: groups
     }
 }
 
diff --git a/resources/tracks/mm10_sample.json b/resources/tracks/mm10_sample.json
new file mode 100644
index 0000000..b1f9721
--- /dev/null
+++ b/resources/tracks/mm10_sample.json
@@ -0,0 +1,48 @@
+{
+  "label": "mm10 Sample Tracks",
+  "type": "hub",
+  "description": "Some sample tracks for the mm10 genome",
+  "groups": [
+    {
+      "label": "Genes and Gene Predictions",
+      "tracks": [
+        {
+          "id": "HLTOGAannotvHg38v1",
+          "name": "TOGA vs. hg38",
+          "url": "https://hgdownload.soe.ucsc.edu/gbdb/mm10/TOGAvHg38v1/HLTOGAannotVsHg38v1.bb"
+        },
+        {
+          "id": "crisprAllTargets",
+          "name": "CRISPR Targets",
+          "group": "genes",
+          "url": "https://hgdownload.soe.ucsc.edu/gbdb/mm10/crisprAll/crispr.bb",
+          "html": "https://crispor.gi.ucsc.edu/crispor.py?org=$D&pos=$S:${&pam=NGG"
+        }
+      ]
+    },
+    {
+      "label": "Regulation",
+      "tracks": [
+        {
+          "id": "encodeCcreCombined",
+          "name": "ENCODE cCREs",
+          "url": "https://hgdownload.soe.ucsc.edu/gbdb/mm10/encode3/ccre/encodeCcreCombined.bb",
+          "html": "https://screen-v2.wenglab.org/search/?q=$$&assembly=mm10"
+        },
+        {
+          "id": "refSeqFuncElems",
+          "name": "RefSeq Func Elems",
+          "group": "regulation",
+          "url": "https://hgdownload.soe.ucsc.edu/gbdb/mm10/ncbiRefSeq/refSeqFuncElems.bb"
+        },
+        {
+          "id": "vistaEnhancersBb",
+          "name": "VISTA Enhancers",
+          "group": "regulation",
+          "url": "https://hgdownload.soe.ucsc.edu/gbdb/mm10/vistaEnhancers/vistaEnhancers.bb",
+          "html": "https://enhancer.lbl.gov/cgi-bin/imagedb3.pl?form=presentation&show=1&organism_id=2&experiment_id=$<experimentId>"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file

From 61caa3350a7df245cce5bceeb6f2699bb279af22 Mon Sep 17 00:00:00 2001
From: Jim Robinson <933148+jrobinso@users.noreply.github.com>
Date: Tue, 9 Dec 2025 11:27:30 -0800
Subject: [PATCH 2/2] Update resources/tracks/mm10_sample.json

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 resources/tracks/mm10_sample.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/tracks/mm10_sample.json b/resources/tracks/mm10_sample.json
index b1f9721..87555ca 100644
--- a/resources/tracks/mm10_sample.json
+++ b/resources/tracks/mm10_sample.json
@@ -16,7 +16,7 @@
           "name": "CRISPR Targets",
           "group": "genes",
           "url": "https://hgdownload.soe.ucsc.edu/gbdb/mm10/crisprAll/crispr.bb",
-          "html": "https://crispor.gi.ucsc.edu/crispor.py?org=$D&pos=$S:${&pam=NGG"
+          "html": "https://crispor.gi.ucsc.edu/crispor.py?org=$D&pos=$S:$E&pam=NGG"
         }
       ]
     },