Git Issue 1729 - Hide/Show ROI (igvteam#1733)

* Add option to Hide/Show ROI Sets - fixes igvteam#1729
arpanda · Apr 2, 2024 · 081ac2f · 081ac2f
1 parent 507faac
commit 081ac2f
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 2 deletions.
diff --git a/js/roi/ROIManager.js b/js/roi/ROIManager.js
@@ -36,6 +36,11 @@ class ROIManager {
         const records = await this.getTableRecords()
         this.roiTable.renderTable(records)
 
+        if (this.roiSets.length > 0) {
+            const isVisible = this.roiSets[ 0 ].isVisible
+            this.roiTable.setROIVisibility(isVisible)
+        }
+
     }
 
     async loadROI(config, genome) {
@@ -122,6 +127,16 @@ class ROIManager {
         this.browser.roiTableControl.setVisibility(this.browser.doShowROITableButton)
     }
 
+    toggleROIs() {
+
+        const isVisible = !(this.roiSets[ 0 ].isVisible)
+        this.roiTable.setROIVisibility(isVisible)
+
+        for (const roiSet of this.roiSets) {
+            roiSet.isVisible = isVisible
+        }
+    }
+
     async renderAllROISets() {
 
         for (let roiSet of this.roiSets) {

diff --git a/js/roi/ROISet.js b/js/roi/ROISet.js
@@ -57,6 +57,9 @@ class ROISet {
             // this.headerColor = `rgba(${ r },${ g },${ b },${ 1.0 })`
 
         }
+
+        this.isVisible = undefined === config.isVisible ? true : config.isVisible
+
     }
 
     async getFeatures(chr, start, end) {
@@ -85,7 +88,7 @@ class ROISet {
 
     toJSON() {
         if (this.url) {
-            return {name: this.name, color: this.color, url: this.url, isUserDefined: this.isUserDefined}
+            return {name: this.name, color: this.color, url: this.url, isUserDefined: this.isUserDefined, isVisible: this.isVisible}
         } else {
             const featureMap = this.featureSource.getAllFeatures()
             const features = []
@@ -94,7 +97,7 @@ class ROISet {
                     features.push(f)
                 }
             }
-            return {name: this.name, color: this.color, features: features, isUserDefined: this.isUserDefined}
+            return {name: this.name, color: this.color, features: features, isUserDefined: this.isUserDefined, isVisible: this.isVisible}
         }
     }
 

diff --git a/js/roi/ROITable.js b/js/roi/ROITable.js
@@ -59,9 +59,49 @@ class ROITable extends RegionTableBase {
         }
     }
 
+    set footerDOM(gotoButtonHandler) {
+
+        super.footerDOM = gotoButtonHandler
+
+        this.gotoButton.textContent = 'Go to selected region(s)'
+
+        // Hide/Show Button
+        const toggleROIButton = DOMUtils.div({ class: 'igv-roi-table-button' })
+        const dom = this._footerDOM
+        dom.appendChild(toggleROIButton)
+
+        toggleROIButton.id = 'igv-roi-hide-show-button'
+        toggleROIButton.textContent = 'Hide all ROIs'
+
+        this.toggleROIButton = toggleROIButton
+
+        function toggleROIButtonHandler(event) {
+            event.preventDefault()
+            event.stopPropagation()
+            this.browser.roiManager.toggleROIs()
+        }
+
+        this.boundToggleDisplayButtonHandler = toggleROIButtonHandler.bind(this)
+
+        this.toggleROIButton.addEventListener('click', this.boundToggleDisplayButtonHandler)
+
+    }
+
+    setROIVisibility(isVisible) {
+
+        const elements = this.browser.columnContainer.querySelectorAll('.igv-roi-region')
+        for (const el of elements) {
+            el.style.display = false === isVisible ? 'none' : 'flex'
+        }
+
+        this.toggleROIButton.textContent = false === isVisible ? 'Show all ROIs' : 'Hide all ROIs'
+
+    }
+
     dispose() {
 
         document.removeEventListener('click', this.boundGotoButtonHandler)
+        document.removeEventListener('click', this.boundToggleDisplayButtonHandler)
 
         this.browser.roiTableControl.buttonHandler(false)
         super.dispose()