[ALS-5832] Add a few modals to data requests tab

Author: Luke Sikina

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>
@@ -60,16 +61,15 @@
                 <div style="width: 100%;">
                     <div>
                         <input type="checkbox" id="pheno_check" name="pheno_check" {{#if sendPhenoData}}checked{{/if}}>
-                        <label for="pheno_check"><i class="fa-solid fa-notes-medical"></i> Phenotypic Data</label>
+                        <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 for="geno_check"><i class="fa-solid fa-dna"></i> Annotated variant data for selected genes</label>
+                        <label style="font-weight: normal;" for="geno_check">Annotated variant data for selected genes</label>
                     </div>
                 </div>
-                <button id="upload-data-button" class="super-rounded">
-                    <h3 class="fa-solid fa-arrow-up-from-bracket request-result-icon"></h3>
-                    Send patient level data
+                <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',
@@ -42,6 +46,7 @@ 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);
@@ -58,6 +63,7 @@ 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",
@@ -112,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);
@@ -130,7 +154,7 @@ define([
             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 + "?dataType=" + dataType,
             headers: {
@@ -139,7 +163,7 @@ define([
             data: JSON.stringify(query),
             contentType: "application/json",
             type: "POST",
-            success: populateQueryStatus,
+            success: displayAlertThenPopulateStatus,
             dataType: "json",
         });
     },
@@ -203,6 +227,19 @@ 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();

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

@@ -1,32 +1,28 @@
 <div id="upload-data-confirmation">
     <div class="row">
         <div class="col-md-12" style="margin-bottom: 5px;">
-            Are you sure you want to send to {{site}} in folder {{commonAreaID}} for use in Service Workbench?
-            The following data will be sent:
+            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>