Use radio buttons for track visualization options

src/JBrowse/View/FeatureGlyph/PairedAlignment.js

@@ -16,10 +16,12 @@ function(
 
 return declare(Alignment, {
 
-renderFeature( context, fRect ) {
-    if( this.track.displayMode != 'collapsed' && !this.config.readCloud )
+clearFeat(context, fRect) {
+    if( this.track.displayMode != 'collapsed' )
         context.clearRect( Math.floor(fRect.l), fRect.t, Math.ceil(fRect.w), fRect.h );
-
+},
+renderFeature(context, fRect) {
+    this.clearFeat(context, fRect)
 
     if(fRect.f.pairedFeature()) {
         this.renderConnector( context, fRect );
@@ -40,12 +42,12 @@ renderFeature( context, fRect ) {
     }
 },
 
-renderSegments( context, fRect ) {
+renderSegments(context, fRect) {
     this.renderBox(context, fRect.viewInfo, fRect.f.read1,  fRect.t, fRect.rect.h, fRect.f);
     this.renderBox(context, fRect.viewInfo, fRect.f.read2,  fRect.t, fRect.rect.h, fRect.f);
 },
 
-renderConnector( context, fRect ) {
+renderConnector(context, fRect) {
     // connector
     var connectorColor = this.getStyle( fRect.f, 'connectorColor' );
     if( connectorColor ) {
@@ -62,35 +64,11 @@ renderConnector( context, fRect ) {
 
 _defaultConfig() {
     return this._mergeConfigs(dojo.clone( this.inherited(arguments) ), {
-        readCloudLog: true,
-        readCloudStretch: 20,
         style: {
             connectorColor: AlignmentColoring.colorConnector,
             connectorThickness: 1,
         }
     });
-},
-layoutFeature(viewArgs, layout, feature) {
-    var rect = this.inherited(arguments);
-    if (!rect) {
-        return rect;
-    }
-    if(this.config.readCloud) {
-        if(feature.pairedFeature()) {
-            var tlen = feature.read1.get('template_length')
-            var t = Math.abs(tlen)
-            var k = this.config.readCloudLog ? Math.log(t+1) : t
-            k *= this.config.readCloudStretch
-
-            rect.rect.t = k
-            rect.t = k
-        } else {
-            rect.t = 0
-            rect.rect.t = 0
-        }
-    }
-
-    return rect;
 }
 
 });

src/JBrowse/View/FeatureGlyph/PairedReadCloud.js

@@ -0,0 +1,45 @@
+define([
+    'dojo/_base/declare',
+    'JBrowse/View/FeatureGlyph/PairedAlignment'
+],
+function(
+    declare,
+    PairedAlignment
+) {
+
+
+return declare(PairedAlignment, {
+
+clearFeat( context, fRect ) {
+},
+
+_defaultConfig() {
+    return this._mergeConfigs(dojo.clone( this.inherited(arguments) ), {
+        readCloudLog: true,
+        readCloudStretch: 20,
+    });
+},
+layoutFeature(viewArgs, layout, feature) {
+    var rect = this.inherited(arguments);
+    if (!rect) {
+        return rect;
+    }
+
+    if (feature.pairedFeature()) {
+        var tlen = feature.read1.get('template_length')
+        var t = Math.abs(tlen)
+        var k = this.config.readCloudLog ? Math.log(t+1) : t
+        k *= this.config.readCloudStretch
+
+        rect.rect.t = k
+        rect.t = k
+    } else {
+        rect.t = 0
+        rect.rect.t = 0
+    }
+
+    return rect;
+}
+
+});
+});

src/JBrowse/View/Track/Alignments2.js

@@ -41,7 +41,6 @@ return declare( [ CanvasFeatureTrack, AlignmentsMixin ], {
                 useReverseTemplateOption: true,
                 viewAsPairs: false,
                 viewAsSpans: false,
-                readCloud: false,
                 showInterchromosomalArcs: true,
                 maxInsertSize: 50000,
 
@@ -58,6 +57,9 @@ return declare( [ CanvasFeatureTrack, AlignmentsMixin ], {
         return c;
     },
 
+    _trackType: function() {
+    },
+
     _trackMenuOptions: function() {
         var thisB = this;
         var displayOptions = [];
@@ -77,33 +79,34 @@ return declare( [ CanvasFeatureTrack, AlignmentsMixin ], {
         displayOptions.push(m)
         displayOptions.push(c)
 
-
-
-
         m.children.push({
             label: 'View as unpaired',
+            type: 'dijit/RadioMenuItem',
+            checked: this.config.glyph == 'JBrowse/View/FeatureGlyph/Alignment',
             onClick: function(event) {
                 thisB.config.viewAsPairs = false
                 thisB.config.viewAsSpans = false
-                thisB.config.readCloud = false
                 thisB.config.glyph = 'JBrowse/View/FeatureGlyph/Alignment'
                 thisB.browser.publish('/jbrowse/v1/v/tracks/replace', [thisB.config]);
             }
         });
 
         m.children.push({
             label: 'View as pairs',
+            type: 'dijit/RadioMenuItem',
+            checked: this.config.glyph == 'JBrowse/View/FeatureGlyph/PairedAlignment',
             onClick: function(event) {
                 thisB.config.viewAsPairs = true
                 thisB.config.viewAsSpans = false
-                thisB.config.readCloud = false
                 thisB.config.glyph = 'JBrowse/View/FeatureGlyph/PairedAlignment'
                 thisB.browser.publish('/jbrowse/v1/v/tracks/replace', [thisB.config]);
             }
         });
 
         m.children.push({
             label: 'View as arcs',
+            type: 'dijit/RadioMenuItem',
+            checked: this.config.glyph == 'JBrowse/View/FeatureGlyph/PairedArc',
             onClick: function(event) {
                 thisB.config.viewAsSpans = true
                 thisB.config.viewAsPairs = false
@@ -113,17 +116,20 @@ return declare( [ CanvasFeatureTrack, AlignmentsMixin ], {
         });
         m.children.push({
             label: 'View as read cloud',
+            type: 'dijit/RadioMenuItem',
+            checked: this.config.glyph == 'JBrowse/View/FeatureGlyph/PairedReadCloud',
             onClick: function(event) {
                 thisB.config.viewAsPairs = true
                 thisB.config.viewAsSpans = false
-                thisB.config.readCloud = true
-                thisB.config.glyph = 'JBrowse/View/FeatureGlyph/PairedAlignment'
+                thisB.config.glyph = 'JBrowse/View/FeatureGlyph/PairedReadCloud'
                 thisB.browser.publish('/jbrowse/v1/v/tracks/replace', [thisB.config]);
             }
         });
 
         m.children.push({
             label: 'View coverage',
+            type: 'dijit/RadioMenuItem',
+            checked: false,
             onClick: function(event) {
                 thisB.config.type = 'JBrowse/View/Track/SNPCoverage'
                 thisB.config._oldAlignmentsHeight = thisB.config.style.height
@@ -189,7 +195,8 @@ return declare( [ CanvasFeatureTrack, AlignmentsMixin ], {
     // override getLayout to access addRect method
     _getLayout: function() {
         var layout = this.inherited(arguments);
-        if(this.config.readCloud || this.config.glyph == 'JBrowse/View/FeatureGlyph/PairedArc') {
+        if(this.config.glyph == 'JBrowse/View/FeatureGlyph/PairedReadCloud' ||
+            this.config.glyph == 'JBrowse/View/FeatureGlyph/PairedArc') {
             layout = declare.safeMixin(layout, {
                 addRect: function() {
                     this.pTotalHeight = this.maxHeight;