From b882b97d214e55db25a1c8692561bee0c0a3e025 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81lvaro=20Tejero=20Cantero?= <alvorithm@teje.ro>
Date: Thu, 16 Jul 2026 22:53:26 +0200
Subject: [PATCH] :sparkles: Highlight clicked node neighborhood in graph
 console
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

click-select behavior with degree 1: the clicked element keeps a black ring, direct neighbors stay full-strength, everything else dims to 0.2 opacity (inactive state); clicking empty canvas clears. Works on edges too (selects both endpoints) and composes with the node inspector on the same click.

Signed-off-by: Álvaro Tejero Cantero <alvorithm@teje.ro>
---
 .../resources/app/templates/graph-console.tmpl  | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/backend/resources/app/templates/graph-console.tmpl b/backend/resources/app/templates/graph-console.tmpl
index 26d2a8e9df..e42cb7d86d 100644
--- a/backend/resources/app/templates/graph-console.tmpl
+++ b/backend/resources/app/templates/graph-console.tmpl
@@ -820,6 +820,11 @@ Graph Console
             const m = nodeMark(d.id);
             return m && m.kind === "removed" ? diffFade(m) : 1;
           }
+        },
+        state: {
+          selected: { stroke: "#0b0b0b", lineWidth: 2 },
+          active:   {},
+          inactive: { opacity: 0.2, labelOpacity: 0.2 }
         }
       },
       edge: {
@@ -845,6 +850,11 @@ Graph Console
           labelBackgroundOpacity: 0.75,
           endArrow: true,
           endArrowSize: 6
+        },
+        state: {
+          selected: { lineWidth: 2 },
+          active:   {},
+          inactive: { strokeOpacity: 0.1, labelOpacity: 0.1 }
         }
       },
       combo: {
@@ -860,7 +870,12 @@ Graph Console
           radius: 4
         }
       },
-      behaviors: ["zoom-canvas", "drag-canvas", "drag-element", "collapse-expand"],
+      behaviors: ["zoom-canvas", "drag-canvas", "drag-element", "collapse-expand",
+        // Click highlights the 1-degree neighborhood (selected node black
+        // ring, neighbors keep full strength, the rest dims); clicking
+        // empty canvas clears. Runs alongside the node:click inspector.
+        { type: "click-select", degree: 1,
+          state: "selected", neighborState: "active", unselectedState: "inactive" }],
       plugins: [{
         key: "toolbar",
         type: "toolbar",