Release master

ui/src/main/webapp/picsureui/requestSearch/alertUploadTime.hbs

@@ -0,0 +1,23 @@
+<div id="upload-data-alert">
+    <div class="row">
+        <div class="col-md-12" style="margin-bottom: 5px;">
+            <p>Sending data from PIC-SURE to Service Workbench can take several minutes.</p>
+            <p>To update the status of your data upload, click the refresh button <i class="fa-solid fa-arrows-rotate"></i></p>
+        </div>
+    </div>
+    <div class="row">
+        <section id="buttons" style="display: flex; flex-direction: column; align-items: center;">
+            <button
+                    id="upload-data-alert-ok-btn" class="btn btn-outline tabable"
+                    tabindex="1" type="button" style="width: 100px;"
+            >
+                Ok, Got it!
+            </button>
+            <div>
+                <input type="checkbox" id="upload-data-alert-no-remind">
+                <label for="upload-data-alert-no-remind">Don't show this again.</label>
+            </div>
+        </section>
+    </div>
+
+</div>

ui/src/main/webapp/picsureui/requestSearch/alertUploadTime.js

@@ -0,0 +1,32 @@
+define([
+    "jquery", "backbone", "handlebars", "underscore",
+    "text!requestSearch/alertUploadTime.hbs", "common/modal"
+], function(
+    $, BB, HBS, _,
+    template, modal
+){
+    return BB.View.extend({
+        initialize : function(handlers){
+            this.template = HBS.compile(template);
+            this.handlers = handlers;
+        },
+        events: {
+            "click #upload-data-alert-cancel-btn": "onClose",
+            "click #upload-data-alert-ok-btn": "onClose",
+            "click #upload-data-alert-no-remind": "dontRemindMe",
+        },
+        onClose: function() {
+            this.handlers.onClose(this);
+        },
+        render: function(){
+            this.$el.html(this.template(this));
+            $(".modal-header").css("display", "none");
+            $(".modal-footer").css("display", "none");
+            $(".modal-dialog").css("margin-top", "20%");
+            modal.createTabIndex(); // always do this at end
+        },
+        dontRemindMe: function() {
+            localStorage.setItem("disable-upload-reminder", true);
+        }
+    });
+});

ui/src/main/webapp/picsureui/requestSearch/dataTypesHelp.hbs

@@ -0,0 +1,14 @@
+<div id="data-types-help">
+    <ul>
+        <li>
+            <b>Phenotypic Data: </b>Clinical data, electronic health record information
+        </li>
+        <li>
+            <b>Annotated variant data for selected genes: </b>The annotated variant data is sourced from the combined,
+            annotated VCF and represents the patient cohort selected by the applied genomic and clinical filters. The
+            original sample VCFs have been annotated using the Ensembl Variant Effect Predictor (VEP) to provide
+            additional annotations and determine the effects of each variant. Modifier variants have been removed.
+            To learn more visit the <a href="https://pic-sure.gitbook.io/genomic-information-commons/pic-sure-features/variant-explorer">User Guide</a>.
+        </li>
+    </ul>
+</div>

ui/src/main/webapp/picsureui/requestSearch/dataTypesHelp.js

@@ -0,0 +1,24 @@
+define([
+    "jquery", "backbone", "handlebars", "underscore",
+    "text!requestSearch/dataTypesHelp.hbs", "common/modal"
+], function(
+    $, BB, HBS, _,
+    template, modal
+){
+    return BB.View.extend({
+        initialize : function(handlers){
+            this.template = HBS.compile(template);
+            this.handlers = handlers;
+        },
+        events: {
+            "click #data-types-help-close-btn": "onClose",
+        },
+        onClose: function() {
+            this.handlers.onClose(this);
+        },
+        render: function(){
+            this.$el.html(this.template(this));
+            modal.createTabIndex(); // always do this at end
+        }
+    });
+});

ui/src/main/webapp/picsureui/requestSearch/requestSearchResult.hbs

@@ -36,7 +36,8 @@
                 <i id="data-store-help-button" class="fa-regular fa-circle-question" style="margin-left: 5px;"></i>
             </div>
             <div class="col-md-4 request-result-header">
-                <h4 style="display: inline;">Send Data to SWB</h4>
+                <h4 style="display: inline;">Select &amp; Send Data</h4>
+                <i id="data-types-help-button" class="fa-regular fa-circle-question" style="margin-left: 5px;"></i>
             </div>
             <div class="col-md-4 request-result-header">
                 <h4 style="display: inline;">Status</h4>
@@ -57,9 +58,18 @@
                 {{/if}}
             </div>
             <div class="col-md-4 request-result-header">
-                <button id="upload-data-button" class="super-rounded" {{#if disableUpload}}disabled="disabled"{{/if}}>
-                    <h3 class="fa-solid fa-arrow-up-from-bracket request-result-icon"></h3>
-                    Send patient level data
+                <div style="width: 100%;">
+                    <div>
+                        <input type="checkbox" id="pheno_check" name="pheno_check" {{#if sendPhenoData}}checked{{/if}}>
+                        <label style="font-weight: normal;" for="pheno_check">Phenotypic data</label>
+                    </div>
+                    <div>
+                        <input type="checkbox" id="geno_check" name="geno_check" {{#if sendGenoData}}checked{{/if}}>
+                        <label style="font-weight: normal;" for="geno_check">Annotated variant data for selected genes</label>
+                    </div>
+                </div>
+                <button id="upload-data-button" class="btn btn-outline success super-rounded">
+                    Send Data
                 </button>
             </div>
             <div class="col-md-4 request-result-header">

ui/src/main/webapp/picsureui/requestSearch/requestSearchResult.js

@@ -1,14 +1,18 @@
 define([
   "backbone", "handlebars",
   "text!requestSearch/requestSearchResult.hbs",
-  "common/modal", "dataset/dataset-view", "requestSearch/dataStoreLocationHelp", "requestSearch/verifySendModal"
+  "common/modal", "dataset/dataset-view", "requestSearch/dataStoreLocationHelp", "requestSearch/verifySendModal",
+  "requestSearch/alertUploadTime", "requestSearch/dataTypesHelp",
 ], function (
   BB, HBS,
   requestSearchResultTemplate,
-  modal, viewDataset, viewHelp, confirmUpload
+  modal, viewDataset, viewHelp, confirmUpload,
+  alertUploadTime, dataTypesHelp
 ) {
   var statusIconMapping = {
     'Uploaded': 'fa-circle-check',
+    'Querying': 'fa-magnifying-glass',
+    'Queued': 'fa-hourglass',
     'Unsent': 'fa-circle-xmark',
     'Unknown': 'fa-circle-question',
     'Error': 'fa-circle-xmark',
@@ -26,7 +30,8 @@ define([
         display: "",
       },
       requesterEmail: "Unknown",
-      disableUpload: "true",
+      sendGenoData: false,
+      sendPhenoData: false,
     },
   });
   var requestSearchResultView = BB.View.extend({
@@ -41,6 +46,9 @@ define([
       this.uploadData = this.uploadData.bind(this);
       this.openVerifySend = this.openVerifySend.bind(this);
       this.onDownloadClick = this.onDownloadClick.bind(this);
+      this.displayAlertThenPopulateStatus = this.displayAlertThenPopulateStatus.bind(this);
+      this.toggleGeno = this.toggleGeno.bind(this);
+      this.togglePheno = this.togglePheno.bind(this);
       this.model.set("s3Directory", opts.queryResult.id);
       this.model.set("queryStartDate", opts.queryResult.date);
       this.model.set("queryId", opts.queryResult.uuid);
@@ -55,14 +63,23 @@ define([
       "click .request-result-data-button": "onDownloadClick",
       "click #data-request-btn": "openDataRequestModal",
       "click #data-store-help-button": "openDataStoreHelp",
+      "click #data-types-help-button": "openDataTypesHelp",
       "click #upload-data-button": "openVerifySend",
       "click #refresh-status-btn": "fetchQueryStatus",
+      "click #pheno_check": "togglePheno",
+      "click #geno_check": "toggleGeno",
       "input #query-approved": "approveQueryForUpload",
       "change #site-select": "setSite"
     },
     reset: function () {
       this.model.clear().set(this.model.defaults);
     },
+    togglePheno() {
+        this.model.set('sendPhenoData', !this.model.get('sendPhenoData'))
+    },
+    toggleGeno() {
+        this.model.set('sendGenoData', !this.model.get('sendGenoData'))
+    },
     fetchQueryStatus() {
         var queryID = this.model.get("commonAreaID");
         if (!queryID) {
@@ -101,6 +118,24 @@ define([
         this.model.set("homeSite", { site: response.homeSite, display: response.homeDisplay });
         this.render();
     },
+    displayAlertThenPopulateStatus(response) {
+        if (localStorage.getItem("disable-upload-reminder") === 'true') {
+            this.populateQueryStatus(response);
+        } else {
+            const populateQueryStatus = this.populateQueryStatus;
+            const onClose = (view) => {
+              $(".close").click();
+              $("#data-request-btn").focus();
+              populateQueryStatus(response);
+            };
+            modal.displayModal(
+              new alertUploadTime({ onClose }),
+              "",
+              onClose,
+              { width: "19%" }
+            );
+        }
+    },
     populateQueryStatus(response) {
         this.model.set("approved", response.approved);
         this.model.set("site", response.site);
@@ -109,28 +144,26 @@ define([
         this.model.set("phenotypicStatus", response.phenotypic);
         this.model.set("phenotypicStatusIcon", statusIconMapping[response.phenotypic]);
 
-        // Enable upload if neither geno/pheno are Uploaded or Uploading
-        this.model.set("disableUpload", (response.phenotypic  + response.genomic).includes("Upload"));
         this.render();
     },
-    uploadData() {
+    uploadData(dataType) {
         var query = this.model.get("queryData").query;
         query.picSureId = this.model.get("commonAreaID");
         if (!query.picSureId) {
             // support queries not made in common area
             query.picSureId = this.model.get("queryId");
         }
         var site = this.model.get("selectedSite");
-        var populateQueryStatus = this.populateQueryStatus;
+        var displayAlertThenPopulateStatus = this.displayAlertThenPopulateStatus;
         $.ajax({
-            url: window.location.origin + "/picsure/proxy/uploader/upload/" + site,
+            url: window.location.origin + "/picsure/proxy/uploader/upload/" + site + "?dataType=" + dataType,
             headers: {
               Authorization: "Bearer " + JSON.parse(sessionStorage.getItem("session")).token,
             },
             data: JSON.stringify(query),
             contentType: "application/json",
             type: "POST",
-            success: populateQueryStatus,
+            success: displayAlertThenPopulateStatus,
             dataType: "json",
         });
     },
@@ -194,20 +227,43 @@ define([
           { width: "50%" }
       );
     },
+    openDataTypesHelp: function(){
+      const onClose = (view) => {
+        $(".close").click();
+        $("#data-request-btn").focus();
+      };
+
+      modal.displayModal(
+          new dataTypesHelp({ onClose }),
+          "Data Types",
+          onClose,
+          { width: "50%" }
+      );
+    },
     openVerifySend: function(){
       const onClose = (view) => {
         $(".close").click();
         $("#data-request-btn").focus();
       };
-      const onSend = this.uploadData;
+      const upload = this.uploadData;
       const data = {
         datasetUUID: this.model.get("queryId"),
         commonAreaID: this.model.get("commonAreaID"),
         site: this.model.get("site"),
+        sendPhenoData: this.model.get('sendPhenoData'),
+        sendGenoData: this.model.get('sendGenoData'),
+      };
+      const onSend = function () {
+        if (data.sendGenoData) {
+          upload("Genomic");
+        }
+        if (data.sendPhenoData) {
+          upload("Phenotypic");
+        }
       };
 
       modal.displayModal(
-          new confirmUpload({ onClose, onSend }),
+          new confirmUpload({ onClose, onSend }, data),
           "",
           onClose,
           { width: "19%" }

ui/src/main/webapp/picsureui/requestSearch/verifySendModal.hbs

@@ -1,28 +1,28 @@
 <div id="upload-data-confirmation">
     <div class="row">
-        <div class="col-md-12" style="margin-bottom: 5px; text-align: center;">
-            Are you sure you want to send {{datasetUUID}}
-            to {{site}} in folder {{commonAreaID}} for use in Service Workbench?
+        <div class="col-md-12" style="margin-bottom: 5px;">
+            Are you sure you want to send:
+            <ul>
+                {{#if sendPhenoData}}<li><i class="fa-solid fa-notes-medical"></i> Phenotypic Data</li>{{/if}}
+                {{#if sendGenoData}}<li><i class="fa-solid fa-dna"></i> Variant data for selected genes</li>{{/if}}
+            </ul>
+            to {{site}} GIC Service Workbench?
         </div>
     </div>
     <div class="row">
-        <section id="buttons" class="row">
-            <div class="col-md-6">
-                <button
+        <section id="buttons" style="display: flex; justify-content: space-around;">
+            <button
                     id="verify-send-modal-cancel-btn" class="btn btn-outline secondary tabable"
-                    tabindex="0" type="button" style="width: 100px;"
-                >
-                    Cancel
-                </button>
-            </div>
-            <div class="col-md-6">
-                <button
-                    id="verify-send-modal-send-btn" class="btn btn-outline action tabable"
-                    tabindex="1" type="button" style="width: 100px;"
-                >
-                    Send
-                </button>
-            </div>
+                    tabindex="0" type="button" style="width: 80px;"
+            >
+                Cancel
+            </button>
+            <button
+                    id="verify-send-modal-send-btn" class="btn btn-outline success tabable"
+                    tabindex="1" type="button" style="width: 80px;"
+            >
+                Send
+            </button>
         </section>
     </div>
 

ui/src/main/webapp/picsureui/requestSearch/verifySendModal.js

@@ -6,9 +6,10 @@ define([
     template, modal
 ){
     return BB.View.extend({
-        initialize : function(handlers){
+        initialize : function(handlers, state){
             this.template = HBS.compile(template);
             this.handlers = handlers;
+            Object.assign(this, state);
         },
         events: {
             "click #verify-send-modal-cancel-btn": "onClose",