From b406ea6c7a146da72ffa3c5aa029b9abd02b1823 Mon Sep 17 00:00:00 2001
From: Dmytro Trotsko <dmytrotsko@gmail.com>
Date: Thu, 16 May 2024 19:33:56 +0300
Subject: [PATCH 1/2] OKRS24-198 Added init data export feature.

---
 src/assets/css/custom.css                     |   4 +
 src/signal_documentation/settings.py          |   1 +
 src/signals/views.py                          |   1 +
 src/templates/signals/epivis_block.html       | 124 ----------
 .../signals/epivis_export_data_block.html     | 211 ++++++++++++++++++
 src/templates/signals/signal_detail.html      |   2 +-
 6 files changed, 218 insertions(+), 125 deletions(-)
 delete mode 100644 src/templates/signals/epivis_block.html
 create mode 100644 src/templates/signals/epivis_export_data_block.html

diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css
index 9b9a22f..86de63b 100644
--- a/src/assets/css/custom.css
+++ b/src/assets/css/custom.css
@@ -115,6 +115,10 @@
     border: none!important;
 }
 
+.select2-container--default .select2-selection--multiple {
+    border: none!important;
+}
+
 .select2-container--default .select2-selection--single .select2-selection__arrow {
     display: none!important;
 }
diff --git a/src/signal_documentation/settings.py b/src/signal_documentation/settings.py
index e7d5ff0..77521fe 100644
--- a/src/signal_documentation/settings.py
+++ b/src/signal_documentation/settings.py
@@ -24,6 +24,7 @@
 from sentry_sdk.integrations.redis import RedisIntegration
 
 EPIVIS_URL = "https://deploy-preview-36--cmu-delphi-epivis.netlify.app/"
+DATA_EXPORT_URL = "https://api.covidcast.cmu.edu/epidata/covidcast/csv"
 
 SENTRY_DSN = os.environ.get('SENTRY_DSN')
 if SENTRY_DSN:
diff --git a/src/signals/views.py b/src/signals/views.py
index de4f8f0..52d34d8 100644
--- a/src/signals/views.py
+++ b/src/signals/views.py
@@ -102,6 +102,7 @@ def get_context_data(self, **kwargs) -> Dict[str, Any]:
 
         context: Dict[str, Any] = super().get_context_data(**kwargs)
         context["epivis_url"] = settings.EPIVIS_URL
+        context["data_export_url"] = settings.DATA_EXPORT_URL
         return context
 
 
diff --git a/src/templates/signals/epivis_block.html b/src/templates/signals/epivis_block.html
deleted file mode 100644
index 5543868..0000000
--- a/src/templates/signals/epivis_block.html
+++ /dev/null
@@ -1,124 +0,0 @@
-<h5>Plot data</h5>
-<section class="section">
-    <div class="row">
-        <div class="card">
-            <div class="card-body">
-                <form class="margin-top-1rem" onsubmit="generateEpiVisLink(event)" id="epivis-form">
-                    <div class="row">
-                        <div class="col-2">
-                            <label for="source" class="form-label"
-                                >Data Source:</label
-                            >
-                        </div>
-                        <div class="col-10">
-                            <select id="source" name="source" class="form-select" disabled>
-                                <option selected>{{ signal.source.name }}</option>
-                            </select>
-                        </div>
-                    </div>
-                    <div class="row margin-top-1rem">
-                        <div class="col-2">
-                            <label for="signal" class="form-label"
-                                >Data Signal:</label
-                            >
-                        </div>
-                        <div class="col-10">
-                            <select id="signal" name="signal" class="form-select" disabled>
-                                <option selected>{{ signal.name }}</option>
-                            </select>
-                        </div>
-                    </div>
-                    <div class="row margin-top-1rem">
-                        <div class="col-2">
-                            <label for="geographic_type" class="form-label"
-                                >Geographic Type:</label
-                            >
-                        </div>
-                        <div class="col-10">
-                            <select id="geographic_type" name="geographic_type" class="form-select">
-                                <option selected>Choose...</option>
-                                {% for geography in signal.available_geography.all %}
-                                <option>{{ geography }}</option>
-                                {% endfor %}
-                            </select>
-                        </div>
-                    </div>
-                    <div class="row margin-top-1rem">
-                        <div class="col-2">
-                            <label for="geographic_value" class="col-form-label">Geographic Value:</label>
-                        </div>
-                        <div class="col-10">
-                            <select id="geographic_value" name="geographic_value" class="form-select select-responsive"></select>
-                        </div>
-                      </div>
-                    <div class="row">
-                        <button type="submit" value="Submit" class="btn btn-primary margin-top-1rem" id="show-chart">
-                            Show plot
-                        </button>
-                    </div>
-                </form>
-            </div>
-        </div>
-    </div>
-</section>
-<script>
-    $(document).ready(function () {
-        $('#geographic_value').select2({
-            ajax: {
-                url: '{% url 'geography_units_api' %}',
-                dataType: 'json',
-                data: function (params) {
-                    var geographic_type = document.getElementById('geographic_type');
-                    return {
-                        geography__name: geographic_type.value,
-                        term: params.term,
-                        limit: 50
-                    };
-                },
-                processResults: function (data) {
-                    return {
-                        results: $.map(data.results, function (item) {
-                            if (typeof item.geo_id === 'string') {
-                                return {
-                                    text: item.display_name,
-                                    id: item.geo_id.toLowerCase()
-                                }
-                            } else {
-                                return {
-                                    text: item.display_name,
-                                    id: item.geo_id
-                                }
-                            }
-                        })
-                    };
-                }
-            },
-            minimumInputLength: 1
-        });
-    });
-
-    document.getElementById('geographic_type').addEventListener("change", (event) => {
-        $('#geographic_value').val(null).trigger('change');
-    })
-
-
-    function generateEpiVisLink(event) {
-        event.preventDefault();
-        var dataSource = document.getElementById('source').value;
-        var dataSignal = document.getElementById('signal').value;
-
-        var geographicType = document.getElementById('geographic_type').value;
-        var geographicValue = document.getElementById('geographic_value').value;
-
-        var urlParamsEncoded = btoa(`{"datasets":[{"color":"#415742","title":"value","params":{"_endpoint":"covidcast","data_source":"${dataSource}","signal":"${dataSignal}","time_type":"day","geo_type":"${geographicType}","geo_value":"${geographicValue}"}}]}`);
-
-        var epiVisUrl = "{{ epivis_url }}";
-
-        if (geographicType === 'Choose...' || geographicValue === '') {
-            window.open(epiVisUrl, '_blank').focus();
-        } else {
-            epiVisUrl += `#${urlParamsEncoded}`;
-            window.open(epiVisUrl, '_blank').focus();
-        }
-    }
-</script>
diff --git a/src/templates/signals/epivis_export_data_block.html b/src/templates/signals/epivis_export_data_block.html
new file mode 100644
index 0000000..0511aae
--- /dev/null
+++ b/src/templates/signals/epivis_export_data_block.html
@@ -0,0 +1,211 @@
+<h5>Plot / Export data</h5>
+<section class="section">
+    <div class="row">
+        <div class="card">
+            <div class="card-body">
+                <form class="margin-top-1rem" onsubmit="submitMode(event)" id="epivis-form">
+                    <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="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>
+                            </div>
+                    </div>
+                    <div class="row margin-top-1rem">
+                        <div class="col-2">
+                            <label for="source" class="form-label"
+                                >Data Source:</label
+                            >
+                        </div>
+                        <div class="col-10">
+                            <select id="source" name="source" class="form-select" disabled>
+                                <option selected>{{ signal.source.name }}</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="row margin-top-1rem">
+                        <div class="col-2">
+                            <label for="signal" class="form-label"
+                                >Data Signal:</label
+                            >
+                        </div>
+                        <div class="col-10">
+                            <select id="signal" name="signal" class="form-select" disabled>
+                                <option selected>{{ signal.name }}</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="row margin-top-1rem">
+                        <div class="col-2">
+                            <label for="geographic_type" class="form-label"
+                                >Geographic Type:</label
+                            >
+                        </div>
+                        <div class="col-10">
+                            <select id="geographic_type" name="geographic_type" class="form-select">
+                                <option selected>Choose...</option>
+                                {% for geography in signal.available_geography.all %}
+                                <option>{{ geography }}</option>
+                                {% endfor %}
+                            </select>
+                        </div>
+                    </div>
+                    <div class="row margin-top-1rem">
+                        <div class="col-2">
+                            <label for="geographic_value" class="col-form-label">Geographic Value:</label>
+                        </div>
+                        <div class="col-10">
+                            <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="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">
+                        </div>
+                    </div>
+                    <div class="row margin-top-1rem" name="choose_date" style="display: none;">
+                        <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">
+                        </div>
+                    </div>
+                    <div class="row">
+                        <button type="submit" value="Submit" class="btn btn-primary margin-top-1rem">
+                            Submit
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</section>
+<script>
+    $(document).ready(function () {
+        $('#geographic_value').select2({
+            ajax: {
+                url: '{% url 'geography_units_api' %}',
+                dataType: 'json',
+                data: function (params) {
+                    var geographic_type = document.getElementById('geographic_type');
+                    return {
+                        geography__name: geographic_type.value,
+                        term: params.term,
+                        limit: 50
+                    };
+                },
+                processResults: function (data) {
+                    return {
+                        results: $.map(data.results, function (item) {
+                            if (typeof item.geo_id === 'string') {
+                                return {
+                                    text: item.display_name,
+                                    id: item.geo_id.toLowerCase()
+                                }
+                            } else {
+                                return {
+                                    text: item.display_name,
+                                    id: item.geo_id
+                                }
+                            }
+                        })
+                    };
+                }
+            },
+            minimumInputLength: 0,
+            maximumSelectionLength: 1,
+        });
+    });
+
+    document.getElementById('geographic_type').addEventListener("change", (event) => {
+        $('#geographic_value').val(null).trigger('change');
+    })
+
+    document.getElementsByName('modes').forEach((el) => {
+        el.addEventListener('change', (event) => {
+            $('#geographic_value').val(null).trigger('change');
+            if (event.target.value === 'epivis') {
+                $('#geographic_value').select2('destroy');
+                $('#geographic_value').select2({ maximumSelectionLength: 1 })
+            } else {
+                $('#geographic_value').select2('destroy');
+                $('#geographic_value').select2({ maximumSelectionLength: 5 })
+            }
+            //handleModeChange(event.target);
+        });
+    });
+
+    var currentMode = 'epivis';
+    
+    function handleModeChange(el) {
+        var choose_dates = document.getElementsByName('choose_date');
+        if (el.value === 'epivis') {
+            currentMode = 'epivis';
+            choose_dates.forEach((el) => {
+                el.style.display = 'none';
+            });
+        } else {
+            currentMode = 'export';
+            choose_dates.forEach((el) => {
+                el.style.display = 'flex';
+            });
+        }
+    }
+
+
+    function submitMode(event) {
+        event.preventDefault();
+
+        var dataSource = document.getElementById('source').value;
+        var dataSignal = document.getElementById('signal').value;
+        var geographicType = document.getElementById('geographic_type').value;
+        var geographicValue = $('#geographic_value').select2('data').map((el) => el.id).join(',');
+
+        if (geographicType === 'Choose...' || geographicValue === '') {
+            alert('Please select Geographic Type and Geographic Value!');
+            return;
+        }
+
+        /*if (currentMode === 'epivis') {
+            var epiVisUrl = "{{ epivis_url }}";
+            var urlParamsEncoded = btoa(`{"datasets":[{"color":"#415742","title":"value","params":{"_endpoint":"covidcast","data_source":"${dataSource}","signal":"${dataSignal}","time_type":"day","geo_type":"${geographicType}","geo_value":"${geographicValue}"}}]}`);
+
+            epiVisUrl += `#${urlParamsEncoded}`;
+            window.open(epiVisUrl, '_blank').focus();
+            
+        } else {
+            var startDate = document.getElementById('start_date').value;
+            var endDate = document.getElementById('end_date').value;
+
+            var dataExportUrl = "{{ data_export_url }}";
+
+            if (startDate === '' || endDate === '') {
+                alert('Please select start and end date');
+                return;
+            }
+
+            dataExportUrl += `?signal=${dataSource}:${dataSignal}&start_day=${startDate}&end_day=${endDate}&geo_type=${geographicType}&geo_values=${geographicValue}`;
+
+        }*/
+
+        
+    }
+</script>
diff --git a/src/templates/signals/signal_detail.html b/src/templates/signals/signal_detail.html
index 8a4a810..084217e 100644
--- a/src/templates/signals/signal_detail.html
+++ b/src/templates/signals/signal_detail.html
@@ -221,7 +221,7 @@ <h5>Response Example</h5>
                 </div>
             </section>
         {% endif %}
-        {% include "signals/epivis_block.html"%}
+        {% include "signals/epivis_export_data_block.html"%}
         <h5>Related links</h5>
         <section class="section">
             <div class="row">

From 7b9ecb7f58bec15e175da15262282f129d8d5b8f Mon Sep 17 00:00:00 2001
From: Dmytro Trotsko <dmytrotsko@gmail.com>
Date: Thu, 16 May 2024 20:24:30 +0300
Subject: [PATCH 2/2] OKRS24-198 Finished export data feature.

---
 .../signals/epivis_export_data_block.html     | 42 ++++++++++++-------
 1 file changed, 28 insertions(+), 14 deletions(-)

diff --git a/src/templates/signals/epivis_export_data_block.html b/src/templates/signals/epivis_export_data_block.html
index 0511aae..faa2950 100644
--- a/src/templates/signals/epivis_export_data_block.html
+++ b/src/templates/signals/epivis_export_data_block.html
@@ -99,7 +99,13 @@ <h5>Plot / Export data</h5>
     </div>
 </section>
 <script>
-    $(document).ready(function () {
+    function initGeographicValueSelect(mode) {
+        var maxSelectionLength = 1;
+        if (mode === 'epivis') {
+            maxSelectionLength = 1;
+        } else {
+            maxSelectionLength = 10;
+        }
         $('#geographic_value').select2({
             ajax: {
                 url: '{% url 'geography_units_api' %}',
@@ -131,8 +137,12 @@ <h5>Plot / Export data</h5>
                 }
             },
             minimumInputLength: 0,
-            maximumSelectionLength: 1,
+            maximumSelectionLength: maxSelectionLength,
         });
+    }
+
+    $(document).ready(function () {
+        initGeographicValueSelect('epivis');
     });
 
     document.getElementById('geographic_type').addEventListener("change", (event) => {
@@ -142,22 +152,23 @@ <h5>Plot / Export data</h5>
     document.getElementsByName('modes').forEach((el) => {
         el.addEventListener('change', (event) => {
             $('#geographic_value').val(null).trigger('change');
+            //$('#geographic_value').select2('destroy');
             if (event.target.value === 'epivis') {
-                $('#geographic_value').select2('destroy');
-                $('#geographic_value').select2({ maximumSelectionLength: 1 })
+                initGeographicValueSelect(event.target.value);
             } else {
-                $('#geographic_value').select2('destroy');
-                $('#geographic_value').select2({ maximumSelectionLength: 5 })
+                initGeographicValueSelect('export');
             }
-            //handleModeChange(event.target);
+            handleModeChange(event.target.value);
         });
     });
 
     var currentMode = 'epivis';
     
-    function handleModeChange(el) {
+    function handleModeChange(mode) {
+        document.getElementById("epivis-form").reset();
+        
         var choose_dates = document.getElementsByName('choose_date');
-        if (el.value === 'epivis') {
+        if (mode === 'epivis') {
             currentMode = 'epivis';
             choose_dates.forEach((el) => {
                 el.style.display = 'none';
@@ -168,6 +179,11 @@ <h5>Plot / Export data</h5>
                 el.style.display = 'flex';
             });
         }
+        document.getElementsByName("modes").forEach((el) => {
+            if (currentMode === el.value) {
+                el.checked = true;
+            }
+        });
     }
 
 
@@ -184,7 +200,7 @@ <h5>Plot / Export data</h5>
             return;
         }
 
-        /*if (currentMode === 'epivis') {
+        if (currentMode === 'epivis') {
             var epiVisUrl = "{{ epivis_url }}";
             var urlParamsEncoded = btoa(`{"datasets":[{"color":"#415742","title":"value","params":{"_endpoint":"covidcast","data_source":"${dataSource}","signal":"${dataSignal}","time_type":"day","geo_type":"${geographicType}","geo_value":"${geographicValue}"}}]}`);
 
@@ -203,9 +219,7 @@ <h5>Plot / Export data</h5>
             }
 
             dataExportUrl += `?signal=${dataSource}:${dataSignal}&start_day=${startDate}&end_day=${endDate}&geo_type=${geographicType}&geo_values=${geographicValue}`;
-
-        }*/
-
-        
+            window.open(dataExportUrl, '_blank').focus();
+        }
     }
 </script>