From 0f730d72d0f58b190c70541e27af465bfb96708a Mon Sep 17 00:00:00 2001
From: Dmytro Trotsko <dmytrotsko@gmail.com>
Date: Wed, 29 May 2024 18:41:02 +0300
Subject: [PATCH] OKRS24-107 Fixed data preview feature. Now it user choose
 params to generate preview link instead of getting that link from the
 database.

---
 ...ck.html => data_visualization_export.html} | 107 ++++++++++++++----
 src/templates/signals/signal_detail.html      |  43 +------
 2 files changed, 87 insertions(+), 63 deletions(-)
 rename src/templates/signals/{epivis_export_data_block.html => data_visualization_export.html} (67%)

diff --git a/src/templates/signals/epivis_export_data_block.html b/src/templates/signals/data_visualization_export.html
similarity index 67%
rename from src/templates/signals/epivis_export_data_block.html
rename to src/templates/signals/data_visualization_export.html
index 1801a07..3334862 100644
--- a/src/templates/signals/epivis_export_data_block.html
+++ b/src/templates/signals/data_visualization_export.html
@@ -3,11 +3,9 @@ <h5>Plot / Export data</h5>
     <div class="row">
         <div class="card">
             <div class="card-body">
-                <form class="margin-top-1rem" onsubmit="submitMode(event)" id="epivis-form">
+                <form class="margin-top-1rem" onsubmit="submitMode(event)" id="dataForm">
 
-                    <div class="alert alert-warning alert-dismissible fade show" role="alert" id="warning-alert">
-                        <strong>Holy guacamole!</strong> You should check in on some of those fields below.
-                    </div>
+                    <div class="alert alert-warning alert-dismissible fade show" role="alert" id="warning-alert"></div>
 
                     <div class="row">
                         <div class="col-2">
@@ -17,14 +15,18 @@ <h5>Plot / Export data</h5>
                         </div>
                         <div class="col-10">
                             <div class="form-check form-check-inline">
-                                    <input class="form-check-input" type="radio" name="modes" id="epivis" value="epivis" checked>
-                                    <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>
+                                <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">
@@ -73,7 +75,19 @@ <h5>Plot / Export data</h5>
                             <select id="geographic_value" name="geographic_value" class="form-select" multiple="multiple"></select>
                         </div>
                     </div>
-                    <div class="row margin-top-1rem" name="choose_date" style="display: none;">
+                    <div class="row margin-top-1rem" id="timeTypeDiv">
+                        <div class="col-2">
+                            <label for="time_type" class="form-label">
+                                Time Type:
+                            </label>
+                        </div>
+                        <div class="col-10">
+                            <select id="time_type" name="time_type" class="form-select" disabled>
+                                <option selected>{{ signal.time_type }}</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="row margin-top-1rem" name="choose_date">
                         <div class="col-2">
                             <label for="start_date" class="form-label">
                                 Start Date:
@@ -83,7 +97,7 @@ <h5>Plot / Export data</h5>
                             <input type="date" class="form-control" id="start_date" name="start_date">
                         </div>
                     </div>
-                    <div class="row margin-top-1rem" name="choose_date" style="display: none;">
+                    <div class="row margin-top-1rem" name="choose_date">
                         <div class="col-2">
                             <label for="end_date" class="form-label">
                                 End Date:
@@ -98,6 +112,9 @@ <h5>Plot / Export data</h5>
                             Submit
                         </button>
                     </div>
+                    <div class="row margin-top-1rem">
+                        <pre class="margin-top-1rem"><code id="modeSubmitResult"></code></pre>
+                    </div>
                 </form>
             </div>
         </div>
@@ -105,7 +122,7 @@ <h5>Plot / Export data</h5>
 </section>
 <script>
     var geoValues = [];
-    var currentMode = 'epivis';
+    var currentMode = 'preview';
 
     function getFilteredGeographicValues(geographicType) {
         var data = geoValues.reduce((data, geoValue) => {
@@ -124,7 +141,6 @@ <h5>Plot / Export data</h5>
         } else {
             maximumSelectionLength = 10;
         }
-
         if (geographicType) {
             var data = getFilteredGeographicValues(geographicType);
         } else {
@@ -141,23 +157,38 @@ <h5>Plot / Export data</h5>
 
     document.getElementById('geographic_type').addEventListener("change", (event) => {
         $('#geographic_value').empty();
+        $('#modeSubmitResult').html('');
         initGeographicValueSelect(currentMode, event.target.value);
     })
 
     function handleModeChange(mode) {
-        document.getElementById("epivis-form").reset();
+        document.getElementById("dataForm").reset();
+        $('#geographic_value').empty();
+        $('#modeSubmitResult').html('');
 
         var choose_dates = document.getElementsByName('choose_date');
+        var time_type = document.getElementById('timeTypeDiv');
+
         if (mode === 'epivis') {
             currentMode = 'epivis';
             choose_dates.forEach((el) => {
                 el.style.display = 'none';
             });
-        } else {
+            $('#modeSubmitResult').html('');
+            time_type.style.display = 'none';
+        } else if (mode === 'export') {
             currentMode = 'export';
             choose_dates.forEach((el) => {
                 el.style.display = 'flex';
             });
+            $('#modeSubmitResult').html('');
+            time_type.style.display = 'none';
+        } else {
+            currentMode = 'preview';
+            choose_dates.forEach((el) => {
+                el.style.display = 'flex';
+            });
+            time_type.style.display = 'flex';
         }
         document.getElementsByName("modes").forEach((el) => {
             if (currentMode === el.value) {
@@ -168,10 +199,9 @@ <h5>Plot / Export data</h5>
 
     document.getElementsByName('modes').forEach((el) => {
         el.addEventListener('change', (event) => {
-            $('#geographic_value').empty();
             currentMode = event.target.value;
-            initGeographicValueSelect(event.target.value)
-            handleModeChange(event.target.value);
+            initGeographicValueSelect(currentMode)
+            handleModeChange(currentMode);
         });
     });
 
@@ -221,7 +251,7 @@ <h5>Plot / Export data</h5>
 
             epiVisUrl += `#${urlParamsEncoded}`;
             window.open(epiVisUrl, '_blank').focus();
-        } else {
+        } else if (currentMode === 'export') {
             var startDate = document.getElementById('start_date').value;
             var endDate = document.getElementById('end_date').value;
 
@@ -233,7 +263,42 @@ <h5>Plot / Export data</h5>
             }
 
             dataExportUrl += `?signal=${dataSource}:${dataSignal}&start_day=${startDate}&end_day=${endDate}&geo_type=${geographicType}&geo_values=${geographicValue}`;
+            $('#modeSubmitResult').html(`Manually fetch data: \n\nwget --content-disposition "${dataExportUrl}"`);
             window.open(dataExportUrl, '_blank').focus();
+        } else {
+            var timeType = document.getElementById('time_type').value;
+
+            var startDate = document.getElementById('start_date').value.replaceAll('-', '');
+            var endDate = document.getElementById('end_date').value.replaceAll('-', '');
+
+            var requestSent = false;
+
+            if (!requestSent) {
+                $.ajax({
+                    url: 'https://api.covidcast.cmu.edu/epidata/covidcast/',
+                    type: 'GET',
+                    data: {
+                        'time_type': timeType,
+                        'time_values': `${startDate}-${endDate}`,
+                        'data_source': dataSource,
+                        'signal': dataSignal,
+                        'geo_type': geographicType,
+                        'geo_values': geographicValue
+                    },
+                    success: function (result) {
+                        // Update the page with the response data.
+                        // This depends on the structure of your response data.
+                        // For example, if the response data is a string:
+                        if (result["epidata"].length > 1) {
+                            result = { epidata: result["epidata"].slice(0, 3), result: result["result"], message: result["message"] }
+                        } else {
+                            result = { epidata: result["epidata"], result: result["result"], message: result["message"] }
+                        }
+                        $('#modeSubmitResult').html(library.json.prettyPrint(result));
+                    }
+                });
+                requestSent = true;
+            };
         }
     }
 
diff --git a/src/templates/signals/signal_detail.html b/src/templates/signals/signal_detail.html
index 1d1b400..d7f0b1c 100644
--- a/src/templates/signals/signal_detail.html
+++ b/src/templates/signals/signal_detail.html
@@ -207,24 +207,7 @@ <h5>About this signal</h5>
                 </div>
             </div>
         </section>
-        {% if signal.example_url != '' %}
-            <h5>Response Example</h5>
-            <section class="section">
-                <div class="row">
-                    <div class="card">
-                        <div class="card-body">
-                            <div class="row margin-top-1rem">
-                                <p>Example URL:</p>
-                                <span>{{ signal.example_url }}</span>
-                                <button type="button" class="btn btn-primary margin-top-1rem" id="show-response">Show response</button>
-                                <pre class="margin-top-1rem"><code id="example-response" class="hidden"></code></pre>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </section>
-        {% endif %}
-        {% include "signals/epivis_export_data_block.html"%}
+        {% include "signals/data_visualization_export.html"%}
         <h5>Related links</h5>
         <section class="section">
             <div class="row">
@@ -286,30 +269,6 @@ <h5>Related links</h5>
                 }
             };
 
-            var requestSent = false;
-
-            $(document).ready(function () {
-                $("#show-response").click(function () {
-                    if (!requestSent) {
-                        $.ajax({
-                            url: '{{ signal.example_url|safe }}',
-                            type: 'GET',
-                            success: function (result) {
-                                // Update the page with the response data.
-                                // This depends on the structure of your response data.
-                                // For example, if the response data is a string:
-                                if (result["epidata"].length > 5) {
-                                    result = { epidata: result["epidata"].slice(0, 5), result: result["result"], message: result["message"] }
-                                }
-                                $('#example-response').html(library.json.prettyPrint(result));
-                            }
-                        });
-                        requestSent = true;
-                    };
-                    $("#example-response").toggleClass("hidden");
-                });
-            });
-
             function readMore(button) {
                 var truncatedText = document.querySelector(".overview");
                 var fullText = document.querySelector(".full-text");