Rework the /examine page for debugging VCFs, using React.js + co.

Redesigned and recombobulated the /examine page for debugging VCFs. 

![](http://cl.ly/image/1e1r3H0d0V0W/Screen%20Shot%202014-09-11%20at%201.04.12%20PM.png)

In short, a VCF is loaded into the browser, and can be filtered and ranges selected based on INFO attributes and positions in the genome. Hisograms for the various INFo attributes can be generated, and true/false pos/neg + precision/recall/f1score are shown for the selected rows. 

This uses react.js, d3.js, vcf.js, vcf.tools.js, idiogrammatik.js.

This is a provisional PR, to get this out ASAP. There are edge-cases and :bug: :snail: :bee:, as well as tests, that need accounting for. 

fixes #14 
Let me know if you want another set of eyes.

On Tue, Sep 16, 2014 at 6:37 PM, Isaac Hodes <notifications@github.com>
wrote:

> In cycledash/static/js/examine/examine.js:
>
> > +   getInitialState: function() {
> > +     return {chartAttributes: [],
> > +             filters: {},
> > +             position: {start: 0,
> > +                        end: null, // 'null' for end means "the end."
> > +                        chromosome: "all"}};
> > +   },
> > +   getDefaultProps: function() {
> > +     return {records: [],
> > +             truthRecords: [],
> > +             karyogram: initializeKaryogram(),
> > +             chromosomes: [],
> > +             attrs: []};
> > +   },
> > +   componentDidMount: function() {
> > +     d3.xhr('/vcf' + this.props.vcfPath, function(err, response) {
>
> Hmm, couldn't figure out how to get this to work (even with s/post/get/)
> so I'm punting on this for now. Will revisit shortly.
>
> —
> Reply to this email directly or view it on GitHub
> <https://github.com/hammerlab/cycledash/pull/24/files#r17635162>.
>