NodeGraph: Fix overlaps preventing opening an edge context menu when nodes were too close (#68571)

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

@@ -32,6 +32,7 @@ const getStyles = (theme: GrafanaTheme2, hovering: HoverState) => ({
 
   text: css`
     fill: ${theme.colors.text.primary};
+    pointer-events: none;
   `,
 
   titleText: css`
@@ -57,6 +58,12 @@ const getStyles = (theme: GrafanaTheme2, hovering: HoverState) => ({
       background-color: ${tinycolor(theme.colors.background.primary).setAlpha(0.8).toHex8String()};
     }
   `,
+
+  clickTarget: css`
+    fill: none;
+    stroke: none;
+    pointer-events: fill;
+  `,
 });
 
 export const Node = memo(function Node(props: {
@@ -76,24 +83,11 @@ export const Node = memo(function Node(props: {
   }
 
   return (
-    <g
-      data-node-id={node.id}
-      className={styles.mainGroup}
-      onMouseEnter={() => {
-        onMouseEnter(node.id);
-      }}
-      onMouseLeave={() => {
-        onMouseLeave(node.id);
-      }}
-      onClick={(event) => {
-        onClick(event, node);
-      }}
-      aria-label={`Node: ${node.title}`}
-    >
+    <g data-node-id={node.id} className={styles.mainGroup} aria-label={`Node: ${node.title}`}>
       <circle className={styles.mainCircle} r={nodeR} cx={node.x} cy={node.y} />
       {isHovered && <circle className={styles.hoverCircle} r={nodeR - 3} cx={node.x} cy={node.y} strokeWidth={2} />}
       <ColorCircle node={node} />
-      <g className={styles.text}>
+      <g className={styles.text} style={{ pointerEvents: 'none' }}>
         <NodeContents node={node} hovering={hovering} />
         <foreignObject
           x={node.x - (isHovered ? 100 : 50)}
@@ -108,6 +102,23 @@ export const Node = memo(function Node(props: {
           </div>
         </foreignObject>
       </g>
+      <rect
+        data-testid={`node-click-rect-${node.id}`}
+        onMouseEnter={() => {
+          onMouseEnter(node.id);
+        }}
+        onMouseLeave={() => {
+          onMouseLeave(node.id);
+        }}
+        onClick={(event) => {
+          onClick(event, node);
+        }}
+        className={styles.clickTarget}
+        x={node.x - nodeR - 5}
+        y={node.y - nodeR - 5}
+        width={nodeR * 2 + 10}
+        height={nodeR * 2 + 50}
+      />
     </g>
   );
 });

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

@@ -89,7 +89,7 @@ describe('NodeGraph', () => {
     const origError = console.error;
     console.error = jest.fn();
 
-    const node = await screen.findByLabelText(/Node: service:0/);
+    const node = await screen.findByTestId('node-click-rect-0');
     await userEvent.click(node);
     await screen.findByText(/Node traces/);
 

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

@@ -232,12 +232,12 @@ function EdgeHeader(props: { edge: EdgeDatum; edges: DataFrame }) {
 
   const rows = [];
   if (valueSource && valueTarget) {
-    rows.push(<HeaderRow label={'Source → Target'} value={`${valueSource} → ${valueTarget}`} />);
+    rows.push(<HeaderRow key={'header-row'} label={'Source → Target'} value={`${valueSource} → ${valueTarget}`} />);
   }
 
   for (const f of [fields.mainStat, fields.secondaryStat, ...fields.details]) {
     if (f && f.values[index]) {
-      rows.push(<FieldRow field={f} index={index} />);
+      rows.push(<FieldRow key={`field-row-${index}`} field={f} index={index} />);
     }
   }