Add filter counts

Signed-off-by: Conor MacBride <conor@macbride.me>

Author: ConorMacBride

pytest_mpl/summary/templates/extra.js

@@ -17,7 +17,14 @@ var options = {
         'rms-value', 'baseline-hash-value', 'result-hash-value']
 };
 var resultsList = new List('results', options);
-resultsList.sort('status-sort', { order: "desc" });
+resultsList.sort('status-sort', {order: "desc"});
+
+var filterClasses = [];
+var filterElements = document.getElementById('filterForm').getElementsByClassName('filter');
+for (var i = 0, elem; elem = filterElements[i++];) {
+    filterClasses.push(elem.id);
+}
+countClasses();
 
 function applyFilters() {
     var cond_and = document.getElementById('filterForm').elements['conditionand'].checked;
@@ -29,7 +36,8 @@ function applyFilters() {
         }
     }
     if (filters.length == 0) {
-        return resultsList.filter();  // Show all if nothing selected
+        resultsList.filter();  // Show all if nothing selected
+        return countClasses();
     }
     resultsList.filter(function (item) {
         var inc = false;
@@ -47,9 +55,29 @@ function applyFilters() {
         }
         return inc;
     });
+    countClasses();
 }
 
 function resetFilters() {
     resultsList.filter();
     document.getElementById("filterForm").reset();
+    countClasses();
+}
+
+function countClasses() {
+    for (var i = 0, filt; filt = filterElements[i++];) {
+        var count = 0;
+        if (document.getElementById('filterForm').elements['conditionand'].checked) {
+            var itms = resultsList.visibleItems;
+        } else {
+            var itms = resultsList.items;
+        }
+        for (var j = 0, itm; itm = itms[j++];) {
+            if (itm.values()['filter-classes'].includes(filt.id)) {
+                count++;
+            }
+        }
+        var badge = filt.parentElement.getElementsByClassName('badge')[0];
+        badge.innerHTML = count.toString();
+    }
 }

pytest_mpl/summary/templates/filter.html

@@ -23,53 +23,53 @@ <h5>Show tests which have...</h5>
                 <label class="list-group-item list-group-item-success">
                     <input class="form-check-input me-1 filter" type="checkbox" value="" id="overall-passed"
                            onclick="applyFilters()">
-                    passed
+                    passed <span class="badge bg-light text-dark">?</span>
                 </label>
                 <label class="list-group-item list-group-item-danger">
                     <input class="form-check-input me-1 filter" type="checkbox" value="" id="overall-failed"
                            onclick="applyFilters()">
-                    failed
+                    failed <span class="badge bg-light text-dark">?</span>
                 </label>
                 <label class="list-group-item list-group-item-warning">
                     <input class="form-check-input me-1 filter" type="checkbox" value="" id="overall-skipped"
                            onclick="applyFilters()">
-                    skipped
+                    skipped <span class="badge bg-light text-dark">?</span>
                 </label>
             </div>
             <div class="list-group m-2">
                 <label class="list-group-item list-group-item-success">
                     <input class="form-check-input me-1 filter" type="checkbox" value="" id="image-match"
                            onclick="applyFilters()">
-                    matching images
+                    matching images <span class="badge bg-light text-dark">?</span>
                 </label>
                 <label class="list-group-item list-group-item-danger">
                     <input class="form-check-input me-1 filter" type="checkbox" value="" id="image-diff"
                            onclick="applyFilters()">
-                    differing images
+                    differing images <span class="badge bg-light text-dark">?</span>
                 </label>
             </div>
             <div class="list-group m-2 mpl-hash">
                 <label class="list-group-item list-group-item-success">
                     <input class="form-check-input me-1 filter" type="checkbox" value="" id="hash-match"
                            onclick="applyFilters()">
-                    matching hashes
+                    matching hashes <span class="badge bg-light text-dark">?</span>
                 </label>
                 <label class="list-group-item list-group-item-danger">
                     <input class="form-check-input me-1 filter" type="checkbox" value="" id="hash-diff"
                            onclick="applyFilters()">
-                    differing hashes
+                    differing hashes <span class="badge bg-light text-dark">?</span>
                 </label>
             </div>
             <div class="list-group m-2">
                 <label class="list-group-item mpl-hash list-group-item-warning">
                     <input class="form-check-input me-1 filter" type="checkbox" value="" id="hash-missing"
                            onclick="applyFilters()">
-                    no baseline hash
+                    no baseline hash <span class="badge bg-light text-dark">?</span>
                 </label>
                 <label class="list-group-item list-group-item-warning">
                     <input class="form-check-input me-1 filter" type="checkbox" value="" id="image-missing"
                            onclick="applyFilters()">
-                    no baseline image
+                    no baseline image <span class="badge bg-light text-dark">?</span>
                 </label>
             </div>
             <div class="d-flex">

pytest_mpl/summary/templates/styles.css

@@ -17,6 +17,10 @@ body.no-hash-test .mpl-hash {
 #filterForm .spacer {
     flex: 1;
 }
+#filterForm span.badge {
+    float: right;
+    margin-top: 2px;
+}
 @media (min-width: 576px) {
     .nav-filtertools div.spacer {
         display: block;