@elyra/canvas 12.42.0 → 12.44.0

package/src/common-canvas/common-canvas-utils.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2023 Elyra Authors
+ * Copyright 2017-2024 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -18,7 +18,7 @@
 // objects stored in redux and also the copy of canvas objects maintained by
 // the CanvasRender objects.
 
-import { get, set } from "lodash";
+import { get, has, isNumber, set } from "lodash";
 import { ASSOCIATION_LINK, ASSOC_STRAIGHT, COMMENT_LINK, NODE_LINK,
 	LINK_TYPE_STRAIGHT, SUPER_NODE, NORTH, SOUTH, EAST, WEST }
 	from "../common-canvas/constants/canvas-constants.js";
@@ -1237,4 +1237,75 @@ export default class CanvasUtils {
 		return el.classList && el.classList.contains(className);
 	}
 
+	// Returns the ID of the pipeline referenced by the supernode
+	// passed in.
+	static getSupernodePipelineId(supernode) {
+		if (supernode.type === SUPER_NODE &&
+				has(supernode, "subflow_ref.pipeline_id_ref")) {
+			return supernode.subflow_ref.pipeline_id_ref;
+		}
+		return null;
+	}
+
+	// Convert now deprecated layout fields to the port positions arrays. The layout fields are
+	// expected to provided in pairs. For example: inputPortTopPosX and inputPortTopPosY. However,
+	// if they are not and only one of the pair is provided the functions in svg-canvas-utils.nodes.js
+	// that calculate a x, y coordinate for the port will default to 0 if a value provided is undefined.
+	// TODO - Remove this in a future major release.
+	static convertPortPosInfo(layout) {
+		const newLayout = layout;
+
+		if (!layout) {
+			return newLayout;
+		}
+
+		// If custom fields exist for input ports, write the values into the
+		// inputPortPositions array and delete the redundant fields.
+		if (isNumber(newLayout.inputPortTopPosX) || isNumber(newLayout.inputPortTopPosY)) {
+			newLayout.inputPortPositions = [
+				{ x_pos: newLayout.inputPortTopPosX, y_pos: newLayout.inputPortTopPosY, pos: "topLeft" }
+			];
+			delete newLayout.inputPortTopPosX;
+			delete newLayout.inputPortTopPosY;
+
+		} else if (isNumber(newLayout.inputPortBottomPosX) || isNumber(newLayout.inputPortBottomPosY)) {
+			newLayout.inputPortPositions = [
+				{ x_pos: newLayout.inputPortBottomPosX, y_pos: newLayout.inputPortBottomPosY, pos: "bottomLeft" }
+			];
+			delete newLayout.inputPortBottomPosX;
+			delete newLayout.inputPortBottomPosY;
+
+		} else if (isNumber(newLayout.inputPortLeftPosX) || isNumber(newLayout.inputPortLeftPosY)) {
+			newLayout.inputPortPositions = [
+				{ x_pos: newLayout.inputPortLeftPosX, y_pos: newLayout.inputPortLeftPosY, pos: "topLeft" }
+			];
+			delete newLayout.inputPortLeftPosX;
+			delete newLayout.inputPortLeftPosY;
+		}
+
+		// If custom fields exist for output ports, write the values into the
+		// outputPortPositions array and delete the redundant fields.
+		if (isNumber(newLayout.outputPortTopPosX) || isNumber(newLayout.outputPortTopPosY)) {
+			newLayout.outputPortPositions = [
+				{ x_pos: newLayout.outputPortTopPosX, y_pos: newLayout.outputPortTopPosY, pos: "topLeft" }
+			];
+			delete newLayout.outputPortTopPosX;
+			delete newLayout.outputPortTopPosY;
+
+		} else if (isNumber(newLayout.outputPortBottomPosX) || isNumber(newLayout.outputPortBottomPosY)) {
+			newLayout.outputPortPositions = [
+				{ x_pos: newLayout.outputPortBottomPosX, y_pos: newLayout.outputPortBottomPosY, pos: "bottomLeft" }
+			];
+			delete newLayout.outputPortBottomPosX;
+			delete newLayout.outputPortBottomPosY;
+
+		} else if (isNumber(newLayout.outputPortRightPosX) || isNumber(newLayout.outputPortRightPosY)) {
+			newLayout.outputPortPositions = [
+				{ x_pos: newLayout.outputPortRightPosX, y_pos: newLayout.outputPortRightPosY, pos: "topRight" }
+			];
+			delete newLayout.outputPortRightPosX;
+			delete newLayout.outputPortRightPosY;
+		}
+		return newLayout;
+	}
 }

package/src/common-canvas/common-canvas.scss

@@ -83,7 +83,7 @@ $panel-border-color: $ui-03;
 	background: $ui-01;
 	transition: all 0.2s ease-in;
 	&:hover {
-		background: $interactive-01;
+		background: $interactive-03;
 	}
 }
 
@@ -119,7 +119,7 @@ $panel-border-color: $ui-03;
 	.toolbar-overflow-item {
 		button:focus {
 			border-color: transparent;
-			box-shadow: inset 2px 2px $interactive-01, inset -6px -2px $interactive-01;
+			box-shadow: inset 2px 2px $interactive-03, inset -6px -2px $interactive-03;
 		}
 		// Set padding so overflow icon appears in the center (horizontally). This
 		// offsets the 5px which are set in the code to make the overflow icon
@@ -252,7 +252,7 @@ $panel-border-color: $ui-03;
 	& button:hover,
 	& button:focus {
 		background-color: $ui-03;
-		color: $interactive-01;
+		color: $interactive-03;
 	}
 	& .return-to-previous-content {
 		display: flex;
@@ -295,17 +295,17 @@ $panel-border-color: $ui-03;
 	border-width: 2px;
 }
 
-.toolbar-item-content.notificationCounterIcon {
-	&.error > div > svg > .dot {
+.toolbar-item.notificationCounterIcon {
+	&.error .toolbar-icon .dot {
 		fill: $support-01;
 	}
-	&.warning > div > svg > .dot {
+	&.warning .toolbar-icon .dot {
 		fill: $support-03;
 	}
-	&.success > div > svg > .dot {
+	&.success .toolbar-icon .dot {
 		fill: $support-02;
 	}
-	&.info > div > svg > .dot {
+	&.info .toolbar-icon .dot {
 		fill: $support-04;
 	}
 }

package/src/common-canvas/constants/canvas-constants.js

@@ -190,6 +190,7 @@ export const TOOLBAR_ARRANGE_VERTICALLY = "arrangeVertically";
 export const TOOLBAR_TOGGLE_NOTIFICATION_PANEL = "toggleNotificationPanel";
 export const TOOLBAR_OPEN_PALETTE = "paletteOpen";
 export const TOOLBAR_CLOSE_PALETTE = "paletteClose";
+export const TOOLBAR_TOGGLE_PALETTE = "paletteToggle";
 export const TOOLBAR_EXPAND_SUPERNODE_IN_PLACE = "expandSuperNodeInPlace";
 export const TOOLBAR_COLLAPSE_SUPERNODE_IN_PLACE = "collapseSuperNodeInPlace";
 export const TOOLBAR_EXPAND_SUPERNODE_FULL_PAGE = "displaySubPipeline";

package/src/common-canvas/svg-canvas-d3.scss

@@ -82,7 +82,7 @@ $comment-text-color: $text-01;
 
 // Comment properties
 $comment-text-font-size: 12px;
-$comment-text-font-weight: 400;
+$comment-text-font-weight: 500;
 $comment-text-font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
 $comment-text-line-height: 14px;
 $comment-text-display-border: 8px;
@@ -123,7 +123,7 @@ $link-highlight-color: $support-04;
 	// Supress the default focus highlighting with non-carbon color and round corners.
 	outline: none;
 	// Add our own focus highlighting with our own color and square corners
-	box-shadow: 0 0 0 2px $interactive-01;
+	box-shadow: 0 0 0 2px $interactive-03;
 }
 
 /* Pull-out region rectangle used for object selection */
@@ -549,6 +549,7 @@ $link-highlight-color: $support-04;
 		stroke: $node-port-input-arrow-connected-stroke-color;
 		stroke-width: 1;
 		fill: $node-port-input-arrow-connected-fill-color;
+		pointer-events: none;
 	}
 }
 

package/src/common-canvas/svg-canvas-renderer.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2023 Elyra Authors
+ * Copyright 2017-2024 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -1975,15 +1975,26 @@ export default class SVGCanvasRenderer {
 				} else {
 					this.addDynamicNodeIcons(d3Event, d, nodeGrp);
 				}
+			})
+			// This will be called when the mouse cursor enters the node or moves out of
+			// child elements of the node. Some child elements, like decorations, may have
+			// their own tooltips so this will redisplay the node tooltip on exiting the decoration.
+			.on("mouseover", (d3Event, d) => {
+				d3Event.stopPropagation(); // Stop propagation in case we are in a sub-flow
 				if (this.canOpenTip(TIP_TYPE_NODE)) {
-					this.canvasController.closeTip(); // Ensure existing tip is removed when moving pointer within an in-place supernode
-					this.canvasController.openTip({
-						id: this.getId("node_tip", d.id),
-						type: TIP_TYPE_NODE,
-						targetObj: d3Event.currentTarget,
-						pipelineId: this.activePipeline.id,
-						node: d
-					});
+					const tipId = this.canvasController.getTipId(); // Id of current tip or null
+					const nodeTipId = this.getId("node_tip", d.id);
+
+					if (tipId === null || tipId !== nodeTipId) {
+						this.canvasController.closeTip();
+						this.canvasController.openTip({
+							id: nodeTipId,
+							type: TIP_TYPE_NODE,
+							targetObj: d3Event.currentTarget,
+							pipelineId: this.activePipeline.id,
+							node: d
+						});
+					}
 				}
 			})
 			.on("mouseleave", (d3Event, d) => {
@@ -2507,7 +2518,7 @@ export default class SVGCanvasRenderer {
 	attachDecGroupListeners(decGrps) {
 		decGrps
 			.on("mouseenter", (d3Event, dec) => {
-				if (this.canOpenTip(TIP_TYPE_DEC)) {
+				if (this.canOpenTip(TIP_TYPE_DEC) && dec.tooltip) {
 					this.canvasController.closeTip(); // Ensure any existing tip is removed
 					this.canvasController.openTip({
 						id: this.getId("dec_tip", dec.id),
@@ -2518,8 +2529,10 @@ export default class SVGCanvasRenderer {
 					});
 				}
 			})
-			.on("mouseleave", (d3Event, d) => {
-				this.canvasController.closeTip();
+			.on("mouseleave", (d3Event, dec) => {
+				if (this.canOpenTip(TIP_TYPE_DEC) && dec.tooltip) {
+					this.canvasController.closeTip();
+				}
 			});
 	}
 
@@ -3371,135 +3384,202 @@ export default class SVGCanvasRenderer {
 	}
 
 	setPortPositionsForNode(node) {
-		if (this.canvasLayout.linkDirection === LINK_DIR_TOP_BOTTOM) {
-			this.setPortPositionsVertical(node, node.inputs, node.inputPortsWidth, node.layout.inputPortTopPosX, node.layout.inputPortTopPosY);
-			this.setPortPositionsVertical(node, node.outputs, node.outputPortsWidth, node.layout.outputPortBottomPosX, this.getOutputPortBottomPosY(node));
-		} else if (this.canvasLayout.linkDirection === LINK_DIR_BOTTOM_TOP) {
-			this.setPortPositionsVertical(node, node.inputs, node.inputPortsWidth, node.layout.inputPortBottomPosX, this.getInputPortBottomPosY(node));
-			this.setPortPositionsVertical(node, node.outputs, node.outputPortsWidth, node.layout.outputPortTopPosX, node.layout.outputPortTopPosY);
+		if (this.canvasLayout.linkDirection === LINK_DIR_TOP_BOTTOM ||
+				this.canvasLayout.linkDirection === LINK_DIR_BOTTOM_TOP) {
+			this.setPortPositionsVertical(
+				node, node.inputs, node.inputPortsWidth,
+				node.layout.inputPortPositions,
+				node.layout.inputPortAutoPosition);
+			this.setPortPositionsVertical(
+				node, node.outputs, node.outputPortsWidth,
+				node.layout.outputPortPositions,
+				node.layout.outputPortAutoPosition,
+				this.config.enableSingleOutputPortDisplay);
+
 		} else {
-			this.setPortPositionsLeftRight(node, node.inputs, node.inputPortsHeight, node.layout.inputPortLeftPosX, node.layout.inputPortLeftPosY);
-			this.setPortPositionsLeftRight(node, node.outputs, node.outputPortsHeight,
-				this.nodeUtils.getNodeOutputPortRightPosX(node),
-				this.nodeUtils.getNodeOutputPortRightPosY(node),
+			this.setPortPositionsHoriz(
+				node, node.inputs, node.inputPortsHeight,
+				node.layout.inputPortPositions,
+				node.layout.inputPortAutoPosition);
+			this.setPortPositionsHoriz(
+				node, node.outputs, node.outputPortsHeight,
+				node.layout.outputPortPositions,
+				node.layout.outputPortAutoPosition,
 				this.config.enableSingleOutputPortDisplay);
 		}
 	}
 
-	getOutputPortBottomPosY(node) {
-		return node.height + node.layout.outputPortBottomPosY;
-	}
-
-	getInputPortBottomPosY(node) {
-		return node.height + node.layout.inputPortBottomPosY;
-	}
-
-	setPortPositionsVertical(data, ports, portsWidth, xPos, yPos) {
+	setPortPositionsVertical(node, ports, portsWidth, portPositions, autoPosition, displaySinglePort = false) {
 		if (ports && ports.length > 0) {
-			if (data.width <= data.layout.defaultNodeWidth &&
+			const xPos = this.nodeUtils.getNodePortPosX(portPositions[0], node);
+			const yPos = this.nodeUtils.getNodePortPosY(portPositions[0], node);
+
+			if (node.width <= node.layout.defaultNodeWidth &&
 					ports.length === 1) {
 				ports[0].cx = xPos;
 				ports[0].cy = yPos;
 			} else {
-				let xPosition = 0;
+				// If we are only going to display a single port, we set all the
+				// port positions to be the same as if there is only one port.
+				if (displaySinglePort) {
+					this.setPortPositionsVerticalDisplaySingle(node, ports, xPos, yPos);
 
-				if (CanvasUtils.isExpandedSupernode(data)) {
-					const widthSvgArea = data.width - (2 * this.canvasLayout.supernodeSVGAreaPadding);
-					const remainingSpace = widthSvgArea - portsWidth;
-					xPosition = (2 * this.canvasLayout.supernodeSVGAreaPadding) + (remainingSpace / 2);
+				} else if (autoPosition || CanvasUtils.isExpandedSupernode(node)) {
+					this.setPortPositionsVerticalAuto(node, ports, portsWidth, yPos);
 
-				} else if (portsWidth < data.width) {
-					xPosition = (data.width - portsWidth) / 2;
+				} else {
+					this.setPortPositionsCustom(ports, portPositions, node, xPos, yPos);
 				}
+			}
+		}
+	}
 
-				xPosition += data.layout.portArcOffset;
+	// If only a single port is to be displayed, this methods sets the x and y
+	// coordinates of all the ports to the same values appropriately for either
+	// regular nodes or expanded supernodes.
+	setPortPositionsVerticalDisplaySingle(node, ports, xPos, yPos) {
+		let xPosition = 0;
+		if (CanvasUtils.isExpandedSupernode(node)) {
+			const widthSvgArea = node.width - (2 * this.canvasLayout.supernodeSVGAreaPadding);
+			xPosition = widthSvgArea / 2;
 
-				// Sub-flow binding node ports need to be spaced by the inverse of the
-				// zoom amount so that, after zoomToFit on the in-place sub-flow the
-				// binding node ports line up with those on the supernode. This is only
-				// necessary with binding nodes with mutiple ports.
-				let multiplier = 1;
-				if (CanvasUtils.isSuperBindingNode(data)) {
-					multiplier = 1 / this.zoomUtils.getZoomScale();
-				}
+		} else {
+			xPosition = xPos;
+		}
 
-				ports.forEach((p) => {
-					xPosition += (data.layout.portArcRadius * multiplier);
-					p.cx = xPosition;
-					p.cy = yPos;
-					xPosition += ((data.layout.portArcRadius + data.layout.portArcSpacing) * multiplier);
-				});
-			}
+		ports.forEach((p) => {
+			p.cx = xPosition;
+			p.cy = yPos;
+		});
+	}
+
+	// Sets the ports x and y coordinates for regular and expanded supernodes
+	// when all ports are displayed in a normal manner (as opposed to when a
+	// single port is displayed).
+	setPortPositionsVerticalAuto(node, ports, portsWidth, yPos) {
+		let xPosition = 0;
+
+		if (CanvasUtils.isExpandedSupernode(node)) {
+			const widthSvgArea = node.width - (2 * this.canvasLayout.supernodeSVGAreaPadding);
+			const remainingSpace = widthSvgArea - portsWidth;
+			xPosition = this.canvasLayout.supernodeSVGAreaPadding + (remainingSpace / 2);
+
+		} else if (portsWidth < node.width) {
+			xPosition = (node.width - portsWidth) / 2;
 		}
+
+		xPosition += node.layout.portArcOffset;
+
+		// Sub-flow binding node ports need to be spaced by the inverse of the
+		// zoom amount so that, after zoomToFit on the in-place sub-flow the
+		// binding node ports line up with those on the supernode. This is only
+		// necessary with binding nodes with mutiple ports.
+		let multiplier = 1;
+		if (CanvasUtils.isSuperBindingNode(node)) {
+			multiplier = 1 / this.zoomUtils.getZoomScale();
+		}
+		ports.forEach((p) => {
+			xPosition += (node.layout.portArcRadius * multiplier);
+			p.cx = xPosition;
+			p.cy = yPos;
+			xPosition += ((node.layout.portArcRadius + node.layout.portArcSpacing) * multiplier);
+		});
 	}
 
-	setPortPositionsLeftRight(data, ports, portsHeight, xPos, yPos, displaySinglePort = false) {
+	setPortPositionsHoriz(node, ports, portsHeight, portPositions, autoPosition, displaySinglePort = false) {
 		if (ports && ports.length > 0) {
-			if (data.height <= data.layout.defaultNodeHeight &&
+			const xPos = this.nodeUtils.getNodePortPosX(portPositions[0], node);
+			const yPos = this.nodeUtils.getNodePortPosY(portPositions[0], node);
+
+			if (node.height <= node.layout.defaultNodeHeight &&
 					ports.length === 1) {
 				ports[0].cx = xPos;
 				ports[0].cy = yPos;
+
 			} else {
-				// If we are only going to display a single port, we can set all the
+				// If we are only going to display a single port, we set all the
 				// port positions to be the same as if there is only one port.
 				if (displaySinglePort) {
-					this.setPortPositionsLeftRightSinglePort(data, ports, xPos, yPos);
+					this.setPortPositionsHorizDisplaySingle(node, ports, xPos, yPos);
+
+				} else if (autoPosition || CanvasUtils.isExpandedSupernode(node)) {
+					this.setPortPositionsHorizAuto(node, ports, portsHeight, xPos);
+
 				} else {
-					this.setPortPositionsLeftRightAllPorts(data, ports, portsHeight, xPos, yPos);
+					this.setPortPositionsCustom(ports, portPositions, node, xPos, yPos);
 				}
 			}
 		}
 	}
 
+	// If only a single port is to be displayed, this methods sets the x and y
+	// coordinates of all the ports to the same values appropriately for either
+	// regular nodes or expanded supernodes.
+	setPortPositionsHorizDisplaySingle(node, ports, xPos, yPos) {
+		let yPosition = 0;
+		if (CanvasUtils.isExpandedSupernode(node)) {
+			const heightSvgArea = node.height - this.canvasLayout.supernodeTopAreaHeight - this.canvasLayout.supernodeSVGAreaPadding;
+			yPosition = this.canvasLayout.supernodeTopAreaHeight + (heightSvgArea / 2);
+
+		} else {
+			yPosition = yPos;
+		}
+
+		ports.forEach((p) => {
+			p.cx = xPos;
+			p.cy = yPosition;
+		});
+	}
+
 	// Sets the ports x and y coordinates for regular and expanded supernodes
 	// when all ports are displayed in a normal manner (as opposed to when a
 	// single port is displayed).
-	setPortPositionsLeftRightAllPorts(data, ports, portsHeight, xPos, yPos) {
+	setPortPositionsHorizAuto(node, ports, portsHeight, xPos) {
 		let yPosition = 0;
 
-		if (CanvasUtils.isExpandedSupernode(data)) {
-			const heightSvgArea = data.height - this.canvasLayout.supernodeTopAreaHeight - this.canvasLayout.supernodeSVGAreaPadding;
+		if (CanvasUtils.isExpandedSupernode(node)) {
+			const heightSvgArea = node.height - this.canvasLayout.supernodeTopAreaHeight - this.canvasLayout.supernodeSVGAreaPadding;
 			const remainingSpace = heightSvgArea - portsHeight;
-			yPosition = this.canvasLayout.supernodeTopAreaHeight + this.canvasLayout.supernodeSVGAreaPadding + (remainingSpace / 2);
+			yPosition = this.canvasLayout.supernodeTopAreaHeight + (remainingSpace / 2);
 
-		} else if (portsHeight < data.height) {
-			yPosition = (data.height - portsHeight) / 2;
+		} else if (portsHeight < node.height) {
+			yPosition = (node.height - portsHeight) / 2;
 		}
 
-		yPosition += data.layout.portArcOffset;
+		yPosition += node.layout.portArcOffset;
 
 		// Sub-flow binding node ports need to be spaced by the inverse of the
 		// zoom amount so that, after zoomToFit on the in-place sub-flow the
 		// binding node ports line up with those on the supernode. This is only
 		// necessary with binding nodes with mutiple ports.
 		let multiplier = 1;
-		if (CanvasUtils.isSuperBindingNode(data)) {
+		if (CanvasUtils.isSuperBindingNode(node)) {
 			multiplier = 1 / this.zoomUtils.getZoomScale();
 		}
 		ports.forEach((p) => {
-			yPosition += (data.layout.portArcRadius * multiplier);
+			yPosition += (node.layout.portArcRadius * multiplier);
 			p.cx = xPos;
 			p.cy = yPosition;
-			yPosition += ((data.layout.portArcRadius + data.layout.portArcSpacing) * multiplier);
+			yPosition += ((node.layout.portArcRadius + node.layout.portArcSpacing) * multiplier);
 		});
 	}
 
-	// If only a single port is to be displayed, this methods sets the x and y
-	// coordinates of all the ports to the same values appropriately for either
-	// regular nodes or expanded supernodes.
-	setPortPositionsLeftRightSinglePort(data, ports, xPos, yPos) {
-		let yPosition = 0;
-		if (CanvasUtils.isExpandedSupernode(data)) {
-			const heightSvgArea = data.height - this.canvasLayout.supernodeTopAreaHeight - this.canvasLayout.supernodeSVGAreaPadding;
-			yPosition = this.canvasLayout.supernodeTopAreaHeight + (heightSvgArea / 2);
+	// Sets the node's port positions based on the custom positions provided
+	// by the application in the portPositions array.
+	setPortPositionsCustom(ports, portPositions, node, zerothX, zerothY) {
+		let xPos = zerothX;
+		let yPos = zerothY;
 
-		} else {
-			yPosition = yPos;
-		}
-
-		ports.forEach((p) => {
+		ports.forEach((p, i) => {
+			// No need to recalculate the zeroth position AND if there are more
+			// ports than portPositions just use the last port position for all
+			// subsequent ports.
+			if (i > 0 && i < portPositions.length) {
+				xPos = this.nodeUtils.getNodePortPosX(portPositions[i], node);
+				yPos = this.nodeUtils.getNodePortPosY(portPositions[i], node);
+			}
 			p.cx = xPos;
-			p.cy = yPosition;
+			p.cy = yPos;
 		});
 	}
 
@@ -4054,17 +4134,27 @@ export default class SVGCanvasRenderer {
 				if (this.config.enableContextToolbar) {
 					this.addContextToolbar(d3Event, link, "link");
 				}
-
+			})
+			// This will be called when the mouse cursor enters the link or moves out of
+			// child elements of the link. Some child elements, like decorations, may have
+			// their own tooltips so this will redisplay the link tooltip on exiting the decoration.
+			.on("mouseover", (d3Event, link) => {
+				d3Event.stopPropagation(); // Stop propagation in case we are in a sub-flow
 				if (this.canOpenTip(TIP_TYPE_LINK)) {
-					this.canvasController.closeTip();
-					this.canvasController.openTip({
-						id: this.getId("link_tip", link.id),
-						type: TIP_TYPE_LINK,
-						targetObj: targetObj,
-						mousePos: { x: d3Event.clientX, y: d3Event.clientY },
-						pipelineId: this.activePipeline.id,
-						link: link
-					});
+					const tipId = this.canvasController.getTipId(); // Id of current tip or null
+					const linkTipId = this.getId("link_tip", link.id);
+
+					if (tipId === null || tipId !== linkTipId) {
+						this.canvasController.closeTip();
+						this.canvasController.openTip({
+							id: linkTipId,
+							type: TIP_TYPE_LINK,
+							targetObj: d3Event.currentTarget,
+							mousePos: { x: d3Event.clientX, y: d3Event.clientY },
+							pipelineId: this.activePipeline.id,
+							link: link
+						});
+					}
 				}
 			})
 			.on("mouseleave", (d3Event, link) => {

package/src/common-canvas/svg-canvas-utils-external.js

@@ -69,7 +69,7 @@ export default class SvgCanvasExternal {
 				out.cy = outputPos.cy / k;
 			});
 		}
-		this.ren.displayLinks();
+		this.ren.displayMovedLinks();
 	}
 
 	setNodesProperties(newProps) {

package/src/common-canvas/svg-canvas-utils-links.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2023 Elyra Authors
+ * Copyright 2017-2024 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -245,34 +245,29 @@ export default class SvgCanvasLinks {
 	}
 
 	getNodeLinkCoordsForPorts(srcNode, srcPortId, trgNode, trgPortId) {
-		let srcX = srcNode.width + srcNode.layout.outputPortRightPosX;
-		let srcY = srcNode.layout.outputPortRightPosY;
-		let trgX = trgNode.layout.inputPortLeftPosX;
-		let trgY = trgNode.layout.inputPortLeftPosY;
-
-		if (this.canvasLayout.linkDirection === LINK_DIR_TOP_BOTTOM) {
-			srcX = srcNode.layout.outputPortBottomPosX;
-			srcY = srcNode.height + srcNode.layout.outputPortBottomPosY;
-			trgX = trgNode.layout.inputPortTopPosX;
-			trgY = trgNode.layout.inputPortTopPosY;
-
-		} else if (this.canvasLayout.linkDirection === LINK_DIR_BOTTOM_TOP) {
-			srcX = srcNode.layout.outputPortBottomPosX;
-			srcY = srcNode.layout.outputPortBottomPosY;
-			trgX = trgNode.layout.inputPortTopPosX;
-			trgY = trgNode.height + trgNode.layout.inputPortTopPosY;
-		}
+		let srcX;
+		let srcY;
+		let trgX;
+		let trgY;
 
 		if (srcNode.outputs && srcNode.outputs.length > 0) {
 			const port = srcNode.outputs.find((srcPort) => srcPort.id === srcPortId);
 			srcX = port ? port.cx : srcX;
 			srcY = port ? port.cy : srcY;
+
+		} else {
+			srcX = this.nodeUtils.getNodePortPosX(srcNode.layout.outputPortPositions[0], srcNode);
+			srcY = this.nodeUtils.getNodePortPosY(srcNode.layout.outputPortPositions[0], srcNode);
 		}
 
 		if (trgNode.inputs && trgNode.inputs.length > 0) {
 			const port = trgNode.inputs.find((trgPort) => trgPort.id === trgPortId);
 			trgX = port ? port.cx : trgX;
 			trgY = port ? port.cy : trgY;
+
+		} else {
+			trgX = this.nodeUtils.getNodePortPosX(trgNode.layout.inputPortPositions[0], trgNode);
+			trgY = this.nodeUtils.getNodePortPosY(trgNode.layout.inputPortPositions[0], trgNode);
 		}
 
 		return {
@@ -284,31 +279,32 @@ export default class SvgCanvasLinks {
 	}
 
 	getAssociationCurveLinkCoords(srcNode, trgNode, assocLinkVariation) {
-		let x1 = 0;
-		let x2 = 0;
+		let srcX = 0;
+		let trgX = 0;
 
 		if (assocLinkVariation === ASSOC_VAR_CURVE_RIGHT) {
-			x1 = srcNode.x_pos + srcNode.width;
-			x2 = trgNode.x_pos;
+			srcX = srcNode.width;
+			trgX = 0;
 
 		} else if (assocLinkVariation === ASSOC_VAR_CURVE_LEFT) {
-			x1 = srcNode.x_pos;
-			x2 = trgNode.x_pos + trgNode.width;
+			srcX = 0;
+			trgX = trgNode.width;
 
 		} else if (assocLinkVariation === ASSOC_VAR_DOUBLE_BACK_LEFT) {
-			x1 = srcNode.x_pos;
-			x2 = trgNode.x_pos;
+			srcX = 0;
+			trgX = 0;
 
 		} else {
-			x1 = srcNode.x_pos + srcNode.width;
-			x2 = trgNode.x_pos + trgNode.width;
+			srcX = srcNode.width;
+			trgX = trgNode.width;
 		}
 
 		return {
-			x1: x1,
-			y1: srcNode.y_pos + srcNode.layout.outputPortRightPosY,
-			x2: x2,
-			y2: trgNode.y_pos + trgNode.layout.inputPortLeftPosY };
+			x1: srcNode.x_pos + srcX,
+			y1: srcNode.y_pos + this.nodeUtils.getNodePortPosY(srcNode.layout.outputPortPositions[0], srcNode),
+			x2: trgNode.x_pos + trgX,
+			y2: trgNode.y_pos + this.nodeUtils.getNodePortPosY(trgNode.layout.inputPortPositions[0], trgNode)
+		};
 	}
 
 	getCommentLinkCoords(srcComment, trgNode) {