From 7893d1ece1867876b1928d3b741a2dca23a6ef7e Mon Sep 17 00:00:00 2001
From: Dan Vanderkam <danvdk@gmail.com>
Date: Mon, 3 Aug 2015 15:41:21 -0400
Subject: [PATCH] pileup restyling

---
 .../js/examine/components/PileupViewer.js     | 39 +++++++++++++------
 cycledash/static/scss/examine.scss            | 25 ++----------
 2 files changed, 30 insertions(+), 34 deletions(-)

diff --git a/cycledash/static/js/examine/components/PileupViewer.js b/cycledash/static/js/examine/components/PileupViewer.js
index 1345691..85ffbdd 100644
--- a/cycledash/static/js/examine/components/PileupViewer.js
+++ b/cycledash/static/js/examine/components/PileupViewer.js
@@ -96,16 +96,23 @@ var PileupViewer = React.createClass({
       })
     });
 
-    var bamSource = (name, cssClass, path, chunks) => ({
-      name: name,
-      cssClass: cssClass,
-      viz: pileup.viz.pileup(),
-      data: pileup.formats.bam({
-        url: this.hdfsUrl(path),
-        indexUrl: this.hdfsUrl(path + '.bai'),
-        indexChunks: chunks
-      })
-    });
+    var bamSource = (name, cssClass, path, chunks) => {
+      var data = pileup.formats.bam({
+          url: this.hdfsUrl(path),
+          indexUrl: this.hdfsUrl(path + '.bai'),
+          indexChunks: chunks
+        });
+      return [
+        {
+          name, cssClass, data,
+          viz: pileup.viz.coverage()
+        },
+        {
+          name, cssClass, data,
+          viz: pileup.viz.pileup()
+        }
+      ];
+    };
 
     var sources = [
         {
@@ -116,6 +123,14 @@ var PileupViewer = React.createClass({
             url: 'http://www.biodalliance.org/datasets/hg19.2bit'
           })
         },
+        {
+          name: 'Scale',
+          viz: pileup.viz.scale()
+        },
+        {
+          name: 'Location',
+          viz: pileup.viz.location()
+        },
         vcfSource('Run VCF', this.props.vcfPath)
     ];
     if (this.props.truthVcfPath) {
@@ -123,10 +138,10 @@ var PileupViewer = React.createClass({
     }
 
     if (this.props.normalBamPath) {
-      sources.push(bamSource('Normal', 'normal', this.props.normalBamPath, this.state.normalBaiChunks));
+      sources = sources.concat(bamSource('Normal', 'normal', this.props.normalBamPath, this.state.normalBaiChunks));
     }
     if (this.props.tumorBamPath) {
-      sources.push(bamSource('Tumor', 'tumor', this.props.tumorBamPath, this.state.tumorBaiChunks));
+      sources = sources.concat(bamSource('Tumor', 'tumor', this.props.tumorBamPath, this.state.tumorBaiChunks));
     }
 
     var pileupEl = this.refs.pileupElement.getDOMNode();
diff --git a/cycledash/static/scss/examine.scss b/cycledash/static/scss/examine.scss
index 99cb75e..51c2386 100644
--- a/cycledash/static/scss/examine.scss
+++ b/cycledash/static/scss/examine.scss
@@ -577,31 +577,12 @@ a.download-vcf {
 
 /* All of the tracks are fixed-height except for the pileup(s), which split the
  * remaining vertical space. */
-#pileup-container > div {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-#pileup-container .controls {
+.pileup-root > .controls {
   flex: 0 0 36px;  /* fixed height */
 }
-#pileup-container .reference {
-  flex: 0 0 50px;  /* fixed height */
-}
-#pileup-container .variants {
-  flex: 0 0 25px;  /* fixed height */
-}
-#pileup-container .pileup {
-  flex: 1;
-  height: auto;  /* overrides defaults from pileup.css */
-  overflow-y: auto;  /* extra content scrolls */
-  /* a vertical scroll bar can result in a horizontal bar, which we don't want. */
-  overflow-x: hidden;
-}
 #pileup-container .track-label {
   font-family: "freight-sans-pro", verdana, helvetica, sans-serif;
 }
-.pileup {
+.coverage {
   border-top: 1px solid $color-gray-medium;
-}
\ No newline at end of file
+}