From 6348031de19684ddb0715bfdf2d2f36d1e764a9d Mon Sep 17 00:00:00 2001
From: Joey <90795735+joey-grafana@users.noreply.github.com>
Date: Mon, 24 Feb 2025 16:23:56 +0000
Subject: [PATCH] NodeGraph: Fix for dangling edge lines (#100866)

* Make sure edge line has a unique key

* Update keys
---
 public/app/plugins/panel/nodeGraph/Edge.tsx      | 4 +++-
 public/app/plugins/panel/nodeGraph/NodeGraph.tsx | 5 ++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/public/app/plugins/panel/nodeGraph/Edge.tsx b/public/app/plugins/panel/nodeGraph/Edge.tsx
index 405d07f1a9e..e4802236cef 100644
--- a/public/app/plugins/panel/nodeGraph/Edge.tsx
+++ b/public/app/plugins/panel/nodeGraph/Edge.tsx
@@ -15,10 +15,11 @@ interface Props {
   onClick: (event: MouseEvent<SVGElement>, link: EdgeDatumLayout) => void;
   onMouseEnter: (id: string) => void;
   onMouseLeave: (id: string) => void;
+  processedNodesLength: number;
 }
 
 export const Edge = memo(function Edge(props: Props) {
-  const { edge, onClick, onMouseEnter, onMouseLeave, hovering, svgIdNamespace } = props;
+  const { edge, onClick, onMouseEnter, onMouseLeave, hovering, svgIdNamespace, processedNodesLength } = props;
 
   // Not great typing but after we do layout these properties are full objects not just references
   const { source, target, sourceNodeRadius, targetNodeRadius } = edge as {
@@ -56,6 +57,7 @@ export const Edge = memo(function Edge(props: Props) {
       <EdgeArrowMarker id={markerId} fill={edgeColor} headHeight={arrowHeadHeight} />
       <EdgeArrowMarker id={coloredMarkerId} fill={highlightedEdgeColor} headHeight={arrowHeadHeight} />
       <g
+        key={`${edge.id}-${edge.source.y ?? ''}-${processedNodesLength}-g`}
         onClick={(event) => onClick(event, edge)}
         style={{ cursor: 'pointer' }}
         aria-label={`Edge from: ${source.id} to: ${target.id}`}
diff --git a/public/app/plugins/panel/nodeGraph/NodeGraph.tsx b/public/app/plugins/panel/nodeGraph/NodeGraph.tsx
index 02a7f5018d6..ffd741ca52c 100644
--- a/public/app/plugins/panel/nodeGraph/NodeGraph.tsx
+++ b/public/app/plugins/panel/nodeGraph/NodeGraph.tsx
@@ -227,6 +227,7 @@ export function NodeGraph({ getLinks, dataFrames, nodeLimit, panelId, zoomMode }
                 onMouseEnter={setEdgeHover}
                 onMouseLeave={clearEdgeHover}
                 svgIdNamespace={svgIdNamespace}
+                processedNodesLength={processed.nodes.length}
               />
             )}
             <Nodes
@@ -348,13 +349,14 @@ interface EdgesProps {
   onClick: (event: MouseEvent<SVGElement>, link: EdgeDatumLayout) => void;
   onMouseEnter: (id: string) => void;
   onMouseLeave: (id: string) => void;
+  processedNodesLength: number;
 }
 const Edges = memo(function Edges(props: EdgesProps) {
   return (
     <>
       {props.edges.map((e) => (
         <Edge
-          key={e.id}
+          key={`${e.id}-${e.source.y ?? ''}-${props.processedNodesLength}`}
           edge={e}
           hovering={
             (e.source as NodeDatum).id === props.nodeHoveringId ||
@@ -365,6 +367,7 @@ const Edges = memo(function Edges(props: EdgesProps) {
           onMouseEnter={props.onMouseEnter}
           onMouseLeave={props.onMouseLeave}
           svgIdNamespace={props.svgIdNamespace}
+          processedNodesLength={props.processedNodesLength}
         />
       ))}
     </>