NodeGraph: Fix for dangling edge lines (#100866)

* Make sure edge line has a unique key

* Update keys

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}`}

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}
         />
       ))}
     </>