NodeGraph: Fix for dangling edge lines (#100866)

* Make sure edge line has a unique key

* Update keys
This commit is contained in:
Joey
2025-02-24 16:23:56 +00:00
committed by GitHub
parent e13bd52da6
commit 6348031de1
2 changed files with 7 additions and 2 deletions

View File

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