Better ROISet margin setting. Less resource intensive. (#1919)

* Better ROISet marging setting. Less resouce intensive

* Update ROI region tops on browser layout change.  Handles change in ruler height from sampleInfo button

---------

Co-authored-by: jrobinso <[email protected]>

css/_roi.scss

@@ -465,15 +465,7 @@ $igv-roi-table-background-color: #eee;
 
   overflow: visible;
 
-  margin-top: 66px;
-
-  //border-left-width: thin;
-  //border-left-style: solid;
-  //border-left-color: $igv-roi-border-color;
-
-  //border-right-width: thin;
-  //border-right-style: solid;
-  //border-right-color: $igv-roi-border-color;
+  //margin-top: 66px;
 
   display: flex;
   flex-direction: column;

dev/api/getUserDefinedROIs.html

@@ -39,8 +39,6 @@ <h3>User defined ROIs:</h3>
                 locus: "chr1:67,646,911-67,676,107",
                 genome: "hg19",
 
-                doShowROITableButton: true,
-
                 tracks:
                     [
                     ]

dev/misc/navbar-buttons.html

@@ -25,8 +25,6 @@
 
             // showSampleNames: true,
 
-            doShowROITableButton: true,
-
             genome: "hg19",
             // locus: "myc",
             locus: "all",

dev/misc/roiSampleInfoLayoutBug.html

@@ -29,7 +29,6 @@
         {
             locus: "1:67,655,272-67,684,468",
             genome: "hg19",
-            doShowROITableButton: true,
             showSampleNames: false,
             roi:
                 [

dev/roi/roi-api.html

@@ -37,8 +37,6 @@ <h3>User defined ROIs:</h3>
         {
             locus: "chr1:67,646,911-67,676,107",
             genome: "hg19",
-
-            doShowROITableButton: true,
             showROITable: true,
 
             tracks:

dev/roi/roi.html

@@ -33,7 +33,8 @@
 
         genome: "hg19",
 
-        doShowROITableButton: true,
+        // showIdeogram: false,
+        showRuler: false,
 
         // Define two global "region of interest" sets, the first with a bed file, the second with an explicit array
         // of regions

js/browser.js

@@ -516,14 +516,14 @@ class Browser {
         // deferred because ideogram and ruler are treated as "tracks", and tracks require a reference frame
         if (false !== session.showIdeogram) {
             const track = new IdeogramTrack(this)
-            track.id = 'ideogram'
             const trackView = new TrackView(this, this.columnContainer, track)
             this.trackViews.push(trackView)
         }
 
         if (false !== session.showRuler) {
-            const rulerTrackView = new TrackView(this, this.columnContainer, new RulerTrack(this))
-            this.trackViews.push(rulerTrackView)
+            const track = new RulerTrack(this)
+            const trackView = new TrackView(this, this.columnContainer, track)
+            this.trackViews.push(trackView)
         }
 
         if (session.qtlSelections) {
@@ -1369,6 +1369,9 @@ class Browser {
         }
 
         resize.call(this)
+
+        this.roiManager.updateROIRegionPositions()
+
         await this.updateViews()
     }
 

js/ideogramTrack.js

@@ -34,6 +34,7 @@ class IdeogramTrack {
     constructor(browser) {
         this.browser = browser
         this.type = 'ideogram'
+        this.id = 'ideogram'
         this.height = 16
         this.order = Number.MIN_SAFE_INTEGER
         this.disableButtons = true

js/roi/ROIManager.js

@@ -5,7 +5,6 @@ import {inferFileFormat} from "../util/fileFormatUtils.js"
 import ROIMenu from "./ROIMenu.js"
 import ROITable from "./ROITable.js"
 
-
 class ROIManager {
 
     constructor(browser) {
@@ -16,35 +15,10 @@ class ROIManager {
         this.top = 0
         this.roiSets = []
         this.showOverlays = true
+
         this.boundLocusChangeHandler = locusChangeHandler.bind(this)
         browser.on('locuschange', this.boundLocusChangeHandler)
 
-        const updateROIDimensions = () => {
-
-            const tracks = browser.findTracks(track => new Set(['ideogram', 'ruler']).has(track.type))
-            const [rectA, rectB] = tracks
-                .map(track => track.trackView.viewports[0].$viewport.get(0))
-                .map(element => getElementVerticalDimension(element))
-
-            //Covers cases in which ruler and/or ideogram are hidden
-            const heightA = rectA ? rectA.height : 0
-            const heightB = rectB ? rectB.height : 0
-
-            const elements = browser.columnContainer.querySelectorAll('.igv-roi-region')
-
-            const fudge = -0.5
-            if (elements) {
-                for (const element of elements) {
-                    element.style.marginTop = `${heightA + heightB + fudge}px`
-                }
-
-            }
-        }
-
-        this.observer = new MutationObserver(updateROIDimensions)
-        //const [ column ] = browser.columnContainer.querySelectorAll('.igv-column')
-        this.observer.observe(browser.columnContainer, {attributes: true, childList: true, subtree: true})
-
     }
 
     async reset() {
@@ -81,7 +55,7 @@ class ROIManager {
                 el.style.backgroundColor = el.dataset.color
             } else {
                 // Hide overlay by setting its transparency to zero.  A bit of an unusual method to hide an element.
-                el.style.backgroundColor = `rgba(0,0,0,0)`
+                el.style.backgroundColor = `rgba(0, 0, 0, 0)`
             }
         }
         this.roiTable.toggleROIButton.textContent = false === isVisible ? 'Show Overlays' : 'Hide Overlays'
@@ -247,6 +221,10 @@ class ROIManager {
         regionElement.style.top = `${pixelTop}px`
         regionElement.style.left = `${pixelX}px`
         regionElement.style.width = `${pixelWidth}px`
+
+        const marginTop = `${this.getROIRegionTopMargin()}px`
+        regionElement.style.marginTop = marginTop
+
         regionElement.dataset.color = roiSet.color
         regionElement.dataset.region = regionKey
 
@@ -255,7 +233,7 @@ class ROIManager {
             regionElement.style.backgroundColor = roiSet.color
         } else {
             // Hide overlay by setting its transparency to zero.  A bit of an unusual method to hide an element.
-            regionElement.style.backgroundColor = `rgba(0,0,0,0)`
+            regionElement.style.backgroundColor = `rgba(0, 0, 0, 0)`
         }
 
         const header = DOMUtils.div()
@@ -271,10 +249,40 @@ class ROIManager {
             this.roiMenu.present(feature, roiSet, event, this, columnContainer, regionElement)
         })
 
-
         return regionElement
     }
 
+    updateROIRegionPositions() {
+        const top = `${this.getROIRegionTopMargin()}px`
+        const columns = this.browser.columnContainer.querySelectorAll('.igv-column')
+        for (let i = 0; i < columns.length; i++) {
+            const elements = columns[i].querySelectorAll('.igv-roi-region')
+            for (let j = 0; j < elements.length; j++) {
+                elements[j].style.marginTop = top
+            }
+        }
+    }
+
+    getROIRegionTopMargin() {
+
+        const browser = this.browser
+
+        const tracks = browser.findTracks(track => new Set(['ideogram', 'ruler']).has(track.type))
+
+        const [rectA, rectB] = tracks
+            .map(track => track.trackView.viewports[0].$viewport.get(0))
+            .map(element => getElementVerticalDimension(element))
+
+        //Covers cases in which ruler and/or ideogram are hidden
+        const heightA = rectA ? rectA.height : 0
+        const heightB = rectB ? rectB.height : 0
+
+        const fudge = -0.5
+        const roiRegionMargin = heightA + heightB + fudge
+
+        return roiRegionMargin
+    }
+
     renderSVGContext(columnContainer, context, {deltaX, deltaY}) {
 
         for (const regionElement of columnContainer.querySelectorAll('.igv-roi-region')) {
@@ -299,7 +307,7 @@ class ROIManager {
     deleteUserDefinedROISet() {
         this.roiSets = this.roiSets.filter(roiSet => roiSet.isUserDefined !== true)
     }
-    
+
     initializeUserDefinedROISet() {
 
         const config =

js/rulerTrack.js

@@ -37,12 +37,12 @@ class RulerTrack {
         this.browser = browser
         this.height = defaultRulerHeight
         this.name = ""
-        this.id = "ruler"
         this.disableButtons = true
         this.ignoreTrackMenu = true
         this.order = Number.MIN_SAFE_INTEGER * 1e-2
         this.removable = false
         this.type = 'ruler'
+        this.id = "ruler"
     }
 
     async getFeatures(chr, start, end) {