Skip to content

Commit

Permalink
Returned back preview/export data features
Browse files Browse the repository at this point in the history
  • Loading branch information
@dmytrotsko
dmytrotsko committed Jan 23, 2025
1 parent 969fcde commit fa267bb
Show file tree
Hide file tree
Showing 5 changed files with 233 additions and 12 deletions.
10 changes: 10 additions & 0 deletions src/assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1394,4 +1394,14 @@ h6 {

div.dt-button-collection {
width: 265px!important;
}

.full-width {
width: 100%;
}

#processSelectedSignals {
width: 50%;
margin-left: auto;
margin-right: auto;
}
151 changes: 148 additions & 3 deletions src/assets/js/signal_sets.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
const epiVisUrl = localStorage.getItem("epivis_url");
const dataExportUrl = localStorage.getItem("data_export_url");
const covidCastUrl = localStorage.getItem("covidcast_url");

function initSelect2(elementId, data) {
$(`#${elementId}`).select2({
data: data,
Expand Down Expand Up @@ -35,7 +39,7 @@ document.getElementById('geographic_type').addEventListener("change", (event) =>

let checkedSignalMembers = []

function plotData(epivisUrl) {
function plotData() {
var dataSets = {};

var geographicType = document.getElementById('geographic_type').value;
Expand Down Expand Up @@ -70,7 +74,7 @@ function plotData(epivisUrl) {

var urlParamsEncoded = btoa(`{"datasets":${JSON.stringify(requestParams)}}`);

var linkToEpivis = `${epivisUrl}#${urlParamsEncoded}`
var linkToEpivis = `${epiVisUrl}#${urlParamsEncoded}`
window.open(linkToEpivis, '_blank').focus();
}

Expand All @@ -96,7 +100,7 @@ function addSelectedSignal(element) {
_endpoint: element.dataset.endpoint,
data_source: element.dataset.datasource,
signal: element.dataset.signal,
time_type: element.dataset.timetype,
time_type: element.dataset.timeType,
});
updateSelectedSignals(element.dataset.datasource, element.dataset.signalDisplayname, element.dataset.signalSet, element.dataset.signal);
} else {
Expand Down Expand Up @@ -200,4 +204,145 @@ function format (signalSetId, relatedSignals) {
tableMarkup = "<p>No available signals yet.</p>"
}
return tableMarkup;
}


function exportData() {
var geographicType = document.getElementById('geographic_type').value;
var geographicValues = $('#geographic_value').select2('data').map((el) => (typeof el.id === 'string') ? el.id.toLowerCase() : el.id);
if (geographicType === 'Choose...' || geographicValues.length === 0) {
showWarningAlert("Geographic Type or Geographic Value is not selected.");
return;
}
var startDate = document.getElementById('start_date').value;
var endDate = document.getElementById('end_date').value;

var manualDataExport = "To download data, please click on the link or copy/paste command into your terminal: \n\n"

checkedSignalMembers.forEach((signal) => {
if (signal["time_type"] === "week") {
startDate = getDateYearWeek(new Date(startDate));
endDate = getDateYearWeek(new Date(endDate));
};
var exportUrl = `${dataExportUrl}?signal=${signal["data_source"]}:${signal["signal"]}&start_day=${startDate}&end_day=${endDate}&geo_type=${geographicType}&geo_values=${geographicValues}`;
manualDataExport += `wget --content-disposition <a href="${exportUrl}">${exportUrl}</a>\n`
});
$('#modeSubmitResult').html(manualDataExport);
}

function previewData() {
var geographicType = document.getElementById('geographic_type').value;
var geographicValues = $('#geographic_value').select2('data').map((el) => (typeof el.id === 'string') ? el.id.toLowerCase() : el.id).join(',');
if (geographicType === 'Choose...' || geographicValues.length === 0) {
showWarningAlert("Geographic Type or Geographic Value is not selected.");
return;
}
var previewExample = [];
checkedSignalMembers.forEach((signal) => {
var startDate = document.getElementById("start_date").value;
var endDate = document.getElementById("end_date").value;
if (signal["time_type"] === "week") {
startDate = getDateYearWeek(new Date(startDate));
endDate = getDateYearWeek(new Date(endDate));
};
var requestSent = false;
if (!requestSent) {
$.ajax({
url: covidCastUrl,
type: 'GET',
async: false,
data: {
'time_type': signal["time_type"],
'time_values': `${startDate}--${endDate}`,
'data_source': signal["data_source"],
'signal': signal["signal"],
'geo_type': geographicType,
'geo_values': geographicValues
},
success: function (result) {
if (result["epidata"].length != 0) {
previewExample.push({epidata: result["epidata"][0], result: result["result"], message: result["message"]})
} else {
previewExample.push({epidata: result["epidata"], result: result["result"], message: result["message"]})
}
}
})
}
})
$('#modeSubmitResult').html(JSON.stringify(previewExample, null, 2));
requestSent = true;
}


// Plot/Export/Preview data block

var currentMode = 'preview';

function handleModeChange(mode) {
document.getElementById("dataForm").reset();
$('#geographic_value').empty();
$('#modeSubmitResult').html('');

var choose_dates = document.getElementsByName('choose_date');

if (mode === 'epivis') {
currentMode = 'epivis';
choose_dates.forEach((el) => {
el.style.display = 'none';
});
$('#modeSubmitResult').html('');
} else if (mode === 'export') {
currentMode = 'export';
choose_dates.forEach((el) => {
el.style.display = 'flex';
});
$('#modeSubmitResult').html('');
} else {
currentMode = 'preview';
choose_dates.forEach((el) => {
el.style.display = 'flex';
});
}
document.getElementsByName("modes").forEach((el) => {
if (currentMode === el.value) {
el.checked = true;
}
});
}

function getDateYearWeek(date) {
const currentDate =
(typeof date === 'object') ? date : new Date();
const januaryFirst =
new Date(currentDate.getFullYear(), 0, 1);
const daysToNextMonday =
(januaryFirst.getDay() === 1) ? 0 :
(7 - januaryFirst.getDay()) % 7;
const nextMonday =
new Date(currentDate.getFullYear(), 0,
januaryFirst.getDate() + daysToNextMonday);

var weekNumber = (currentDate < nextMonday) ? 52 :
(currentDate > nextMonday ? Math.ceil(
(currentDate - nextMonday) / (24 * 3600 * 1000) / 7) : 1);

if (weekNumber < 10) {
weekNumber = `0${weekNumber}`;
}

const year = currentDate.getFullYear()

return `${year}${weekNumber}`;
}

function submitMode(event) {
event.preventDefault();

if (currentMode === 'epivis') {
plotData();
} else if (currentMode === 'export') {
exportData();
} else {
previewData();
}
}
2 changes: 2 additions & 0 deletions src/signal_sets/views.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,8 @@ def get_context_data(self, **kwargs: Any) -> dict[str, Any]:
context["url_params_dict"] = url_params_dict
context["url_params_str"] = url_params_str
context["epivis_url"] = settings.EPIVIS_URL
context["data_export_url"] = settings.DATA_EXPORT_URL
context["covidcast_url"] = settings.COVIDCAST_URL
context["form"] = SignalSetFilterForm(initial=url_params_dict)
context["filter"] = SignalSetFilter(
self.request.GET, queryset=self.get_queryset()
Expand Down
10 changes: 10 additions & 0 deletions src/staticfiles/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1394,4 +1394,14 @@ h6 {

div.dt-button-collection {
width: 265px!important;
}

.full-width {
width: 100%;
}

#processSelectedSignals {
width: 50%;
margin-left: auto;
margin-right: auto;
}
72 changes: 63 additions & 9 deletions src/templates/signal_sets/signal_sets.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -375,7 +375,28 @@ <h5 class="modal-title" id="selectedSignalsModalLabel">Selected signals</h5>

</div>
<div class="modal-footer">
<div class="row">
<form class="margin-top-1rem full-width" id="dataForm" onsubmit="submitMode(event)">
<div class="row">
<div class="col-2">
<label class="form-label">
Select Mode:
</label>
</div>
<div class="col-10">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="modes" id="preview" value="preview" checked>
<label class="form-check-label" for="preview">Preview data</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="modes" id="epivis" value="epivis">
<label class="form-check-label" for="epivis">Plot data</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="modes" id="export" value="export">
<label class="form-check-label" for="export">Export data</label>
</div>
</div>
</div>
<div class="row margin-top-1rem">
<div class="col-2">
<label for="geographic_type" class="form-label"
Expand All @@ -399,8 +420,35 @@ <h5 class="modal-title" id="selectedSignalsModalLabel">Selected signals</h5>
<select id="geographic_value" name="geographic_value" class="form-select" multiple="multiple"></select>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" id="plotSelectedSignals" data-mdb-ripple-init>Show plot</button>
<div class="row margin-top-1rem" name="choose_date">
<div class="col-2">
<label for="start_date" class="form-label">
Start Date:
</label>
</div>
<div class="col-10">
<input type="date" class="form-control" id="start_date" name="start_date" value="2016-01-01">
</div>
</div>
<div class="row margin-top-1rem" name="choose_date">
<div class="col-2">
<label for="end_date" class="form-label">
End Date:
</label>
</div>
<div class="col-10">
<input type="date" class="form-control" id="end_date" name="end_date" value="2029-01-01">
</div>
</div>
<div class="row">
<button type="submit" id="processSelectedSignals" value="Submit" class="btn btn-primary margin-top-1rem" data-mdb-ripple-init>
Submit
</button>
</div>
<div class="row margin-top-1rem">
<pre class="margin-top-1rem"><code id="modeSubmitResult"></code></pre>
</div>
</form>
</div>
</div>
</div>
Expand All @@ -413,18 +461,17 @@ <h5 class="modal-title" id="selectedSignalsModalLabel">Selected signals</h5>

<script src="{% static 'js/signal_sets.js' %}"></script>
<script>
const epivisUrl = "{{ epivis_url }}";
localStorage.setItem("epivis_url", "{{ epivis_url }}");
localStorage.setItem("data_export_url", "{{ data_export_url }}");
localStorage.setItem("covidcast_url", "{{ covidcast_url }}");


var geoValues = {{ geographic_granularities|safe }};
var relatedSignals = JSON.parse(JSON.stringify({{ related_signals|safe }}));

$(document).ready(function () {
initSelect2('location_search', geoValues);
table.columns.adjust()

var plotSelectedSignals = document.getElementById('plotSelectedSignals');
plotSelectedSignals.addEventListener('click', function() {
plotData(epivisUrl);
});
})

// Add event listener for opening and closing details
Expand All @@ -449,6 +496,13 @@ <h5 class="modal-title" id="selectedSignalsModalLabel">Selected signals</h5>
document.getElementById('filterSignalSetsForm').reset();
});

document.getElementsByName('modes').forEach((el) => {
el.addEventListener('change', (event) => {
currentMode = event.target.value;
handleModeChange(currentMode);
});
});


</script>
{% endblock %}

0 comments on commit fa267bb

Please sign in to comment.