Style worker status and separate from linked BAMs.

hammerlab · Sep 14, 2015 · bbe4f93 · bbe4f93
1 parent 40db63e
commit bbe4f93
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 22 deletions.
diff --git a/cycledash/static/js/runs/components/RunsPage.js b/cycledash/static/js/runs/components/RunsPage.js
@@ -250,7 +250,8 @@ var RunsTable = React.createClass({
             <th className='caller-name'>Caller Name</th>
             <th className='date'>Submitted</th>
             <th className='num-variants'>Variants</th>
-            <th className='bam-info'>Linked BAMs</th>
+            <th className='linked-bams'>Linked BAMs</th>
+            <th className='run-labels'></th>
             <th className='num-comments'></th>
             <th className='examine-col'></th>
           </tr>
@@ -279,6 +280,7 @@ var RunRow = React.createClass({
         <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>
+        <RunBAMs run={run} />
         <RunLabels run={run} />
         <RunComments run={run} />
         <td className='run-id'>
@@ -320,7 +322,7 @@ var RunDescriptionRow = React.createClass({
           });
     return (
       <tr className='info'>
-        <td colSpan='6'>
+        <td colSpan='7'>
           <dl className='dl-horizontal'>
             {descriptions}
             {tasks}
@@ -362,17 +364,15 @@ var RunLabels = React.createClass({
                       .object()
                       .value();
     var labelSpecs = [
-      {path: ['tumor_bam' , 'name'], usePathValue: true, title: 'Tumor BAM'},
-      {path: ['normal_bam', 'name'], usePathValue: true, title: 'Normal BAM'},
       {path: ['run'], title: 'Has a running worker task', cssClass: 'run'},
       {path: ['fail'], title: 'Has a failed worker task', cssClass: 'fail'}
     ];
     var labels = labelSpecs.map(
       function({path, usePathValue, title, cssClass}) {
-        var value = utils.getIn(run, path) || utils.getIn(taskStates, path);
+        var value = utils.getIn(taskStates, path);
         if (value) {
           return (
-            <span className={`linked-bam ${cssClass}`} title={title} key={path.join('-')}>
+            <span className={`${cssClass}`} title={title} key={path.join('-')}>
               {usePathValue ? value : ''}
             </span>
           );
@@ -386,6 +386,36 @@ var RunLabels = React.createClass({
   }
 });
 
+var RunBAMs = React.createClass({
+  propTypes: {
+    run: React.PropTypes.object.isRequired
+  },
+  render: function() {
+    var run = this.props.run;
+
+    var labelSpecs = [
+      {path: ['tumor_bam' , 'name'], usePathValue: true, title: 'Tumor BAM', cssClass: 'linked-bam'},
+      {path: ['normal_bam', 'name'], usePathValue: true, title: 'Normal BAM', cssClass: 'linked-bam'},
+    ];
+    var run_bams = labelSpecs.map(
+      function({path, usePathValue, title, cssClass}) {
+        var value = utils.getIn(run, path);
+        if (value) {
+          return (
+            <span className={`${cssClass}`} title={title} key={path.join('-')}>
+              {usePathValue ? value : ''}
+            </span>
+          );
+        }
+      });
+    return (
+        <td className='bam-labels'>
+          {run_bams}
+        </td>
+    );
+  }
+});
+
 var RunComments = React.createClass({
   propTypes: {
     run: React.PropTypes.object.isRequired

diff --git a/cycledash/static/scss/runs.scss b/cycledash/static/scss/runs.scss
@@ -143,7 +143,7 @@ div.project a {
   table-layout: fixed;
   margin: 0;
 }
-main#runs .runs-table tr.info > td {
+main#runs .runs-table tr.info > td, main#runs .bams-table tr.info > td {
   background-color: $color-bg-expanded;
 }
 input.selector {
@@ -152,19 +152,25 @@ input.selector {
 td .label {
   margin: 0 3px 0 3px;
 }
-.runs-table .label.fail, .runs-table .label.run {
-  background: none;
-  display: inline-block;
-  width: 16px;
-  height: 16px;
+.runs-table .labels .fail, .runs-table .labels .run {
+  font-size: 0.875em;
+}
+.runs-table .labels .fail {
+  @extend .glyphicon-remove;
+}
+.runs-table .labels .fail::before{
+  @extend .glyphicon;
+  color: $color-status-error;
+  padding-right: 0.25em;
+  font-size: 10px;
 }
-.runs-table .label.fail::after {
+.runs-table .labels .fail::after {
   color: $color-status-error;
-  content: 'x';
+  content: 'Failed';
 }
-.runs-table .label.run::after {
+.runs-table .labels .run::after {
   color: $color-blue-sinai;
-  content: '…';
+  content: 'Uploading...';
 }
 span.comment-bubble {
   @extend .glyphicon, .glyphicon-comment;
@@ -182,25 +188,28 @@ td.comments {
   text-align: right;
 }
 .runs-table .caller-name {
-  width: 30%;
+  width: 27%;
 }
 .runs-table .date {
-  width: 15%;
+  width: 13%;
 }
 .runs-table .num-variants {
-  width: 15%;
+  width: 13%;
 }
-.runs-table .bam-info {
+.runs-table .linked-bams {
   width: 20%;
 }
-.runs-table .num-comments {
+.runs-table .run-labels {
   width: 10%;
 }
+.runs-table .num-comments {
+  width: 7%;
+}
 .runs-table .examine-col {
   width: 10%;
 }
 .bams-table .bam-name {
-  width: 30%
+  width: 30%;
 }
 .bams-table .resection-date {
   width: 21%;