Skip to content

Commit 7715970

Browse files
Luke SikinaLuke-Sikina
Luke Sikina
authored and
Luke-Sikina
committed
[ALS-5832] Add a few modals to data requests tab
1 parent 581ef26 commit 7715970

7 files changed

+154
-28
lines changed

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

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<div id="upload-data-alert">
2+
<div class="row">
3+
<div class="col-md-12" style="margin-bottom: 5px;">
4+
<p>Sending data from PIC-SURE to Service Workbench can take several minutes.</p>
5+
<p>To update the status of your data upload, click the refresh button <i class="fa-solid fa-arrows-rotate"></i></p>
6+
</div>
7+
</div>
8+
<div class="row">
9+
<section id="buttons" style="display: flex; flex-direction: column; align-items: center;">
10+
<button
11+
id="upload-data-alert-ok-btn" class="btn btn-outline tabable"
12+
tabindex="1" type="button" style="width: 100px;"
13+
>
14+
Ok, Got it!
15+
</button>
16+
<div>
17+
<input type="checkbox" id="upload-data-alert-no-remind">
18+
<label for="upload-data-alert-no-remind">Don't show this again.</label>
19+
</div>
20+
</section>
21+
</div>
22+
23+
</div>

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

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
define([
2+
"jquery", "backbone", "handlebars", "underscore",
3+
"text!requestSearch/alertUploadTime.hbs", "common/modal"
4+
], function(
5+
$, BB, HBS, _,
6+
template, modal
7+
){
8+
return BB.View.extend({
9+
initialize : function(handlers){
10+
this.template = HBS.compile(template);
11+
this.handlers = handlers;
12+
},
13+
events: {
14+
"click #upload-data-alert-cancel-btn": "onClose",
15+
"click #upload-data-alert-ok-btn": "onClose",
16+
"click #upload-data-alert-no-remind": "dontRemindMe",
17+
},
18+
onClose: function() {
19+
this.handlers.onClose(this);
20+
},
21+
render: function(){
22+
this.$el.html(this.template(this));
23+
$(".modal-header").css("display", "none");
24+
$(".modal-footer").css("display", "none");
25+
$(".modal-dialog").css("margin-top", "20%");
26+
modal.createTabIndex(); // always do this at end
27+
},
28+
dontRemindMe: function() {
29+
localStorage.setItem("disable-upload-reminder", true);
30+
}
31+
});
32+
});

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

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

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

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
define([
2+
"jquery", "backbone", "handlebars", "underscore",
3+
"text!requestSearch/dataTypesHelp.hbs", "common/modal"
4+
], function(
5+
$, BB, HBS, _,
6+
template, modal
7+
){
8+
return BB.View.extend({
9+
initialize : function(handlers){
10+
this.template = HBS.compile(template);
11+
this.handlers = handlers;
12+
},
13+
events: {
14+
"click #data-types-help-close-btn": "onClose",
15+
},
16+
onClose: function() {
17+
this.handlers.onClose(this);
18+
},
19+
render: function(){
20+
this.$el.html(this.template(this));
21+
modal.createTabIndex(); // always do this at end
22+
}
23+
});
24+
});

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

+6-6
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,8 @@
3636
<i id="data-store-help-button" class="fa-regular fa-circle-question" style="margin-left: 5px;"></i>
3737
</div>
3838
<div class="col-md-4 request-result-header">
39-
<h4 style="display: inline;">Send Data to SWB</h4>
39+
<h4 style="display: inline;">Select &amp; Send Data</h4>
40+
<i id="data-types-help-button" class="fa-regular fa-circle-question" style="margin-left: 5px;"></i>
4041
</div>
4142
<div class="col-md-4 request-result-header">
4243
<h4 style="display: inline;">Status</h4>
@@ -60,16 +61,15 @@
6061
<div style="width: 100%;">
6162
<div>
6263
<input type="checkbox" id="pheno_check" name="pheno_check" {{#if sendPhenoData}}checked{{/if}}>
63-
<label for="pheno_check"><i class="fa-solid fa-notes-medical"></i> Phenotypic Data</label>
64+
<label style="font-weight: normal;" for="pheno_check">Phenotypic data</label>
6465
</div>
6566
<div>
6667
<input type="checkbox" id="geno_check" name="geno_check" {{#if sendGenoData}}checked{{/if}}>
67-
<label for="geno_check"><i class="fa-solid fa-dna"></i> Annotated variant data for selected genes</label>
68+
<label style="font-weight: normal;" for="geno_check">Annotated variant data for selected genes</label>
6869
</div>
6970
</div>
70-
<button id="upload-data-button" class="super-rounded">
71-
<h3 class="fa-solid fa-arrow-up-from-bracket request-result-icon"></h3>
72-
Send patient level data
71+
<button id="upload-data-button" class="btn btn-outline success super-rounded">
72+
Send Data
7373
</button>
7474
</div>
7575
<div class="col-md-4 request-result-header">

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

+41-4
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
define([
22
"backbone", "handlebars",
33
"text!requestSearch/requestSearchResult.hbs",
4-
"common/modal", "dataset/dataset-view", "requestSearch/dataStoreLocationHelp", "requestSearch/verifySendModal"
4+
"common/modal", "dataset/dataset-view", "requestSearch/dataStoreLocationHelp", "requestSearch/verifySendModal",
5+
"requestSearch/alertUploadTime", "requestSearch/dataTypesHelp",
56
], function (
67
BB, HBS,
78
requestSearchResultTemplate,
8-
modal, viewDataset, viewHelp, confirmUpload
9+
modal, viewDataset, viewHelp, confirmUpload,
10+
alertUploadTime, dataTypesHelp
911
) {
1012
var statusIconMapping = {
1113
'Uploaded': 'fa-circle-check',
14+
'Querying': 'fa-magnifying-glass',
15+
'Queued': 'fa-hourglass',
1216
'Unsent': 'fa-circle-xmark',
1317
'Unknown': 'fa-circle-question',
1418
'Error': 'fa-circle-xmark',
@@ -42,6 +46,7 @@ define([
4246
this.uploadData = this.uploadData.bind(this);
4347
this.openVerifySend = this.openVerifySend.bind(this);
4448
this.onDownloadClick = this.onDownloadClick.bind(this);
49+
this.displayAlertThenPopulateStatus = this.displayAlertThenPopulateStatus.bind(this);
4550
this.toggleGeno = this.toggleGeno.bind(this);
4651
this.togglePheno = this.togglePheno.bind(this);
4752
this.model.set("s3Directory", opts.queryResult.id);
@@ -58,6 +63,7 @@ define([
5863
"click .request-result-data-button": "onDownloadClick",
5964
"click #data-request-btn": "openDataRequestModal",
6065
"click #data-store-help-button": "openDataStoreHelp",
66+
"click #data-types-help-button": "openDataTypesHelp",
6167
"click #upload-data-button": "openVerifySend",
6268
"click #refresh-status-btn": "fetchQueryStatus",
6369
"click #pheno_check": "togglePheno",
@@ -112,6 +118,24 @@ define([
112118
this.model.set("homeSite", { site: response.homeSite, display: response.homeDisplay });
113119
this.render();
114120
},
121+
displayAlertThenPopulateStatus(response) {
122+
if (localStorage.getItem("disable-upload-reminder") === 'true') {
123+
this.populateQueryStatus(response);
124+
} else {
125+
const populateQueryStatus = this.populateQueryStatus;
126+
const onClose = (view) => {
127+
$(".close").click();
128+
$("#data-request-btn").focus();
129+
populateQueryStatus(response);
130+
};
131+
modal.displayModal(
132+
new alertUploadTime({ onClose }),
133+
"",
134+
onClose,
135+
{ width: "19%" }
136+
);
137+
}
138+
},
115139
populateQueryStatus(response) {
116140
this.model.set("approved", response.approved);
117141
this.model.set("site", response.site);
@@ -130,7 +154,7 @@ define([
130154
query.picSureId = this.model.get("queryId");
131155
}
132156
var site = this.model.get("selectedSite");
133-
var populateQueryStatus = this.populateQueryStatus;
157+
var displayAlertThenPopulateStatus = this.displayAlertThenPopulateStatus;
134158
$.ajax({
135159
url: window.location.origin + "/picsure/proxy/uploader/upload/" + site + "?dataType=" + dataType,
136160
headers: {
@@ -139,7 +163,7 @@ define([
139163
data: JSON.stringify(query),
140164
contentType: "application/json",
141165
type: "POST",
142-
success: populateQueryStatus,
166+
success: displayAlertThenPopulateStatus,
143167
dataType: "json",
144168
});
145169
},
@@ -203,6 +227,19 @@ define([
203227
{ width: "50%" }
204228
);
205229
},
230+
openDataTypesHelp: function(){
231+
const onClose = (view) => {
232+
$(".close").click();
233+
$("#data-request-btn").focus();
234+
};
235+
236+
modal.displayModal(
237+
new dataTypesHelp({ onClose }),
238+
"Data Types",
239+
onClose,
240+
{ width: "50%" }
241+
);
242+
},
206243
openVerifySend: function(){
207244
const onClose = (view) => {
208245
$(".close").click();

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

+14-18
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,28 @@
11
<div id="upload-data-confirmation">
22
<div class="row">
33
<div class="col-md-12" style="margin-bottom: 5px;">
4-
Are you sure you want to send to {{site}} in folder {{commonAreaID}} for use in Service Workbench?
5-
The following data will be sent:
4+
Are you sure you want to send:
65
<ul>
76
{{#if sendPhenoData}}<li><i class="fa-solid fa-notes-medical"></i> Phenotypic Data</li>{{/if}}
87
{{#if sendGenoData}}<li><i class="fa-solid fa-dna"></i> Variant data for selected genes</li>{{/if}}
98
</ul>
9+
to {{site}} GIC Service Workbench?
1010
</div>
1111
</div>
1212
<div class="row">
13-
<section id="buttons" class="row">
14-
<div class="col-md-6">
15-
<button
13+
<section id="buttons" style="display: flex; justify-content: space-around;">
14+
<button
1615
id="verify-send-modal-cancel-btn" class="btn btn-outline secondary tabable"
17-
tabindex="0" type="button" style="width: 100px;"
18-
>
19-
Cancel
20-
</button>
21-
</div>
22-
<div class="col-md-6">
23-
<button
24-
id="verify-send-modal-send-btn" class="btn btn-outline action tabable"
25-
tabindex="1" type="button" style="width: 100px;"
26-
>
27-
Send
28-
</button>
29-
</div>
16+
tabindex="0" type="button" style="width: 80px;"
17+
>
18+
Cancel
19+
</button>
20+
<button
21+
id="verify-send-modal-send-btn" class="btn btn-outline success tabable"
22+
tabindex="1" type="button" style="width: 80px;"
23+
>
24+
Send
25+
</button>
3026
</section>
3127
</div>
3228

0 commit comments

Comments
 (0)