Toggle only ROI background. Leave header intact

igvteam · Feb 7, 2024 · add838b · add838b
1 parent 506ef26
commit add838b
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/js/roi/ROIManager.js b/js/roi/ROIManager.js
@@ -198,6 +198,7 @@ class ROIManager {
         regionElement.style.left = `${pixelX}px`
         regionElement.style.width = `${pixelWidth}px`
         regionElement.style.backgroundColor = roiSet.color
+        regionElement.dataset.color = roiSet.color
         regionElement.dataset.region = regionKey
 
         const header = DOMUtils.div()

diff --git a/js/roi/ROITable.js b/js/roi/ROITable.js
@@ -90,8 +90,11 @@ class ROITable extends RegionTableBase {
     setROIVisibility(isVisible) {
 
         const elements = this.browser.columnContainer.querySelectorAll('.igv-roi-region')
-        for (const el of elements) {
-            el.style.display = false === isVisible ? 'none' : 'flex'
+
+        for (let i = 0; i < elements.length; i++) {
+            const el = elements[ i ]
+            false === isVisible ? updateElementAlpha(el, 0.0) : el.style.backgroundColor = el.dataset.color
+
         }
 
         this.toggleROIButton.textContent = false === isVisible ? 'Show all ROIs' : 'Hide all ROIs'
@@ -153,4 +156,20 @@ class ROITable extends RegionTableBase {
     }
 
 }
+
+function updateElementAlpha(element, alpha) {
+
+    const rgba = window.getComputedStyle(element).backgroundColor;
+
+    const rgbaArray = rgba.match(/[\d.]+/g);
+
+    if (rgbaArray.length === 3) {
+        rgbaArray.push(1)
+    }
+
+    rgbaArray[3] = alpha;
+
+    element.style.backgroundColor = `rgba(${rgbaArray.join(', ')})`
+}
+
 export default ROITable