@elyra/canvas 12.11.1 → 12.12.1

package/src/common-properties/controls/expression/expression.jsx

@@ -249,7 +249,7 @@ class ExpressionControl extends React.Component {
 		} else {
 			const newValue = this.editor.getValue();
 			// don't validate when opening the expression builder
-			const skipValidate = evt.relatedTarget && evt.relatedTarget.classList.contains("properties-expression-button");
+			const skipValidate = evt && evt.relatedTarget && evt.relatedTarget.classList.contains("properties-expression-button");
 			this.props.controller.updatePropertyValue(this.props.propertyId, newValue, skipValidate);
 		}
 	}

package/src/common-properties/controls/expression/expression.scss

@@ -47,6 +47,8 @@
 
 .cm-s-custom .cm-def { color: $support-01; }
 
+.cm-s-custom .cm-comment { color: $support-02; }
+
 .cm-s-custom .cm-variable,
 .cm-s-custom .cm-punctuation,
 .cm-s-custom .cm-property,

package/src/common-properties/controls/multiselect/multiselect.jsx

@@ -72,7 +72,7 @@ class MultiSelectControl extends React.Component {
 		const selectedOptions = [];
 		if (values) {
 			values.forEach((value) => selectedOptions.push(options.find(function(option) {
-				return option.value === value;
+				return option.id === value;
 			})));
 		}
 		return selectedOptions;
@@ -82,7 +82,7 @@ class MultiSelectControl extends React.Component {
 		const options = [];
 		for (let j = 0; j < this.props.controlOpts.values.length; j++) {
 			options.push({
-				value: this.props.controlOpts.values[j],
+				id: this.props.controlOpts.values[j],
 				label: this.props.controlOpts.valueLabels[j]
 			});
 		}
@@ -110,7 +110,7 @@ class MultiSelectControl extends React.Component {
 	handleOnChange(evt) {
 		const controlValues = [];
 		for (let i = 0; i < evt.selectedItems.length; i++) {
-			controlValues.push(evt.selectedItems[i].value);
+			controlValues.push(evt.selectedItems[i].id);
 		}
 		this.props.controller.updatePropertyValue(this.props.propertyId, controlValues);
 	}
@@ -163,7 +163,7 @@ class MultiSelectControl extends React.Component {
 				disabled={this.props.state === STATES.DISABLED}
 				translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
 				items={multiSelectDropdown.options}
-				initialSelectedItems={multiSelectDropdown.selectedOptions}
+				selectedItems={multiSelectDropdown.selectedOptions}
 				onChange={this.handleOnChange}
 				label={label}
 				titleText={this.props.tableControl ? null : this.props.controlItem}

package/src/common-properties/controls/someofselect/someofselect.jsx

@@ -90,7 +90,7 @@ class SomeofselectControl extends React.Component {
 			controlValue = [];
 		}
 		const tableOptions = this.genSelectOptions(controlValue);
-		const rows = this.props.control.rows ? this.props.control.rows : 4;
+		const rows = this.props.control.rows ? this.props.control.rows : 5.5;
 		const tableLabel = (this.props.control.label && this.props.control.label.text) ? this.props.control.label.text : "";
 
 		return (

package/src/common-properties/form/ActionInfo.js

@@ -18,13 +18,14 @@
 import { ResourceDef } from "../util/L10nProvider";
 
 export class Action {
-	constructor(actionName, label, description, control, data, image) {
+	constructor(actionName, label, description, control, data, image, button) {
 		this.name = actionName;
 		this.label = label;
 		this.description = description;
 		this.actionType = control;
 		this.data = data;
 		this.image = image;
+		this.button = button;
 	}
 }
 
@@ -38,6 +39,7 @@ class ActionDef {
 			actionDef.control = action.control;
 			actionDef.data = action.data;
 			actionDef.image = action.image;
+			actionDef.button = action.button;
 			return actionDef;
 		}
 		return null;

package/src/common-properties/form/EditorForm.js

@@ -60,11 +60,14 @@ class Label {
 }
 
 class Description {
-	constructor(text, placement) {
+	constructor(text, placement, link) {
 		this.text = text;
 		if (placement) {
 			this.placement = placement;
 		}
+		if (link) {
+			this.link = link;
+		}
 	}
 }
 
@@ -395,7 +398,8 @@ function _makeControl(parameterMetadata, paramName, group, structureDefinition,
 	let controlDesc;
 	if (parameter.description) {
 		controlDesc = new Description(l10nProvider.l10nDesc(parameter, parameter.name),
-			parameter.description ? parameter.description.placement : null);
+			parameter.description ? parameter.description.placement : null,
+			parameter.description ? parameter.description.link : null);
 	}
 
 	// The role is used to modify the behaviour of certain controls
@@ -699,7 +703,7 @@ function _makeAction(action, l10nProvider) {
 	if (action.description) {
 		actionDesc = new Description(l10nProvider.l10nDesc(action, action.id));
 	}
-	return new Action(action.id, actionLabel, actionDesc, action.control, action.data, action.image);
+	return new Action(action.id, actionLabel, actionDesc, action.control, action.data, action.image, action.button);
 }
 
 function _makeButtons(buttonMetadata, l10nProvider) {

package/src/common-properties/properties-controller.js

@@ -42,7 +42,8 @@ export default class PropertiesController {
 			actionHandler: null,
 			buttonHandler: null,
 			buttonIconHandler: null,
-			titleChangeHandler: null
+			titleChangeHandler: null,
+			tooltipLinkHandler: null
 		};
 		this.propertiesConfig = {};
 		this.visibleDefinitions = {};

package/src/common-properties/properties-main/properties-main.jsx

@@ -63,7 +63,8 @@ class PropertiesMain extends React.Component {
 			buttonHandler: props.callbacks.buttonHandler,
 			buttonIconHandler: props.callbacks.buttonIconHandler,
 			validationHandler: props.callbacks.validationHandler,
-			titleChangeHandler: props.callbacks.titleChangeHandler
+			titleChangeHandler: props.callbacks.titleChangeHandler,
+			tooltipLinkHandler: props.callbacks.tooltipLinkHandler
 		});
 		this.setForm(props.propertiesInfo);
 		this.previousErrorMessages = {};
@@ -573,7 +574,8 @@ PropertiesMain.propTypes = {
 		buttonIconHandler: PropTypes.func,
 		validationHandler: PropTypes.func,
 		titleChangeHandler: PropTypes.func,
-		propertiesActionLabelHandler: PropTypes.func
+		propertiesActionLabelHandler: PropTypes.func,
+		tooltipLinkHandler: PropTypes.func
 	}),
 	customPanels: PropTypes.array, // array of custom panels
 	customControls: PropTypes.array, // array of custom controls

package/src/common-properties/util/L10nProvider.js

@@ -92,6 +92,9 @@ export class ResourceDef {
 			if (resourceObj.type) {
 				resource.type = resourceObj.type;
 			}
+			if (resourceObj.link) {
+				resource.link = resourceObj.link;
+			}
 		}
 		return resource;
 	}

package/src/object-model/api-pipeline.js

@@ -25,7 +25,7 @@ import PipelineOutHandler from "./pipeline-out-handler.js";
 import CanvasUtils from "../common-canvas/common-canvas-utils";
 
 import dagre from "dagre/dist/dagre.min.js";
-import { cloneDeep, get, has } from "lodash";
+import { cloneDeep, get, has, set } from "lodash";
 
 import { ASSOCIATION_LINK, NODE_LINK, COMMENT_LINK, VERTICAL,
 	DAGRE_HORIZONTAL, DAGRE_VERTICAL,
@@ -51,10 +51,6 @@ export default class APIPipeline {
 		return this.objectModel.getCanvasInfoPipeline(this.pipelineId).parentUrl;
 	}
 
-	setPipelineZoom(zoom, translate) {
-		this.store.dispatch({ type: "SET_PIPELINE_ZOOM", data: { zoom: zoom }, pipelineId: this.pipelineId });
-	}
-
 	// ---------------------------------------------------------------------------
 	// Node AND comment methods
 	// ---------------------------------------------------------------------------
@@ -423,10 +419,8 @@ export default class APIPipeline {
 				node.y_pos = 0;
 				node = PipelineOutHandler.createSchemaNode(node, []);
 				if (node.type === SUPER_NODE) {
-					if (!node.app_data) {
-						node.app_data = {};
-					}
-					node.app_data.pipeline_data = this.objectModel.getSchemaPipelinesForSupernode(node);
+					const pData = this.objectModel.getSchemaPipelinesForSupernode(node);
+					set(node, "app_data.ui_data.sub_pipelines", pData);
 				}
 				newNodes.push(node);
 			}
@@ -505,7 +499,7 @@ export default class APIPipeline {
 	addNode(newNode) {
 		if (newNode) {
 			if (newNode.type === SUPER_NODE) {
-				this.addSupernode(newNode, get(newNode, "app_data.pipeline_data"));
+				this.addSupernode(newNode, get(newNode, "sub_pipelines"));
 			} else {
 				this.store.dispatch({ type: "ADD_NODE", data: { newNode: newNode }, pipelineId: this.pipelineId });
 			}
@@ -545,7 +539,9 @@ export default class APIPipeline {
 		const sn = Object.assign({}, supernode);
 		if (sn.app_data) {
 			sn.app_data = Object.assign({}, sn.app_data);
-			delete sn.app_data.pipeline_data;
+			if (sn.app_data.ui_data) {
+				delete sn.app_data.ui_data.sub_pipelines;
+			}
 		}
 		return sn;
 	}

package/src/object-model/config-utils.js

@@ -62,6 +62,7 @@ export default class CanvasUtils {
 			enableInternalObjectModel: true,
 			enablePaletteLayout: "Flyout",
 			enableToolbarLayout: "Top",
+			enableResizableNodes: false,
 			enableInsertNodeDroppedOnLink: false,
 			enableHighlightNodeOnNewLinkDrag: false,
 			enableHighlightUnavailableNodes: false,

package/src/object-model/object-model.js

@@ -35,7 +35,8 @@ import { upgradePalette, extractPaletteVersion, LATEST_PALETTE_VERSION } from ".
 import { ASSOCIATION_LINK, COMMENT_LINK, NODE_LINK, ERROR, WARNING, SUCCESS, INFO, CREATE_PIPELINE,
 	CLONE_COMMENT, CLONE_COMMENT_LINK, CLONE_NODE, CLONE_NODE_LINK, CLONE_PIPELINE, SUPER_NODE,
 	HIGHLIGHT_BRANCH, HIGHLIGHT_UPSTREAM, HIGHLIGHT_DOWNSTREAM,
-	SNAP_TO_GRID_AFTER, SNAP_TO_GRID_DURING
+	SNAP_TO_GRID_AFTER, SNAP_TO_GRID_DURING,
+	SAVE_ZOOM_LOCAL_STORAGE, SAVE_ZOOM_PIPELINE_FLOW
 } from "../common-canvas/constants/canvas-constants.js";
 
 export default class ObjectModel {
@@ -227,8 +228,8 @@ export default class ObjectModel {
 		if (nodeTemplate) {
 			node = PipelineInHandler.convertNode(nodeTemplate, this.getCanvasLayout());
 
-			// PipelineInHandler will not handle the app_data.pipeline_data field of
-			// supernodes so...
+			// PipelineInHandler will not handle the conversion of sub_pipelines
+			// in supernodes to internal format so...
 			if (node.type === SUPER_NODE) {
 				node = this.convertPipelineData(node);
 			}
@@ -238,7 +239,7 @@ export default class ObjectModel {
 	}
 
 	convertPipelineData(supernode) {
-		const pd = get(supernode, "app_data.pipeline_data");
+		const pd = get(supernode, "sub_pipelines");
 		let newPd;
 		if (pd) {
 			newPd = supernode.subflow_ref.url
@@ -253,24 +254,26 @@ export default class ObjectModel {
 			newPd = [newPipeline];
 			set(supernode, "subflow_ref.pipeline_id_ref", newPipeline.id);
 		}
-		set(supernode, "app_data.pipeline_data", newPd);
+		supernode.sub_pipelines = newPd;
 		return supernode;
 	}
 
 	// Returns an object containing nodes and pipelines. The nodes are the
 	// same as the array of nodes passed in except that, any supernodes within
-	// the array will have their app_data.pipeline_data fields removed. The
+	// the array will have their app_data.ui_data.sub_pipelines fields removed. The
 	// pipelines returned will be any pipelines that were contained within the
-	// app_data.pipeline_data fields.
+	// app_data.ui_data.sub_pipelines fields.
 	extractAddDataPipelines(inNodes) {
 		const pipelines = [];
 		const nodes = [];
 		inNodes.forEach((n) => {
 			if (CanvasUtils.isSupernode(n)) {
-				const pDataArray = get(n, "app_data.pipeline_data");
+				const pDataArray = get(n, "sub_pipelines");
 				if (pDataArray) {
 					pipelines.push(...pDataArray);
-					delete n.app_data.pipeline_data;
+					if (n.sub_pipelines) {
+						delete n.sub_pipelines;
+					}
 				}
 			}
 			nodes.push(n);
@@ -776,6 +779,7 @@ export default class ObjectModel {
 			: 0;
 
 		node.height = Math.max(node.inputPortsHeight, node.outputPortsHeight, node.layout.defaultNodeHeight);
+		node.width = node.layout.defaultNodeWidth;
 
 		if (node.type === SUPER_NODE && node.is_expanded) {
 			node.height += canvasLayout.supernodeTopAreaHeight + canvasLayout.supernodeSVGAreaPadding;
@@ -784,12 +788,13 @@ export default class ObjectModel {
 			if (node.expanded_height) {
 				node.expanded_height = Math.max(node.expanded_height, node.height);
 			}
-		}
-		node.width = node.layout.defaultNodeWidth;
 
-		if (node.type === SUPER_NODE && node.is_expanded) {
 			node.width = CanvasUtils.getSupernodeExpandedWidth(node, canvasLayout);
 			node.height = CanvasUtils.getSupernodeExpandedHeight(node, canvasLayout);
+
+		} else {
+			node.height = node.resizeHeight ? node.resizeHeight : node.height;
+			node.width = node.resizeWidth ? node.resizeWidth : node.width;
 		}
 
 		return node;
@@ -807,21 +812,23 @@ export default class ObjectModel {
 			? (node.outputs.length * (node.layout.portArcRadius * 2)) + ((node.outputs.length - 1) * node.layout.portArcSpacing) + (node.layout.portArcOffset * 2)
 			: 0;
 
+		node.height = node.layout.defaultNodeHeight;
 		node.width = Math.max(node.inputPortsWidth, node.outputPortsWidth, node.layout.defaultNodeWidth);
 
 		if (node.type === SUPER_NODE && node.is_expanded) {
 			node.width += (2 * canvasLayout.supernodeSVGAreaPadding);
-			// If an expanded height is provided make sure it is at least as big
-			// as the node height.
+			// If an expanded width is provided make sure it is at least as big
+			// as the node width.
 			if (node.expanded_width) {
 				node.expanded_width = Math.max(node.expanded_width, node.width);
 			}
-		}
-		node.height = node.layout.defaultNodeHeight;
 
-		if (node.type === SUPER_NODE && node.is_expanded) {
 			node.width = CanvasUtils.getSupernodeExpandedWidth(node, canvasLayout);
 			node.height = CanvasUtils.getSupernodeExpandedHeight(node, canvasLayout);
+
+		} else {
+			node.height = node.resizeHeight ? node.resizeHeight : node.height;
+			node.width = node.resizeWidth ? node.resizeWidth : node.width;
 		}
 
 		return node;
@@ -1123,11 +1130,11 @@ export default class ObjectModel {
 	}
 
 	getPipelineFlowId() {
-		return this.getCanvasInfo().id;
+		return this.store.getPipelineFlowId();
 	}
 
 	getPrimaryPipelineId() {
-		return this.getCanvasInfo().primary_pipeline;
+		return this.store.getPrimaryPipelineId();
 	}
 
 	getPrimaryPipeline() {
@@ -1446,7 +1453,7 @@ export default class ObjectModel {
 		if (nodes) {
 			nodes.forEach((node) => {
 				let clonedNode = this.cloneNode(node);
-				// Pipelines in app_data.pipeline_data in supernodes will be in schema
+				// Pipelines in app_data.ui_data.sub_pipelines in supernodes will be in schema
 				// format (conforming to the pipeline flow schema) so they must be converted.
 				if (clonedNode.type === SUPER_NODE) {
 					clonedNode = this.convertPipelineData(clonedNode);
@@ -1912,11 +1919,55 @@ export default class ObjectModel {
 		return obj.type === NODE_LINK || obj.type === COMMENT_LINK || obj.type === ASSOCIATION_LINK;
 	}
 
-	// Clears any saved zom values in Local Storage
+	setZoom(zoom, pipelineId) {
+		const enableSaveZoom = this.getCanvasConfig().enableSaveZoom;
+		// This will save zoom to the pipeline if enableSaveZoom is
+		// SAVE_ZOOM_PIPELINE_FLOW and also will cause the toolbar to be updated
+		// so zoom icons can be enabled/disabled.
+		this.store.dispatch({ type: "SET_ZOOM", data: { zoom: zoom, enableSaveZoom }, pipelineId });
+
+		if (enableSaveZoom === SAVE_ZOOM_LOCAL_STORAGE) {
+			this.setSavedZoomLocal(zoom, pipelineId);
+		}
+	}
+
+	// Returns the saved zoom based on the enableSaveZoom config parameter.
+	getSavedZoom(pipelineId) {
+		const enableSaveZoom = this.getCanvasConfig().enableSaveZoom;
+		if (enableSaveZoom === SAVE_ZOOM_PIPELINE_FLOW) {
+			return this.store.getZoom(pipelineId);
+
+		} else if (enableSaveZoom === SAVE_ZOOM_LOCAL_STORAGE) {
+			return this.getSavedZoomLocal(pipelineId);
+		}
+		return null;
+	}
+
+	// Clears any saved zoom values in Local Storage
 	clearSavedZoomValues() {
 		LocalStorage.delete("canvasSavedZoomValues");
 	}
 
+	// Saves the zoom object passed in for this pipeline in local storage.
+	// The pipeline is identified by the pipelineFlowId and pipelineId passed in.
+	setSavedZoomLocal(zoom, pipelineId) {
+		const canvasSavedZoomValues = LocalStorage.get("canvasSavedZoomValues");
+		const savedZooms = canvasSavedZoomValues ? JSON.parse(canvasSavedZoomValues) : {};
+		set(savedZooms, [this.getPipelineFlowId(), pipelineId], zoom);
+		LocalStorage.set("canvasSavedZoomValues", JSON.stringify(savedZooms));
+	}
+
+	// Returns the zoom for this pipeline saved in local storage. The pipeline is
+	// identified by the pipelineFlowId and pipelineId passed in.
+	getSavedZoomLocal(pipelineId) {
+		const canvasSavedZoomValues = LocalStorage.get("canvasSavedZoomValues");
+		if (canvasSavedZoomValues) {
+			const savedZoom = JSON.parse(canvasSavedZoomValues);
+			return get(savedZoom, [this.getPipelineFlowId(), pipelineId]);
+		}
+		return null;
+	}
+
 	// ---------------------------------------------------------------------------
 	// Add decorations in batch
 	// ---------------------------------------------------------------------------
@@ -2246,7 +2297,7 @@ export default class ObjectModel {
 			const supernodes = CanvasUtils.filterSupernodes(nodes);
 			supernodes.forEach((supernode) => {
 				pipelines = pipelines.concat(this.getSchemaPipelinesForSupernode(supernode));
-				set(supernode, "app_data.pipeline_data", pipelines);
+				supernode.sub_pipelines = pipelines;
 			});
 		}
 

package/src/object-model/pipeline-in-handler.js

@@ -119,6 +119,11 @@ export default class PipelineInHandler {
 		if (node.type === MODEL_NODE) {
 			obj.model_ref = has(node, "model_ref") ? node.model_ref : "";
 		}
+		if (has(node, "app_data.ui_data.is_resized")) {
+			obj.isResized = node.app_data.ui_data.is_resized;
+			obj.resizeHeight = node.app_data.ui_data.resize_height;
+			obj.resizeWidth = node.app_data.ui_data.resize_width;
+		}
 		if (has(node, "app_data.ui_data.description")) {
 			obj.description = node.app_data.ui_data.description;
 		}
@@ -131,6 +136,9 @@ export default class PipelineInHandler {
 		if (has(node, "app_data.ui_data.style")) {
 			obj.style = node.app_data.ui_data.style;
 		}
+		if (has(node, "app_data.ui_data.sub_pipelines")) {
+			obj.sub_pipelines = node.app_data.ui_data.sub_pipelines;
+		}
 		if (has(node, "isSupernodeInputBinding")) {
 			obj.isSupernodeInputBinding = true;
 		}

package/src/object-model/pipeline-out-handler.js

@@ -153,6 +153,11 @@ export default class PipelineOutHandler {
 			uiData.is_expanded = ciNode.is_expanded;
 			uiData.expanded_width = ciNode.expanded_width;
 			uiData.expanded_height = ciNode.expanded_height;
+
+		} else if (ciNode.isResized) {
+			uiData.is_resized = ciNode.isResized;
+			uiData.resize_width = ciNode.width;
+			uiData.resize_height = ciNode.height;
 		}
 
 		if (ciNode.messages && !isEmpty(ciNode.messages)) {

package/src/object-model/redux/canvas-store.js

@@ -105,6 +105,22 @@ export default class CanavasStore {
 		return cloneDeep(this.store.getState().canvasinfo);
 	}
 
+	getPipelineFlowId() {
+		return this.store.getState().canvasinfo.id;
+	}
+
+	getPrimaryPipelineId() {
+		return this.store.getState().canvasinfo.primary_pipeline;
+	}
+
+	getZoom(pipelineId) {
+		const p = this.getNonClonedPipeline(pipelineId);
+		if (p) {
+			return cloneDeep(p.zoom);
+		}
+		return null;
+	}
+
 	// This is a service method for retrieving the internal pipeline. It does NOT
 	// clone the pipeline therefore it should NOT be called from outside this
 	// class because we don't want to surface the intenal data in redux to

package/src/object-model/redux/reducers/canvasinfo.js

@@ -18,6 +18,7 @@
 import nodes from "./nodes.js";
 import comments from "./comments.js";
 import links from "./links.js";
+import { SAVE_ZOOM_PIPELINE_FLOW } from "../../../common-canvas/constants/canvas-constants.js";
 
 export default (state = {}, action) => {
 	switch (action.type) {
@@ -97,14 +98,17 @@ export default (state = {}, action) => {
 		return Object.assign({}, state, { pipelines: canvasInfoPipelines });
 	}
 
-	case "SET_PIPELINE_ZOOM": {
-		const canvasInfoPipelines = state.pipelines.map((pipeline) => {
-			if (pipeline.id === action.pipelineId) {
-				return Object.assign({}, pipeline, { zoom: { "k": action.data.zoom.k, "x": action.data.zoom.x, "y": action.data.zoom.y } });
-			}
-			return pipeline;
-		});
-		return Object.assign({}, state, { pipelines: canvasInfoPipelines });
+	case "SET_ZOOM": {
+		if (action.data.enableSaveZoom === SAVE_ZOOM_PIPELINE_FLOW) {
+			const canvasInfoPipelines = state.pipelines.map((pipeline) => {
+				if (pipeline.id === action.pipelineId) {
+					return Object.assign({}, pipeline, { zoom: { "k": action.data.zoom.k, "x": action.data.zoom.x, "y": action.data.zoom.y } });
+				}
+				return pipeline;
+			});
+			return Object.assign({}, state, { pipelines: canvasInfoPipelines });
+		}
+		return state;
 	}
 
 	case "ADD_SUPERNODES": {

package/src/object-model/redux/reducers/canvastoolbar.js

@@ -16,6 +16,12 @@
 
 export default (state = {}, action) => {
 	switch (action.type) {
+	// Setting a zoom amount needs to cause toolbar to be re-rendered to
+	// enable/disable zoom buttons.
+	case "SET_ZOOM": {
+		return Object.assign({}, state);
+	}
+
 	case "SET_TOOLBAR_CONFIG": {
 		return Object.assign({}, state, { config: action.data.toolbarConfig });
 	}

package/src/object-model/redux/reducers/nodes.js

@@ -75,7 +75,18 @@ export default (state = [], action) => {
 				if (newNode.type === SUPER_NODE && newNode.is_expanded) {
 					newNode.expanded_width = nodeObj.width;
 					newNode.expanded_height = nodeObj.height;
+
+				} else if (nodeObj.isResized) {
+					newNode.isResized = nodeObj.isResized;
+					newNode.resizeWidth = nodeObj.resizeWidth;
+					newNode.resizeHeight = nodeObj.resizeHeight;
+
+				} else {
+					delete newNode.isResized;
+					delete newNode.resizeWidth;
+					delete newNode.resizeHeight;
 				}
+
 				return newNode;
 			}
 

package/src/toolbar/toolbar-action-item.jsx

@@ -78,9 +78,9 @@ class ToolbarActionItem extends React.Component {
 		case (TOOLBAR_ZOOM_FIT):
 			return <SVG src={ZoomToFit} disabled={disabled} />;
 		case (TOOLBAR_ARRANGE_HORIZONALLY):
-			return <SVG src={ArrangeVertically} disabled={disabled} />;
-		case (TOOLBAR_ARRANGE_VERTICALLY):
 			return <SVG src={ArrangeHorizontally} disabled={disabled} />;
+		case (TOOLBAR_ARRANGE_VERTICALLY):
+			return <SVG src={ArrangeVertically} disabled={disabled} />;
 		case (TOOLBAR_OPEN_PALETTE):
 			return <SVG src={PaletteOpen} disabled={disabled} />;
 		case (TOOLBAR_CLOSE_PALETTE):

package/src/tooltip/tooltip.jsx

@@ -20,6 +20,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { Portal } from "react-portal";
+import { Link } from "carbon-components-react";
 
 class ToolTip extends React.Component {
 	constructor(props) {
@@ -325,6 +326,10 @@ class ToolTip extends React.Component {
 		}
 	}
 
+	tooltipLinkOnClick(url) {
+		window.open(url, "_blank", "noopener");
+	}
+
 	render() {
 		let tooltipContent = null;
 		let triggerContent = null;
@@ -336,7 +341,13 @@ class ToolTip extends React.Component {
 			// `focus` event occurs before `click`. Adding timeout in onFocus function to ensure click is executed first.
 			// Ref - https://stackoverflow.com/a/49512400
 			const onFocus = () => this.showTooltipWithDelay();
-			const onBlur = () => this.setTooltipVisible(false);
+			const onBlur = (evt) => {
+				// Keep tooltip visible when clicked on a link.
+				// Since link is an anchor tag without "href" attribute, it has relatedTarget=null
+				if (evt.relatedTarget !== null) {
+					this.setTooltipVisible(false);
+				}
+			};
 			const click = (evt) => this.toggleTooltipOnClick(evt);
 
 			triggerContent = (<div
@@ -374,6 +385,21 @@ class ToolTip extends React.Component {
 			tipClass += " " + this.props.className;
 		}
 
+		let link = null;
+		if (this.state.isTooltipVisible && this.props.tooltipLinkHandler && this.props.link) {
+			const linkInformation = this.props.tooltipLinkHandler(this.props.link);
+			// Verify tooltipLinkHandler returns object in correct format
+			if (typeof linkInformation === "object" && linkInformation.label && linkInformation.url) {
+				link = (<Link
+					className="tooltip-link"
+					id={this.props.link.id}
+					onClick={this.tooltipLinkOnClick.bind(this, linkInformation.url)}
+				>
+					{linkInformation.label}
+				</Link>);
+			}
+		}
+
 		return (
 			<div className="tooltip-container">
 				{triggerContent}
@@ -384,6 +410,7 @@ class ToolTip extends React.Component {
 							<polygon points="8.1,16.1 0,8.1 8.1,0 8.1,1.4 1.4,8.1 8.1,14.7" />
 						</svg>
 						{tooltipContent}
+						{link}
 					</div>
 				</Portal>
 			</div>
@@ -393,6 +420,8 @@ class ToolTip extends React.Component {
 
 ToolTip.propTypes = {
 	tip: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+	link: PropTypes.object,
+	tooltipLinkHandler: PropTypes.func,
 	direction: PropTypes.oneOf(["left", "right", "top", "bottom"]),
 	children: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
 	targetObj: PropTypes.object,

package/src/tooltip/tooltip.scss

@@ -34,6 +34,17 @@
 	word-wrap: break-word;
 	max-width: 228px;
 	border-radius: 2px;
+	.bx--link {
+		display: block;
+		color: $inverse-link;
+		margin-top: $spacing-05;
+		pointer-events: auto; // To make link clickable inside tooltip
+		cursor: pointer;
+		&:hover {
+			color: $inverse-link;
+			text-decoration: underline;
+		}
+	}
 }
 
 .common-canvas-tooltip[direction="right"] {