Tempo: Fix showing dangling edges in NodeGraph (#107245)

* Tempo: Fix showing dangling edges in NodeGraph

* Remove comment

public/app/plugins/panel/nodeGraph/Edge.tsx

@@ -17,11 +17,10 @@ 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, processedNodesLength } = props;
+  const { edge, onClick, onMouseEnter, onMouseLeave, hovering, svgIdNamespace } = props;
 
   // Not great typing but after we do layout these properties are full objects not just references
   const { source, target, sourceNodeRadius, targetNodeRadius } = edge as {
@@ -59,7 +58,6 @@ 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={t('nodeGraph.edge.aria-label-from-to', 'Edge from: {{from}} to: {{to}}', {

public/app/plugins/panel/nodeGraph/NodeGraph.tsx

@@ -290,6 +290,7 @@ export function NodeGraph({ getLinks, dataFrames, nodeLimit, panelId, zoomMode,
                 onMouseLeave={clearEdgeHover}
                 svgIdNamespace={svgIdNamespace}
                 processedNodesLength={processed.nodes.length}
+                processedEdgesLength={processed.edges.length}
               />
             )}
             <Nodes
@@ -430,26 +431,28 @@ interface EdgesProps {
   onMouseEnter: (id: string) => void;
   onMouseLeave: (id: string) => void;
   processedNodesLength: number;
+  processedEdgesLength: number;
 }
 const Edges = memo(function Edges(props: EdgesProps) {
   return (
     <>
-      {props.edges.map((e) => (
-        <Edge
-          key={`${e.id}-${e.source.y ?? ''}-${props.processedNodesLength}`}
-          edge={e}
-          hovering={
-            (e.source as NodeDatum).id === props.nodeHoveringId ||
-            (e.target as NodeDatum).id === props.nodeHoveringId ||
-            props.edgeHoveringId === e.id
-          }
-          onClick={props.onClick}
-          onMouseEnter={props.onMouseEnter}
-          onMouseLeave={props.onMouseLeave}
-          svgIdNamespace={props.svgIdNamespace}
-          processedNodesLength={props.processedNodesLength}
-        />
-      ))}
+      {props.edges.map((e, index) => {
+        return (
+          <Edge
+            key={`${e.id}-${e.source.y ?? ''}-${props.processedNodesLength}-${props.processedEdgesLength}-${index}`}
+            edge={e}
+            hovering={
+              (e.source as NodeDatum).id === props.nodeHoveringId ||
+              (e.target as NodeDatum).id === props.nodeHoveringId ||
+              props.edgeHoveringId === e.id
+            }
+            onClick={props.onClick}
+            onMouseEnter={props.onMouseEnter}
+            onMouseLeave={props.onMouseLeave}
+            svgIdNamespace={props.svgIdNamespace}
+          />
+        );
+      })}
     </>
   );
 });
@@ -462,7 +465,7 @@ interface EdgeLabelsProps {
 const EdgeLabels = memo(function EdgeLabels(props: EdgeLabelsProps) {
   return (
     <>
-      {props.edges.map((e, index) => {
+      {props.edges.map((e) => {
         // We show the edge label in case user hovers over the edge directly or if they hover over node edge is
         // connected to.
         const shouldShow =