Development

src/assets/js/indicatorSetsTable.js

@@ -58,6 +58,10 @@ var table = new DataTable("#indicatorSetsTable", {
 // });
 
 function format(indicatorSetId, relatedIndicators, indicatorSetDescription) {
+    if (!relatedIndicators) {
+        return '<div class="d-flex justify-content-start my-3" style="padding-left: 20px;"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div></div>';
+    }
+
     var indicators = relatedIndicators.filter(
         (indicator) => indicator.indicator_set === indicatorSetId
     );

src/indicatorsets/filters.py

@@ -27,26 +27,26 @@ class IndicatorSetFilter(django_filters.FilterSet):
     pathogens = django_filters.ModelMultipleChoiceFilter(
         field_name="pathogens",
         queryset=Pathogen.objects.filter(
-            id__in=IndicatorSet.objects.values_list("pathogens", flat=True)
-        ).order_by("display_order_number"),
+            indicator_sets__isnull=False
+        ).distinct().order_by("display_order_number"),
         widget=QueryArrayWidget,
         required=False,
     )
 
     geographic_levels = django_filters.ModelMultipleChoiceFilter(
         field_name="geographic_levels",
         queryset=Geography.objects.filter(
-            id__in=IndicatorSet.objects.values_list("geographic_levels", flat=True)
-        ).order_by("display_order_number"),
+            indicator_sets__isnull=False
+        ).distinct().order_by("display_order_number"),
         widget=QueryArrayWidget,
         required=False,
     )
 
     severity_pyramid_rungs = django_filters.ModelMultipleChoiceFilter(
         field_name="severity_pyramid_rungs",
         queryset=SeverityPyramidRung.objects.filter(
-            id__in=IndicatorSet.objects.values_list("severity_pyramid_rungs", flat=True)
-        ).order_by("display_order_number"),
+            indicator_sets__isnull=False
+        ).distinct().order_by("display_order_number"),
         widget=QueryArrayWidget,
         required=False,
     )

src/indicatorsets/forms.py

@@ -10,7 +10,7 @@ class IndicatorSetFilterForm(forms.ModelForm):
 
     pathogens = forms.ModelMultipleChoiceField(
         queryset=Pathogen.objects.filter(
-            id__in=IndicatorSet.objects.values_list("pathogens", flat=True)
+            indicator_sets__isnull=False
         ).annotate(
             sort_priority=Case(
                 When(name__iexact="pathogen independent", then=1),
@@ -23,14 +23,14 @@ class IndicatorSetFilterForm(forms.ModelForm):
 
     geographic_levels = forms.ModelMultipleChoiceField(
         queryset=Geography.objects.filter(
-            id__in=IndicatorSet.objects.values_list("geographic_levels", flat=True)
-        ).order_by("display_order_number"),
+            indicator_sets__isnull=False
+        ).distinct().order_by("display_order_number"),
         widget=forms.CheckboxSelectMultiple(),
     )
     severity_pyramid_rungs = forms.ModelMultipleChoiceField(
         queryset=SeverityPyramidRung.objects.filter(
-            id__in=IndicatorSet.objects.values_list("severity_pyramid_rungs", flat=True)
-        ).order_by("display_order_number"),
+            indicator_sets__isnull=False
+        ).distinct().order_by("display_order_number"),
         widget=forms.CheckboxSelectMultiple(),
     )
 

src/templates/indicatorsets/indicatorSetsTable.html

@@ -355,7 +355,7 @@
 <script src="{% static 'js/indicatorSetsTable.js' %}"></script>
 <script src="{% static 'js/pluralize_word.js' %}"></script>
 <script>
-    var relatedIndicators = [];
+    var relatedIndicators = null;
     var numOfTimeseries = 0;
 
     function numberWithCommas(x) {
@@ -378,6 +378,16 @@
                 relatedIndicators = response.related_indicators;
                 numOfTimeseries = response.num_of_timeseries;
 
+                // Refresh any open rows now that data is loaded
+                if (typeof table !== 'undefined') {
+                    table.rows().every(function() {
+                        if (this.child.isShown()) {
+                            var tr = $(this.node());
+                            this.child(format(tr.data('id'), relatedIndicators, tr.data("description"))).show();
+                        }
+                    });
+                }
+
                 if (numOfTimeseries > 0) {
                     totalRowsSpan.innerHTML = `Showing <b>${relatedIndicators.length}</b> distinct ${pluralize(relatedIndicators.length, 'indicator')} (arranged in <b>${table.page.info().recordsTotal}</b> ${pluralize(table.page.info().recordsTotal, 'set')}), including <b>${numberWithCommas(numOfTimeseries)}</b> Delphi-hosted time series across numerous locations.`;
                 } else {
@@ -391,18 +401,11 @@
         });
     });
 
-    // Add event listener for openizng and closing details
+    // Add event listener for opening and closing details
     $('#indicatorSetsTable tbody').on('click', 'td.dt-control', function () {
         var tr = $(this).closest('tr');
         var row = table.row(tr);
 
-        if (relatedIndicators.length === 0) {
-             // If data hasn't loaded yet, maybe wait or show alert?
-             // For now, let's assume it loads fast enough or just show empty/loading in child row if we wanted to be fancy.
-             // But existing behavior with empty array will just show "No available indicators yet." from format function.
-             // We can check if request is pending if needed, but let's stick to simple first.
-        }
-
         if (row.child.isShown()) {
             // This row is already open - close it
             row.child.hide();
@@ -411,6 +414,5 @@
             // Open this row
             row.child(format(tr.data('id'), relatedIndicators, tr.data("description"))).show();
         }
-
     });
 </script>