From 50faeba07e7cb1b4d5e3c68f04baf267726e6ce9 Mon Sep 17 00:00:00 2001
From: Adela Almasan <88068998+adela-almasan@users.noreply.github.com>
Date: Mon, 23 Jan 2023 10:51:55 -0600
Subject: [PATCH] Canvas: Connection heads not rendering consistently (#61887)

---
 public/app/plugins/panel/canvas/ConnectionSVG.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/public/app/plugins/panel/canvas/ConnectionSVG.tsx b/public/app/plugins/panel/canvas/ConnectionSVG.tsx
index d1c1e5f7e6b..6c54415f3f7 100644
--- a/public/app/plugins/panel/canvas/ConnectionSVG.tsx
+++ b/public/app/plugins/panel/canvas/ConnectionSVG.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
@@ -19,11 +19,14 @@ interface ConnectionInfo {
   info: CanvasConnection;
 }
 
+let idCounter = 0;
 export const ConnectionSVG = ({ setSVGRef, setLineRef, scene }: Props) => {
   const styles = useStyles2(getStyles);
 
+  const headId = Date.now() + '_' + idCounter++;
   const CONNECTION_LINE_ID = 'connectionLineId';
-  const CONNECTION_HEAD_ID = 'head';
+  const CONNECTION_HEAD_ID = useMemo(() => `head-${headId}`, [headId]);
+  const EDITOR_HEAD_ID = useMemo(() => `editorHead-${headId}`, [headId]);
 
   const [selectedConnection, setSelectedConnection] = useState<CanvasConnection | undefined>(undefined);
 
@@ -117,7 +120,6 @@ export const ConnectionSVG = ({ setSVGRef, setLineRef, scene }: Props) => {
       }
 
       const parentBorderWidth = parseFloat(getComputedStyle(parent).borderWidth);
-
       const sourceHorizontalCenter = sourceRect.left - parentRect.left - parentBorderWidth + sourceRect.width / 2;
       const sourceVerticalCenter = sourceRect.top - parentRect.top - parentBorderWidth + sourceRect.height / 2;
 
@@ -200,7 +202,7 @@ export const ConnectionSVG = ({ setSVGRef, setLineRef, scene }: Props) => {
       <svg ref={setSVGRef} className={styles.editorSVG}>
         <defs>
           <marker
-            id="editorHead"
+            id={EDITOR_HEAD_ID}
             markerWidth="10"
             markerHeight="7"
             refX="10"
@@ -211,7 +213,7 @@ export const ConnectionSVG = ({ setSVGRef, setLineRef, scene }: Props) => {
             <polygon points="0 0, 10 3.5, 0 7" fill="rgb(255,255,255)" />
           </marker>
         </defs>
-        <line ref={setLineRef} stroke="rgb(255,255,255)" strokeWidth={2} markerEnd="url(#editorHead)" />
+        <line ref={setLineRef} stroke="rgb(255,255,255)" strokeWidth={2} markerEnd={`url(#${EDITOR_HEAD_ID})`} />
       </svg>
       {renderConnections()}
     </>