Better ROISet marging setting. Less resouce intensive

Author: turner

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;

css/igv.css

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

dev/api/getUserDefinedROIs.html

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

dev/misc/navbar-buttons.html

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

dev/misc/roiSampleInfoLayoutBug.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-api.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

dev/roi/roi.html

@@ -513,14 +513,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) {

js/browser.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/embedCss.js

@@ -5,7 +5,7 @@ import {inferFileFormat} from "../util/fileFormatUtils.js"
 import ROIMenu from "./ROIMenu.js"
 import ROITable from "./ROITable.js"
 
-
+let roiRegionMargin = undefined
 class ROIManager {
 
     constructor(browser) {
@@ -16,35 +16,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() {
@@ -247,6 +222,10 @@ class ROIManager {
         regionElement.style.top = `${pixelTop}px`
         regionElement.style.left = `${pixelX}px`
         regionElement.style.width = `${pixelWidth}px`
+
+        const marginTop = `${ROIManager.getROIRegionTopMargin(this.browser)}px`
+        regionElement.style.marginTop = marginTop
+
         regionElement.dataset.color = roiSet.color
         regionElement.dataset.region = regionKey
 
@@ -271,10 +250,30 @@ class ROIManager {
             this.roiMenu.present(feature, roiSet, event, this, columnContainer, regionElement)
         })
 
-
         return regionElement
     }
 
+ static getROIRegionTopMargin(browser) {
+
+        if (undefined === roiRegionMargin) {
+            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
+            roiRegionMargin = heightA + heightB + fudge
+
+        }
+
+        return roiRegionMargin
+    }
+
     renderSVGContext(columnContainer, context, {deltaX, deltaY}) {
 
         for (const regionElement of columnContainer.querySelectorAll('.igv-roi-region')) {
@@ -299,7 +298,7 @@ class ROIManager {
     deleteUserDefinedROISet() {
         this.roiSets = this.roiSets.filter(roiSet => roiSet.isUserDefined !== true)
     }
-    
+
     initializeUserDefinedROISet() {
 
         const config =

js/ideogramTrack.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) {