From 4f50d5396826a9c7097bcb3f4d11b7e4327bf2fa Mon Sep 17 00:00:00 2001
From: Alyssa Morrow <akmorrow@berkeley.edu>
Date: Sun, 3 Dec 2017 22:17:35 -0800
Subject: [PATCH] adding props for hiding alignments

---
 src/main/viz/PileupTrack.js      | 41 ++++++++++++++++++++++++++------
 src/test/viz/PileupTrack-test.js | 33 +++++++++++++++++++++++++
 2 files changed, 67 insertions(+), 7 deletions(-)

diff --git a/src/main/viz/PileupTrack.js b/src/main/viz/PileupTrack.js
index 76ff3a91..99b2911c 100644
--- a/src/main/viz/PileupTrack.js
+++ b/src/main/viz/PileupTrack.js
@@ -348,6 +348,9 @@ class PileupTrack extends React.Component {
       this.tiles.update(this.props.options);
       this.tiles.invalidateAll();
       this.updateVisualization();
+    } else if (oldOpts.hideAlignments != this.props.options.hideAlignments) {
+      this.tiles.update(this.props.options);
+      this.updateVisualization();
     }
 
     if (oldOpts.sort != this.props.options.sort) {
@@ -377,23 +380,42 @@ class PileupTrack extends React.Component {
     // Hold off until height & width are known.
     if (width === 0) return;
 
-    // Height can only be computed after the pileup has been updated.
-    var height = yForRow(this.cache.pileupHeightForRef(this.props.range.contig));
-
-    d3utils.sizeCanvas(canvas, width, height);
-
     var ctx = canvasUtils.getContext(canvas);
     var dtx = dataCanvas.getDataContext(ctx);
+
     this.renderScene(dtx);
+
   }
 
   renderScene(ctx: DataCanvasRenderingContext2D) {
     var genomeRange = this.props.range,
         range = new ContigInterval(genomeRange.contig, genomeRange.start, genomeRange.stop),
-        scale = this.getScale();
+        scale = this.getScale(),
+        canvas = this.refs.canvas,
+        width = this.props.width;
 
     ctx.reset();
     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+
+    // get parent of canvas
+    // The typecasts through `any` are to fool flow.
+    var parent = ((d3utils.findParent(canvas, "pileup") : any) : HTMLCanvasElement);
+
+    if (this.props.options.hideAlignments) {
+      d3utils.sizeCanvas(canvas, width, 0);
+      // if alignments are hidden, set parent div to 0px
+      if (parent) parent.style.minHeight = "0px";
+      return;
+    }
+
+    // unset minimum hight for viewing alignments
+    if (parent) parent.style.minHeight = "";
+
+    // Height can only be computed after the pileup has been updated.
+    var height = yForRow(this.cache.pileupHeightForRef(this.props.range.contig));
+
+    d3utils.sizeCanvas(canvas, width, height);
+
     this.tiles.renderToScreen(ctx, range, scale);
 
     // TODO: the center line should go above alignments, but below mismatches
@@ -463,7 +485,8 @@ PileupTrack.displayName = 'pileup';
 PileupTrack.defaultOptions = {
   viewAsPairs: false,
   colorByInsert: true,
-  colorByStrand: false
+  colorByStrand: false,
+  hideAlignments: false
 };
 
 PileupTrack.getOptionsMenu = function(options: Object): any {
@@ -472,6 +495,7 @@ PileupTrack.getOptionsMenu = function(options: Object): any {
     '-',
     {key: 'color-insert', label: 'Color by insert size', checked: options.colorByInsert},
     {key: 'color-strand', label: 'Color by strand', checked: options.colorByStrand},
+    {key: 'hide-alignments', label: 'Hide alignments', checked: options.hideAlignments},
     '-',
     {key: 'sort', label: 'Sort alignments'}
   ];
@@ -492,6 +516,9 @@ PileupTrack.handleSelectOption = function(key: string, oldOptions: Object): Obje
     opts.colorByStrand = !opts.colorByStrand;
     if (opts.colorByStrand) opts.colorByInsert = false;
     return opts;
+  } else if (key == 'hide-alignments') {
+    opts.hideAlignments = !opts.hideAlignments;
+    return opts;
   } else if (key == 'sort') {
     opts.sort = (messageId++);
     return opts;
diff --git a/src/test/viz/PileupTrack-test.js b/src/test/viz/PileupTrack-test.js
index 5a648f54..6f8c5daf 100644
--- a/src/test/viz/PileupTrack-test.js
+++ b/src/test/viz/PileupTrack-test.js
@@ -141,6 +141,9 @@ describe('PileupTrack', function() {
       return testDiv.querySelector('.pileup canvas') &&
           drawnObjectsWith(testDiv, '.pileup', x => x.span).length > 0;
     },
+    hasPileupSelector = () => {
+      return testDiv.querySelector('.pileup canvas') !== undefined;
+    },
 
     // Helpers for working with DataCanvas
     mismatchesAtPos = pos => drawnObjectsWith(testDiv, '.pileup', x => x.basePair && x.pos == pos),
@@ -200,6 +203,36 @@ describe('PileupTrack', function() {
     });
   });
 
+  it('should hide alignments', function() {
+    var p = pileup.create(testDiv, {
+      range: {contig: 'chr17', start: 7500734, stop: 7500796},
+      tracks: [
+        {
+          data: pileup.formats.twoBit({
+            url: '/test-data/test.2bit'
+          }),
+          viz: pileup.viz.genome(),
+          isReference: true
+        },
+        {
+          data: pileup.formats.bam({
+            url: '/test-data/synth3.normal.17.7500000-7515000.bam',
+            indexUrl: '/test-data/synth3.normal.17.7500000-7515000.bam.bai'
+          }),
+          viz: pileup.viz.pileup({
+            hideAlignments: true
+          }),
+        }
+      ]
+    });
+
+    return waitFor(hasPileupSelector, 2000).then(() => {
+      var alignments = drawnObjectsWith(testDiv, '.pileup', x => x.span);
+      expect(alignments.length).to.equal(0);
+      p.destroy();
+    });
+  });
+
   it('should sort reads', function() {
     var p = pileup.create(testDiv, {
       range: {contig: 'chr17', start: 7500734, stop: 7500796},