From 2aa257bf58323c10711331947e3b84cb596fe315 Mon Sep 17 00:00:00 2001
From: Daniel Kronovet <kronovet@gmail.com>
Date: Thu, 19 Mar 2026 08:01:29 -0400
Subject: [PATCH] Make in-edges green on node hover in graph

When hovering over a graph node, in-edges (edges pointing TO that node) now render in green with a green arrowhead, making incoming preferences visually distinct from outgoing ones.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 client/src/pages/Graph.tsx | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/client/src/pages/Graph.tsx b/client/src/pages/Graph.tsx
index 1d0be5a..a65dcc8 100644
--- a/client/src/pages/Graph.tsx
+++ b/client/src/pages/Graph.tsx
@@ -179,6 +179,17 @@ export default function Graph() {
               >
                 <path d="M0,-5L10,0L0,5" fill="#ff1a3d" />
               </marker>
+              <marker
+                id="arrowhead-green"
+                viewBox="0 -5 10 10"
+                refX={10}
+                refY={0}
+                markerWidth={6}
+                markerHeight={6}
+                orient="auto"
+              >
+                <path d="M0,-5L10,0L0,5" fill="#4ade80" />
+              </marker>
               <marker
                 id="arrowhead-dim"
                 viewBox="0 -5 10 10"
@@ -208,9 +219,16 @@ export default function Graph() {
                   : selectedNodes.size > 0
                     ? selectedNodes.has(s.id) && selectedNodes.has(t.id)
                     : true;
+                const isInEdge = hoveredNode != null && t.id === hoveredNode;
                 const opacity = connected
                   ? edgeOpacity(e.weight, maxEdgeWeight)
                   : 0.03;
+                const strokeColor = isInEdge ? '#4ade80' : '#ff1a3d';
+                const marker = !connected
+                  ? 'url(#arrowhead-dim)'
+                  : isInEdge
+                    ? 'url(#arrowhead-green)'
+                    : 'url(#arrowhead)';
                 return (
                   <line
                     key={i}
@@ -218,10 +236,10 @@ export default function Graph() {
                     y1={s.y! + (dy / dist) * sr}
                     x2={t.x! - (dx / dist) * tr}
                     y2={t.y! - (dy / dist) * tr}
-                    stroke="#ff1a3d"
+                    stroke={strokeColor}
                     strokeWidth={edgeWidth(e.weight, maxEdgeWeight)}
                     strokeOpacity={opacity}
-                    markerEnd={connected ? 'url(#arrowhead)' : 'url(#arrowhead-dim)'}
+                    markerEnd={marker}
                     style={{ transition: 'stroke-opacity 0.2s ease' }}
                   />
                 );