elyra-ai#1987 Enable option to allow link lines to be drawn over nodes using enableLinksOverNodes config. (elyra-ai#1988)

Signed-off-by: srikant <[email protected]>

Author: srikant-ch5

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

@@ -4131,7 +4131,7 @@ export default class SVGCanvasRenderer {
 			});
 		}
 
-		if (!this.isMoving() && !this.isSizing()) {
+		if (!this.isMoving() && !this.isSizing() && !this.config.enableLinksOverNodes) {
 			this.setDisplayOrder(joinedLinkGrps);
 		}
 
@@ -4206,7 +4206,7 @@ export default class SVGCanvasRenderer {
 			.on("mouseleave", (d3Event, link) => {
 				const targetObj = d3Event.currentTarget;
 
-				if (!targetObj.getAttribute("data-selected")) {
+				if (!targetObj.getAttribute("data-selected") && !this.config.enableLinksOverNodes) {
 					this.lowerLinkToBottom(targetObj);
 				}
 				this.setLinkLineStyles(targetObj, link, "default");
@@ -4460,11 +4460,14 @@ export default class SVGCanvasRenderer {
 	// * We are currently dragging to create a new link, or to move objects or detached links
 	// * There are one or more selected links
 	// * We are editing text
+	// * The app has indicated links should be displayed over nodes
 	raiseNodeToTop(nodeGrp) {
 		if (this.config.enableRaiseNodesToTopOnHover &&
 			!this.isDragging() &&
 			this.activePipeline.getSelectedLinksCount() === 0 &&
-			!this.isEditingText()) {
+			!this.isEditingText() &&
+			!this.config.enableLinksOverNodes
+		) {
 			nodeGrp.raise();
 		}
 	}

canvas_modules/harness/src/client/App.js

@@ -239,6 +239,7 @@ class App extends React.Component {
 			selectedNodeLayout: null,
 			selectedCanvasLayout: null,
 			selectedStateTagTip: "",
+			selectedLinksOverNodes: false,
 
 			// Common properties state variables
 			propertiesInfo: {},
@@ -2079,7 +2080,8 @@ class App extends React.Component {
 			enableZoomIntoSubFlows: this.state.selectedZoomIntoSubFlows,
 			enableSingleOutputPortDisplay: this.state.selectedSingleOutputPortDisplay,
 			enableNodeLayout: this.state.selectedNodeLayout,
-			enableCanvasLayout: this.state.selectedCanvasLayout
+			enableCanvasLayout: this.state.selectedCanvasLayout,
+			enableLinksOverNodes: this.state.selectedLinksOverNodes
 		};
 
 		return canvasConfig;

canvas_modules/harness/src/client/components/custom-canvases/react-nodes-mapping/mapping-container-node.jsx

@@ -32,6 +32,9 @@ const CONTAINER_GAP = 48;
 const DEFAUT_NODE_WIDTH = 400;
 const DEFAUT_NODE_HEIGHT = 30;
 
+// Amount in pixels to move the ports over the nodes
+const PORT_POS_INDENT = 8;
+
 
 class MappingContainerNode extends React.Component {
 	constructor(props) {
@@ -356,7 +359,7 @@ class MappingContainerNode extends React.Component {
 			: this.props.nodeData.inputs.map((port) =>
 				({
 					id: port.id,
-					cx: 0,
+					cx: PORT_POS_INDENT,
 					cy: this.isContainerResized() ? this.getFieldElementPortPosY(port.id, nodeDivRect, scrollDivRect) : (headerDivRect.height / 2)
 				}));
 
@@ -365,7 +368,7 @@ class MappingContainerNode extends React.Component {
 			: this.props.nodeData.outputs.map((port) =>
 				({
 					id: port.id,
-					cx: nodeDivRect.width,
+					cx: nodeDivRect.width - PORT_POS_INDENT,
 					cy: this.isContainerResized() ? this.getFieldElementPortPosY(port.id, nodeDivRect, scrollDivRect) : (headerDivRect.height / 2)
 				}));
 

canvas_modules/harness/src/client/components/custom-canvases/react-nodes-mapping/react-nodes-mapping.jsx

@@ -80,7 +80,8 @@ export default class ReactNodesMappingCanvas extends React.Component {
 			enableCanvasLayout: {
 				dataLinkArrowHead: true,
 				linkGap: 4
-			}
+			},
+			enableLinksOverNodes: true
 		});
 		return config;
 	}

canvas_modules/harness/src/client/components/sidepanel/canvas/sidepanel-canvas.jsx

@@ -756,6 +756,15 @@ export default class SidePanelForms extends React.Component {
 			/>
 		</div>);
 
+		var enableLinksOverNodes = (<div className="harness-sidepanel-children">
+			<Toggle
+				id="selectedLinksOverNodes"
+				labelText="Enable Links Over Nodes"
+				toggled={this.props.getStateValue("selectedLinksOverNodes")}
+				onToggle={(val) => this.setStateValue(val, "selectedLinksOverNodes")}
+			/>
+		</div>);
+
 		var enableImageDisplay = (<div className="harness-sidepanel-children" id="harness-sidepanel-link-selection">
 			<FormGroup
 				legendText="Enable Image Display"
@@ -1565,6 +1574,8 @@ export default class SidePanelForms extends React.Component {
 					{divider}
 					{enableAssocLinkCreation}
 					{divider}
+					{enableLinksOverNodes}
+					{divider}
 					{assocLinkType}
 					{divider}
 					<div className="harness-side-panel-header">Comments</div>

docs/pages/03.02.01-canvas-config.md

@@ -111,6 +111,9 @@ This is a Boolean. The default is `false`. If set to `true` it changes the natur
 #### **enableAssocLinkType**
 This can be "Straight" or "RightSideCurve". The default it "Straight". This field changes the way association links are drawn on the canvas.
 
+#### **enableLinksOverNodes**
+This is a boolean. The default value is `false`. If set to `true` links are placed above nodes in the canvas. Hover over nodes/links would still have links above nodes if `enableLinksOverNodes` is set to `true`. This is useful if the ports are positioned within the boundaries of the node and the link lines need to be displayed to those positions.
+
 ## Comments
 
 #### **enableMarkdownInComments**