From e0c29cbc87c031bc4ee64ae7895fdcc1eb3a209a Mon Sep 17 00:00:00 2001
From: Jim Robinson <933148+jrobinso@users.noreply.github.com>
Date: Wed, 7 Aug 2024 11:29:07 -0700
Subject: [PATCH] Merged track issues (#1866)

Fix some issues with merged tracks.   Autoscale for merged and individual track settings could conflict.
---
 dev/wig/merged.html               |  70 +++++++---
 examples/mergedWig.html           |  22 ++-
 examples/spliceJunctions.html     |  35 ++++-
 js/bam/coverageTrack.js           |   1 +
 js/cnvpytor/cnvpytorTrack.js      |   4 +-
 js/feature/featureTrack.js        |   2 +-
 js/feature/mergedTrack.js         | 218 ++++++++++++++++++------------
 js/feature/spliceJunctionTrack.js |  30 ++--
 js/trackBase.js                   |   8 ++
 js/trackView.js                   |  21 ---
 js/ui/dataRangeDialog.js          |  10 +-
 js/ui/overlayTrackButton.js       |   4 +-
 12 files changed, 271 insertions(+), 154 deletions(-)
diff --git a/dev/wig/merged.html b/dev/wig/merged.html
index 660796767..1d285deb3 100644
--- a/dev/wig/merged.html
+++ b/dev/wig/merged.html
@@ -6,6 +6,8 @@
 </head>
 
 <body>
+<button id="log-state">Log Session</button>
+<button id="bookmark">Bookmark</button>
 
 <h1>Merged track</h1>
 
@@ -22,25 +24,12 @@ <h1>Merged track</h1>
 
     var options =
         {
+            queryParametersSupported: true,
             genome: "hg19",
             locus: "chr4:40,174,668-40,221,204",
             tracks: [
-                // {
-                //     "type": "wig",
-                //     "format": "bigwig",
-                //     "url": "https://www.encodeproject.org/files/ENCFF000ASJ/@@download/ENCFF000ASJ.bigWig",
-                //     "color": "red",
-                //     "name": "ENCFF000ASJ"
-                // },
-                // {
-                //     "type": "wig",
-                //     "format": "bigwig",
-                //     "url": "https://www.encodeproject.org/files/ENCFF351WPV/@@download/ENCFF351WPV.bigWig",
-                //     "color": "green",
-                //     "name": "ENCFF351WPV"
-                // },
                 {
-                    name: "Merged - group autoscaled",
+                    name: "Merged - autoscaled",
                     type: "merged",
                     autoscale: true,
                     tracks: [
@@ -58,6 +47,26 @@ <h1>Merged track</h1>
                         }
                     ]
                 },
+                {
+                    name: "Merged - fixed scale",
+                    type: "merged",
+                    min: 0,
+                    max: 100,
+                    tracks: [
+                        {
+                            "type": "wig",
+                            "format": "bigwig",
+                            "url": "https://www.encodeproject.org/files/ENCFF000ASJ/@@download/ENCFF000ASJ.bigWig",
+                            "color": "red"
+                        },
+                        {
+                            "type": "wig",
+                            "format": "bigwig",
+                            "url": "https://www.encodeproject.org/files/ENCFF351WPV/@@download/ENCFF351WPV.bigWig",
+                            "color": "green"
+                        }
+                    ]
+                },
                 {
                     name: "Merged - individual autoscaled",
                     type: "merged",
@@ -77,7 +86,27 @@ <h1>Merged track</h1>
                             "autoscale": true
                         }
                     ]
-                }
+                },
+                {
+                    name: "Merged - individual fixed scale",
+                    type: "merged",
+                    tracks: [
+                        {
+                            "type": "wig",
+                            "format": "bigwig",
+                            "url": "https://www.encodeproject.org/files/ENCFF000ASJ/@@download/ENCFF000ASJ.bigWig",
+                            "color": "red",
+                            "max": 100
+                        },
+                        {
+                            "type": "wig",
+                            "format": "bigwig",
+                            "url": "https://www.encodeproject.org/files/ENCFF351WPV/@@download/ENCFF351WPV.bigWig",
+                            "color": "green",
+                            "max": 50
+                        }
+                    ]
+                },
             ]
         }
 
@@ -85,7 +114,14 @@ <h1>Merged track</h1>
 
     igv.createBrowser(igvDiv, options)
         .then(function (browser) {
-            console.log("Created IGV browser")
+            document.getElementById("log-state").addEventListener("click", () => console.log(browser.toJSON()))
+
+            document.getElementById('bookmark').addEventListener('click', () => {
+                const path = window.location.href.slice()
+                const idx = path.indexOf("?")
+                const url = (idx > 0 ? path.substring(0, idx) : path) + "?sessionURL=blob:" + browser.compressedSession()
+                window.history.pushState({}, "IGV", url)
+            })
         })
 
 
diff --git a/examples/mergedWig.html b/examples/mergedWig.html
index cedb519bc..51c95c59f 100644
--- a/examples/mergedWig.html
+++ b/examples/mergedWig.html
@@ -63,7 +63,27 @@ <h1>Merged track</h1>
                             "color": "green"
                         }
                     ]
-                }
+                },
+                {
+                    name: "Merged - individual autoscaled",
+                    type: "merged",
+                    tracks: [
+                        {
+                            "type": "wig",
+                            "format": "bigwig",
+                            "url": "https://www.encodeproject.org/files/ENCFF000ASJ/@@download/ENCFF000ASJ.bigWig",
+                            "color": "red",
+                            "autoscale": true
+                        },
+                        {
+                            "type": "wig",
+                            "format": "bigwig",
+                            "url": "https://www.encodeproject.org/files/ENCFF351WPV/@@download/ENCFF351WPV.bigWig",
+                            "color": "green",
+                            "autoscale": true
+                        }
+                    ]
+                },
             ]
         }
 
diff --git a/examples/spliceJunctions.html b/examples/spliceJunctions.html
index d89d5fc12..1aca55380 100644
--- a/examples/spliceJunctions.html
+++ b/examples/spliceJunctions.html
@@ -13,12 +13,41 @@ <h1>Splice junctions</h1>
 
 <script type="module">
 
-    import igv from "../dist/igv.esm.js";
+    import igv from "../dist/igv.esm.min.js"
 
     const tracks = [
+        {
+            type: 'junction',
+            name: 'Junctions',
+            format: 'bed',
+            url: `https://www.dropbox.com/s/nvmy55hhe24plpv/splice_junction_track_test_cases_sampleA.chr15-92835700-93031800.SJ.out.bed.gz?dl=0`,
+            indexURL: `https://www.dropbox.com/s/iv5tcg3t8v3xu23/splice_junction_track_test_cases_sampleA.chr15-92835700-93031800.SJ.out.bed.gz.tbi?dl=0`,
+            displayMode: 'COLLAPSED',
+            minUniquelyMappedReads: 1,
+            minTotalReads: 1,
+            maxFractionMultiMappedReads: 1,
+            minSplicedAlignmentOverhang: 0,
+            thicknessBasedOn: 'numUniqueReads', //options: numUniqueReads (default), numReads, isAnnotatedJunction
+            bounceHeightBasedOn: 'random', //options: random (default), distance, thickness
+            colorBy: 'isAnnotatedJunction', //options: numUniqueReads (default), numReads, isAnnotatedJunction, strand, motif
+            labelUniqueReadCount: true,
+            labelMultiMappedReadCount: true,
+            labelTotalReadCount: false,
+            labelMotif: false,
+            labelIsAnnotatedJunction: " [A]",
+            hideAnnotatedJunctions: false,
+            hideUnannotatedJunctions: false,
+            hideMotifs: ['GT/AT', 'non-canonical'], //options: 'GT/AG', 'CT/AC', 'GC/AG', 'CT/GC', 'AT/AC', 'GT/AT', 'non-canonical'
+        },
+        {
+            type: 'wig',
+            name: 'Coverage',
+            format: "bigwig",
+            url: 'https://www.dropbox.com/s/8j2uf0hsqprusnc/splice_junction_track_test_cases_sampleA.chr15-92835700-93031800.bigWig?dl=0',
+        },
         {
             type: 'merged',
-            name: 'Splice Junctions',
+            name: 'Junctions + Coverage',
             height: 150,
             tracks: [
                 {
@@ -43,12 +72,14 @@ <h1>Splice junctions</h1>
                     hideAnnotatedJunctions: false,
                     hideUnannotatedJunctions: false,
                     hideMotifs: ['GT/AT', 'non-canonical'], //options: 'GT/AG', 'CT/AC', 'GC/AG', 'CT/GC', 'AT/AC', 'GT/AT', 'non-canonical'
+                    height: 150
                 },
                 {
                     type: 'wig',
                     name: 'Coverage',
                     format: "bigwig",
                     url: 'https://www.dropbox.com/s/8j2uf0hsqprusnc/splice_junction_track_test_cases_sampleA.chr15-92835700-93031800.bigWig?dl=0',
+                    height: 150
                 }
             ]
         }
diff --git a/js/bam/coverageTrack.js b/js/bam/coverageTrack.js
index 21b59040b..685a8b231 100644
--- a/js/bam/coverageTrack.js
+++ b/js/bam/coverageTrack.js
@@ -9,6 +9,7 @@ class CoverageTrack  {
 
 
     constructor(config, parent) {
+        this.featureType = 'numeric'
         this.parent = parent
         this.featureSource = parent.featureSource
 
diff --git a/js/cnvpytor/cnvpytorTrack.js b/js/cnvpytor/cnvpytorTrack.js
index b599512a8..7cbcc6738 100644
--- a/js/cnvpytor/cnvpytorTrack.js
+++ b/js/cnvpytor/cnvpytorTrack.js
@@ -141,12 +141,12 @@ class CNVPytorTrack extends TrackBase {
                 if (this.signals.includes(signal_name)) {
                     let tconf = {}
                     tconf.type = "wig"
-                    tconf.isMergedTrack = true
                     tconf.features = wig
                     tconf.name = signal_name
                     tconf.color = this.signal_colors.filter(x => x.singal_name === signal_name).map(x => x.color)
                     const t = await this.browser.createTrack(tconf)
                     if (t) {
+                        t.isMergedTrack = true
                         t.autoscale = false     // Scaling done from merged track
                         this.tracks.push(t)
                     } else {
@@ -328,12 +328,12 @@ class CNVPytorTrack extends TrackBase {
             if (this.signals.includes(signal_name)) {
                 let tconf = {}
                 tconf.type = "wig"
-                tconf.isMergedTrack = true
                 tconf.features = wig
                 tconf.name = signal_name
                 tconf.color = this.signal_colors.filter(x => x.singal_name === signal_name).map(x => x.color)
                 const t = await this.browser.createTrack(tconf)
                 if (t) {
+                    t.isMergedTrack = true
                     t.autoscale = false     // Scaling done from merged track
                     this.tracks.push(t)
                 } else {
diff --git a/js/feature/featureTrack.js b/js/feature/featureTrack.js
index 1fcde7613..f366ad5ec 100755
--- a/js/feature/featureTrack.js
+++ b/js/feature/featureTrack.js
@@ -199,7 +199,7 @@ class FeatureTrack extends TrackBase {
         }
 
 
-        if (!this.config.isMergedTrack) {
+        if (!this.isMergedTrack) {
             IGVGraphics.fillRect(context, 0, options.pixelTop, pixelWidth, pixelHeight, {'fillStyle': "rgb(255, 255, 255)"})
         }
 
diff --git a/js/feature/mergedTrack.js b/js/feature/mergedTrack.js
index 6358e570d..a7f3e1a87 100644
--- a/js/feature/mergedTrack.js
+++ b/js/feature/mergedTrack.js
@@ -32,39 +32,36 @@ import * as DOMUtils from "../ui/utils/dom-utils.js"
 import {doAutoscale} from "../util/igvUtils.js"
 import $ from "../vendor/jquery-3.3.1.slim.js"
 
-
 /**
- * Represents 2 or more wig tracks overlaid on a common viewport.
+ * Represents 2 or more  tracks overlaid on a common viewport.
  */
 class MergedTrack extends TrackBase {
 
     static defaults = {
+        autoscale: undefined,
         alpha: 0.5,
         height: 50
     }
 
-    constructor(config, browser) {
+    constructor(config, browser, tracks) {
         super(config, browser)
         this.type = "merged"
-        this.featureType = "numeric"
         this.paintAxis = paintAxis
         this.graphType = config.graphType
-    }
-
-    init(config) {
-        if (!(config.tracks || config._tracks)) {
-            throw Error("Error: no tracks defined for merged track" + config)
+        if (tracks) {
+            this.tracks = tracks   // Dynamic creation, actual track objects (not configurations)
+        } else {
+            this.tracks = []
         }
-        super.init(config)
     }
 
+
     async postInit() {
 
-        this.tracks = []
         if (this.config.tracks) {
-            // Configured merged track
+            // Track configurations, this indicates a configured merged track as opposed to dynamic merge through the UI
+            // Actual track objects need to be created.
             for (let tconf of this.config.tracks) {
-                tconf.isMergedTrack = true
                 const t = await this.browser.createTrack(tconf)
                 if (t) {
                     this.tracks.push(t)
@@ -75,24 +72,27 @@ class MergedTrack extends TrackBase {
                     await t.postInit()
                 }
             }
-            // Explicit merged settings -- these will override any individual track settings
-            if (this.config.autoscale) {
-                this.autoscale = this.config.autoscale
-            } else if (this.config.max !== undefined) {
-                this.dataRange = {
-                    min: this.config.min || 0,
-                    max: this.config.max
-                }
-            } else {
-                this.autoscale = !this.tracks.every(t => t.config.autoscale || t.config.max !== undefined)
+            // Default to autoscale unless scale if range or autoscale is not otherwise defined
+            const allTracksSpecified = this.config.tracks.every(config => config.autoscale !== undefined || config.max !== undefined)
+            if (!allTracksSpecified) {
+                this.config.autoscale = this.config.max === undefined
             }
-        } else {
-            // Dynamic merged track
-            this.tracks = this.config._tracks
-            this.autoscale = false
-            delete this.config._tracks
         }
 
+        // Mark constitutive tracks as merged.
+        for (let t of this.tracks) t.isMergedTrack = true
+
+        // Explicit settings -- these will override any individual track settings
+        if(this.config.autoscale) {
+            this.autoscale = this.config.autoscale
+        } else if (this.config.max !== undefined) {
+            this.setDataRange ({
+                min: this.config.min || 0,
+                max: this.config.max
+            })
+        }
+
+
         if (this.config.flipAxis !== undefined) {
             for (let t of this.tracks) t.flipAxis = this.config.flipAxis
         }
@@ -102,25 +102,28 @@ class MergedTrack extends TrackBase {
         }
 
         this.resolutionAware = this.tracks.some(t => t.resolutionAware)
-
     }
 
     set flipAxis(b) {
         this.config.flipAxis = b
-        for (let t of this.tracks) t.flipAxis = b
+        for (let t of numericTracks(this.tracks)) {
+            t.flipAxis = b
+        }
     }
 
     get flipAxis() {
-        return this.tracks.every(t => t.flipAxis)
+        return numericTracks(this.tracks).every(t => t.flipAxis)
     }
 
     set logScale(b) {
         this.config.logScale = b
-        for (let t of this.tracks) t.logScale = b
+        for (let t of numericTracks(this.tracks)) {
+            t.logScale = b
+        }
     }
 
     get logScale() {
-        return this.tracks.every(t => t.logScale)
+        return numericTracks(this.tracks).every(t => t.logScale)
     }
 
     get height() {
@@ -138,49 +141,76 @@ class MergedTrack extends TrackBase {
         }
     }
 
-    get dataRange() {
-
-        if (undefined === this.tracks || 0 === this.tracks.length) {
-            return undefined
+    set autoscale(b) {
+        this._autoscale = b
+        if(b === false && this.tracks) {
+            for(let t of this.tracks) t.autoscale = false
         }
+    }
 
-        const list = this.tracks.filter(track => undefined !== track.dataRange)
-        if (list.length !== this.tracks.length) {
-            return undefined
-        }
+    get autoscale() {
+        return this._autoscale
+    }
 
-        const minSet = new Set(this.tracks.map(({dataRange}) => dataRange.min))
-        if (1 !== minSet.size) {
-            return undefined
-        }
+    /**
+     * Set the data range of all constitutive numeric tracks.  This method is called from the menu item, i.e. an explicit
+     * setting, so it should disable autoscale as well.
+     *
+     * @param min
+     * @param max
+     */
 
-        const maxSet = new Set(this.tracks.map(({dataRange}) => dataRange.max))
-        if (1 !== maxSet.size) {
-            return undefined
+    setDataRange({min, max}) {
+        this.autoscale = false
+        for (const track of numericTracks(this.tracks)) {
+            track.dataRange = {min, max}
+            track.autoscale = false
+            track.autoscaleGroup = false
         }
+    }
 
-        return { min: [ ...minSet ][ 0 ],  max: [ ...maxSet ][ 0 ] }
+    set dataRange({min, max}) {
+        for (const track of numericTracks(this.tracks)) {
+            track.dataRange = {min, max}
+        }
     }
 
-    set dataRange({ min, max }) {
-        for (const track of this.tracks) {
-            track.dataRange = { min, max }
+    /**
+     * Return a DataRang {min, max} if all constitutive numeric tracks have identical range.  A numeric track is defined
+     * as a track with a data range.  Otherwise return undefined.
+     *
+     * @returns {{min: any, max: any}|undefined}
+     */
+    get dataRange() {
+        if(this.tracks) {
+            const num = numericTracks(this.tracks)
+            if (num.length > 0) {
+                const firstRange = num[0].dataRange
+                if (num.every(t => t.dataRange && t.dataRange.min === firstRange.min && t.dataRange.max === firstRange.max)) {
+                    return firstRange
+                }
+            }
         }
+        return undefined
     }
 
+
     menuItemList() {
         const items = []
-        if (this.flipAxis !== undefined) {
-            items.push({
-                label: "Flip y-axis",
-                click: function flipYAxisHandler() {
-                    this.flipAxis = !this.flipAxis
-                    this.trackView.repaintViews()
-                }
-            })
-        }
+        if (numericTracks(this.tracks).length > 0) {
+
+            if (this.flipAxis !== undefined) {
+                items.push({
+                    label: "Flip y-axis",
+                    click: function flipYAxisHandler() {
+                        this.flipAxis = !this.flipAxis
+                        this.trackView.repaintViews()
+                    }
+                })
+            }
 
-        items.push(...this.numericDataMenuItems())
+            items.push(...this.numericDataMenuItems())
+        }
 
         items.push('<hr/>')
         items.push(this.overlayTrackAlphaAdjustmentMenuItem())
@@ -209,11 +239,6 @@ class MergedTrack extends TrackBase {
             trackOptions.features = mergedFeatures.featureArrays[i]
             trackOptions.alpha = this.alpha
 
-            if (this.dataRange) {
-                // Single data scale for all tracks
-                this.tracks[i].dataRange = this.dataRange
-            }
-
             if (this.graphType) {
                 this.tracks[i].graphType = this.graphType
             }
@@ -307,6 +332,7 @@ class MergedTrack extends TrackBase {
         let scaleChange
 
         if (this.autoscale) {
+            // Overrides any specific track scale settings
             scaleChange = true
             let allFeatures = []
             for (let visibleViewport of visibleViewports) {
@@ -321,7 +347,12 @@ class MergedTrack extends TrackBase {
                         allFeatures.push({value: mergedFeatureCollection.getMin(start, end)})
                     }
                 }
-                this.dataRange = doAutoscale(allFeatures)
+                const dataRange = doAutoscale(allFeatures)
+                for (const track of numericTracks(this.tracks)) {
+                    // Do not use this.dataRange, as that has side effects
+                    track.dataRange = dataRange
+                }
+
             }
         } else {
             // Individual track scaling
@@ -401,6 +432,7 @@ class MergedTrack extends TrackBase {
                 if (groupAutoscale) {
                     track.autoscaleGroup = name
                 }
+                track.isMergedTrack = false
                 browser.addTrack(track.config, track)
             }
             browser.updateViews()
@@ -422,17 +454,19 @@ class MergedFeatureCollection {
         let max = -Number.MAX_VALUE
 
         for (let a of this.featureArrays) {
-            for (let f of a) {
-                if (typeof f.value === 'undefined' || Number.isNaN(f.value)) {
-                    continue
-                }
-                if (f.end < start) {
-                    continue
-                }
-                if (f.start > end) {
-                    break
+            if (Array.isArray(a)) {
+                for (let f of a) {
+                    if (typeof f.value === 'undefined' || Number.isNaN(f.value)) {
+                        continue
+                    }
+                    if (f.end < start) {
+                        continue
+                    }
+                    if (f.start > end) {
+                        break
+                    }
+                    max = Math.max(max, f.value)
                 }
-                max = Math.max(max, f.value)
             }
         }
 
@@ -443,15 +477,17 @@ class MergedFeatureCollection {
     getMin(start, end) {
         let min = 0
         for (let a of this.featureArrays) {
-            for (let f of a) {
-                if (typeof f.value !== 'undefined' && !Number.isNaN(f.value)) {
-                    if (f.end < start) {
-                        continue
-                    }
-                    if (f.start > end) {
-                        break
+            if (Array.isArray(a)) {
+                for (let f of a) {
+                    if (typeof f.value !== 'undefined' && !Number.isNaN(f.value)) {
+                        if (f.end < start) {
+                            continue
+                        }
+                        if (f.start > end) {
+                            break
+                        }
+                        min = Math.min(min, f.value)
                     }
-                    min = Math.min(min, f.value)
                 }
             }
         }
@@ -459,5 +495,15 @@ class MergedFeatureCollection {
     }
 }
 
+/**
+ * Heuristic for finding numeric tracks.
+ *
+ * @param tracks
+ * @returns {*}
+ */
+const numericTracks = (tracks) => {
+    return tracks ? tracks.filter(track => undefined !== track.dataRange || undefined !== track.autoscale || undefined !== track.autoscaleGroup) : []
+}
+
 
 export default MergedTrack
diff --git a/js/feature/spliceJunctionTrack.js b/js/feature/spliceJunctionTrack.js
index a76df8ecc..7d03078ab 100755
--- a/js/feature/spliceJunctionTrack.js
+++ b/js/feature/spliceJunctionTrack.js
@@ -23,7 +23,6 @@
  * THE SOFTWARE.
  */
 
-import $ from "../vendor/jquery-3.3.1.slim.js"
 import FeatureSource from './featureSource.js'
 import TrackBase from "../trackBase.js"
 import IGVGraphics from "../igv-canvas.js"
@@ -38,11 +37,15 @@ someMotifValues.forEach(motif => {
     JUNCTION_MOTIF_PALETTE.getColor(motif)
 })
 
-// rendering context with values that only need to be computed once per render, rather than for each splice junction
-const junctionRenderingContext = {}
 
 class SpliceJunctionTrack extends TrackBase {
 
+    static defaults = {
+        margin: 10,
+        colorByNumReadsThreshold: 5,
+        height: 100
+    }
+
     constructor(config, browser) {
         super(config, browser)
     }
@@ -63,16 +66,6 @@ class SpliceJunctionTrack extends TrackBase {
                 FeatureSource(config, this.browser.genome)
         }
 
-        this.margin = config.margin === undefined ? 10 : config.margin
-
-        if (!this.height) {
-            this.height = 100
-        }
-
-        //set defaults
-        if (config.colorByNumReadsThreshold === undefined) {
-            config.colorByNumReadsThreshold = 5
-        }
     }
 
     async postInit() {
@@ -127,13 +120,16 @@ class SpliceJunctionTrack extends TrackBase {
         const bpEnd = bpStart + pixelWidth * bpPerPixel + 1
 
 
-        if (!this.config.isMergedTrack) {
+        if (!this.isMergedTrack) {
             IGVGraphics.fillRect(ctx, 0, options.pixelTop, pixelWidth, pixelHeight, {'fillStyle': "rgb(255, 255, 255)"})
         }
 
         if (featureList) {
 
 
+            // rendering context with values that only need to be computed once per render, rather than for each splice junction
+            const junctionRenderingContext = {}
+
             junctionRenderingContext.referenceFrame = options.viewport.referenceFrame
             junctionRenderingContext.referenceFrameStart = junctionRenderingContext.referenceFrame.start
             junctionRenderingContext.referenceFrameEnd = junctionRenderingContext.referenceFrameStart +
@@ -146,7 +142,7 @@ class SpliceJunctionTrack extends TrackBase {
             for (let feature of featureList) {
                 if (feature.end < bpStart) continue
                 if (feature.start > bpEnd) break
-                this.renderJunction(feature, bpStart, bpPerPixel, pixelHeight, ctx)
+                this.renderJunction(feature, bpStart, bpPerPixel, pixelHeight, ctx, junctionRenderingContext)
             }
 
         } else {
@@ -163,7 +159,7 @@ class SpliceJunctionTrack extends TrackBase {
      * @param pixelHeight  pixel height of the current canvas
      * @param ctx  the canvas 2d context
      */
-    renderJunction(feature, bpStart, xScale, pixelHeight, ctx) {
+    renderJunction(feature, bpStart, xScale, pixelHeight, ctx, junctionRenderingContext) {
         // cache whether this junction is rendered or filtered out. Use later to exclude non-rendered junctions from click detection.
         feature.isVisible = false
 
@@ -247,7 +243,7 @@ class SpliceJunctionTrack extends TrackBase {
         }
 
         const py = this.margin
-        const rowHeight = this.height
+        const rowHeight = pixelHeight
 
         const cy = py + 0.5 * rowHeight
         let topY = py
diff --git a/js/trackBase.js b/js/trackBase.js
index 306e3c471..2e649ed16 100644
--- a/js/trackBase.js
+++ b/js/trackBase.js
@@ -563,6 +563,14 @@ class TrackBase {
         return menuItems
     }
 
+    setDataRange({ min, max }) {
+
+        this.dataRange = { min, max }
+        this.autoscale = false
+        this.autoscaleGroup = undefined
+        this.trackView.repaintViews()
+    }
+
     /**
      * Return the first feature in this track whose start position is > position
      * @param chr
diff --git a/js/trackView.js b/js/trackView.js
index 9f8e048af..42982cb37 100644
--- a/js/trackView.js
+++ b/js/trackView.js
@@ -202,27 +202,6 @@ class TrackView {
         }
     }
 
-    get dataRange() {
-        return this.track.dataRange ? this.track.dataRange : undefined
-    }
-
-    set dataRange({ min, max }) {
-
-        this.track.dataRange = { min, max }
-
-        this.track.autoscale = false
-        this.track.autoscaleGroup = undefined
-
-        const list = this.browser.trackViews.filter(({track}) => track.autoscaleGroup)
-        if (1 === list.length) {
-            list[0].track.autoscale = false
-            list[0].track.autoscaleGroup = undefined
-            list[0].repaintViews()
-        }
-
-        this.repaintViews()
-
-    }
 
     presentColorPicker(key) {
 
diff --git a/js/ui/dataRangeDialog.js b/js/ui/dataRangeDialog.js
index 28b8c53ba..70ea65ae2 100644
--- a/js/ui/dataRangeDialog.js
+++ b/js/ui/dataRangeDialog.js
@@ -77,13 +77,13 @@ class DataRangeDialog {
         if (Array.isArray(trackViewOrTrackViewList)) {
             dataRange = { min: Number.MAX_SAFE_INTEGER, max:-Number.MAX_SAFE_INTEGER }
             for (const trackView of trackViewOrTrackViewList) {
-                if (trackView.dataRange) {
-                    dataRange.min = Math.min(trackView.dataRange.min, dataRange.min)
-                    dataRange.max = Math.max(trackView.dataRange.max, dataRange.max)
+                if (trackView.track.dataRange) {
+                    dataRange.min = Math.min(trackView.track.dataRange.min, dataRange.min)
+                    dataRange.max = Math.max(trackView.track.dataRange.max, dataRange.max)
                 }
             }
         } else {
-            dataRange = trackViewOrTrackViewList.dataRange
+            dataRange = trackViewOrTrackViewList.track.dataRange
         }
 
         if (dataRange) {
@@ -125,7 +125,7 @@ class DataRangeDialog {
             } else {
                 const list = Array.isArray(trackViewOfTrackViewList) ? trackViewOfTrackViewList : [ trackViewOfTrackViewList ]
                 for (const trackView of list) {
-                    trackView.dataRange = { min, max }
+                    trackView.track.setDataRange({ min, max })
                 }
 
             }
diff --git a/js/ui/overlayTrackButton.js b/js/ui/overlayTrackButton.js
index 2b0ac433c..46f1722b4 100644
--- a/js/ui/overlayTrackButton.js
+++ b/js/ui/overlayTrackButton.js
@@ -49,13 +49,13 @@ function trackOverlayClickHandler(e) {
             {
                 name: 'Overlay',
                 type: 'merged',
+                autoscale: false,
                 alpha: 0.5, //fudge * (1.0/tracks.length),
                 height: Math.max(...tracks.map(({ height }) => height)),
                 order: Math.min(...tracks.map(({ order }) => order)),
-                _tracks: flattenedTracks
             }
 
-        const mergedTrack = new MergedTrack(config, this.browser)
+        const mergedTrack = new MergedTrack(config, this.browser, flattenedTracks)
 
         for (const track of tracks) {
             this.browser.removeTrack(track)
