#1598 Prototype the mapping transformer application

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

@@ -76,7 +76,13 @@ export default class SVGCanvasPipeline {
 		return (typeof node === "undefined") ? null : node;
 	}
 
+	// Returns nodes from the active pipeline. If nodeIds is
+	// provided as an array the nodes correspondong to those IDs
+	// are returned otherwise all nodes are retunred.
 	getNodes(nodeIds) {
+		if (!nodeIds) {
+			return this.pipeline.nodes;
+		}
 		const nodes = [];
 		nodeIds.forEach((nId) => {
 			const n = this.getNode(nId);

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

@@ -33,7 +33,6 @@ const markdownIt = require("markdown-it")({
 });
 
 import { cloneDeep, escape as escapeText, forOwn, get } from "lodash";
-import { addNodeExternalObject, addDecExternalObject, removeExternalObject } from "./svg-canvas-utils-external.js";
 import { ASSOC_RIGHT_SIDE_CURVE, ASSOCIATION_LINK, NODE_LINK, COMMENT_LINK,
 	ASSOC_VAR_CURVE_LEFT, ASSOC_VAR_CURVE_RIGHT, ASSOC_VAR_DOUBLE_BACK_RIGHT,
 	LINK_TYPE_CURVE, LINK_TYPE_ELBOW, LINK_TYPE_STRAIGHT,
@@ -56,6 +55,7 @@ import SvgCanvasNodes from "./svg-canvas-utils-nodes.js";
 import SvgCanvasComments from "./svg-canvas-utils-comments.js";
 import SvgCanvasLinks from "./svg-canvas-utils-links.js";
 import SvgCanvasDecs from "./svg-canvas-utils-decs.js";
+import SvgCanvasExternal from "./svg-canvas-utils-external.js";
 import SvgCanvasTextArea from "./svg-canvas-utils-textarea.js";
 import SVGCanvasPipeline from "./svg-canvas-pipeline";
 
@@ -92,6 +92,7 @@ export default class SVGCanvasRenderer {
 		this.commentUtils = new SvgCanvasComments();
 		this.linkUtils = new SvgCanvasLinks(this.config, this.canvasLayout, this.nodeUtils, this.commentUtils);
 		this.decUtils = new SvgCanvasDecs(this.canvasLayout);
+		this.externalUtils = new SvgCanvasExternal(this);
 		this.svgCanvasTextArea = new SvgCanvasTextArea(
 			this.config,
 			this.dispUtils,
@@ -2304,7 +2305,6 @@ export default class SVGCanvasRenderer {
 			this.removeContextToolbar();
 		}
 
-
 		// Note: Comment and Node resizing is started by the comment/node highlight rectangle.
 		if (this.commentSizing) {
 			this.initializeResizeVariables(d);
@@ -2810,7 +2810,8 @@ export default class SVGCanvasRenderer {
 						.attr("class", "d3-foreign-object-external-node"),
 				null,
 				(exit) => {
-					exit.each(removeExternalObject.bind(this));
+					exit.each((d, idx, exts) =>
+						this.externalUtils.removeExternalObject(d, idx, exts));
 					exit.remove();
 				}
 			)
@@ -2819,7 +2820,8 @@ export default class SVGCanvasRenderer {
 			.attr("height", (d) => d.height)
 			.attr("x", 0)
 			.attr("y", 0)
-			.each(addNodeExternalObject.bind(this));
+			.each((d, idx, exts) =>
+				this.externalUtils.addNodeExternalObject(d, idx, exts));
 
 		// Node Image
 		nonBindingNodeGrps
@@ -2912,7 +2914,8 @@ export default class SVGCanvasRenderer {
 		// Remove any foreign objects for react nodes, if necessary.
 		removeSel
 			.selectChildren(".d3-foreign-object-external-node")
-			.each(removeExternalObject.bind(this));
+			.each((d, idx, exts) =>
+				this.externalUtils.removeExternalObject(d, idx, exts));
 
 		// Remove all nodes in the selection.
 		removeSel.remove();
@@ -3683,9 +3686,11 @@ export default class SVGCanvasRenderer {
 			extSel
 				.attr("width", this.decUtils.getDecWidth(dec, d, objType))
 				.attr("height", this.decUtils.getDecHeight(dec, d, objType))
-				.each(addDecExternalObject.bind(this));
+				.each((decData, idx, exts) =>
+					this.externalUtils.addDecExternalObject(decData, idx, exts));
 		} else {
-			extSel.each(removeExternalObject.bind(this));
+			extSel.each((decData, idx, exts) =>
+				this.externalUtils.removeExternalObject(decData, idx, exts));
 			extSel.remove();
 		}
 	}
@@ -6238,6 +6243,7 @@ export default class SVGCanvasRenderer {
 
 	// Creates all newly created links specified in the enter selection.
 	createLinks(enter) {
+		this.logger.logStartTimer("createLinks");
 		// Add groups for links
 		const newLinkGrps = enter.append("g")
 			.attr("data-id", (d) => this.getId("link_grp", d.id))
@@ -6281,13 +6287,16 @@ export default class SVGCanvasRenderer {
 				});
 		}
 
+		this.logger.logEndTimer("createLinks");
+
 		return newLinkGrps;
 	}
 
 	// Updates all the link groups (and descendant objects) in the joinedLinkGrps
 	// selection object. The selection object will contain newly created links
 	// as well as existing links.
 	updateLinks(joinedLinkGrps, lineArray) {
+		this.logger.logStartTimer("updateLinks");
 		// Update link selection area
 		joinedLinkGrps
 			.selectAll(".d3-link-selection-area")
@@ -6336,6 +6345,8 @@ export default class SVGCanvasRenderer {
 		if (!this.dragging) {
 			this.setDisplayOrder(joinedLinkGrps);
 		}
+
+		this.logger.logEndTimer("updateLinks");
 	}
 
 	attachLinkGroupListeners(linkGrps) {
@@ -6623,6 +6634,12 @@ export default class SVGCanvasRenderer {
 		}
 	}
 
+	// Raises the node, specified by the node ID, above other nodes and objects.
+	// Called by external utils.
+	raiseNodeToTopById(nodeId) {
+		this.getNodeGroupSelectionById(nodeId).raise();
+	}
+
 	// Raises the node above other nodes and objects (on the mouse entering
 	// the node). This is necessary for apps that have ports that protrude from
 	// the side of the node and where those nodes may be positioned close to each
@@ -6672,6 +6689,8 @@ export default class SVGCanvasRenderer {
 	}
 
 	buildLinksArray() {
+		this.logger.logStartTimer("buildLinksArray");
+
 		let linksArray = [];
 
 		if (this.canvasLayout.linkType === LINK_TYPE_STRAIGHT) {
@@ -6703,6 +6722,8 @@ export default class SVGCanvasRenderer {
 		// Add connection path info to the links.
 		linksArray = this.linkUtils.addConnectionPaths(linksArray);
 
+		this.logger.logEndTimer("buildLinksArray");
+
 		return linksArray;
 	}
 

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

@@ -16,19 +16,85 @@
 import React from "react";
 import ReactDOM from "react-dom";
 
-export const addNodeExternalObject = (node, i, foreignObjects) => {
-	ReactDOM.render(
-		<node.layout.nodeExternalObject
-			nodeData={node}
-		/>,
-		foreignObjects[i]
-	);
-};
-
-export const addDecExternalObject = (dec, i, foreignObjects) => {
-	ReactDOM.render(dec.jsx, foreignObjects[i]);
-};
-
-export const removeExternalObject = (obj, i, foreignObjects) => {
-	ReactDOM.unmountComponentAtNode(foreignObjects[i]);
-};
+import Logger from "../logging/canvas-logger.js";
+
+export default class SvgCanvasExternal {
+	constructor(renderer) {
+		this.logger = new Logger("SVGCanvasExternal");
+		this.ren = renderer;
+	}
+
+	addNodeExternalObject(node, i, foreignObjects) {
+		ReactDOM.render(
+			<node.layout.nodeExternalObject
+				nodeData={node}
+				canvasController={this.ren.canvasController}
+				externalUtils={this}
+			/>,
+			foreignObjects[i]
+		);
+	}
+
+	addDecExternalObject(dec, i, foreignObjects) {
+		ReactDOM.render(dec.jsx, foreignObjects[i]);
+	}
+
+	removeExternalObject(obj, i, foreignObjects) {
+		ReactDOM.unmountComponentAtNode(foreignObjects[i]);
+	}
+
+	getActiveNodes() {
+		return this.ren.activePipeline.getNodes();
+	}
+
+	getActiveNode(nodeId) {
+		return this.ren.activePipeline.getNode(nodeId);
+	}
+
+	setPortPositions(info) {
+		const node = this.ren.activePipeline.getNode(info.nodeId);
+		const zoomTransform = this.ren.getZoomTransform();
+
+		if (info.inputPositions) {
+			info.inputPositions.forEach((inputPos) => {
+				const inp = node.inputs.find((input) => input.id === inputPos.id);
+				inp.cx = inputPos.cx / zoomTransform.k;
+				inp.cy = inputPos.cy / zoomTransform.k;
+			});
+		}
+		if (info.outputPositions) {
+			info.outputPositions.forEach((outputPos) => {
+				const out = node.outputs.find((output) => output.id === outputPos.id);
+				out.cx = outputPos.cx / zoomTransform.k;
+				out.cy = outputPos.cy / zoomTransform.k;
+			});
+		}
+		this.ren.displayLinks();
+	}
+
+	setNodesProperties(newProps) {
+		if (newProps) {
+			newProps.forEach((np) => {
+				const node = this.ren.activePipeline.getNode(np.id);
+				if (np.height) {
+					node.height = np.height;
+				}
+				if (np.width) {
+					node.width = np.width;
+				}
+				if (np.x_pos) {
+					node.x_pos = np.x_pos;
+				}
+				if (np.y_pos) {
+					node.y_pos = np.y_pos;
+				}
+			});
+
+			this.ren.displayNodes();
+		}
+	}
+
+	raiseNodeToTopById(nodeId) {
+		this.ren.raiseNodeToTopById(nodeId);
+	}
+}

canvas_modules/harness/src/client/App.js

@@ -51,6 +51,7 @@ import ExplainCanvas from "./components/custom-canvases/explain/explain-canvas";
 import Explain2Canvas from "./components/custom-canvases/explain2/explain2-canvas";
 import StreamsCanvas from "./components/custom-canvases/streams/streams-canvas";
 import ReactNodesCarbonCanvas from "./components/custom-canvases/react-nodes-carbon/react-nodes-carbon";
+import ReactNodesMappingCanvas from "./components/custom-canvases/react-nodes-mapping/react-nodes-mapping";
 
 import Breadcrumbs from "./components/breadcrumbs.jsx";
 import Console from "./components/console/console.jsx";
@@ -109,6 +110,7 @@ import {
 	EXAMPLE_APP_READ_ONLY,
 	EXAMPLE_APP_PROGRESS,
 	EXAMPLE_APP_REACT_NODES_CARBON,
+	EXAMPLE_APP_REACT_NODES_MAPPING,
 	CUSTOM,
 	PALETTE_FLYOUT,
 	PROPERTIES_FLYOUT,
@@ -224,7 +226,7 @@ class App extends React.Component {
 			selectedExternalPipelineFlows: true,
 			selectedEditingActions: true,
 			selectedMoveNodesOnSupernodeResize: true,
-			selectedRaiseNodesToTopOnHover: false,
+			selectedRaiseNodesToTopOnHover: true,
 			selectedResizableNodes: false,
 			selectedDisplayFullLabelOnHover: false,
 			selectedPositionNodeOnRightFlyoutOpen: false,
@@ -2577,6 +2579,13 @@ class App extends React.Component {
 					config={commonCanvasConfig}
 				/>
 			);
+		} else if (this.state.selectedExampleApp === EXAMPLE_APP_REACT_NODES_MAPPING) {
+			firstCanvas = (
+				<ReactNodesMappingCanvas
+					ref={this.canvasRef}
+					config={commonCanvasConfig}
+				/>
+			);
 		}
 
 		let commonCanvas;