Redesign examine page header, filters and vcf comparison

hammerlab · Jul 1, 2015 · fff0bd2 · fff0bd2
1 parent 0332843
commit fff0bd2
Show file tree

Hide file tree

Showing 7 changed files with 305 additions and 273 deletions.
diff --git a/cycledash/static/js/examine/components/Downloads.js b/cycledash/static/js/examine/components/Downloads.js
@@ -8,7 +8,7 @@ var Downloads = React.createClass({
   render: function() {
     var jsonQuery = encodeURIComponent(JSON.stringify(this.props.query)),
         link = `/runs/${this.props.run_id}/download?query=${jsonQuery}`;
-    return <a className='download-vcf' href={link}>Download VCF</a>;
+    return <a className='download-vcf' href={link}>Save VCF</a>;
   }
 });
 

diff --git a/cycledash/static/js/examine/components/ExamineInformation.js b/cycledash/static/js/examine/components/ExamineInformation.js
@@ -10,13 +10,24 @@ var ExamineInformation = React.createClass({
   render: function() {
     var run = this.props.run;
     return (
-        <div className="examine-information">
-          <dl className='dl-horizontal'>
-            <dt>Caller Name</dt> <dd>{run.caller_name}</dd>
-            <dt>VCF URI</dt> <dd>{run.uri}</dd>
-            <dt>Submitted</dt> <dd>{run.created_at}</dd>
-          </dl>
-        </div>
+      <div className="examine-information">
+        <table className="header-table">
+          <tbody>
+            <tr>
+              <th>Caller Name</th>
+              <td>{run.caller_name}</td>
+            </tr>
+            <tr>
+              <th>VCF URI</th>
+              <td>{run.uri}</td>
+            </tr>
+            <tr>
+              <th>Submitted</th>
+              <td>{run.created_at}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     );
   }
 });

diff --git a/cycledash/static/js/examine/components/ExaminePage.js b/cycledash/static/js/examine/components/ExaminePage.js
@@ -3,6 +3,7 @@
 var React = require('react'),
     PileupViewer = require('./PileupViewer'),
     StatsSummary = require('./StatsSummary'),
+    RecordsShown = require('./RecordsShown'),
     VCFTable = require('./VCFTable'),
     QueryBox = require('./QueryBox'),
     Downloads = require('./Downloads'),
@@ -106,27 +107,31 @@ var ExaminePage = React.createClass({
             <div className="row">
               <div className="examine-info-container">
                 <ExamineInformation run={run}/>
-                {props.comparableVcfs ?
+              </div>
+            </div>
+          </div>
+            <div className="examine-table-controls">
+              <div className="examine-cql">
+                <QueryBox columns={state.columns}
+                          hasPendingRequest={state.hasPendingRequest}
+                          loadError={state.loadError}
+                          query={state.query}
+                          handleQueryChange={this.handleQueryChange} />
+              </div>
+              {props.comparableVcfs ?
                 <VCFValidation vcfs={props.comparableVcfs}
                                selectedVcfId={state.selectedVcfId}
                                handleComparisonVcfChange={this.handleComparisonVcfChange} /> :
-                  null}
+              null}
+              <div className="download-container">
+                <RecordsShown hasLoaded={state.hasLoaded}
+                              numberOfFilteredRecords={state.stats.totalRecords}
+                              totalNumberOfRecords={state.stats.totalUnfilteredRecords} />
+                <Downloads query={state.query} run_id={run.id} />
               </div>
-              <div className="examine-summary-container">
-                <StatsSummary hasLoaded={state.hasLoaded}
+              <StatsSummary hasLoaded={state.hasLoaded}
                               stats={state.stats} />
-              </div>
             </div>
-          </div>
-          <div className="examine-cql">
-            <QueryBox columns={state.columns}
-                      hasPendingRequest={state.hasPendingRequest}
-                      loadError={state.loadError}
-                      query={state.query}
-                      handleQueryChange={this.handleQueryChange} />
-            <Downloads query={state.query} run_id={run.id} />
-          </div>
-          <div className="examine-table">
             <VCFTable ref="vcfTable"
                       hasLoaded={state.hasLoaded}
                       records={state.records}
@@ -140,7 +145,6 @@ var ExaminePage = React.createClass({
                       handleOpenViewer={this.handleOpenViewer}
                       handleSetComment={this.handleSetComment}
                       handleDeleteComment={this.handleDeleteComment} />
-          </div>
           {pileupViewer}
         </div>
        );

diff --git a/cycledash/static/js/examine/components/RecordsShown.js b/cycledash/static/js/examine/components/RecordsShown.js
@@ -0,0 +1,29 @@
+"use strict";
+
+var d3 = require('d3'),
+    React = require('react/addons');
+
+var RecordsShown = React.createClass({
+  propTypes: {
+    hasLoaded: React.PropTypes.bool.isRequired,
+    numberOfFilteredRecords: React.PropTypes.number.isRequired,
+    totalNumberOfRecords: React.PropTypes.number.isRequired
+  },
+  render: function() {
+    var fmt = d3.format(','),
+        countsText;
+    if (this.props.totalNumberOfRecords === this.props.numberOfFilteredRecords) {
+      countsText = 'all' + ' ' + fmt(this.props.totalNumberOfRecords);
+    } else {
+      countsText = fmt(this.props.numberOfFilteredRecords) + ' of ' +
+                       fmt(this.props.totalNumberOfRecords);
+    }
+    return (
+      <div className="total-records">
+        Showing {this.props.hasLoaded ? countsText : '...'} variants
+      </div>
+    );
+  }
+});
+
+module.exports = RecordsShown;
diff --git a/cycledash/static/js/examine/components/StatsSummary.js b/cycledash/static/js/examine/components/StatsSummary.js
@@ -21,9 +21,6 @@ var StatsSummary = React.createClass({
     return (
       <div id="stats-container">
         {variantStats}
-        <RecordsShown hasLoaded={this.props.hasLoaded}
-                      numberOfFilteredRecords={stats.totalRecords}
-                      totalNumberOfRecords={stats.totalUnfilteredRecords} />
       </div>
     );
   }
@@ -48,26 +45,25 @@ var VariantStats = React.createClass({
               <th></th>
               <th>True</th>
               <th>False</th>
+              <th>Precision</th>
+              <th>Recall</th>
+              <th>f1score</th>
             </tr>
             <tr>
               <th>Positive</th>
               <td>{fmt(truePositives || 0)}</td>
               <td>{fmt(falsePositives || 0)}</td>
+              <td className="other-stats">{dfmt(precision || 0)}</td>
+              <td className="other-stats">{dfmt(recall || 0)}</td>
+              <td className="other-stats">{dfmt(f1score || 0)}</td>
             </tr>
             <tr>
               <th>Negative</th>
               <td className="na">-</td>
               <td>{fmt(falseNegatives || 0)}</td>
-            </tr>
-            <tr className="other-stats">
-              <th>Precision</th>
-              <th>Recall</th>
-              <th>f1score</th>
-            </tr>
-            <tr>
-              <td>{dfmt(precision || 0)}</td>
-              <td>{dfmt(recall || 0)}</td>
-              <td>{dfmt(f1score || 0)}</td>
+              <td className="other-stats"></td>
+              <td className="other-stats"></td>
+              <td className="other-stats"></td>
             </tr>
           </tbody>
         </table>
@@ -76,28 +72,4 @@ var VariantStats = React.createClass({
   }
 });
 
-var RecordsShown = React.createClass({
-  propTypes: {
-    hasLoaded: React.PropTypes.bool.isRequired,
-    numberOfFilteredRecords: React.PropTypes.number.isRequired,
-    totalNumberOfRecords: React.PropTypes.number.isRequired
-  },
-  render: function() {
-    var fmt = d3.format(','),
-        countsText;
-    if (this.props.totalNumberOfRecords === this.props.numberOfFilteredRecords) {
-      countsText = 'all' + ' ' + fmt(this.props.totalNumberOfRecords);
-    } else {
-      countsText = fmt(this.props.numberOfFilteredRecords) + ' of ' +
-                       fmt(this.props.totalNumberOfRecords);
-    }
-    return (
-      <div className="total-records">
-        Showing {this.props.hasLoaded ? countsText : '...'} variants.
-      </div>
-    );
-  }
-});
-
-
 module.exports = StatsSummary;
diff --git a/cycledash/static/js/examine/components/VCFValidation.js b/cycledash/static/js/examine/components/VCFValidation.js
@@ -15,17 +15,14 @@ var VCFValidation = React.createClass({
     this.props.handleComparisonVcfChange(parseInt(evt.target.value, 10));
   },
   render: function() {
-    var vcfs = [{id: null, uri: '---'}].concat(this.props.vcfs)
+    var vcfs = [{id: null, uri: 'Compare to...'}].concat(this.props.vcfs)
         .map(v => <option value={v.id} key={v.uri}>{v.uri}</option>);
     return (
-      <dl className='dl-horizontal vcf-validations'>
-        <dt>Compare to</dt>
-        <dd>
-          <select onChange={this.handleSelect} value={this.props.compareToVcfId}>
-            {vcfs}
-          </select>
-        </dd>
-      </dl>
+      <div className='vcf-validations'>
+        <select onChange={this.handleSelect} value={this.props.compareToVcfId}>
+          {vcfs}
+        </select>
+      </div>
     );
   }
 });