elyra-ai#2095 Hide link Label with ... and decorations based on link …

…length i… (elyra-ai#2096)

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

canvas_modules/common-canvas/src/common-canvas/cc-panels.jsx

@@ -33,10 +33,10 @@ import { PALETTE_LAYOUT_FLYOUT, PALETTE_LAYOUT_DIALOG, PALETTE_LAYOUT_NONE }
 	from "../common-canvas/constants/canvas-constants";
 
 
-class CommonCanvasCentralItems extends React.Component {
+class CommonCanvasPanels extends React.Component {
 	constructor(props) {
 		super(props);
-		this.logger = new Logger("CC-CentralItems");
+		this.logger = new Logger("CC-Panels");
 	}
 
 	// Prevent the default behavior (which is to show a plus-sign pointer) as
@@ -261,7 +261,7 @@ class CommonCanvasCentralItems extends React.Component {
 	}
 }
 
-CommonCanvasCentralItems.propTypes = {
+CommonCanvasPanels.propTypes = {
 	// Provided by CommonCanvas
 	canvasController: PropTypes.object.isRequired,
 	containingDivId: PropTypes.string.isRequired,
@@ -296,4 +296,4 @@ const mapStateToProps = (state, ownProps) => ({
 	rightFlyoutIsOpen: state.rightflyout.isOpen
 });
 
-export default connect(mapStateToProps)(CommonCanvasCentralItems);
+export default connect(mapStateToProps)(CommonCanvasPanels);

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

@@ -498,6 +498,14 @@ export default class CanvasUtils {
 		return null;
 	}
 
+	// Returns the distance from the start point to finsih point of the link line.
+	static getLinkDistance(link) {
+		const x = link.x2 - link.x1;
+		const y = link.y2 - link.y1;
+
+		return Math.sqrt((x * x) + (y * y));
+	}
+
 	// Return the center point of a quadratic bezier curve where p0 is the
 	// start point, p1 is the control point and p2 is the end point.
 	// This works for either the x or y coordinate.

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

@@ -4189,7 +4189,10 @@ export default class SVGCanvasRenderer {
 		joinedLinkGrps.each((d, i, linkGrps) => {
 			if (d.type === NODE_LINK || d.type === ASSOCIATION_LINK) {
 				const linkGrp = d3.select(linkGrps[i]).selectAll(".d3-link-decorations-group");
-				this.displayDecorations(d, DEC_LINK, linkGrp, d.decorations);
+				const decorations = this.shouldDisplayAltDecorations(d)
+					? this.canvasLayout.linkAltDecorations
+					: d.decorations;
+				this.displayDecorations(d, DEC_LINK, linkGrp, decorations);
 			}
 		});
 
@@ -4296,6 +4299,13 @@ export default class SVGCanvasRenderer {
 			});
 	}
 
+	// Returns true if the alternative decorations for the link line
+	// should be displayed.
+	shouldDisplayAltDecorations(link) {
+		return (this.canvasLayout.linkAltDecorations &&
+			CanvasUtils.getLinkDistance(link) < this.canvasLayout.linkDistanceForAltDecorations);
+	}
+
 	// Creates a new start handle and a new end handle for the link groups
 	// passed in.
 	createNewHandles(handlesGrp) {

canvas_modules/common-canvas/src/object-model/layout-dimensions.js

@@ -346,6 +346,14 @@ const portsHorizontalDefaultLayout = {
 		linkContextToolbarPosX: 0,
 		linkContextToolbarPosY: 0,
 
+		// The distance in pixels between the start and end points of the link
+		// below which the alternative decorations for the link will be displayed.
+		linkDistanceForAltDecorations: 150,
+
+		// Alternative decorations for the link. If specified, this should be an
+		// array of decoration objects.
+		linkAltDecorations: null,
+
 		// Link handle for input port can be "circle" or "image".
 		linkStartHandleObject: "circle",
 
@@ -761,6 +769,14 @@ const portsVerticalDefaultLayout = {
 		linkContextToolbarPosX: 0,
 		linkContextToolbarPosY: 0,
 
+		// The distance in pixels between the start and end points of the link,
+		// below which the alternative decorations for the link will be displayed.
+		linkDistanceForAltDecorations: 150,
+
+		// Alternative decorations for the link. If specified, this should be an
+		// array of decoration objects.
+		linkAltDecorations: null,
+
 		// Link handle for input port can be "circle" or "image".
 		linkStartHandleObject: "circle",
 

canvas_modules/harness/src/client/components/custom-canvases/stages/stages-canvas.jsx

@@ -169,7 +169,14 @@ export default class StagesCanvas extends React.Component {
 				linkEndHandleImage: "/images/custom-canvases/stages/decorations/dragStateArrow.svg",
 				linkEndHandleWidth: 20,
 				linkEndHandleHeight: 20,
-				linkHandleRaiseToTop: true
+				linkHandleRaiseToTop: true,
+				linkContextToolbarPosX: 0,
+				linkContextToolbarPosY: -15,
+				linkLengthForAltDecorations: 150,
+				linkAltDecorations: [
+					{ id: "alt-123", path: "M -25 -20 L -25 20 25 20 25 -20 Z", class_name: "det-link-label-background" },
+					{ id: "alt-456", label: "XXX", x_pos: -10, y_pos: -10 }
+				]
 			}
 		});
 		return config;

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

@@ -653,7 +653,7 @@ export default class SidePanelForms extends React.Component {
 		var enableShowLeftFlyout = (<div className="harness-sidepanel-children">
 			<Toggle
 				id="selectedShowLeftFlyout" // Set ID to corresponding field in App.js state
-				labelText={<div>Open Left Flyout<br />Only applicable whne Palette Layout is None</div>}
+				labelText="Open Left Flyout (Only applicable when Palette Layout is set to None)}"
 				toggled={this.props.getStateValue("selectedShowLeftFlyout")}
 				onToggle={(val) => this.setStateValue(val, "selectedShowLeftFlyout")}
 			/>