finish logic for score selecting and sorting

luabida · luabida · commit 0b9ca497a44a · 2025-02-04T11:45:00.000-03:00
diff --git a/src/main/views.py b/src/main/views.py
@@ -165,23 +165,6 @@ def get(self, request, model_id: int):
         context = {
             "model": model,
             "implementation_languages": languages,
-            "diseases": [
-                ("dengue", "Dengue"),
-                ("zika", "Zika"),
-                ("chikungunya", "Chikungunya"),
-            ],
-            "adm_levels": [
-                (0, _("National")),
-                (1, _("State")),
-                (2, _("Municipality")),
-                (3, _("Sub Municipality")),
-            ],
-            "time_resolutions": [
-                ("day", _("Day")),
-                ("week", _("Week")),
-                ("month", _("Month")),
-                ("year", _("Year")),
-            ],
         }
         return render(request, self.template_name, context)
 
@@ -219,11 +202,6 @@ def post(self, request, model_id: int):
                     ),
                     "spatial": form.data.get("model_spatial") == "True",
                     "temporal": form.data.get("model_temporal") == "True",
-                    "ADM_level": form.cleaned_data["model_adm_level"],
-                    "disease": form.cleaned_data["model_disease"],
-                    "time_resolution": form.cleaned_data[
-                        "model_time_resolution"
-                    ],
                 }
 
                 status_code, model = update_model(
diff --git a/src/static/js/vis/dashboard/predictions.js b/src/static/js/vis/dashboard/predictions.js
@@ -88,6 +88,7 @@ document.addEventListener('DOMContentLoaded', function() {
       });
     }
   });
+
 });
 
 
@@ -214,6 +215,7 @@ class Storage {
         end_window_date: null,
         adm_1: null,
         adm_2: null,
+        score: null,
       }
     }
     data[this.dashboard].prediction_ids = data[this.dashboard].prediction_ids || [];
@@ -231,6 +233,7 @@ class Storage {
     }
     data[this.dashboard].adm_1 = data[this.dashboard].adm_1 || null;
     data[this.dashboard].adm_2 = data[this.dashboard].adm_2 || null;
+    data[this.dashboard].score = data[this.dashboard].score || null;
     localStorage.setItem("dashboards", JSON.stringify(data));
   }
 
@@ -301,7 +304,7 @@ class ModelList {
         <td class="truncate-name"><a href="/${model.author.username}/">${model.author.name}</a></td>
         <td class="truncate-name">${model.updated}</td>
       </tr>
-      <tr class="expandable-body d-none"><td colspan="2"><p>${model.description}</p></td></tr>
+      <tr class="expandable-body d-none"><td colspan="5"><p>${model.description}</p></td></tr>
     `;
   }
 
@@ -457,6 +460,7 @@ class PredictionList {
   constructor(dashboard) {
     this.dashboard = dashboard;
     this.predictions_map = {};
+    this.current_predictions = [];
     this.get_data();
   }
 
@@ -491,27 +495,25 @@ class PredictionList {
     const selected = storage.get("prediction_ids").includes(prediction.id);
 
     return `
-    <tr data-widget="expandable-table" aria-expanded="false" class="prediction-row">
+    <tr data-widget="expandable-table" aria-expanded="false" class="prediction-row" data-id="${prediction.id}">
       <td style="width: 40px;" class="${selected ? 'selected' : ''}" id="td-${prediction.id}">
         <input type="checkbox" value="${prediction.id}" id="checkbox-${prediction.id}" class="checkbox-prediction">
       </td>
-      <td>${prediction.id}</td>
-      <td>${prediction.start_date}</td>
-      <td>${prediction.end_date}</td>
+      <td style="width: 40px;">${prediction.id}</td>
+      <td style="width: 40px;"><a href="/registry/model/${prediction.model}/">${prediction.model}</a></td>
+      <td style="width: 110px;">${prediction.start_date}</td>
+      <td style="width: 110px;">${prediction.end_date}</td>
+      <td style="width: 150px;">${prediction.scores[storage.get("score")] || "-"}</td>
     </tr>
-    <tr class="expandable-body d-none"><td colspan="2"><p>${prediction.description}</p></td></tr>
+    <tr class="expandable-body d-none"><td colspan="6"><p>${prediction.description}</p></td></tr>
   `;
   }
 
-
-
   list(predictions) {
-    predictions.sort((a, b) => {
-      const aChecked = storage.get("prediction_ids").includes(a.id);
-      const bChecked = storage.get("prediction_ids").includes(b.id);
-      if (aChecked && !bChecked) return -1;
-      if (!aChecked && bChecked) return 1;
-      return 0;
+    predictions = [...predictions].sort((a, b) => {
+      const aScore = a.scores[storage.get("score")] ?? Infinity;
+      const bScore = b.scores[storage.get("score")] ?? Infinity;
+      return aScore - bScore;
     });
 
     const self = this;
@@ -562,6 +564,10 @@ class PredictionList {
       chart.clearPredictions();
       self.paginate(self.filter(predictions, admLevel, $(this).val()));
     });
+
+    $("#predictions-clear-all").on("click", function() {
+      self.clear()
+    });
   }
 
   filter(predictions, adm_level, adm) {
@@ -586,34 +592,46 @@ class PredictionList {
 
   paginate(predictions) {
     const self = this;
+    this.current_predictions = predictions;
     $('#predictions-pagination').pagination({
       dataSource: predictions,
       pageSize: 5,
       callback: function(data, pagination) {
         const body = data.map((item) => self.li(item)).join("");
+        const score = storage.get("score");
         $(`#predictions-list`).html(`
         <thead>
           <tr>
             <th style="width: 40px;">
               <input type="checkbox" id="select-all-checkbox">
             </th>
-            <th>ID</th>
-            <th>Start Date</th>
-            <th>End Date</th>
-            <th style="width: 100px;">
-              <select id="scores" title="Score" class="form-select form-select-sm w-auto" style="width: 80px !important;">
-                <option value="mae">MAE</option>
-                <option value="mse">MSE</option>
-                <option value="crps">CRPS</option>
-                <option value="log_score">Log Score</option>
-                <option value="interval_score">Interval Score</option>
-              </select>
+            <th style="width: 65px;">ID</th>
+            <th style="width: 85px;">Model</th>
+            <th style="width: 110px;">Start Date</th>
+            <th style="width: 110px;">End Date</th>
+            <th style="width: 150px;">
+              <div class="row">
+                <div class="col">Score</div>
+                <div class="col">
+                  <select id="scores" title="Score" class="form-select form-select-sm w-auto" style="width: 80px !important;">
+                    <option value="mae" ${score === "mae" ? "selected" : ""}>MAE</option>
+                    <option value="mse" ${score === "mse" ? "selected" : ""}>MSE</option>
+                    <option value="crps" ${score === "crps" ? "selected" : ""}>CRPS</option>
+                    <option value="log_score" ${score === "log_score" ? "selected" : ""}>Log Score</option>
+                    <option value="interval_score" ${score === "interval_score" ? "selected" : ""}>Interval Score</option>
+                  </select>
+                </div>
+              </div>
             </th>
           </tr>
         </thead>
         <tbody>${body}</tbody>
       `);
 
+        $("#scores").on("change", function() {
+          self.set_score($(this).val());
+        });
+
         $(".checkbox-prediction").each(function() {
           const prediction_id = parseInt($(this).val(), 10);
           const td = $(`#td-${prediction_id}`);
@@ -647,10 +665,22 @@ class PredictionList {
             self.unselect(prediction_id)
           }
         });
+
+        $("#select-all-checkbox").prop("checked", $(".checkbox-prediction").length === $(".checkbox-prediction:checked").length);
       },
     });
   }
 
+  set_score(score) {
+    storage.set("score", score);
+    const predictions = [...this.current_predictions].sort((a, b) => {
+      const aScore = a.scores[score] ?? Infinity;
+      const bScore = b.scores[score] ?? Infinity;
+      return aScore - bScore;
+    });
+    this.list(predictions);
+  }
+
   select(prediction) {
     let prediction_ids = new Set(storage.get("prediction_ids"));
 
@@ -679,6 +709,12 @@ class PredictionList {
     const td = $(`#td-${prediction_id}`);
     td.removeClass('selected');
     td.css("background-color", '');
+    $(`.checkbox-prediction[value="${prediction_id}"]`).prop("checked", false);
+    $("#select-all-checkbox").prop("checked", false);
+  }
+
+  clear() {
+    storage.get("prediction_ids").forEach(id => this.unselect(id));
   }
 }
 
diff --git a/src/templates/main/edit-model.html b/src/templates/main/edit-model.html
@@ -30,38 +30,6 @@
                     </textarea>
                 </div>
             </div>
-            <div class="row mb-3">
-                <div class="col">
-                    <label for="model_time_resolution"><b>{% translate "Time resolution" %}:</b></label>
-                    <select id="edit-time-resolution" name="model_time_resolution" class="form-control" required>
-                        {% for value, label in time_resolutions %}
-                        <option value="{{ value }}" {% if value == model.time_resolution %}selected{% endif %}>
-                        {{ label }}
-                        </option>
-                        {% endfor %}
-                    </select>
-                </div>
-                <div class="col">
-                    <label for="model_adm_level"><b>{% translate "ADM Level" %}:</b></label>
-                    <select id="edit-adm-level" name="model_adm_level" class="form-control" required>
-                        {% for level, label in adm_levels %}
-                        <option value="{{ level }}" {% if level == model.ADM_level %}selected{% endif %}>
-                        {{ level }} - {{ label }}
-                        </option>
-                        {% endfor %}
-                    </select>
-                </div>
-                <div class="col">
-                    <label for="model_disease"><b>{% translate "Disease" %}:</b></label>
-                    <select id="edit-disease" name="model_disease" class="form-control" required>
-                        {% for disease, label in diseases %}
-                        <option value="{{ disease }}" {% if disease == model.disease %}selected{% endif %}>
-                        {{ label }}
-                        </option>
-                        {% endfor %}
-                    </select>
-                </div>
-            </div>
             <div class="row mb-3">
                 <div class="col">
                     <label for="model_repository"><b>{% translate "Github repository" %}:</b></label>
diff --git a/src/templates/vis/dashboard/predictions.html b/src/templates/vis/dashboard/predictions.html
@@ -53,7 +53,14 @@ <h3 class="card-title">Predictions</h3>
         </table>
       </div>
       <div class="card-footer clearfix">
-        <ul id="predictions-pagination" class="pagination pagination-sm m-0 float-right"></ul>
+        <div class="row">
+          <div class="col">
+            <button id="predictions-clear-all" type="button" class="btn btn-tool">Clear</button>
+          </div>
+          <div class="col">
+            <ul id="predictions-pagination" class="pagination pagination-sm m-0 float-right"></ul>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -98,7 +105,6 @@ <h3 class="card-title">Tags</h3>
   gap: 20px;
   justify-content: space-between;
   align-items: flex-start;
-  background-color: wheat;
 }
 
 .tag-group {
@@ -178,6 +184,11 @@ <h3 class="card-title">Tags</h3>
   margin-bottom: 0;
 }
 
+#scores {
+  height: 25px;
+  font-size: 0.75rem;
+}
+
 #adm-filter {
   height: calc(1.8125rem + 2px);
   width: 200px !important;
diff --git a/src/vis/views.py b/src/vis/views.py
@@ -182,6 +182,7 @@ def get_predictions(request) -> JsonResponse:
 
         p_res = {}
         p_res["id"] = p.id
+        p_res["model"] = p.model.id
         p_res["description"] = p.description
         p_res["adm_1"] = p.adm_1_geocode
         p_res["adm_2"] = p.adm_2_geocode
