Add ability to create titled sections in Sessions menu list. Add exam…

…ples for sample info.

js/app.js

@@ -27,8 +27,17 @@ import * as GooglePicker from '../node_modules/google-utils/src/googleFilePicker
 import makeDraggable from "./widgets/utils/draggable.js"
 import AlertSingleton from "./widgets/alertSingleton.js"
 import {createSessionWidgets} from "./widgets/sessionWidgets.js"
-import {updateTrackMenusWithTrackConfigurations, createTrackWidgetsWithTrackRegistry, getPathsWithTrackRegistryFile} from "./widgets/trackWidgets.js"
-import {dropboxDropdownItem, dropboxButtonImageBase64, googleDriveButtonImageBase64, googleDriveDropdownItem} from "./widgets/markupFactory.js"
+import {
+    updateTrackMenusWithTrackConfigurations,
+    createTrackWidgetsWithTrackRegistry,
+    getPathsWithTrackRegistryFile
+} from "./widgets/trackWidgets.js"
+import {
+    dropboxDropdownItem,
+    dropboxButtonImageBase64,
+    googleDriveButtonImageBase64,
+    googleDriveDropdownItem
+} from "./widgets/markupFactory.js"
 import GenomeFileLoad from "./widgets/genomeFileLoad.js"
 import FileLoadManager from "./widgets/fileLoadManager.js"
 import FileLoadWidget from "./widgets/fileLoadWidget.js"
@@ -556,32 +565,64 @@ async function createSessionMenu(sessionListDivider, sessionRegistryFile, sessio
 
         const sessions = sessionJSON['sessions']
 
+        let firstSection = true
         for (let {name, url} of sessions.reverse()) {
 
             const referenceNode = document.getElementById(sessionListDivider)
 
-            const button_id = `${id_prefix}_${guid()}`
-            const html = `<button id="${button_id}" class="dropdown-item" type="button">${name}</button>`
-            const fragment = document.createRange().createContextualFragment(html)
+            if (url) {
+                const button_id = `${id_prefix}_${guid()}`
+                const html = `<button id="${button_id}" class="dropdown-item" type="button">${name}</button>`
+                const fragment = document.createRange().createContextualFragment(html)
 
-            referenceNode.after(fragment.firstChild)
+                referenceNode.after(fragment.firstChild)
 
-            const button = document.getElementById(button_id)
-            button.addEventListener('click', () => {
+                const button = document.getElementById(button_id)
+                button.addEventListener('click', () => {
 
-                const config = {}
-                const key = true === isFile(url) ? 'file' : 'url'
-                config[key] = url
+                    const config = {}
+                    const key = true === isFile(url) ? 'file' : 'url'
+                    config[key] = url
 
-                sessionLoader(config)
+                    sessionLoader(config)
 
-            })
+                })
+            } else {
+                const html = `<h6 class="dropdown-header">${name}</h6>`
+                const el = fromHTML(html)
+                referenceNode.after(el)
+                if (!firstSection) {
+                    referenceNode.after(fromHTML('<div class="dropdown-divider"/>'))
+                    firstSection = false
+                }
+            }
         }
 
     }
 
 }
 
+/**
+ * @param {String} HTML representing a single element.
+ * @param {Boolean} flag representing whether or not to trim input whitespace, defaults to true.
+ * @return {Element | HTMLCollection | null}
+ */
+function fromHTML(html, trim = true) {
+    // Process the HTML string.
+    html = trim ? html.trim() : html
+    if (!html) return null
+
+    // Then set up a new template element.
+    const template = document.createElement('template')
+    template.innerHTML = html
+    const result = template.content.children
+
+    // Then return either an HTMLElement or HTMLCollection,
+    // based on whether the input HTML had one or more roots.
+    if (result.length === 1) return result[0]
+    return result
+}
+
 function createAppBookmarkHandler($bookmark_button) {
 
     $bookmark_button.on('click', (e) => {

resources/sessions/1kg-variants-session.json

@@ -0,0 +1,25 @@
+{
+  "genome":  "hg38",
+  "locus": "chr22:36,655,100-36,656,016",
+  "sampleinfo": [
+    {
+      "url": "https://igv-genepattern-org.s3.amazonaws.com/demo/integrated_call_samples_v3.20130502.ALL.panel"
+    }
+  ],
+  "tracks": [
+    {
+      "url": "https://igv-genepattern-org.s3.amazonaws.com/demo/ALL.apol1.sample.phase3_shapeit2_mvncall_integrated_v5a.20130502.genotypes.vcf.gz",
+      "name": "ALL.apol1.sample.phase3_shapeit2_mvncall_integrated_v5a.20130502.genotypes.vcf",
+      "format": "vcf",
+      "type": "variant",
+      "height": 700,
+      "sort": {
+        "option": "ATTRIBUTE",
+        "attribute": "pop",
+        "direction": "ASC"
+      },
+      "order": 1,
+      "displayMode": "SQUISHED"
+    }
+  ]
+}

resources/sessions/gbm-copynumber.json

@@ -0,0 +1,25 @@
+{
+  "genome": "hg38",
+  "locus": "chr7:52,338,217-57,756,711",
+  "sampleinfo": [
+    {
+      "url": "https://igv-genepattern-org.s3.amazonaws.com/demo/GBM-sampletable-samplemapping-colors.txt"
+    }
+  ],
+  "tracks": [
+    {
+      "url": "https://igv-genepattern-org.s3.amazonaws.com/demo/GBMCopyNumber.seg.gz",
+      "name": "GBMCopyNumber.seg.gz",
+      "order": 1,
+      "format": "seg",
+      "type": "seg",
+      "height": 400,
+      "displayMode": "SQUISHED",
+      "sort": {
+        "option": "ATTRIBUTE",
+        "attribute": "Subtype",
+        "direction": "ASC"
+      }
+    }
+  ]
+}

resources/sessions/sessionRegistry.json

@@ -1,5 +1,21 @@
 {
 "sessions": [
+  {
+    "name": "Examples - Sample Information"
+  },
+  {
+    "name": "Segmented Copy Number",
+    "description": "Segmented copy number for TCGA GBM data",
+    "url": "resources/sessions/gbm-copynumber.json"
+  },
+  {
+    "name": "1KG Variants",
+    "description": "1000 genomes variants",
+    "url": "resources/sessions/1kg-variants-session.json"
+  },
+  {
+    "name": "Examples - Circular View"
+  },
   {
     "name": "SKBR3 - Illumina (Schatz)",
     "description": "SKBR3 - Illumina (Schatz)",