Scaling improvements to the read cloud view

src/JBrowse/Store/SeqFeature/_InsertSizeCache.js

@@ -30,21 +30,20 @@ return declare(null, {
     getInsertSizeStats() {
         const len = Object.keys(this.featureCache).length
         if(len > this.insertStatsCacheMin) {
-            var tlens = Object.entries(this.featureCache)
-                .map(([k, v]) => Math.abs(v))
-                .filter(tlen => tlen < this.insertMaxSize && tlen > this.insertMinSize)
-                .sort((a, b) => a - b)
-            var sum = tlens.reduce((a, b) => a + b, 0)
-            var sum2 = tlens.map(a => a * a).reduce((a, b) => a + b, 0)
-            var total = tlens.length
-            var avg = sum / total
-            var sd = Math.sqrt((total * sum2 - sum*sum) / (total * total))
-            return {
-                upper: avg + 3 * sd,
-                lower: avg - 3 * sd
-            }
+            const insertSizes = Object.values(this.featureCache).map(v => Math.abs(v))
+            const max = Math.max(...insertSizes)
+            const min = Math.min(...insertSizes)
+            const filteredInsertSizes = insertSizes.filter(tlen => tlen < this.insertMaxSize && tlen > this.insertMinSize)
+            const sum = filteredInsertSizes.reduce((a, b) => a + b, 0)
+            const sum2 = filteredInsertSizes.map(a => a * a).reduce((a, b) => a + b, 0)
+            const total = filteredInsertSizes.length
+            const avg = sum / total
+            const sd = Math.sqrt((total * sum2 - sum * sum) / (total * total))
+            const upper = avg + 3 * sd
+            const lower = avg - 3 * sd
+            return { min, max, upper, lower }
         }
-        return { upper: Infinity, lower: 0 }
+        return { upper: Infinity, lower: 0, min: 0, max: Infinity }
     }
 });
 });

src/JBrowse/View/FeatureGlyph/AlignmentColoring.js

@@ -97,9 +97,9 @@ var c = {
             const len = Math.abs(feature.get('template_length'))
             if(feature.get('seq_id') != feature.get('next_seq_id')) {
                 return 'color_interchrom'
-            } else if (track.upperPercentile < len) {
+            } else if (track.insertSizeStats.upper < len) {
                 return 'color_longinsert'
-            } else if (track.lowerPercentile > len) {
+            } else if (track.insertSizeStats.lower > len) {
                 return 'color_shortinsert'
             }
         }

src/JBrowse/View/FeatureGlyph/PairedReadCloud.js

@@ -10,8 +10,7 @@ function(
 
 return declare(PairedAlignment, {
 
-clearFeat( context, fRect ) {
-},
+clearFeat(context, fRect) {/* do nothing since drawings overlap, overrides parent */},
 
 layoutFeature(viewArgs, layout, feature) {
     var rect = this.inherited(arguments);
@@ -20,11 +19,25 @@ layoutFeature(viewArgs, layout, feature) {
     }
 
     if (feature.pairedFeature()) {
-        var tlen = feature.read1.get('template_length')
-        var t = Math.abs(tlen)
-        var k = this.track.config.readCloudLogScale ?
-            Math.log(t+1)/Math.log(this.track.upperPercentile) : t/this.track.upperPercentile
-        k *= this.track.config.maxHeight/2
+        const tlen = Math.abs(feature.read1.get('template_length'))
+
+        // log view uses maximum to handle very large, linear uses upper percentile
+
+        let k
+        if(this.track.config.readCloudLogScale) {
+            // max is set to upper percentile because it can handle things above this value
+            k = Math.log(tlen + 1) / Math.log(this.track.insertSizeStats.upper + 1)
+        } else {
+            // max set to literal max or a configurable insertSizeMax
+            k = tlen / (this.track.config.insertSizeMax || this.track.insertSizeStats.max)
+        }
+        k *= this.track.config.maxHeight
+        k /= 2
+
+        // use compact view for additional linear compression
+        if(this.track.config.displayMode === 'compact') {
+            k /= 4
+        }
 
         rect.rect.t = k
         rect.t = k

src/JBrowse/View/Track/Alignments2.js

@@ -274,7 +274,7 @@ return declare( [ CanvasFeatureTrack, AlignmentsMixin ], {
         }
 
         if(this.config.viewAsPairs || this.config.viewAsSpans
-            || (this.config.colorByOrientationAndSize || this.config.colorBySize && !this.stats)) {
+            || (this.config.colorByOrientationAndSize || this.config.colorBySize && !this.insertSizeStats)) {
             let supermethod = this.getInherited(arguments)
             const len = args.rightBase - args.leftBase
             const region = {
@@ -297,9 +297,7 @@ return declare( [ CanvasFeatureTrack, AlignmentsMixin ], {
                     viewAsSpans: this.config.viewAsSpans,
                     maxInsertSize: this.config.maxInsertSize
                 }, () => { /* do nothing */}, () => {
-                    this.stats = this.stats || this.store.getInsertSizeStats()
-                    this.upperPercentile = this.stats.upper
-                    this.lowerPercentile = this.stats.lower
+                    this.insertSizeStats = this.insertSizeStats || this.store.getInsertSizeStats()
 
                     resolve()
                 }, reject)

src/JBrowse/View/Track/CanvasFeatures.js

@@ -977,14 +977,8 @@ return declare(
                 title: "Render this track in " + displayMode + " mode",
                 checked: thisB.displayMode == displayMode,
                 onClick: function() {
-                    thisB.displayMode = displayMode;
-                    thisB._clearLayout();
-                    thisB.hideAll();
-                    thisB.genomeView.showVisibleBlocks(true);
-                    thisB.makeTrackMenu();
-
-                    // set cookie for displayMode
-                    thisB.browser.cookie('track-' + thisB.name, JSON.stringify(thisB.config));
+                    thisB.config.displayMode = displayMode;
+                    thisB.browser.publish('/jbrowse/v1/v/tracks/replace', [thisB.config]);
                 }
             };
         });