Returned back preview/export data features

dmytrotsko · dmytrotsko · commit fa267bb87a51 · 2025-01-23T17:37:34.000+02:00
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
@@ -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;
 }
diff --git a/src/assets/js/signal_sets.js b/src/assets/js/signal_sets.js
@@ -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,
@@ -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;
@@ -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();
 }
 
@@ -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 {
@@ -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();
+    }
 }
diff --git a/src/signal_sets/views.py b/src/signal_sets/views.py
@@ -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()
diff --git a/src/staticfiles/css/style.css b/src/staticfiles/css/style.css
@@ -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;
 }
diff --git a/src/templates/signal_sets/signal_sets.html b/src/templates/signal_sets/signal_sets.html
@@ -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"
@@ -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>
@@ -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
@@ -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 %}
