Skip to content

Commit 47ac730

Browse files
dmytrotskodmytrotsko
authored
Merge pull request #129 from cmu-delphi/OKRS24-207
OKRS24-107
2 parents eb1d6fd + 0f730d7 commit 47ac730

File tree

2 files changed

+87
-63
lines changed

2 files changed

+87
-63
lines changed

‎src/templates/signals/epivis_export_data_block.html renamed to ‎src/templates/signals/data_visualization_export.html

+86-21
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,9 @@ <h5>Plot / Export data</h5>
33
<div class="row">
44
<div class="card">
55
<div class="card-body">
6-
<form class="margin-top-1rem" onsubmit="submitMode(event)" id="epivis-form">
6+
<form class="margin-top-1rem" onsubmit="submitMode(event)" id="dataForm">
77

8-
<div class="alert alert-warning alert-dismissible fade show" role="alert" id="warning-alert">
9-
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
10-
</div>
8+
<div class="alert alert-warning alert-dismissible fade show" role="alert" id="warning-alert"></div>
119

1210
<div class="row">
1311
<div class="col-2">
@@ -17,14 +15,18 @@ <h5>Plot / Export data</h5>
1715
</div>
1816
<div class="col-10">
1917
<div class="form-check form-check-inline">
20-
<input class="form-check-input" type="radio" name="modes" id="epivis" value="epivis" checked>
21-
<label class="form-check-label" for="epivis">Plot data</label>
22-
</div>
23-
<div class="form-check form-check-inline">
24-
<input class="form-check-input" type="radio" name="modes" id="export" value="export">
25-
<label class="form-check-label" for="export">Export data</label>
26-
</div>
18+
<input class="form-check-input" type="radio" name="modes" id="preview" value="preview" checked>
19+
<label class="form-check-label" for="preview">Preview data</label>
20+
</div>
21+
<div class="form-check form-check-inline">
22+
<input class="form-check-input" type="radio" name="modes" id="epivis" value="epivis">
23+
<label class="form-check-label" for="epivis">Plot data</label>
2724
</div>
25+
<div class="form-check form-check-inline">
26+
<input class="form-check-input" type="radio" name="modes" id="export" value="export">
27+
<label class="form-check-label" for="export">Export data</label>
28+
</div>
29+
</div>
2830
</div>
2931
<div class="row margin-top-1rem">
3032
<div class="col-2">
@@ -73,7 +75,19 @@ <h5>Plot / Export data</h5>
7375
<select id="geographic_value" name="geographic_value" class="form-select" multiple="multiple"></select>
7476
</div>
7577
</div>
76-
<div class="row margin-top-1rem" name="choose_date" style="display: none;">
78+
<div class="row margin-top-1rem" id="timeTypeDiv">
79+
<div class="col-2">
80+
<label for="time_type" class="form-label">
81+
Time Type:
82+
</label>
83+
</div>
84+
<div class="col-10">
85+
<select id="time_type" name="time_type" class="form-select" disabled>
86+
<option selected>{{ signal.time_type }}</option>
87+
</select>
88+
</div>
89+
</div>
90+
<div class="row margin-top-1rem" name="choose_date">
7791
<div class="col-2">
7892
<label for="start_date" class="form-label">
7993
Start Date:
@@ -83,7 +97,7 @@ <h5>Plot / Export data</h5>
8397
<input type="date" class="form-control" id="start_date" name="start_date">
8498
</div>
8599
</div>
86-
<div class="row margin-top-1rem" name="choose_date" style="display: none;">
100+
<div class="row margin-top-1rem" name="choose_date">
87101
<div class="col-2">
88102
<label for="end_date" class="form-label">
89103
End Date:
@@ -98,14 +112,17 @@ <h5>Plot / Export data</h5>
98112
Submit
99113
</button>
100114
</div>
115+
<div class="row margin-top-1rem">
116+
<pre class="margin-top-1rem"><code id="modeSubmitResult"></code></pre>
117+
</div>
101118
</form>
102119
</div>
103120
</div>
104121
</div>
105122
</section>
106123
<script>
107124
var geoValues = [];
108-
var currentMode = 'epivis';
125+
var currentMode = 'preview';
109126

110127
function getFilteredGeographicValues(geographicType) {
111128
var data = geoValues.reduce((data, geoValue) => {
@@ -124,7 +141,6 @@ <h5>Plot / Export data</h5>
124141
} else {
125142
maximumSelectionLength = 10;
126143
}
127-
128144
if (geographicType) {
129145
var data = getFilteredGeographicValues(geographicType);
130146
} else {
@@ -141,23 +157,38 @@ <h5>Plot / Export data</h5>
141157

142158
document.getElementById('geographic_type').addEventListener("change", (event) => {
143159
$('#geographic_value').empty();
160+
$('#modeSubmitResult').html('');
144161
initGeographicValueSelect(currentMode, event.target.value);
145162
})
146163

147164
function handleModeChange(mode) {
148-
document.getElementById("epivis-form").reset();
165+
document.getElementById("dataForm").reset();
166+
$('#geographic_value').empty();
167+
$('#modeSubmitResult').html('');
149168

150169
var choose_dates = document.getElementsByName('choose_date');
170+
var time_type = document.getElementById('timeTypeDiv');
171+
151172
if (mode === 'epivis') {
152173
currentMode = 'epivis';
153174
choose_dates.forEach((el) => {
154175
el.style.display = 'none';
155176
});
156-
} else {
177+
$('#modeSubmitResult').html('');
178+
time_type.style.display = 'none';
179+
} else if (mode === 'export') {
157180
currentMode = 'export';
158181
choose_dates.forEach((el) => {
159182
el.style.display = 'flex';
160183
});
184+
$('#modeSubmitResult').html('');
185+
time_type.style.display = 'none';
186+
} else {
187+
currentMode = 'preview';
188+
choose_dates.forEach((el) => {
189+
el.style.display = 'flex';
190+
});
191+
time_type.style.display = 'flex';
161192
}
162193
document.getElementsByName("modes").forEach((el) => {
163194
if (currentMode === el.value) {
@@ -168,10 +199,9 @@ <h5>Plot / Export data</h5>
168199

169200
document.getElementsByName('modes').forEach((el) => {
170201
el.addEventListener('change', (event) => {
171-
$('#geographic_value').empty();
172202
currentMode = event.target.value;
173-
initGeographicValueSelect(event.target.value)
174-
handleModeChange(event.target.value);
203+
initGeographicValueSelect(currentMode)
204+
handleModeChange(currentMode);
175205
});
176206
});
177207

@@ -221,7 +251,7 @@ <h5>Plot / Export data</h5>
221251

222252
epiVisUrl += `#${urlParamsEncoded}`;
223253
window.open(epiVisUrl, '_blank').focus();
224-
} else {
254+
} else if (currentMode === 'export') {
225255
var startDate = document.getElementById('start_date').value;
226256
var endDate = document.getElementById('end_date').value;
227257

@@ -233,7 +263,42 @@ <h5>Plot / Export data</h5>
233263
}
234264

235265
dataExportUrl += `?signal=${dataSource}:${dataSignal}&start_day=${startDate}&end_day=${endDate}&geo_type=${geographicType}&geo_values=${geographicValue}`;
266+
$('#modeSubmitResult').html(`Manually fetch data: \n\nwget --content-disposition "${dataExportUrl}"`);
236267
window.open(dataExportUrl, '_blank').focus();
268+
} else {
269+
var timeType = document.getElementById('time_type').value;
270+
271+
var startDate = document.getElementById('start_date').value.replaceAll('-', '');
272+
var endDate = document.getElementById('end_date').value.replaceAll('-', '');
273+
274+
var requestSent = false;
275+
276+
if (!requestSent) {
277+
$.ajax({
278+
url: 'https://api.covidcast.cmu.edu/epidata/covidcast/',
279+
type: 'GET',
280+
data: {
281+
'time_type': timeType,
282+
'time_values': `${startDate}-${endDate}`,
283+
'data_source': dataSource,
284+
'signal': dataSignal,
285+
'geo_type': geographicType,
286+
'geo_values': geographicValue
287+
},
288+
success: function (result) {
289+
// Update the page with the response data.
290+
// This depends on the structure of your response data.
291+
// For example, if the response data is a string:
292+
if (result["epidata"].length > 1) {
293+
result = { epidata: result["epidata"].slice(0, 3), result: result["result"], message: result["message"] }
294+
} else {
295+
result = { epidata: result["epidata"], result: result["result"], message: result["message"] }
296+
}
297+
$('#modeSubmitResult').html(library.json.prettyPrint(result));
298+
}
299+
});
300+
requestSent = true;
301+
};
237302
}
238303
}
239304

‎src/templates/signals/signal_detail.html

+1-42
Original file line numberDiff line numberDiff line change
@@ -207,24 +207,7 @@ <h5>About this signal</h5>
207207
</div>
208208
</div>
209209
</section>
210-
{% if signal.example_url != '' %}
211-
<h5>Response Example</h5>
212-
<section class="section">
213-
<div class="row">
214-
<div class="card">
215-
<div class="card-body">
216-
<div class="row margin-top-1rem">
217-
<p>Example URL:</p>
218-
<span>{{ signal.example_url }}</span>
219-
<button type="button" class="btn btn-primary margin-top-1rem" id="show-response">Show response</button>
220-
<pre class="margin-top-1rem"><code id="example-response" class="hidden"></code></pre>
221-
</div>
222-
</div>
223-
</div>
224-
</div>
225-
</section>
226-
{% endif %}
227-
{% include "signals/epivis_export_data_block.html"%}
210+
{% include "signals/data_visualization_export.html"%}
228211
<h5>Related links</h5>
229212
<section class="section">
230213
<div class="row">
@@ -286,30 +269,6 @@ <h5>Related links</h5>
286269
}
287270
};
288271

289-
var requestSent = false;
290-
291-
$(document).ready(function () {
292-
$("#show-response").click(function () {
293-
if (!requestSent) {
294-
$.ajax({
295-
url: '{{ signal.example_url|safe }}',
296-
type: 'GET',
297-
success: function (result) {
298-
// Update the page with the response data.
299-
// This depends on the structure of your response data.
300-
// For example, if the response data is a string:
301-
if (result["epidata"].length > 5) {
302-
result = { epidata: result["epidata"].slice(0, 5), result: result["result"], message: result["message"] }
303-
}
304-
$('#example-response').html(library.json.prettyPrint(result));
305-
}
306-
});
307-
requestSent = true;
308-
};
309-
$("#example-response").toggleClass("hidden");
310-
});
311-
});
312-
313272
function readMore(button) {
314273
var truncatedText = document.querySelector(".overview");
315274
var fullText = document.querySelector(".full-text");

0 commit comments

Comments
 (0)