pileup restyling

hammerlab · Aug 3, 2015 · 7893d1e · 7893d1e
1 parent ff8d694
commit 7893d1e
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 34 deletions.
diff --git 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,17 +123,25 @@ 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) {
       sources.push(vcfSource('Truth VCF', this.props.truthVcfPath));
     }
 
     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
@@ -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;
-}
+}