Merge a326b50 into 99431cf

.travis.yml

@@ -8,6 +8,8 @@ addons:
   sauce_connect: true
 env:
   global:
-  - secure: Z7Y/PqrohQJydiq2ktrW+Z5RBN7/oadmInQhmJGyiiw8DzLbo4ogX16mURJrFJJBX8IZOtGZ/S3vMEN3yDvu7kzivUSDDOpbchIpZftnPdT5n+cU+XPvbNaTuXnrO8tZh4fewFBLuH55aXPi6x/kgu2l0z9W3LJQ+i9LpH86KXg= # SAUCE_USERNAME
-  - secure: P05BokwVbGbEIuzI5ocW3i4D9QRF5iAH1yrpS/QcnfD4t2Knq/PvHTEdgDuKLLOb9B/LPRBy1ZMdOBhFTjQfVLJmVmWbCOEp/q/7tjFaOxaKRiWP81jbFCH50nCWuFPKP5YCThohD8oNPgPOrXcaD49hx/4+fSGA+oSedX/JhBE= # SAUCE_ACCESS_KEY
-  - secure: FAyDpYkuBhDInLV9CjaSynkb9h2NP1xK+a9jmZnCzddj+guIebHTz1nWshqhNPR4WsJ9LeskpqGO6ke3lJDASlPWcQfe153I4XIR3J9WFF6y6pgsZxGoUBoB0AHBLvJHE2NWwknE2oJ7HtNRHTLBk53FgL95gmrSa6mTnvBUt7Q= # IMGUR_CLIENT_ID
+  - secure: Z7Y/PqrohQJydiq2ktrW+Z5RBN7/oadmInQhmJGyiiw8DzLbo4ogX16mURJrFJJBX8IZOtGZ/S3vMEN3yDvu7kzivUSDDOpbchIpZftnPdT5n+cU+XPvbNaTuXnrO8tZh4fewFBLuH55aXPi6x/kgu2l0z9W3LJQ+i9LpH86KXg=
+  - secure: P05BokwVbGbEIuzI5ocW3i4D9QRF5iAH1yrpS/QcnfD4t2Knq/PvHTEdgDuKLLOb9B/LPRBy1ZMdOBhFTjQfVLJmVmWbCOEp/q/7tjFaOxaKRiWP81jbFCH50nCWuFPKP5YCThohD8oNPgPOrXcaD49hx/4+fSGA+oSedX/JhBE=
+  - secure: FAyDpYkuBhDInLV9CjaSynkb9h2NP1xK+a9jmZnCzddj+guIebHTz1nWshqhNPR4WsJ9LeskpqGO6ke3lJDASlPWcQfe153I4XIR3J9WFF6y6pgsZxGoUBoB0AHBLvJHE2NWwknE2oJ7HtNRHTLBk53FgL95gmrSa6mTnvBUt7Q=
+  - secure: VR5jE5lSu0RJmwiImQPN9bpZgh9sbZqu74GQTS59S4cbrOE9mPCf7JpvRCfCmovqRBnfVAxFZOqA6yWYPEiVX0LCd3de09VNBi9xbRCrjCJmg8xYeHcUCtPeo+wDOFLXl+VLT732sYzxKTD+r8vDouk9LZgT/iJJ150I77UrIjE=
+  - secure: aqi09vGP/BVolkmS6lHLnoay6Ll9YX7Jttqczrjm2qzWHa1W+0qH9pRpkwKHU2KwYTmP2f16TWb6mu7uOJmMz/YJdxW4bNNqKj+34vqsaAou6bul+XEe842RQYVbfWC0HqGD43J3KSDRnjleW55nXFAS0VbvHt5f+Xd3EbtEbuY=

cycledash/static/js/runs/components/RunsPage.js

@@ -8,6 +8,35 @@ var React = require('react'),
 
 var NO_FILTER = 'All projects';
 
+var ModalStates = {
+      NONE: 0,
+      PROJECT: 1,
+      RUN: 2,
+      BAM: 3
+};
+
+// This is a Bootstrap modal that displays all (3) forms: New Project, Add Run, and Add BAM
+// Closing/esc'ing/unfocusing the modal will set the ModalState to NONE.
+// cf. http://getbootstrap.com/javascript/#modals
+var Modal = React.createClass({
+  componentDidMount: function() {
+    $('.modal').modal('show');
+    $('.modal').on('hidden.bs.modal', () => {this.props.handleClose();});
+  },
+  hideModal: function() {
+    $('.modal').modal('hide');
+  },
+  render: function(){
+    return (
+      <div className="modal fade" role="dialog" tabIndex="-1">
+        <div className="modal-dialog" role="document">
+          <button className='close' type='button' onClick={this.hideModal}>&times;</button>
+          {this.props.children}
+        </div>
+      </div>
+    );
+  }
+});
 
 var RunsPage = React.createClass({
   propTypes: {
@@ -18,10 +47,20 @@ var RunsPage = React.createClass({
   getInitialState: function() {
     return {projectFilter: NO_FILTER,
             draggingOver: false,
-            displayProjectForm: false};
+            displayProjectForm: false,
+            modal: ModalStates.NONE};
+  },
+  closeModal: function(){
+    this.setState({modal: ModalStates.NONE, "newFormProps": null});
+  },
+  showProjectModal: function(){
+    this.setState({modal: ModalStates.PROJECT, "newFormProps": null});
   },
-  setDisplayProjectForm: function(displayProjectForm) {
-    this.setState({displayProjectForm});
+  showRunModal: function(projectName, projectId, projectBams){
+    this.setState({modal: ModalStates.RUN, "newFormProps": {projectName, projectId, projectBams}});
+  },
+  showBAMModal: function(projectName, projectId){
+    this.setState({modal: ModalStates.BAM, "newFormProps": {projectName, projectId}});
   },
   handleProjectFilter: function(evt) {
     this.setState({projectFilter: evt.target.value});
@@ -31,9 +70,6 @@ var RunsPage = React.createClass({
         this.props.projects :
         _.where(this.props.projects, {'name': this.state.projectFilter});
   },
-  createDisplayProjectFormHandler: function(showForm) {
-    return () => this.setState({showForm});
-  },
   createDragOverHandler: function(draggingOver) {
     return () => this.setState({draggingOver});
   },
@@ -53,9 +89,26 @@ var RunsPage = React.createClass({
                                  bams={project.bams}
                                  project_id={project.id}
                                  name={project.name}
-                                 notes={project.notes} />;
+                                 notes={project.notes}
+                                 handleShowRunModal={this.showRunModal}
+                                 handleShowBAMModal={this.showBAMModal} />;
         }.bind(this)).value();
-    var newProjectForm = <forms.NewProjectForm handleClose={() => this.setDisplayProjectForm(false)} />;
+    var modal;
+    if (this.state.modal === ModalStates.NONE) {
+      modal = null;
+    } else {
+      var form;
+      if (this.state.modal === ModalStates.PROJECT) {
+        form = <forms.NewProjectForm />;
+      } else if (this.state.modal === ModalStates.RUN) {
+        form = <forms.NewRunForm bamUris={_.unique(_.pluck(this.state.newFormProps.projectBams, 'uri'))}
+                                 projectId={this.state.newFormProps.projectId}
+                                 projectName={this.state.newFormProps.projectName} />;
+      } else {
+        form = <forms.NewBAMForm {...this.state.newFormProps} />;
+      }
+      modal = <Modal handleClose={this.closeModal}>{form}</Modal>;
+    }
     return (
       <div className="row">
         <div onDragOver={this.createDragOverHandler(true)}
@@ -66,11 +119,10 @@ var RunsPage = React.createClass({
               Projects
               {!this.state.displayProjectForm ?
                <button className='btn btn-primary' id='new-project'
-                       onClick={() => this.setDisplayProjectForm(true)}>
+                       onClick={this.showProjectModal}>
                  New Project
                </button> : null}
             </h1>
-            {this.state.displayProjectForm ? newProjectForm : null}
           </div>
           <div className="projects-table">
           <div className='filter-runs'>
@@ -84,6 +136,7 @@ var RunsPage = React.createClass({
           </div>
           <LatestComments comments={this.props.comments} />
         </div>
+        {modal}
       </div>
     );
   }
@@ -95,21 +148,15 @@ var ProjectTable = React.createClass({
     name: React.PropTypes.string.isRequired,
     notes: React.PropTypes.string,
     runs: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
-    bams: React.PropTypes.arrayOf(React.PropTypes.object).isRequired
+    bams: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
+    handleShowRunModal: React.PropTypes.func,
+    handleShowBAMModal: React.PropTypes.func
   },
   getInitialState: function() {
     return {selectedRunId: null,
             selectedBamId: null,
-            displayRunForm: false,
-            displayBAMForm: false,
             bamsTable: false};
   },
-  displayRunForm: function(displayRunForm) {
-    this.setState({displayRunForm});
-  },
-  displayBAMForm: function(displayBAMForm) {
-    this.setState({displayBAMForm});
-  },
   createClickRunHandler: function(runId) {
     return () => {
       var selectedRunId = this.state.selectedRunId === runId ? null : runId;
@@ -122,12 +169,13 @@ var ProjectTable = React.createClass({
       this.setState({selectedBamId});
     };
   },
+  showRunModal: function(){
+    this.props.handleShowRunModal(this.props.name, this.props.project_id, this.props.bams);
+  },
+  showBAMModal: function(){
+    this.props.handleShowBAMModal(this.props.name, this.props.project_id);
+  },
   render: function() {
-    var newRunForm = <forms.NewRunForm bamUris={_.unique(_.pluck(this.props.bams, 'uri'))}
-                                       projectId={this.props.id}
-                                       projectName={this.props.name} />;
-    var newBAMForm = <forms.NewBAMForm projectId={this.props.id}
-                                       projectName={this.props.name} />;
     var numBams = this.props.bams.length;
     var numRuns = this.props.runs.length;
     var table;
@@ -145,8 +193,6 @@ var ProjectTable = React.createClass({
         <div className='project-header'>
           <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>
         <div className='project-stats'>
           <div className='project-table-nav'>
@@ -158,11 +204,11 @@ var ProjectTable = React.createClass({
             </a>
           </div>
           <div className='add'>
-            <button onClick={() => { this.displayBAMForm(false); this.displayRunForm(!this.state.displayRunForm); }}
+            <button onClick={this.showRunModal}
                     type='button' className='btn btn-primary btn-xs'>
               Add Run
             </button>
-            <button onClick={() => { this.displayRunForm(false); this.displayBAMForm(!this.state.displayBAMForm); }}
+            <button onClick={this.showBAMModal}
                     type='button' className='btn btn-primary btn-xs'>
               Add BAM
             </button>
@@ -176,7 +222,6 @@ var ProjectTable = React.createClass({
   }
 });
 
-
 var RunsTable = React.createClass({
   propsType: {
     runs: React.PropTypes.string.isRequired,

cycledash/static/js/runs/components/forms.js

@@ -56,26 +56,26 @@ var NewRunForm = React.createClass({
       <form method='POST' action='/api/runs' className='add-form' ref='runForm'>
         <div className='row'>
           <h3>New Run</h3>
-            <TextInput label='Tumor BAM URI' name='tumorBamUri'
-                       completions={props.bamUris}
-                       placeholder='/data/dream/tumor.chr20.bam' />
-            <TextInput label='Normal BAM URI' name='normalBamUri'
-                       completions={props.bamUris}
-                       placeholder='/data/dream/normal.chr20.bam' />
             <TextInput label='Variant Caller Name' name='callerName'
                        placeholder='Guacamole::Somatic' />
             <TextInput label='VCF Path' name='uri'
                        placeholder='/data/somevcf.vcf'
                        required={true}
                        uploadable={true} uploadPath={'/upload'} />
+            <TextInput label='Tumor BAM URI' name='tumorBamUri'
+                       completions={props.bamUris}
+                       placeholder='/data/dream/tumor.chr20.bam' />
+            <TextInput label='Normal BAM URI' name='normalBamUri'
+                       completions={props.bamUris}
+                       placeholder='/data/dream/normal.chr20.bam' />
           <input type='hidden' value={this.props.projectName} name='projectName' />
           <div className='form-group add-form-input-full'>
             <label>Notes, Config, Params</label>
             <textarea className='form-control add-form-notes' rows='8' name='notes'
                       placeholder='Notes, parameters, etc.'></textarea>
           </div>
           <div className='form-group add-form-input-full'>
-            <button type='submit' className='btn btn-primary btn-block'>Submit New Run</button>
+            <button type='submit' className='add-form-submit'>Submit New Run</button>
           </div>
         </div>
       </form>
@@ -97,21 +97,21 @@ var NewBAMForm = React.createClass({
           <h3>New BAM</h3>
             <TextInput label='Name' name='name' required={true}
                        placeholder='...' />
-            <TextInput label='Tissues' name='tissues'
-                       placeholder='Left Ovary' />
-            <TextInput label='Resection Date' name='resectionDate'
-                       placeholder='2015-08-14' />
             <TextInput label='BAM URI' name='uri'
                        required={true}
                        placeholder='hdfs:///data/somebam.bam' />
+            <TextInput label='Resection Date' name='resectionDate'
+                       placeholder='2015-08-14' />
+            <TextInput label='Tissues' name='tissues'
+                       placeholder='Left Ovary' />
           <input type='hidden' value={this.props.projectName} name='projectName' />
           <div className='form-group add-form-input-full'>
             <label>Notes</label>
             <textarea className='form-control add-form-notes' rows='8' name='notes'
                       placeholder='Notes on the procedure, sample, alignment, etc.'></textarea>
           </div>
           <div className='form-group add-form-input-full'>
-            <button type='submit' className='btn btn-primary btn-block'>Submit New BAM</button>
+            <button type='submit' className='add-form-submit'>Submit New BAM</button>
           </div>
         </div>
       </form>
@@ -120,29 +120,23 @@ var NewBAMForm = React.createClass({
 });
 
 var NewProjectForm = React.createClass({
-  propTypes: {
-    handleClose: React.PropTypes.func.isRequired,
-  },
   componentDidMount: function() {
     ajaxifyForm(this.refs.projectForm.getDOMNode());
   },
   render: function() {
     return (
       <form method='POST' action='/api/projects' className='add-form' ref='projectForm'>
         <div className='row'>
-          <h3>New Project
-            <button className='close' type='button'
-            onClick={this.props.handleClose}>&times;</button>
-          </h3>
-            <TextInput label='Project Name' name='name' placeholder='PT01234' required={true} />
-            <div className='form-group add-form-input-full'>
-              <label>Notes</label>
-              <textarea className='form-control add-form-notes' rows='3' name='notes'
-                        placeholder='Notes etc.'></textarea>
-            </div>
-            <div className='form-group add-form-input-full'>
-              <button type='submit' className='btn btn-primary btn-block'>Submit New Project</button>
-            </div>
+          <h3>New Project</h3>
+          <TextInput label='Project Name' name='name' placeholder='PT01234' required={true} />
+          <div className='form-group add-form-input-full'>
+            <label>Notes</label>
+            <textarea className='form-control add-form-notes' rows='3' name='notes'
+                      placeholder='Notes etc.'></textarea>
+          </div>
+          <div className='form-group add-form-input-full'>
+            <button type='submit' className='add-form-submit'>Submit New Project</button>
+          </div>
         </div>
       </form>
     );
@@ -248,7 +242,7 @@ var TextInput = React.createClass({
       'form-control': true
     });
     var divClasses = React.addons.classSet({required: this.props.required,
-                                            'form-group add-form-input-half': true});
+                                            'form-group add-form-input-full': true});
     return (
         <div className={divClasses}>
           <label className='control-label'>{this.props.label}</label>

cycledash/static/scss/runs.scss

@@ -50,8 +50,18 @@ form.add-form {
 .add-form-input-full {
   @extend .col-md-12;
 }
-.add-form-notes {
-  height: 8em;  
+.form-control.add-form-notes {
+  height: 8em;
+}
+.close {
+  position: absolute;
+  top: 1.75rem;
+  right: 1rem;
+  z-index: 1;
+}
+.add-form-submit {
+  @extend .btn, .btn-primary;
+  float: right;
 }
 
 /*------[ Projects ]------*/

tests/pdifftests/test.py

@@ -69,6 +69,13 @@ def add_run(self, driver):
         add_run = driver.find_element_by_css_selector(add_run_btn_sel)
         add_run.click()
 
+    @hide('span.time')
+    def new_project(self, driver):
+        """Showing the New Project form."""
+        new_project_btn_sel = '#new-project'
+        new_project = driver.find_element_by_css_selector(new_project_btn_sel)
+        new_project.click()
+
 
 class Tasks(Base):
     window_size = [1280, 800]