Skip to content

Commit 6caf3d4

Browse files
s-paquettes-paquette
authored
Merge pull request #428 from ImagingDataCommons/sprint-12-mt
Dialog for export cohort manifest and Banner for available cloud credit
2 parents 21d6080 + 44382fc commit 6caf3d4

File tree

7 files changed

+325
-12
lines changed

7 files changed

+325
-12
lines changed

‎static/css/style.css‎

Lines changed: 23 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎static/js/cohorts/cohort-details.js‎

Lines changed: 121 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -55,28 +55,137 @@ require([
5555
], function($, jqueryui, base, tippy, bootstrap) {
5656
A11y.Core();
5757

58+
tippy('.manifest-size-warning',{
59+
content: 'Your cohort is too large to be downloaded in its entirety, and will be truncated at 65,000 records ' +
60+
'ordered by PatientID, StudyID, SeriesID, and InstanceID.',
61+
theme: 'light',
62+
placement: 'left',
63+
arrow: false
64+
});
65+
5866
var downloadToken = new Date().getTime();
59-
$('#download-manifest').prop("href", $('#download-manifest').prop("href") + "?downloadToken="+downloadToken);
60-
$('#download-manifest').data('downloadToken',downloadToken);
6167

62-
$('#download-manifest').on('click', function() {
63-
var self=$(this);
68+
$('#download-csv').on('click', function(e) {
69+
download_manifest("csv", $(this), e)
70+
});
71+
72+
$('#download-tsv').on('click', function(e) {
73+
download_manifest("tsv", $(this), e)
74+
});
75+
76+
$('#download-json').on('click', function(e) {
77+
download_manifest("json", $(this), e)
78+
});
79+
80+
var download_manifest = function(file_type, clicked_button, e) {
81+
$('#unallowed-chars-alert').hide();
82+
$('#name-too-long-alert-modal').hide();
83+
84+
var name = $('#export-manifest-name').val();
85+
var unallowed = (name.match(base.blacklist) || []);
86+
87+
if (name.length == 0) {
88+
$('#download-csv').prop('title','Please input the name.');
89+
$('#export-manifest-name')[0].focus();
90+
e.preventDefault();
91+
return false;
92+
}
6493

65-
self.attr('disabled','disabled');
94+
if (clicked_button.is('[disabled=disabled]')) {
95+
e.preventDefault();
96+
return false;
97+
}
98+
99+
if (unallowed.length > 0) {
100+
$('.unallowed-chars').text(unallowed.join(", "));
101+
$('#unallowed-chars-alert').show();
102+
e.preventDefault();
103+
return false;
104+
}
105+
106+
if (name.length > 255) {
107+
$('#name-too-long-alert-modal').show();
108+
e.preventDefault();
109+
return false;
110+
}
111+
112+
$('#export-manifest-form').submit();
113+
114+
$('#download-csv').attr('disabled','disabled');
115+
$('#download-tsv').attr('disabled','disabled');
116+
$('#download-json').attr('disabled','disabled');
66117

67118
$('#download-in-progress').modal('show');
68119

69120
base.blockResubmit(function() {
70-
self.removeAttr('disabled');
121+
$('#download-csv').removeAttr('disabled');
122+
$('#download-tsv').removeAttr('disabled');
123+
$('#download-json').removeAttr('disabled');
71124
$('#download-in-progress').modal('hide');
72125
},downloadToken, 'downloadToken');
126+
127+
var checked_fields = [];
128+
$('.field-checkbox').each(function()
129+
{
130+
var cb = $(this)[0];
131+
if (cb.checked)
132+
{
133+
checked_fields.push(cb.value);
134+
}
135+
});
136+
137+
var checked_columns = [];
138+
$('.column-checkbox').each(function()
139+
{
140+
var cb = $(this)[0];
141+
if (cb.checked)
142+
{
143+
checked_columns.push(cb.value);
144+
}
145+
});
146+
147+
var url = BASE_URL + '/cohorts/download_manifest/' + cohort_id + '/';
148+
url += ("?file_type=" + file_type);
149+
url += ("&file_name=" + name);
150+
url += ("&header_fields=" + JSON.stringify(checked_fields));
151+
url += ("&columns=" + JSON.stringify(checked_columns));
152+
url += ("&downloadToken=" + downloadToken);
153+
154+
location.href = url;
155+
};
156+
157+
$('.column-checkbox').change(function() {
158+
update_download_manifest_buttons();
73159
});
74160

75-
tippy('.manifest-size-warning',{
76-
content: 'Your cohort is too large to be downloaded in its entirety, and will be truncated at 65,000 records ' +
77-
'ordered by PatientID, StudyID, SeriesID, and InstanceID.',
78-
theme: 'light',
79-
placement: 'left',
80-
arrow: false
161+
$("#export-manifest-name").change(function(){
162+
update_download_manifest_buttons();
81163
});
164+
165+
var update_download_manifest_buttons = function(){
166+
var num_selected_column =$('.column-checkbox:checked').length;
167+
var input_cohort_name_len = $('#export-manifest-name').val().length;
168+
169+
if (input_cohort_name_len == 0 || num_selected_column == 0) {
170+
$('#download-csv').attr('disabled', 'disabled');
171+
$('#download-tsv').attr('disabled', 'disabled');
172+
$('#download-json').attr('disabled', 'disabled');
173+
}
174+
else
175+
{
176+
$('#download-csv').removeAttr('disabled');
177+
$('#download-tsv').removeAttr('disabled');
178+
$('#download-json').removeAttr('disabled');
179+
}
180+
181+
if (num_selected_column == 0) {
182+
$('#no-column-alert-modal').show();
183+
}
184+
else
185+
{
186+
$('#no-column-alert-modal').hide();
187+
}
188+
};
189+
190+
update_download_manifest_buttons();
82191
});

‎static/js/image_search.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2605,6 +2605,11 @@ require([
26052605
console.debug("Load pending complete.");
26062606
cohort_loaded = true;
26072607
$('input[type="checkbox"]').prop("disabled", "disabled");
2608+
2609+
// Do not disable checkboxes for export manifest dialog
2610+
$('.field-checkbox').removeAttr('disabled');
2611+
$('.column-checkbox').removeAttr('disabled');
2612+
26082613
$('div.ui-slider').siblings('button').prop('disabled', 'disabled');
26092614
$('input#hide-zeros').prop("disabled", "");
26102615
$('input#hide-zeros').prop("checked", true);

‎templates/cohorts/cohort_details.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,14 @@ <h3 class="pull-left" role="heading" aria-level="1">Cohort Name: {{ cohort.name
4343
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
4444
<div class="cohort-manifest pull-right">
4545
<div class="manifest-size-warning"><i class="fa fa-warning"></i></div>
46+
<button id="export-manifest" class="btn btn-special pull-right" data-toggle="modal"
47+
data-target="#export-manifest-modal"> Export Cohort Manifest
48+
</button>
49+
<!--
4650
<a id="download-manifest" class="btn btn-default pull-right" title="Download this cohort's manifest." href="{% url 'cohort_manifest' cohort.id %}">
4751
Download Cohort Manifest
4852
</a>
53+
-->
4954
</div>
5055
</div>
5156
</div>
@@ -64,6 +69,7 @@ <h3 class="pull-left" role="heading" aria-level="1">Cohort Name: {{ cohort.name
6469

6570
{% with is_cohort=True %}
6671
{% include "idc/explore_data_core.html" %}
72+
{% include "cohorts/export-manifest-modal.html" %}
6773
{% endwith %}
6874

6975
<!-- Download In Progress Modal -->
@@ -87,6 +93,7 @@ <h3 class="pull-left" role="heading" aria-level="1">Cohort Name: {{ cohort.name
8793
var is_cohort = true;
8894
var collection_tooltips = {{ collection_tooltips|safe }};
8995
var cohort_version = "{{ cohort_version|safe }}";
96+
var cohort_id = "{{ cohort_id|safe }}";
9097
</script>
9198
<script type="text/javascript" src="{% static 'js/libs/d3.v5.min.js' %}"></script>
9299
{{ block.super }}

‎templates/cohorts/export-manifest-modal.html‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
<!-- Export Manifest Modal -->
2+
<div class="modal fade" id="export-manifest-modal" tabindex="-1" role="dialog" aria-labelledby="exportManifestModal" aria-hidden="true">
3+
<div class="modal-dialog">
4+
<div class="modal-content">
5+
<div class="modal-header">
6+
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
7+
<h4 class="modal-title" id="exportManifestModal">Export Cohort Manifest</h4>
8+
<div class="modal-js-messages" id="export-manifest-modal-js-messages">
9+
<div id="unallowed-chars-alert" class="alert alert-warning alert-dismissable" style="display: none;">
10+
<button type="button" class="close" data-hide="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
11+
Your manifest file's name contains invalid characters (<span class="unallowed-chars"></span>). Please remove them before exporting.
12+
</div>
13+
<div id="name-too-long-alert-modal" class="alert alert-warning alert-dismissable" style="display: none;">
14+
<button type="button" class="close" data-hide="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
15+
Your manifest file's name must be no more than 255 characters long.
16+
</div>
17+
<div id="no-column-alert-modal" class="alert alert-warning alert-dismissable" style="display: none;">
18+
<button type="button" class="close" data-hide="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
19+
At least one column needs to be selected to export manifest file.
20+
</div>
21+
</div>
22+
</div>
23+
24+
<form id="export-manifest-form">
25+
<div class="modal-body">
26+
<div class="form-group">
27+
<!-- Name -->
28+
<div>
29+
<label for="export-manifest-name">Name</label>
30+
<input class="form-control" type="text" id="export-manifest-name" name="name" value="{{ cohort.name }}_{{ cohort.id }}_{% now "Ymd_Gis" %}" required />
31+
</div>
32+
<br>
33+
34+
<!-- Header Fields -->
35+
<div class="export-manifest-group__heading">
36+
<a role="button" data-toggle="collapse" href="#header-fields" aria-expanded="false" aria-controls="header-fields" class="collapsed">
37+
<i class="fa fa-caret-right"></i> Header Fields
38+
</a>
39+
</div>
40+
<div id="header-fields" class="collapse">
41+
<li class="checkbox"><label>
42+
<input class="field-checkbox" type="checkbox" value="cohort_name" checked>
43+
<span class="value">Cohort Name</span>
44+
</label></li>
45+
46+
<li class="checkbox"><label>
47+
<input class="field-checkbox" type="checkbox" value="user_email" checked>
48+
<span class="value">User Email</span>
49+
</label></li>
50+
51+
<li class="checkbox"><label>
52+
<input class="field-checkbox" type="checkbox" value="cohort_filters" checked>
53+
<span class="value">Cohort Filters</span>
54+
</label></li>
55+
56+
<li class="checkbox"><label>
57+
<input class="field-checkbox" type="checkbox" value="timestamp" checked>
58+
<span class="value">Date Generated</span>
59+
</label></li>
60+
61+
<li class="checkbox"><label>
62+
<input class="field-checkbox" type="checkbox" value="total_records" checked>
63+
<span class="value">Total Records</span>
64+
</label></li>
65+
</div>
66+
<br>
67+
68+
<!-- Columns -->
69+
<div class="export-manifest-group__heading">
70+
<a role="button" data-toggle="collapse" href="#columns" aria-expanded="false" aria-controls="header-fields" class="collapsed">
71+
<i class="fa fa-caret-right"></i> Columns
72+
</a>
73+
</div>
74+
<div id="columns" class="collapse">
75+
<li class="checkbox"><label>
76+
<input class="column-checkbox" type="checkbox" value="PatientID" checked>
77+
<span class="value">Patient ID</span>
78+
</label></li>
79+
80+
<li class="checkbox"><label>
81+
<input class="column-checkbox" type="checkbox" value="collection_id" checked>
82+
<span class="value">Collection ID</span>
83+
</label></li>
84+
85+
<li class="checkbox"><label>
86+
<input class="column-checkbox" type="checkbox" value="StudyInstanceUID" checked>
87+
<span class="value">Study Instance UID</span>
88+
</label></li>
89+
90+
<li class="checkbox"><label>
91+
<input class="column-checkbox" type="checkbox" value="SeriesInstanceUID" checked>
92+
<span class="value">Series Instance UID</span>
93+
</label></li>
94+
95+
<li class="checkbox"><label>
96+
<input class="column-checkbox" type="checkbox" value="SOPInstanceUID" checked>
97+
<span class="value">SOP Instance UID</span>
98+
</label></li>
99+
100+
<li class="checkbox"><label>
101+
<input class="column-checkbox" type="checkbox" value="source_DOI" checked>
102+
<span class="value">Source DOI</span>
103+
</label></li>
104+
105+
<li class="checkbox"><label>
106+
<input class="column-checkbox" type="checkbox" value="crdc_instance_uuid" checked>
107+
<span class="value">CRDC Instance UUID</span>
108+
</label></li>
109+
110+
<li class="checkbox"><label>
111+
<input class="column-checkbox" type="checkbox" value="gcs_path" checked>
112+
<span class="value">GCS URL </span>
113+
</label></li>
114+
</div>
115+
</div>
116+
</div>
117+
118+
<div class="modal-footer">
119+
{% csrf_token %}
120+
<a id="download-csv" class="btn btn-primary" title="Download this cohort's manifest in CSV format.">
121+
Download CSV
122+
</a>
123+
<a id="download-tsv" class="btn btn-primary " title="Download this cohort's manifest in TSV format.">
124+
Download TSV
125+
</a>
126+
<a id="download-json" class="btn btn-primary " title="Download this cohort's manifest in JSON format.">
127+
Download JSON
128+
</a>
129+
</div>
130+
</form>
131+
</div>
132+
</div>
133+
</div>

‎templates/idc/explore.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,24 @@
3535
{% block page_header %}
3636
<div class="pf-heading">
3737
<div class="container-fluid">
38+
<div class="banner-section row">
39+
<div class="alert alert-dismissible show" role="alert">
40+
<div class="row ">
41+
<div class="col-xs-1"></div>
42+
<div class="col-xs-10">
43+
<strong>Get started today!</strong>
44+
<strong> Contact us about setting up your own Google Cloud Platform Project with <a
45+
href="https://learn.canceridc.dev/introduction/requesting-gcp-cloud-credits"
46+
target="_blank">free cloud credits</a></strong>
47+
</div>
48+
<div class="col-xs-1">
49+
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
50+
<span aria-hidden="true">&times;</span>
51+
</button>
52+
</div>
53+
</div>
54+
</div>
55+
</div>
3856
{# THIS NEEDS TO BE MOVED OR REFORMATTED TO PROPERLY FLOW WITH THE REST OF THE PAGE HEADER #}
3957
{# <ol class="breadcrumb">#}
4058
{# <li id="previous" style="display:none"><a href="#" onclick="javascript:selectHistoricFilter(-1)">Previous Filter</a></li>#}

0 commit comments

Comments
 (0)