Made stats graphs clickable, thanks D for the idea

Author: sethsec

docs/js/app.js

@@ -336,6 +336,27 @@ function showListView() {
     if (detailView) detailView.style.display = 'none';
     if (nav) nav.style.display = 'block';
 
+    // Check for URL parameters and apply filters
+    const urlParams = new URLSearchParams(window.location.search);
+    const serviceParam = urlParams.get('service');
+    const categoryParam = urlParams.get('category');
+    const detectionParam = urlParams.get('detection');
+
+    if (serviceParam) {
+        serviceFilter.value = serviceParam;
+    }
+    if (categoryParam) {
+        categoryFilter.value = categoryParam;
+    }
+    if (detectionParam) {
+        detectionFilter.value = detectionParam;
+    }
+
+    // Apply filters if parameters were set
+    if (serviceParam || categoryParam || detectionParam) {
+        applyFilters();
+    }
+
     // Update page title
     document.title = 'pathfinding.cloud - AWS IAM Privilege Escalation Paths';
 
@@ -527,6 +548,9 @@ function applyFilters() {
             if (selectedDetection === 'none') {
                 // Show paths with no detection tools
                 matchesDetection = !path.detectionTools || Object.keys(path.detectionTools).length === 0;
+            } else if (selectedDetection === 'any') {
+                // Show paths with at least one detection tool
+                matchesDetection = path.detectionTools && Object.keys(path.detectionTools).length > 0;
             } else {
                 // Show paths that have the selected detection tool
                 matchesDetection = path.detectionTools && path.detectionTools[selectedDetection];

docs/paths/index.html

@@ -259,6 +259,7 @@
                 <label>OSS Detection:</label>
                 <select id="detection-filter">
                     <option value="">All</option>
+                    <option value="any">Any Detection Tool</option>
                     <option value="pmapper">PMapper</option>
                     <option value="cloudsplaining">Cloudsplaining</option>
                     <option value="pacu">Pacu</option>

docs/paths/stats/index.html

@@ -199,6 +199,14 @@
             height: 600px;
         }
 
+        /* Make clickable charts have pointer cursor */
+        #service-chart-treemap,
+        #category-chart,
+        #detection-coverage-ring,
+        #detection-tools-chart {
+            cursor: pointer;
+        }
+
         .summary-stats {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

docs/paths/stats/stats.js

@@ -695,6 +695,16 @@ function createServiceTreemap() {
             options: {
                 responsive: true,
                 maintainAspectRatio: false,
+                onClick: (event, elements) => {
+                    if (elements.length > 0) {
+                        const element = elements[0];
+                        const service = element.element.$context.raw._data?.service;
+                        if (service) {
+                            // Navigate to paths page with service filter
+                            window.location.href = `/paths/?service=${service.toLowerCase()}`;
+                        }
+                    }
+                },
                 plugins: {
                     legend: { display: false },
                     tooltip: {
@@ -704,7 +714,7 @@ function createServiceTreemap() {
                             },
                             label: function(context) {
                                 const count = context.raw._data?.count || 0;
-                                return `${count} paths`;
+                                return `${count} paths (Click to view paths)`;
                             }
                         }
                     }
@@ -760,6 +770,16 @@ function createCategoryChart() {
         options: {
             responsive: true,
             maintainAspectRatio: false,
+            onClick: (event, elements) => {
+                if (elements.length > 0) {
+                    const index = elements[0].index;
+                    const categoryKey = Object.keys(categoryCounts)[index];
+                    if (categoryKey) {
+                        // Navigate to paths page with category filter
+                        window.location.href = `/paths/?category=${categoryKey}`;
+                    }
+                }
+            },
             plugins: {
                 legend: {
                     display: false
@@ -770,7 +790,7 @@ function createCategoryChart() {
                             const label = context.label || '';
                             const value = context.parsed;
                             const percentage = Math.round((value / allPaths.length) * 100);
-                            return `${label}: ${value} paths (${percentage}%)`;
+                            return `${label}: ${value} paths (${percentage}%) - Click to view paths`;
                         }
                     }
                 }
@@ -856,6 +876,14 @@ function createDetectionCoverageRing() {
         options: {
             responsive: true,
             maintainAspectRatio: false,
+            onClick: (event, elements) => {
+                if (elements.length > 0) {
+                    const index = elements[0].index;
+                    // 0 = With Detection, 1 = Without Detection
+                    const detectionParam = index === 0 ? 'any' : 'none';
+                    window.location.href = `/paths/?detection=${detectionParam}`;
+                }
+            },
             plugins: {
                 legend: {
                     display: false
@@ -866,7 +894,7 @@ function createDetectionCoverageRing() {
                             const label = context.label || '';
                             const value = context.parsed;
                             const percentage = Math.round((value / allPaths.length) * 100);
-                            return `${label}: ${value} paths (${percentage}%)`;
+                            return `${label}: ${value} paths (${percentage}%) - Click to view paths`;
                         }
                     }
                 }
@@ -968,6 +996,13 @@ function createDetectionToolsChart() {
             indexAxis: 'y',
             responsive: true,
             maintainAspectRatio: false,
+            onClick: (event, elements) => {
+                if (elements.length > 0) {
+                    const index = elements[0].index;
+                    const toolName = sortedTools[index][0]; // Get original tool name
+                    window.location.href = `/paths/?detection=${toolName}`;
+                }
+            },
             plugins: {
                 legend: {
                     display: false
@@ -976,7 +1011,7 @@ function createDetectionToolsChart() {
                     callbacks: {
                         label: function(context) {
                             const percentage = Math.round((context.parsed.x / allPaths.length) * 100);
-                            return `${context.parsed.x} paths (${percentage}%)`;
+                            return `${context.parsed.x} paths (${percentage}%) - Click to view paths`;
                         }
                     }
                 },