added QoL features

Author: dreizehnutters

xsl/assets/visualizations-matrix.js

@@ -55,6 +55,23 @@ function buildScopedMatrixData() {
   };
 }
 
+function isPortHostPercentileHighlightEnabled() {
+  const toggle = document.getElementById("portHostPercentileToggle");
+  return Boolean(toggle && toggle.checked);
+}
+
+function initializePortHostMatrixControls() {
+  const toggle = document.getElementById("portHostPercentileToggle");
+  if (!toggle || toggle.dataset.initialized === "true") {
+    return;
+  }
+
+  toggle.addEventListener("change", () => {
+    renderMatrixVisualizations();
+  });
+  toggle.dataset.initialized = "true";
+}
+
 function renderPortHostMatrix(hosts, ports, openServices, matrixConfig) {
   const portHostMatrix = document.getElementById("portHostMatrix");
   if (!portHostMatrix) {
@@ -67,6 +84,7 @@ function renderPortHostMatrix(hosts, ports, openServices, matrixConfig) {
   }
 
   const fixedPercentile = 0.95;
+  const highlightPercentile = isPortHostPercentileHighlightEnabled();
   const sortedHosts = [...hosts].sort((a, b) => a.localeCompare(b, undefined, {
     numeric: true,
     sensitivity: "base"
@@ -124,8 +142,12 @@ function renderPortHostMatrix(hosts, ports, openServices, matrixConfig) {
     ...getPlotLayoutTheme()
   };
 
-  const anomalyHostThreshold = calculatePercentile(hostCountValues, fixedPercentile);
-  const anomalyPortThreshold = calculatePercentile(portCountValues, fixedPercentile);
+  const anomalyHostThreshold = highlightPercentile
+    ? calculatePercentile(hostCountValues, fixedPercentile)
+    : 0;
+  const anomalyPortThreshold = highlightPercentile
+    ? calculatePercentile(portCountValues, fixedPercentile)
+    : 0;
   const z = sortedHosts.map(host =>
     ports.map(port => {
       const serviceName = openServices[host][port];
@@ -135,7 +157,7 @@ function renderPortHostMatrix(hosts, ports, openServices, matrixConfig) {
 
       const portHostCount = portHostCounts[port] || 0;
       const hostServiceCount = hostServiceCounts[host] || 0;
-      if (portHostCount <= anomalyPortThreshold && hostServiceCount <= anomalyHostThreshold) {
+      if (highlightPercentile && portHostCount <= anomalyPortThreshold && hostServiceCount <= anomalyHostThreshold) {
         return 3;
       }
 
@@ -152,17 +174,15 @@ function renderPortHostMatrix(hosts, ports, openServices, matrixConfig) {
       openServices[host][port] || "No open service",
       openServices[host][port] ? String(hostServiceCounts[host] || 0) : "0",
       openServices[host][port] ? String(portHostCounts[port] || 0) : "0",
-      openServices[host][port] ? String(anomalyHostThreshold) : "0",
-      openServices[host][port] ? String(anomalyPortThreshold) : "0",
       openServices[host][port]
         ? (() => {
-            const portHostCount = portHostCounts[port] || 0;
-            const hostServiceCount = hostServiceCounts[host] || 0;
-            if (portHostCount <= anomalyPortThreshold && hostServiceCount <= anomalyHostThreshold) {
-              return "Port anomaly";
-            }
-            return "Common port exposure";
-          })()
+          const portHostCount = portHostCounts[port] || 0;
+          const hostServiceCount = hostServiceCounts[host] || 0;
+          if (highlightPercentile && portHostCount <= anomalyPortThreshold && hostServiceCount <= anomalyHostThreshold) {
+            return "95th percentile uncommon port";
+          }
+          return "Open service";
+        })()
         : "No open service"
     ])
   );
@@ -187,7 +207,7 @@ function renderPortHostMatrix(hosts, ports, openServices, matrixConfig) {
     xgap: 2,
     ygap: 2,
     hoverongaps: false,
-    hovertemplate: "Host: %{customdata[0]}<br>Port: %{customdata[1]}<br>Service: %{customdata[2]}<br>Open services on host: %{customdata[3]}<br>Hosts with port: %{customdata[4]}<extra></extra>",
+    hovertemplate: "Host: %{customdata[0]}<br>Port: %{customdata[1]}<br>Service: %{customdata[2]}<br>Open services on host: %{customdata[3]}<br>Hosts with port: %{customdata[4]}<br>Status: %{customdata[5]}<extra></extra>",
     text: zText
   }];
 
@@ -769,5 +789,6 @@ function renderMatrixVisualizations() {
 window.renderMatrixVisualizations = renderMatrixVisualizations;
 
 document.addEventListener("DOMContentLoaded", function() {
+  initializePortHostMatrixControls();
   renderMatrixVisualizations();
 });

xsl/assets/visualizations.css

@@ -221,6 +221,17 @@
   margin-bottom: 0.55rem;
 }
 
+.visualization-actions-split {
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.visualization-actions-split .form-check {
+  margin-right: auto;
+}
+
 .visualization-empty {
   margin-top: 1rem;
 }

xsl/visualizations.xsl

@@ -126,11 +126,15 @@
             <summary class="visualization-card-summary">
               <div class="visualization-card-header">
                 <h4 class="visualization-card-title">Host-Port Matrix</h4>
-                <p class="visualization-card-note">See which ports appear on which hosts and spot unusual exposure patterns. The 95th percentile of uncommon ports from the scan data is highlighted.</p>
+                <p class="visualization-card-note">See which ports appear on which hosts and spot unusual exposure patterns.</p>
               </div>
             </summary>
             <div class="visualization-card-body">
-              <div class="visualization-actions">
+              <div class="visualization-actions visualization-actions-split">
+                <div class="form-check form-switch mb-0">
+                  <input type="checkbox" class="form-check-input" id="portHostPercentileToggle"/>
+                  <label class="form-check-label small" for="portHostPercentileToggle">Mark 95th percentile uncommon ports</label>
+                </div>
                 <button type="button" class="btn btn-sm btn-outline-secondary" data-plot-export="portHostMatrix">Export</button>
               </div>
               <div class="visualization-scroll-x">