Play with tabbed navigation on Runs table.

hammerlab · Jun 8, 2015 · f277d4b · f277d4b
1 parent 1fd0c0a
commit f277d4b
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 57 deletions.
diff --git a/cycledash/static/js/runs/components/RunsPage.js b/cycledash/static/js/runs/components/RunsPage.js
@@ -144,30 +144,26 @@ var ProjectTable = React.createClass({
     return (
       <div className='project'>
         <div className='project-header'>
-          <h2 title={this.props.project_id}>{this.props.name === 'null' ? 'No Project' : this.props.name}
+          <h2 title={this.props.project_id}>{this.props.name === 'null' ? 'No Project' : this.props.name}</h2>
+          <p className='notes'>{this.props.notes}</p>
+          {this.state.displayRunForm ? newRunForm : null}
+          {this.state.displayBAMForm ? newBAMForm : null}
+          <div className='project-stats'>
+            <a onClick={() => this.setState({bamsTable: false})} className={this.state.bamsTable ? '' : 'selected-pivot'}>
+              Runs<span className="count">{numRuns}</span>
+            </a>
+            <a onClick={() => this.setState({bamsTable: true})} className={this.state.bamsTable ? 'selected-pivot' : ''}>
+              BAMs<span className="count">{numBams}</span>
+            </a>
             <div className='add'>
-              <button onClick={() => { this.displayRunForm(false); this.displayBAMForm(!this.state.displayBAMForm); }}
-                      type='button' className='btn btn-primary btn-xs'>
-                Add BAM
-              </button>
               <button onClick={() => { this.displayBAMForm(false); this.displayRunForm(!this.state.displayRunForm); }}
                       type='button' className='btn btn-primary btn-xs'>
                 Add Run
               </button>
-            </div>
-          </h2>
-          <p className='notes'>{this.props.notes}</p>
-          {this.state.displayRunForm ? newRunForm : null}
-          {this.state.displayBAMForm ? newBAMForm : null}
-          <div className='project-stats'>
-            <div>
-              <a onClick={() => this.setState({bamsTable: true})} className={this.state.bamsTable ? 'selected-pivot' : ''}>
-                <em>{numBams}</em>&nbsp;BAMs
-              </a>
-              ,&nbsp;&nbsp;
-              <a onClick={() => this.setState({bamsTable: false})} className={this.state.bamsTable ? '' : 'selected-pivot'}>
-                {numRuns}&nbsp;Runs
-              </a>
+              <button onClick={() => { this.displayRunForm(false); this.displayBAMForm(!this.state.displayBAMForm); }}
+                      type='button' className='btn btn-primary btn-xs'>
+                Add BAM
+              </button>
             </div>
           </div>
         </div>
@@ -199,10 +195,10 @@ var RunsTable = React.createClass({
       <table className='runs-table'>
         <thead>
           <tr>
-            <th></th>
             <th className='caller-name'>Caller Name</th>
             <th className='date'>Submitted On</th>
             <th className='num-variants'>Variants</th>
+            <th>Linked BAMs</th>
             <th></th>
             <th></th>
           </tr>
@@ -228,14 +224,14 @@ var RunRow = React.createClass({
     var run = this.props.run;
     return (
       <tr className='run' onClick={this.handleClick}>
-        <td className='run-id'>
-          <a className='btn btn-default btn-xs' href={'/runs/' + run.id + '/examine'} ref='link'>Examine</a>
-        </td>
         <td className='caller-name'>{run.caller_name}</td>
         <td className='date' title={run.created_at}>{moment(new Date(run.created_at)).format('YYYY-MM-DD')}</td>
         <td className='num-variants' title={run.genotype_count}>{run.genotype_count}</td>
         <RunLabels run={run} />
         <RunComments run={run} />
+        <td className='run-id'>
+          <a className='btn btn-default btn-xs' href={'/runs/' + run.id + '/examine'} ref='link'>Examine</a>
+        </td>
       </tr>
     );
   }
@@ -324,7 +320,7 @@ var RunLabels = React.createClass({
         var value = utils.getIn(run, path) || utils.getIn(taskStates, path);
         if (value) {
           return (
-            <span className={`label label-info ${cssClass}`} title={title} key={path.join('-')}>
+            <span className={`linked-bam ${cssClass}`} title={title} key={path.join('-')}>
               {usePathValue ? value : ''}
             </span>
           );
@@ -377,7 +373,7 @@ var BamsTable = React.createClass({
       return rows;
     });
     return (
-      <table className='bams table'>
+      <table className='bams-table'>
         <thead>
           <tr>
             <th className='bam-name'>BAM Name</th>

diff --git a/cycledash/static/scss/_variables.scss b/cycledash/static/scss/_variables.scss
@@ -9,7 +9,6 @@ $color-red: #f32d2d;
 $color-white: #fff;
 $color-white-smoke: #f5f5f5;
 $color-yellow-light: #feffcf;
-// $color-fuchsia-sinai: #C3167B;
 $color-fuchsia-sinai: #AE387E;
 
 

diff --git a/cycledash/static/scss/examine.scss b/cycledash/static/scss/examine.scss
@@ -22,7 +22,7 @@ a, a:hover {
   background-color: $color-bg-body;
   tr:last-child{
     th {
-      background-color: darken($color-bg-body, 10%);
+      background-color: darken($color-bg-body, 5%);
     }
   }
 }

diff --git a/cycledash/static/scss/runs.scss b/cycledash/static/scss/runs.scss
@@ -81,28 +81,11 @@ div.project-header .notes {
   margin-top: 1em;
 }
 div.project-header .add button {
-  margin-right: 1em;
+  margin-left: 1em;
 }
 div.project-header .add {
-  // margin: 1em 0;
   float: right;
 }
-div.project-header div.project-stats {
-  font-size: 1.2em;
-  // float: right;
-  // position: relative;
-  // top: -1.51em;
-}
-div.project-header div.project-stats a.selected-pivot {
-  color: $color-text;
-  cursor: default;
-}
-div.project-header div.project-stats a.selected-pivot:hover {
-  text-decoration: none;
-}
-div.project-header div.project-stats div {
-  width: 100%;
-}
 div.project {
   background-color: $color-white-smoke;
   margin: 2em 0;
@@ -116,14 +99,51 @@ div.project {
 div.project a {
   cursor: pointer;
 }
-
+.project-stats {
+  margin-top: 1em;
+  font-size: 1.125rem;
+  a {
+    padding: 0.25rem 0.5rem;
+    display: inline-block;
+    border-top: 1px solid transparent;
+    border-right: 1px solid transparent;
+    border-left: 1px solid transparent;
+    &:hover {
+      text-decoration: none;
+    }
+    &.selected-pivot {
+      background-color: $color-white-smoke;
+      border-top-left-radius: $radius;
+      border-top-right-radius: $radius;
+      border-top: 1px solid darken($color-white-smoke, 10%);
+      border-right: 1px solid darken($color-white-smoke, 10%);
+      border-left: 1px solid darken($color-white-smoke, 10%);
+      color: $color-text;
+      cursor: default;
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+}
+.count {
+  display: inline-block;
+  font-family: helvetica, arial, sans-serif;
+  padding-left: 1em;
+  font-size: 0.75rem;
+}
 /*------[ Runs Table ]------*/
-.runs-table {
+.runs-table, .bams-table {
   @extend .table;
+  border: 1px solid darken($color-white-smoke, 10%);
+  margin-top: -1px;
   table-layout: fixed;
   td {
     word-wrap: break-word;
   }
+  thead {
+    font-size:0.75rem;
+  }
 }
 main#runs .runs-table tr.info > td {
   background-color: $color-bg-expanded;
@@ -166,6 +186,12 @@ td.comments {
 .runs-table .run-id, .runs-table .date {
   white-space: nowrap;
 }
+.runs-table .run-id {
+  text-align: right;
+}
+.linked-bam {
+  display: inline-block;
+}
 
 /*------[ Drag and Drop File Upload ]------*/
 main#runs .receiving-drag.uploadable {

diff --git a/cycledash/static/scss/style.scss b/cycledash/static/scss/style.scss
@@ -32,28 +32,22 @@ label {
   font-weight: normal;
 }
 .btn-primary {
-  // background-color: darken($color-fuchsia-sinai, 5%);
-  // border-color: darken($color-fuchsia-sinai, 25%);
   color: $color-white;
   background-color: $color-fuchsia-sinai;
-  border-color: darken($color-fuchsia-sinai, 20%);
+  border-color: darken($color-fuchsia-sinai, 10%);
   &:hover, &:active, &:focus {
     background-color: darken($color-fuchsia-sinai, 5%);
-    border-color: darken($color-fuchsia-sinai, 20%);
+    border-color: darken($color-fuchsia-sinai, 10%);
     color: $color-white-smoke;
   }
 }
 .btn-default {
-  // background-color: darken($color-bg-body, 5%);
-  // border-color: darken($color-bg-body, 25%);
   background-color: $color-blue-sinai;
-  border-color: darken($color-blue-sinai, 20%);
+  border-color: darken($color-blue-sinai, 10%);
   color: $color-white;
   &:hover, &:active, &:focus {
-    // background-color: darken($color-bg-body, 10%);
-    // border-color: darken($color-bg-body, 25%);
     background-color: darken($color-blue-sinai, 5%);
-    border-color: darken($color-blue-sinai, 20%);
+    border-color: darken($color-blue-sinai, 10%);
     color: $color-white-smoke;
   }
 }