From 3ab6c6616a15c75ebdf80b2dbb0073951ffbba9b Mon Sep 17 00:00:00 2001 From: Dorin Manase Date: Tue, 26 Apr 2016 17:08:32 -0400 Subject: [PATCH 1/7] Moved to new template with tabbed interface --- server/static/style.css | 98 ++++++--- server/static/upload.js | 14 +- server/templates/home.html | 406 ++++++++++++++++++++++--------------- 3 files changed, 315 insertions(+), 203 deletions(-) diff --git a/server/static/style.css b/server/static/style.css index 091bd40..7036d9a 100644 --- a/server/static/style.css +++ b/server/static/style.css @@ -1,5 +1,54 @@ /* Downloaded from: https://github.com/23/resumable.js/blob/master/samples/Node.js/public/style.css */ +/* Move down content because we have a fixed navbar that is 50px tall */ +body { + padding-top: 50px; +} + +/* + * Global add-ons + */ + +.sub-header { + padding-bottom: 10px; + border-bottom: 1px solid #eee; +} + +/* + * Top navigation + * Hide default border to remove 1px line. + */ +.navbar-fixed-top { + border: 0; +} + +.tab-label, +.tab-label:hover { + color: black; +} + +.main, +.sample-table { + margin-top: 30px; +} + +.step-header { + margin-top: 15px; + margin-bottom: 15px; +} + +.step-description { + text-align: justify; + margin-bottom: 10px; +} + +@media (min-width: 768px) { + .footer-row { + padding-right: 40px; + padding-left: 40px; + } +} + /* Reset */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin: 0; @@ -91,8 +140,7 @@ body { text-align: left; } -.dcc-table, -.sample-table, +.main, .cancel-upload, .pause-upload { display: none; @@ -160,11 +208,11 @@ th.header.files, th.header.option, th.header.progress { text-align: center; } -.sample-header-row { - background-color: #f5f5f5; +.table-striped>tbody>tr.sample-header-row { + background-color: #eeeeee; } -.sample-header-row:hover { +.table-striped>tbody>tr.sample-header-row:hover { background-color: #dadada; } @@ -403,21 +451,7 @@ input.error { } .logout { - margin-top: 68px; - padding: 0; - display: none; -} - -.logout-button { - color: black; - background-color: #eee; - border-color: #ddd; -} - -.logout-button:hover { - color: black; - background-color: #dadada; - border-color: #a2a2a2; + font-size: 14px; } /* Add Sample */ @@ -439,7 +473,15 @@ p.error-description { } .start-upload, -.modal-add-sample-button { +.modal-add-sample-button, +.modal-add-files-button { + width: 120px; +} + +.modal-add-files-button { + color: #2e6da4; + background-color: #fff; + border-color: #2e6da4; width: 120px; } @@ -460,14 +502,14 @@ p.error-description { } /* Uploader: Drag & Drop */ -.resumable-error { +.flow-error { display: none; font-size: 14px; font-style: italic; margin-top: 40px; } -.resumable-droparea { +.flow-droparea { padding: 60px 0; margin-top: 20px; font-size: 16px; @@ -480,17 +522,17 @@ p.error-description { display: none; } -.resumable-dragging { +.flow-dragging { color: white; background-color: rgba(51, 51, 51, 0.61); border: 2px solid #999; } -.resumable-dragging * { +.flow-dragging * { pointer-events: none; } -.resumable-browse u { +.flow-browse u { cursor: pointer; } @@ -505,12 +547,12 @@ p.error-description { } /* Uploader: Progress bar */ -#resumable-progress-template, +#flow-progress-template, .file-error-template { display: none; } -.resumable-progress { +.flow-progress { margin: 10px 0; width: 100%; height: 30px; diff --git a/server/static/upload.js b/server/static/upload.js index 9f26a04..870ecea 100644 --- a/server/static/upload.js +++ b/server/static/upload.js @@ -51,7 +51,7 @@ $(function () { }; function toggleDropArea(toggle) { - $(this).toggleClass('resumable-dragging', toggle); + $(this).toggleClass('flow-dragging', toggle); } function activateDropArea() { @@ -102,7 +102,7 @@ $(function () { $('.transfer-symbol').removeClass('glyphicon-log-in').addClass('glyphicon-ok-sign'); $('#auth-token').prop('disabled', true).closest('.form-group').removeClass('has-error'); $('.auth-success').addClass('disabled'); - $('.sample-table, .dcc-table').show(); + $('.main').show(); $('.transfer-code-invalid').hide(); $('.logout').show(); getSampleDataFromServer('complete', $('.dcc-table')); @@ -450,9 +450,9 @@ $(function () { permanentErrors: [400, 403, 404, 415, 500, 501] }); - flow.assignBrowse($('.resumable-browse')); + flow.assignBrowse($('.flow-browse')); - flow.assignDrop($('.resumable-droparea')); + flow.assignDrop($('.flow-droparea')); flow.on('fileAdded', function (flowFile) { var sampleName = $('#add-sample-name').val(); @@ -522,7 +522,7 @@ $(function () { flow.on('complete', function () { }); - $('.resumable-droparea').on({ + $('.flow-droparea').on({ 'dragenter': activateDropArea, 'dragleave': deactivateDropArea, 'dragend': deactivateDropArea, @@ -550,7 +550,7 @@ $(function () { validateField.call(this, reLibrary); }); $('#add-sample-modal').on('fieldValidation', function(e) { - $('.resumable-droparea').toggle($(this).find('.has-error').length === 0); + $('.flow-droparea').toggle($(this).find('.has-error').length === 0); }); $('#edit-sample-modal, #edit-file-modal').on('fieldValidation', function(e) { $('.save-edit-button').prop('disabled', $(this).find('.has-error').length); @@ -633,7 +633,7 @@ $(function () { $('#add-sample-modal').modal('show'); $('#add-sample-name').val(sampleName).prop('disabled', true); validateField.call($('#add-sample-name'), reSampleName); - $('.resumable-droparea').show(); + $('.flow-droparea').show(); //prevents bubbling of click event to .sample-collapse parent return false; }); diff --git a/server/templates/home.html b/server/templates/home.html index 37ee276..db86b9a 100644 --- a/server/templates/home.html +++ b/server/templates/home.html @@ -1,6 +1,6 @@ - + @@ -10,15 +10,38 @@ -

Upload files to the DCC

+ +
- -
-
+ +
+
Oh no! Your browser isn't supported. Please try a recent version of Chrome or Firefox.
-
+
@@ -35,106 +58,213 @@
-
- -
- -
-
-
- - - Select Samples for Upload -
-
-

- To start uploading your files hit the Add Sample button. You will be required to - provide a sample name and specify all applicable metadata for the sample you wish to upload. - You may also alter sample and individual metadata options after attaching your files. Sample - name, readset, and library must be composed solely of letters, numbers, hyphens, and/or - underscores to ensure compatibility with downstream pipelines. -

-
- +
+
+ + + + + +
+
+
+

Upload Files to the DCC

+ +
+
+

1. Select samples

+
+ + To start uploading sample/patient specific files, such as .fastq or .bam, click + the button below. Each sample should contain all the files pertaining to the + sequenced individual. You will be required to provide a sample name and specify + all applicable metadata for the sample you wish to upload. + +
+
+ +
+
+
+

2. Additional files

+
+ + For non-sample related files that are necessary for your pipeline or + downstream analysis, such as capture kit BED files, references, or variant + files, click the button below. These files will be available to all samples + when choosing details about the analysis pipeline you would like to run. + +
+
+ +
+
+
+

3. Provide metadata

+
+ + Having complete and accurate metadata will help to ensure compatibility with + downstream pipelines and help automate manifest creation. All metadata can be + edited per file or for all files within a sample by clicking on the edit icon. + Please ensure that you have indicated the appropriate readset for each file + within a sample. + +
+
+
+

4. Upload files

+
+ + Once you have selected all your files and provided their respective metadata, + you can begin uploading your files by click the button below. Once the upload of + all files is complete you will be able to view and manage them on the Manage + tab. Any files that fail to upload will be left in the table below and you may + choose to retry the upload. + +
+
+ + +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FilesFile TypeReadsetPlatformRun TypeCapture KitLibraryReferenceStatusOptions
+ + + + + + +
+
+ 		+ + +
+
+
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FilesFile TypeReadsetPlatformRun TypeCapture KitLibraryReferenceStatusOptions
- - - - - - -
-
- 		- - -
-
- - +
+

Files on the DCC

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FilesFile TypeReadsetPlatformRun TypeCapture KitLibraryReference
+ + + +
+
+
+
...
@@ -201,9 +331,9 @@

Sample Metadata

-
+
Drop files here or - +
@@ -442,70 +572,8 @@

Upload Complete

- -
-
-
- - - Uploaded Samples on the DCC -
-
-

- The samples below have been successfully uploaded to the DCC. -

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FilesFile TypeReadsetPlatformRun TypeCapture KitLibraryReferenceStatusOptions
- - - -
-
- 		-
-
-
-
- -
+
If you have any questions or run into issues, please email Orion <buske@cs.toronto.edu> @@ -515,6 +583,8 @@

Upload Complete

+ +