Move labels around to make the whole filter clickable

another-rex · Feb 3, 2025 · 01c1013 · 01c1013
1 parent b1fb800
commit 01c1013
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 16 deletions.
diff --git a/internal/output/html/filter_template.gohtml b/internal/output/html/filter_template.gohtml
@@ -24,7 +24,7 @@
         {{ $diffID := .LayerMetadata.DiffID }}
         {{ $longCommand := false }}
         {{ if gt (len $command) 109 }}
-          {{ $longCommand = true }}
+        {{ $longCommand = true }}
         {{ end }}
 
         {{ if gt .Count.AnalysisCount.Regular 0 }}
@@ -34,7 +34,7 @@
             {{ if $longCommand }}
             <span class="tooltiptext layer-tooltiptext">{{ $originalCommand }}</span>
             {{ end }}
-            </div>
+          </div>
           {{ template "severity_summary_template.gohtml".Count.SeverityCount }}
         </div>
         {{ end }}
@@ -56,26 +56,26 @@
       </div>
       <div id="type-filter-option-container" class="filter-option-container hide-block">
         {{ if .IsContainerScanning }}
-        <div class="filter-option">
+        <label class="filter-option" for="all-type-checkbox">
           <input type="checkbox" checked id="all-type-checkbox" data-type-all-count="{{ .VulnTypeSummary.All }}">
-          <label for="all-type-checkbox">Default ({{ .VulnTypeSummary.All }})</label>
-        </div>
+          Default ({{ .VulnTypeSummary.All }})
+        </label>
         {{ end }}
-        <div class="filter-option">
+        <label class="filter-option" for="project-type-checkbox">
           <input type="checkbox" checked id="project-type-checkbox"
             data-type-project-count="{{ .VulnTypeSummary.Project }}">
-          <label for="project-type-checkbox"> Project Vulnerabilities ({{ .VulnTypeSummary.Project }})</label>
-        </div>
+          Project Vulnerabilities ({{ .VulnTypeSummary.Project }})
+        </label>
         {{ if .IsContainerScanning }}
-        <div class="filter-option">
+        <label class="filter-option" for="os-type-checkbox">
           <input type="checkbox" checked id="os-type-checkbox" data-type-os-count="{{ .VulnTypeSummary.OS }}">
-          <label for="os-type-checkbox"> Operating system vulnerabilities ({{ .VulnTypeSummary.OS }})</label>
-        </div>
+          Operating system vulnerabilities ({{ .VulnTypeSummary.OS }})
+        </label>
         {{ end }}
-        <div class="filter-option">
+        <label class="filter-option" for="uncalled-type-checkbox">
           <input type="checkbox" id="uncalled-type-checkbox" data-type-uncalled-count="{{ .VulnTypeSummary.Hidden }}">
-          <label for="uncalled-type-checkbox">Uncalled/Unimportant ({{ .VulnTypeSummary.Hidden }})</label>
-        </div>
+          Uncalled/Unimportant ({{ .VulnTypeSummary.Hidden }})
+        </label>
       </div>
     </div>
   </div>

diff --git a/internal/output/html/script.js b/internal/output/html/script.js
@@ -444,10 +444,10 @@ document.addEventListener("DOMContentLoaded", function () {
   }
 
   // Hide filter options when clicking other parts
-  const filterSection = document.getElementById("filter-section");
+  const filterSections = document.querySelectorAll("div.filter");
 
   document.addEventListener("click", event => {
-    if (!filterSection.contains(event.target)) {
+    if (![...filterSections].some(c => c.contains(event.target))) {
       hideAllFilterOptions();
     }
   });
@@ -476,4 +476,6 @@ document.addEventListener("DOMContentLoaded", function () {
     });
     showAndHideParentSections();
   });
+
+  showAllVulns();
 });
diff --git a/internal/output/html/style.css b/internal/output/html/style.css
@@ -336,6 +336,7 @@ header {
   padding: 15px 20px;
   white-space: nowrap;
   cursor: pointer;
+  display: block;
 }
 
 .filter-option input,