Merge pull request #50 from ksy36/issue/49/1

Fixes #49: Adds a slider to adjust the spam-filter threshold on demand

Author: denschub

server/frontend/src/components/Buckets/ReportPreviewRow.vue

@@ -15,6 +15,17 @@
         >: {{ maybeTranslatedComments(report) }}
       </div>
     </td>
+    <td class="wrap-none ml-validity-col">
+      <span :class="validityClass(report.ml_valid_probability)">
+        {{ validityLabel(report.ml_valid_probability) }}
+      </span>
+      <br />
+      <small
+        >{{
+          (validityProbability(report.ml_valid_probability) * 100).toFixed(1)
+        }}%</small
+      >
+    </td>
     <td>
       <img
         v-if="report.os === 'Linux'"
@@ -112,6 +123,29 @@ export default {
 
       return report.comments;
     },
+    validityLabel(mlValidProbability) {
+      if (!mlValidProbability) {
+        return "Unknown";
+      }
+
+      return mlValidProbability >= 0.5 ? "Valid" : "Invalid";
+    },
+    validityProbability(mlValidProbability) {
+      if (!mlValidProbability) {
+        return 0;
+      }
+
+      return mlValidProbability >= 0.5
+        ? mlValidProbability
+        : 1 - mlValidProbability;
+    },
+    validityClass(mlValidProbability) {
+      if (!mlValidProbability) {
+        return "validity-unknown";
+      }
+
+      return mlValidProbability >= 0.5 ? "validity-valid" : "validity-invalid";
+    },
   },
 };
 </script>
@@ -138,4 +172,23 @@ export default {
    */
   padding-bottom: 1.2em;
 }
+
+.ml-validity-col {
+  text-align: center;
+}
+
+.validity-valid {
+  color: #28a745;
+  font-weight: bold;
+}
+
+.validity-invalid {
+  color: #dc3545;
+  font-weight: bold;
+}
+
+.validity-unknown {
+  color: #6c757d;
+  font-style: italic;
+}
 </style>

server/frontend/src/components/Buckets/View.vue

@@ -92,6 +92,24 @@
               />
             </td>
           </tr>
+          <tr>
+            <td>ML Valid Probability Filter</td>
+            <td>
+              <div class="ml-filter-container">
+                <input
+                  type="range"
+                  min="0"
+                  max="1"
+                  step="0.05"
+                  v-model.number="mlValidThreshold"
+                  class="ml-slider"
+                />
+                <span class="ml-threshold-value"
+                  >≥ {{ mlValidThreshold.toFixed(2) }}</span
+                >
+              </div>
+            </td>
+          </tr>
         </tbody>
       </table>
       <div class="table-responsive">
@@ -103,6 +121,7 @@
               <th>Date Reported</th>
               <th>URL</th>
               <th>User Comments</th>
+              <th>ML Label</th>
               <th>Product</th>
               <th>ETP &amp; PBM</th>
             </tr>
@@ -194,6 +213,7 @@ export default {
       currentPage: 1,
       description: "",
       loading: true,
+      mlValidThreshold: 0.8,
       reports: null,
       sortKeys: [...defaultSortKeys],
       totalPages: 1,
@@ -247,7 +267,7 @@ export default {
         query: JSON.stringify({
           op: "AND",
           comments__length__gt: 0,
-          ml_valid_probability__gt: 0.95,
+          ml_valid_probability__gt: this.mlValidThreshold,
           bucket_id: this.bucket.id,
         }),
       };
@@ -397,6 +417,10 @@ export default {
     currentPage() {
       this.fetch();
     },
+    mlValidThreshold() {
+      this.currentPage = 1;
+      this.fetch();
+    },
     sortKeys() {
       this.fetch();
     },
@@ -414,4 +438,17 @@ button[aria-expanded="true"] .bi-eye-fill {
 button[aria-expanded="false"] .bi-eye-slash-fill {
   display: none;
 }
+.ml-filter-container {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.ml-slider {
+  flex: 1;
+  max-width: 300px;
+}
+.ml-threshold-value {
+  font-weight: bold;
+  min-width: 60px;
+}
 </style>

server/frontend/src/components/PageNav.vue

@@ -108,6 +108,11 @@ export default {
     },
   },
   watch: {
+    initial(newVal) {
+      if (newVal !== this.page) {
+        this.page = newVal;
+      }
+    },
     page() {
       this.recalculate();
     },