Added filters submit onChange. Moved info about number of showed indicators to the top of the table. Removed 'Submit Filters' button. Added spinner(loader) to idicate that form is submitting(added this to all the filters in order not to have different filters behavior).

Author: dmytrotsko

src/assets/css/custom_styles.css

@@ -49,4 +49,112 @@
     font-size: 0.875em!important;
     color: var(--mdb-code-color)!important;
     word-wrap: break-word!important;
+}
+
+
+
+/* Loader Overlay */
+.loader-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
+    display: none; /* Hidden by default */
+    justify-content: center;
+    align-items: center;
+    z-index: 1000; /* Ensure it’s on top */
+}
+
+/* Table fade effect when loader is active */
+.table-container.faded {
+    opacity: 0.3; /* Fades the table */
+    transition: opacity 0.3s ease;
+}
+
+/* lds-roller CSS from loading.io */
+.lds-roller {
+    display: inline-block;
+    position: relative;
+    width: 200px;
+    height: 200px;
+}
+.lds-roller div {
+    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    transform-origin: 40px 40px;
+}
+.lds-roller div:after {
+    content: " ";
+    display: block;
+    position: absolute;
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: #fff;
+    margin: -4px 0 0 -4px;
+}
+.lds-roller div:nth-child(1) {
+    animation-delay: -0.036s;
+}
+.lds-roller div:nth-child(1):after {
+    top: 63px;
+    left: 63px;
+}
+.lds-roller div:nth-child(2) {
+    animation-delay: -0.072s;
+}
+.lds-roller div:nth-child(2):after {
+    top: 68px;
+    left: 56px;
+}
+.lds-roller div:nth-child(3) {
+    animation-delay: -0.108s;
+}
+.lds-roller div:nth-child(3):after {
+    top: 71px;
+    left: 48px;
+}
+.lds-roller div:nth-child(4) {
+    animation-delay: -0.144s;
+}
+.lds-roller div:nth-child(4):after {
+    top: 72px;
+    left: 40px;
+}
+.lds-roller div:nth-child(5) {
+    animation-delay: -0.18s;
+}
+.lds-roller div:nth-child(5):after {
+    top: 71px;
+    left: 32px;
+}
+.lds-roller div:nth-child(6) {
+    animation-delay: -0.216s;
+}
+.lds-roller div:nth-child(6):after {
+    top: 68px;
+    left: 24px;
+}
+.lds-roller div:nth-child(7) {
+    animation-delay: -0.252s;
+}
+.lds-roller div:nth-child(7):after {
+    top: 63px;
+    left: 17px;
+}
+.lds-roller div:nth-child(8) {
+    animation-delay: -0.288s;
+}
+.lds-roller div:nth-child(8):after {
+    top: 56px;
+    left: 12px;
+}
+@keyframes lds-roller {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
 }

src/assets/js/indicatorSetsFilters.js

@@ -1,7 +1,7 @@
 // Add an event listener to each 'bulk-select' element
 let bulkSelectDivs = document.querySelectorAll('.bulk-select');
 bulkSelectDivs.forEach(div => {
-    div.addEventListener('click', function(event) {
+    div.addEventListener('click', function (event) {
         let form = this.nextElementSibling;
         let showMoreLink = form.querySelector('a');
         let checkboxes = form.querySelectorAll('input[type="checkbox"]');
@@ -28,4 +28,23 @@ bulkSelectDivs.forEach(div => {
             }
         }
     });
+});
+
+function showLoader() {
+    document.getElementById('loaderOverlay').style.display = 'flex';
+    document.querySelector('.table-container').classList.add('faded');
+}
+
+$("#filterIndicatorSetsForm").find("input[type='checkbox']").on("change", function (e) {
+    // Show loader and fade table
+    showLoader();
+    this.form.submit();
+});
+
+$("#location_search").on({
+    "change": function (e) {
+        // Show loader and fade table
+        showLoader();
+        this.form.submit();
+    }
 });

src/assets/js/indicatorSetsTable.js

@@ -12,6 +12,7 @@ function calculate_table_height() {
 
 var table = new DataTable("#indicatorSetsTable", {
     fixedHeader: true,
+    responsive: true,
     searching: false,
     paging: false,
     scrollCollapse: true,
@@ -25,21 +26,22 @@ var table = new DataTable("#indicatorSetsTable", {
     mark: true,
 
     language: {
-        buttons: {
-            colvis: "Toggle Columns",
-        },
+        emptyTable: "No indicators match your specified filters.  Try relaxing some filters, or clear all filters and try again.",
+        // buttons: {
+        //     colvis: "Toggle Columns",
+        // },
     },
 });
 
-new DataTable.Buttons(table, {
-    buttons: [
-        {
-            extend: "colvis",
-            columns: "th:nth-child(n+3)",
-            prefixButtons: ["colvisRestore"],
-        },
-    ],
-});
+// new DataTable.Buttons(table, {
+//     buttons: [
+//         {
+//             extend: "colvis",
+//             columns: "th:nth-child(n+3)",
+//             prefixButtons: ["colvisRestore"],
+//         },
+//     ],
+// });
 
 table.buttons(0, null).container().appendTo("#colvis");
 

src/indicatorsets/filters.py

@@ -94,9 +94,9 @@ class Meta:
     def location_search_filter(self, queryset, name, value):
         if not value:
             return queryset
-        filtered_signals = get_list_of_indicators_filtered_by_geo(value)
+        filtered_indicators = get_list_of_indicators_filtered_by_geo(value)
         query = Q()
-        for item in filtered_signals["epidata"]:
+        for item in filtered_indicators["epidata"]:
             query |= Q(source__name=item["source"], name=item["signal"])
         self.indicators_qs = self.indicators_qs.filter(query)
         indicator_sets = self.indicators_qs.values_list(

src/indicatorsets/utils.py

@@ -31,7 +31,6 @@ def get_list_of_indicators_filtered_by_geo(geos):
     url = f"{settings.EPIDATA_URL}covidcast/geo_coverage"
     params = {"geo": dict_to_geo_string(geos), "api_key": settings.EPIDATA_API_KEY}
     response = requests.get(url, params=params)
-    print(f"Response from Epidata: {response}")
     return response.json()
 
 

src/templates/indicatorsets/indicatorSetsFilters.html

@@ -3,11 +3,10 @@
 {% load static %}
 {% load dict_get %}
 <div class="col-2">
-    <form method="get" id="filterIndicatorSetsForm">
+    <form method="GET" id="filterIndicatorSetsForm">
         <div class="card">
             <div class="card-body no-padding-top-bottom">
                 <span id="totalRowsNumber"></span>
-                <div class="colvis" id="colvis"></div>
                 <h2 class="card-title font-size-25">Filters</h2>
                 <div class="accordion accordion-flush" id="accordionIndicatorSetFilters">
                     <div class="accordion-item">
@@ -48,7 +47,7 @@ <h2 class="card-title font-size-25">Filters</h2>
                                     data-mdb-target="#flush-collapse_{{ form.pathogens.auto_id }}"
                                     aria-expanded="false"
                                     aria-controls="flush-collapse_{{ form.pathogens.auto_id }}">
-                                Pathogens/Syndromes
+                                Pathogens<br>/Syndromes
                                 <a tabindex="0"
                                    type="button"
                                    class="info-button filter-description-popover"
@@ -234,10 +233,11 @@ <h2 class="card-title font-size-25">Filters</h2>
                 </div>
                 <div class="card-body no-padding-top">
                     <div class="d-grid gap-2 mt-3">
-                        <button id="filter-submit" type="submit" class="btn btn-primary">{% trans "Apply Filters" %}</button>
+                        {% comment %} <button id="filter-submit" type="submit" class="btn btn-primary">{% trans "Apply Filters" %}</button> {% endcomment %}
                         <div class="margin-left-right-auto">
                             <a href="{% url 'indicatorsets' %}">Clear filters</a>
                         </div>
+                        {% comment %} <div class="colvis margin-left-right-auto" id="colvis"></div> {% endcomment %}
                     </div>
                     <hr />
                     <div class="d-grid gap-2 mt-3 smaller-font-size">
@@ -271,7 +271,7 @@ <h2 class="card-title font-size-25">Filters</h2>
         initSelect2('location_search', locationSearchValues);
         if (urlParams.location_search != "") {
             var locationSearch = urlParams.location_search; 
-            $("#location_search").val(locationSearch).trigger("change");
+            $("#location_search").val(locationSearch).trigger("change.select2");
         }
     })
 </script>

src/templates/indicatorsets/indicatorSetsTable.html

@@ -8,7 +8,7 @@
 <link rel="stylesheet"
       href="https://cdn.datatables.net/plug-ins/1.10.13/features/mark.js/datatables.mark.min.css">
 <div class="col-10">
-    <div class="row table-responsive">
+    <div class="row table-responsive table-container">
         <table id="indicatorSetsTable" class="display cell-border" width="100%">
             <thead>
                 <tr>
@@ -316,6 +316,10 @@
             </tbody>
         </table>
     </div>
+    <!-- Loader Overlay -->
+    <div class="loader-overlay" id="loaderOverlay">
+        <div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
+    </div>
     <div class="float" id="showSelectedIndicatorsButton" style="display:none;">
         <a type="button"
            class="btn btn-primary"
@@ -334,7 +338,10 @@
 
     $(document).ready(function() {
         table.columns.adjust();
-        $("#totalRowsNumber").text(`Showing ${table.page.info().recordsTotal} indicator ${pluralize(table.page.info().recordsTotal, 'set')} containing ${relatedIndicators.length} individual ${pluralize(relatedIndicators.length, 'indicator')}`);
+        const totalRowsSpan = document.createElement("span");
+        totalRowsSpan.textContent = `Showing ${table.page.info().recordsTotal} indicator ${pluralize(table.page.info().recordsTotal, 'set')} containing ${relatedIndicators.length} individual ${pluralize(relatedIndicators.length, 'indicator')}`;
+        const refElement = document.getElementById("indicatorSetsTable_wrapper");
+        refElement.before(totalRowsSpan);
     });
 
     // Add event listener for openizng and closing details
@@ -352,4 +359,7 @@
         }
 
     });
+
+   
+
 </script>