Merge pull request #16 from hammerlab/d3

Render colored base pairs using D3
hammerlab · Feb 26, 2015 · d3b1f86 · d3b1f86
2 parents 1c517fe + 315655c
commit d3b1f86
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 4 deletions.
diff --git a/.flowconfig b/.flowconfig
@@ -1,5 +1,6 @@
 [ignore]
 .*node_modules/flow-bin.*
+.*build.*
 
 [include]
 

diff --git a/Gruntfile.js b/Gruntfile.js
@@ -23,6 +23,10 @@ module.exports = function(grunt) {
       flowProd: {
         files: ['<%= watch.flow.files %>'],
         tasks: ['flow:app:status', 'prod']
+      },
+      prod: {
+        files: ['<%= watch.flow.files %>'],
+        tasks: ['prod']
       }
     },
     browserify: {

diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
   },
   "homepage": "https://github.com/danvk/pileup.js",
   "dependencies": {
+    "d3": "^3.5.5",
     "q": "^1.1.2",
     "react": "^0.12.2",
     "underscore": "^1.7.0"

diff --git a/playground.html b/playground.html
@@ -1,2 +1,20 @@
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<style>
+.reference {
+  width: 600px;
+  height: 20px;
+}
+.basepair.a { fill: #188712; }
+.basepair.g { fill: #C45C16; }
+.basepair.c { fill: #0600F9; }
+.basepair.t { fill: #F70016; }
+.basepair.u { fill: #F70016; }
+</style>
+</head>
+
+<body>
 <div id="root"></div>
+</body>
+
 <script src="build/all.js"></script>
diff --git a/src/GenomeTrack.js b/src/GenomeTrack.js
@@ -4,6 +4,7 @@
  */
 
 var React = require('react'),
+    d3 = require('d3'),
     types = require('./types');
 
 var GenomeTrack = React.createClass({
@@ -22,16 +23,69 @@ var GenomeTrack = React.createClass({
     }
 
     if (!this.props.basePairs) {
-      return <div>no data</div>;
+      return <div className="reference empty">no data</div>;
     }
 
-    return <div>{this.props.basePairs}</div>;
+    return <NonEmptyGenomeTrack {...this.props} />;
+  }
+});
+
+var NonEmptyGenomeTrack = React.createClass({
+  propTypes: {
+    range: types.GenomeRange.isRequired,
+    basePairs: React.PropTypes.string.isRequired
+  },
+  render: function(): any {
+    return <div className="reference"></div>;
+  },
+  componentDidMount: function() {
+    var svg = d3.select(this.getDOMNode())
+                .append('svg');
+    this.updateVisualization();
+  },
+  componentDidUpdate: function(prevProps: any, prevState: any) {
+    this.updateVisualization();
+  },
+  updateVisualization: function() {
+    var div = this.getDOMNode(),
+        range = this.props.range,
+        width = div.offsetWidth,
+        height = div.offsetHeight,
+        svg = d3.select(div).select('svg');
+
+    var scale = d3.scale.linear()
+            .domain([range.start, range.stop + 1])  // 1 bp wide
+            .range([0, width]);
+
+    var absBasePairs = [].map.call(this.props.basePairs, (bp, i) => ({
+      position: i + range.start,
+      letter: bp
+    }));
+
+    svg.attr('width', width)
+       .attr('height', height);
+
+    var letter = svg.selectAll('text')
+       .data(absBasePairs, bp => bp.position);
+
+    // Enter
+    letter.enter().append('text');
+
+    // Enter & update
+    letter
+        .attr('x', bp => scale(bp.position))
+        .attr('y', height)
+        .attr('class', bp => 'basepair ' + bp.letter)
+        .text(bp => bp.letter);
+
+    // Exit
+    letter.exit().remove();
   }
 });
 
 var EmptyTrack = React.createClass({
   render: function() {
-    return <div>Zoom in to see bases</div>
+    return <div className="reference empty">Zoom in to see bases</div>
   }
 });
 

diff --git a/src/main.js b/src/main.js
@@ -5,7 +5,7 @@ var React = require('react'),
 
 var startMs = Date.now();
 // var genome = new TwoBit('http://www.biodalliance.org/datasets/hg19.2bit');
-var genome = new TwoBit('http://localhost:8000/hg19.2bit');
+var genome = new TwoBit('/hg19.2bit');
 
 genome.getFeaturesInRange('chr22', 19178140, 19178170).then(basePairs => {
   var endMs = Date.now();