Jkmarx metadata upload enhancements

refinery/selenium_testing/tests.py

@@ -122,7 +122,7 @@ def test_upload_button(self):
                 "ISA-Tab Metadata",
                 "PROVIDE METADATA FILE",
                 "Download an example tabular metadata file.",
-                "The first row of the table needs to contain column headers"]
+                "Must contain column headers in the first row of the table"]
         )
 
 

refinery/ui/source/js/data-set-import/partials/dialog-list-confirmation.html

@@ -3,6 +3,9 @@ <h3>{{ modal.config.title }}</h3>
 </div>
 <div id="check_availability_overflow" class="modal-body">
   <p>
+    The following files are listed in the “Data File” column of your metadata file,
+    but have not yet been uploaded to Refinery. In order to upload these files,
+    please refer to the “Upload Data Files" section in the upload form.
   	<ul>
   		<li ng-repeat="item in modal.config.items track by $index">{{ ::item }}</li>
 	</ul>

refinery/ui/source/js/data-set-import/partials/file-upload.html

@@ -1,6 +1,6 @@
 <div id="dataUploadTutorialStep7" class="tab-pane" id="data">
   <div class="refinery-subheader m-t-1">
-    <h3>Optional: Upload Data Files</h3>
+    <h1>Optional: Upload Data Files</h1>
   </div>
   <form id="fileupload" method="POST" enctype="multipart/form-data"
         ng-controller="RefineryFileUploadCtrl as FileCtrl"
@@ -17,7 +17,7 @@ <h3>Optional: Upload Data Files</h3>
       <div class="col-lg-4">
         <!-- The fileinput-button span is used to style the file input field as button -->
         <span
-          class="btn btn-success fileinput-button"
+          class="refinery-base btn btn-default btn-sm fileinput-button"
           ng-class="{ 'disabled': disabled }">
           <i class="fa fa-plus"></i>
           <span>Add files &hellip;</span>
@@ -29,7 +29,7 @@ <h3>Optional: Upload Data Files</h3>
             ng-disabled="disabled">
         </span>
         <button
-          class="active-group btn btn-default start"
+          class="active-group refinery-base btn btn-default btn-sm start"
           ng-click="submit()"
           ng-disabled="FileCtrl.numUnfinishedUploads() === 0 ||
                        processing() ||
@@ -38,7 +38,7 @@ <h3>Optional: Upload Data Files</h3>
           <span>Start upload</span>
         </button>
         <button
-          class="btn btn-warning cancel"
+          class="refinery-base btn btn-default btn-sm cancel"
           ng-click="cancel()"
           ng-disabled="FileCtrl.numUnfinishedUploads() === 0">
           <i class="fa fa-ban"></i>
@@ -85,7 +85,7 @@ <h3>Optional: Upload Data Files</h3>
         <div class="col-xs-4">
           <div ng-if="!file.uploaded && !file.error">
             <button
-              class="active-group btn btn-default start"
+              class="active-group refinery-base btn btn-default btn-sm start"
               ng-click="file.$submit()"
               ng-hide="!file.$submit || FileCtrl.options.autoUpload"
               ng-disabled="file.$state() == 'pending' ||
@@ -95,15 +95,15 @@ <h3>Optional: Upload Data Files</h3>
               <span>Start</span>
             </button>
             <button
-              class="btn btn-warning cancel"
+              class="refinery-base btn btn-default btn-sm cancel"
               ng-click="file.$cancel()"
               ng-hide="!file.$cancel"
               ng-disabled="FileCtrl.fileCache[file.name].status == 'waitingOnMD5'">
               <i class="fa fa-ban"></i>
               <span>Cancel</span>
             </button>
             <button
-              class="btn btn-danger destroy"
+              class="btn btn-danger btn-sm destroy"
               ng-controller="RefineryFileDestroyCtrl"
               ng-click="file.$destroy()"
               ng-hide="!file.$destroy">

refinery/ui/source/js/data-set-import/partials/metadata-table.html

@@ -1,17 +1,12 @@
 <div id="metadata-table-form">
   <div class="refinery-subheader m-t-1">
-    <h3> Before You Get Started </h3>
+    <h1> Before You Get Started </h1>
   </div>
   <p>
-    Before uploading a data set, you should follow these steps to prepare
-    your metadata and data files:
+    Before uploading a data set, format the metadata file and data files:
     <ol>
       <li>
-        Your metadata file needs to contain at least three columns: a sample
-        identifier, a file name, and a species name/species identifier.
-        Additional columns should be provided to characterize your data. The
-        first row of the table needs to contain column headers, which can be
-        chosen by the user. The order of the columns can be arbitrary.
+        Metadata file (
         <a
           href="/static/sample-files/refinery-sample-metadata.tsv"
           target="_blank"
@@ -22,20 +17,41 @@ <h3> Before You Get Started </h3>
           <i class="fa fa-download"> </i>
           Download an example tabular metadata file.
         </a>
+        ):
+        <ul class="nested-list">
+          <li>
+            Must contain at least three columns: <strong>sample
+            identifier</strong>, <strong>file name</strong>, and <strong>species
+            name/species identifier</strong>
+          </li>
+          <li>
+            Must contain column headers in the first row of the table
+          </li>
+          <li>
+            Can have additional columns used to characterize data
+          </li>
+          <li>
+            Can have the columns ordered arbitrary
+          </li>
+        </ul>
       </li>
       <li>
         Data referenced in the file name column of the metadata file should
-        either be located on your computer for upload to this site through your
-        browser or located on a web server accessible through public URLs.
+        either be located:
+        <ul class="nested-list">
+          <li>
+            on your computer for upload to this site through your
+        browser
+          </li>
+          <li>
+            on a web server accessible through public URLs
+          </li>
+        </ul>
       </li>
     </ol>
-
-    The upload process is not designed to be iterative, it pays off to spend
-    some time to prepare both metadata and data files to avoid having to
-    repeat the process.
    </p>
   <div id="dataUploadTutorialStep3" class="refinery-subheader m-t-1">
-    <h3>Provide Metadata File</h3>
+    <h1>Provide Metadata File</h1>
   </div>
   <div id="dataUploadTutorialStep4">
   <p>
@@ -47,6 +63,9 @@ <h3>Provide Metadata File</h3>
       class="refinery-max z-1 refinery-spinner-bg"
       ng-if="metadataTable.isImporting">
       <div class="refinery-spinner-center">
+        <h2>
+          Data set is uploading.
+        </h2>
         <div class="refinery-spinner"></div>
       </div>
     </div>
@@ -167,8 +186,8 @@ <h3>Provide Metadata File</h3>
     </label>
 
     <div ng-if="metadataTable.file">
-      <div class="refinery-subheader">
-        <h4>Preview (5 rows):</h4>
+      <div class="refinery-subheader m-t-1">
+        <h2>Preview of Meta Data File(First 5 rows):</h2>
       </div>
       <div
         class="gridStyle"
@@ -177,14 +196,14 @@ <h4>Preview (5 rows):</h4>
       </div>
 
       <div class="refinery-subheader m-t-1">
-        <h3>Configure Metadata Import</h3>
+        <h1>Configure Metadata Import</h1>
       </div>
 
       <div ng-form="importMetadataTableForm">
         <div class="refinery-subheader m-t-1">
-          <h4>
+          <h2>
             Required
-          </h4>
+          </h2>
         </div>
         <div class="row m-t-1-4 m-b-1-4">
           <div class="col-sm-6 col-md-3 col-lg-2">
@@ -294,9 +313,10 @@ <h4>
             Column containing species names or identifiers.
             <a
               popover-placement="right"
-              uib-popover="Acceptable identifiers are defined by the NCBI
-              Taxonomy database. For example, for human samples 'Human',
-              'Homo sapiens', or 'H. sapiens' can be used."
+              uib-popover-html="'Acceptable identifiers are defined by the
+              <a target=_blank href=https://www.ncbi.nlm.nih.gov/taxonomy>
+              NCBI Taxonomy database.</a> For example, for human samples Human,
+              Homo sapiens, or H. sapiens can be used.'"
               popover-title="Species Column"
               popover-trigger="focus"
               popover-append-to-body="true"
@@ -308,7 +328,7 @@ <h4>
 
         <div>
           <div class="refinery-subheader m-t-1">
-            <h4>Publishing</h4>
+            <h1>Publishing</h1>
           </div>
           <div class="row m-t-1-4 m-b-1-4">
             <div class="col-sm-6 col-md-3 col-lg-2">
@@ -349,7 +369,7 @@ <h4>Publishing</h4>
               ng-class="isAdvancedCollapsed ? 'fa fa-caret-right' : 'fa fa-caret-down'"
               class="fa-pull-left"
               aria-hidden="true"></i>
-              <h4>Advanced</h4>
+              <h1>Advanced</h1>
             </span>
           </div>
           <div uib-collapse="isAdvancedCollapsed">
@@ -451,8 +471,8 @@ <h4>Advanced</h4>
                   servers (referenced by URL) or located on the file system
                   of the server (referenced by an absolute file system path)
                   will be imported into the system upon creation of the data
-                  set. If not selected, such files will only be imported into
-                   the system if selected for analysis."
+                  set. If not selected, such files will only be imported
+                  into the system when used for analysis."
                   popover-title="Import Now"
                   popover-trigger="focus"
                   popover-append-to-body="true"
@@ -471,64 +491,64 @@ <h4>Advanced</h4>
 
       <div>
         <div class="refinery-subheader m-t-1">
-           <h3>Upload Data Set</h3>
+           <h1>Complete Submission</h1>
         </div>
         <div class="row m-t-1-4 m-b-1-4">
-          <div class="col-sm-12 col-md-6 col-lg-3">
+          <div class="col-sm-12 col-md-12 col-lg-12">
             <button
               class="refinery-base btn btn-default"
               ng-click="metadataTable.checkFiles()"
               ng-disabled="!metadataTable.dataFileColumn">
-              Check Availability of Data Files
+              Check Data Files
             </button>
             <button
               class="refinery-base btn btn-primary"
               ng-click="metadataTable.startImport()"
               ng-disabled="importMetadataTableForm.$invalid ||
               metadataTable.areFilesUploading()">
-              Upload Data Set
+              Submit
             </button>
-            </div>
-          <div class="col-sm-12 col-md-6 col-lg-4">
-            <span class="text-warning"
-              ng-if="metadataTable.areFilesInQueue()">
-              <i class="fa fa-warning" aria-hidden="true"></i>
-              All data files have not been uploaded.
-            </span>
-            <span
-              ng-messages="importMetadataTableForm.title.$error"
-              role="alert"
-              class="text-danger">
-              <div ng-message="required">
-                <i class="fa fa-warning" aria-hidden="true"></i>
-                Required: Enter a title.
-              </div>
-              <div ng-message="minlength">
-                <i class="fa fa-warning" aria-hidden="true"></i>
-                Error: Title is too short.
-              </div>
-              <div ng-message="maxlength">
-                <i class="fa fa-warning" aria-hidden="true"></i>
-                Error: Title is too long.
-              </div>
-            </span>
-            <span
-              ng-messages="importMetadataTableForm.source_column_index.$error"
-              role="alert"
-              class="text-danger">
-              <div ng-message="required">
-                <i class="fa fa-warning" aria-hidden="true"></i>
-                Required: Select a Sample Identifier.
-              </div>
-            </span>
-            <span
-              ng-messages="importMetadataTableForm.slug.$error"
-              role="alert"
-              class="text-danger">
-              <div ng-message="pattern">
+            <span class="m-l-1">
+              <span class="text-warning"
+                ng-if="metadataTable.areFilesInQueue()">
                 <i class="fa fa-warning" aria-hidden="true"></i>
-                Invalid URL shortcut, can only contain alphanumeric
-                characters and "_".
+                All data files have not been uploaded.
+              </span>
+              <span
+                ng-messages="importMetadataTableForm.title.$error"
+                role="alert"
+                class="text-danger">
+                <div ng-message="required">
+                  <i class="fa fa-warning" aria-hidden="true"></i>
+                  Required: Enter a title.
+                </div>
+                <div ng-message="minlength">
+                  <i class="fa fa-warning" aria-hidden="true"></i>
+                  Error: Title is too short.
+                </div>
+                <div ng-message="maxlength">
+                  <i class="fa fa-warning" aria-hidden="true"></i>
+                  Error: Title is too long.
+                </div>
+              </span>
+              <span
+                ng-messages="importMetadataTableForm.source_column_index.$error"
+                role="alert"
+                class="text-danger">
+                <div ng-message="required">
+                  <i class="fa fa-warning" aria-hidden="true"></i>
+                  Required: Select a Sample Identifier.
+                </div>
+              </span>
+              <span
+                ng-messages="importMetadataTableForm.slug.$error"
+                role="alert"
+                class="text-danger">
+                <div ng-message="pattern">
+                  <i class="fa fa-warning" aria-hidden="true"></i>
+                  Invalid URL shortcut, can only contain alphanumeric
+                  characters and "_".
+              </span>
             </span>
           </div>
         </div>

refinery/ui/source/styles/refinery-style.less

@@ -926,6 +926,14 @@ a.analysis-header {
   text-transform: uppercase;
 }
 
+.refinery-subheader h1 {
+  display: inline;
+  font-size: @base-font-size * 1.5;
+  color: @gray-light;
+  font-weight: 700;
+  line-height: 1;
+}
+
 .refinery-subheader h2 {
   display: inline;
   font-size: @base-font-size * 1.15;
@@ -1061,7 +1069,7 @@ a.analysis-header {
   right: 0;
 
   &.refinery-spinner-bg {
-    background: rgba(0, 0, 0, 0.1);
+    background: rgba(211,211,211, 0.8);
   }
 
   .refinery-spinner-center {
@@ -1814,3 +1822,9 @@ body.is-screenshot-ready {
 .modal-description {
   border-top: 1px solid #ddd
 }
+
+#metadata-table-form {
+  .nested-list {
+    margin-left: 20px;
+  }
+}