From add838b5b0baf87ea309ab0e7ffb1bb1a982503d Mon Sep 17 00:00:00 2001
From: turner <douglass.turner@gmail.com>
Date: Wed, 7 Feb 2024 16:39:24 -0500
Subject: [PATCH] Toggle only ROI background. Leave header intact

---
 js/roi/ROIManager.js |  1 +
 js/roi/ROITable.js   | 23 +++++++++++++++++++++--
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/js/roi/ROIManager.js b/js/roi/ROIManager.js
index bde1959bf..1d0c0ce5b 100644
--- 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
index fcb9bdc45..b439bc8f8 100644
--- 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