Added dev/api/getUserDefinedROIs.html. Cull unneeded async/await keyw…

…ords for ROI objects
igvteam · Jul 24, 2024 · 14d2809 · 14d2809
1 parent 5e03e65
commit 14d2809
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 17 deletions.
diff --git a/dev/api/getUserDefinedROIs.html b/dev/api/getUserDefinedROIs.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta content="IE=edge" http-equiv="X-UA-Compatible">
+    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
+    <meta content="" name="description">
+    <meta content="" name="author">
+    <link href=https://igv.org/web/img/favicon.ico rel="shortcut icon">
+    <title>Test - browser.getUserDefinedROIs() </title>
+
+</head>
+
+<body>
+
+<h2>Example illustrating browser region-of-interest API functions</h2>
+
+<p>
+    <button id='roi-clear-button'>Clear All ROI Sets</button>
+    <button id='roi-get-button'>Get User-Defined ROIs</button>
+</p>
+
+
+<div id="myDiv" style="padding-top: 50px;padding-bottom: 20px; height: auto"></div>
+
+<div>
+<h3>User defined ROIs:</h3>
+<div id="user-defined-rois"></div>
+</div>
+
+<script type="module">
+
+    import igv from "../../js/index.js"
+
+    let browser
+
+    (async () => {
+
+        const config =
+            {
+                locus: "chr1:67,646,911-67,676,107",
+                genome: "hg19",
+
+                doShowROITableButton: true,
+
+                tracks:
+                    [
+
+                    ]
+            }
+
+        browser = await igv.createBrowser(document.getElementById('myDiv'), config)
+
+        document.getElementById("roi-clear-button").addEventListener('click', () => {
+            const div = document.getElementById('user-defined-rois')
+            div.innerHTML = ''
+            browser.clearROIs()
+        })
+        document.getElementById("roi-get-button").addEventListener('click', async () => {
+
+            const rois = browser.getUserDefinedROIs()
+            if (rois) {
+
+                const div = document.getElementById('user-defined-rois')
+                div.innerHTML = ''
+
+                const list = document.createElement('ul')
+                div.appendChild(list)
+
+                for (const roi of rois) {
+                    const li = document.createElement('li')
+                    li.innerText = `${roi.chr}:${roi.start + 1}-${roi.end}`
+                    list.appendChild(li)
+                }
+            }
+        })
+    })()
+
+</script>
+
+</body>
+
+</html>
diff --git a/js/roi/ROIManager.js b/js/roi/ROIManager.js
@@ -53,16 +53,12 @@ class ROIManager {
             this.browser.roiTableControl.setVisibility(this.browser.doShowROITableButton)
         }
 
-        const promises = this.roiSets.map(roiSet => this.renderROISet({
+        this.roiSets.map(roiSet => this.renderROISet({
             browser: this.browser,
             pixelTop: this.top,
             roiSet
         }))
 
-        if (promises.length > 0) {
-            await Promise.all(promises)
-        }
-
         const records = await this.getTableRecords()
         this.roiTable.renderTable(records)
 
@@ -108,7 +104,7 @@ class ROIManager {
 
         for (let roiSet of this.roiSets) {
             const setName = (roiSet.name || '')
-            const allFeatures = await roiSet.getAllFeatures()
+            const allFeatures = roiSet.getAllFeatures()
             for (let chr of Object.keys(allFeatures)) {
                 for (let feature of allFeatures[chr]) {
                     records.push({setName, feature})
@@ -134,7 +130,7 @@ class ROIManager {
 
     async updateUserDefinedROISet(feature) {
 
-        let userDefinedROISet = await this.getUserDefinedROISet()
+        let userDefinedROISet = this.getUserDefinedROISet()
 
         if (undefined === userDefinedROISet) {
             userDefinedROISet = this.initializeUserDefinedROISet()
@@ -146,7 +142,7 @@ class ROIManager {
             this.setROITableButtonVisibility(true)
         }
 
-        await this.renderROISet({browser: this.browser, pixelTop: this.top, roiSet: userDefinedROISet})
+        this.renderROISet({browser: this.browser, pixelTop: this.top, roiSet: userDefinedROISet})
 
         const records = await this.getTableRecords()
         this.roiTable.renderTable(records)
@@ -167,14 +163,14 @@ class ROIManager {
         }
     }
 
-    async renderAllROISets() {
+    renderAllROISets() {
 
         for (let roiSet of this.roiSets) {
-            await this.renderROISet({browser: this.browser, pixelTop: this.top, roiSet})
+            this.renderROISet({browser: this.browser, pixelTop: this.top, roiSet})
         }
     }
 
-    async renderROISet({browser, pixelTop, roiSet}) {
+    renderROISet({browser, pixelTop, roiSet}) {
 
         const columns = browser.columnContainer.querySelectorAll('.igv-column')
 
@@ -191,7 +187,7 @@ class ROIManager {
                 }
             }
 
-            const features = await roiSet.getFeatures(chr, viewStart, viewEnd)
+            const features = roiSet.getFeatures(chr, viewStart, viewEnd)
 
             if (features) {
 
@@ -307,7 +303,7 @@ class ROIManager {
         const {chr, start, end} = parseRegionKey(regionKey)
 
         for (let set of this.roiSets) {
-                const features = await set.getFeatures(chr, start, end)
+                const features = set.getFeatures(chr, start, end)
 
                 for (let feature of features) {
                     if (feature.chr === chr && feature.start >= start && feature.end <= end) {

diff --git a/js/roi/ROISet.js b/js/roi/ROISet.js
@@ -62,12 +62,12 @@ class ROISet {
 
     }
 
-    async getFeatures(chr, start, end) {
+    getFeatures(chr, start, end) {
         return this.featureSource.getFeatures({chr, start, end})
     }
 
-    async getAllFeatures() {
-        return typeof this.featureSource.getAllFeatures === 'function' ? await this.featureSource.getAllFeatures() : {}
+    getAllFeatures() {
+        return typeof this.featureSource.getAllFeatures === 'function' ? this.featureSource.getAllFeatures() : {}
     }
 
     addFeature(feature) {
@@ -146,7 +146,7 @@ class DynamicFeatureSource {
         }
     }
 
-    async getFeatures({chr, start, end}) {
+    getFeatures({chr, start, end}) {
         if (chr.toLowerCase() === 'all') {
             return computeWGFeatures(this.featureMap, this.genome)
         } else {