@elyra/canvas 13.43.2 → 13.45.0

package/locales/toolbar/locales/zh-CN.json

@@ -5,11 +5,7 @@
   "toolbar.zoomToFit": "缩放至适当大小",
   "toolbar.overflowMenu": "溢出菜单",
   "toolbar.flowEditorToolbarLabel": "流程编辑器",
-  "toolbar.flowEditorToolbarContainer": "流程编辑器选项",
   "toolbar.textToolbarLabel": "文本",
-  "toolbar.textToolbarContainer": "文本选项",
   "toolbar.contextToolbarLabel": "上下文",
-  "toolbar.contextToolbarContainer": "上下文选项",
-  "toolbar.paletteDialogToolbarLabel": "调色板对话框",
-  "toolbar.paletteDialogToolbarContainer": "调色板对话框选项"
+  "toolbar.paletteDialogToolbarLabel": "调色板对话框"
 }

package/locales/toolbar/locales/zh-TW.json

@@ -5,11 +5,7 @@
   "toolbar.zoomToFit": "適當縮放",
   "toolbar.overflowMenu": "溢位功能表",
   "toolbar.flowEditorToolbarLabel": "流程編輯器",
-  "toolbar.flowEditorToolbarContainer": "流程編輯器選項",
   "toolbar.textToolbarLabel": "文字",
-  "toolbar.textToolbarContainer": "文字選項",
   "toolbar.contextToolbarLabel": "環境定義",
-  "toolbar.contextToolbarContainer": "上下文選項",
-  "toolbar.paletteDialogToolbarLabel": "調色板對話框",
-  "toolbar.paletteDialogToolbarContainer": "調色板對話方塊選項"
+  "toolbar.paletteDialogToolbarLabel": "調色板對話框"
 }

package/package.json

@@ -1,16 +1,22 @@
 {
   "name": "@elyra/canvas",
-  "version": "13.43.2",
+  "version": "13.45.0",
   "description": "Elyra common-canvas",
-  "main": "dist/common-canvas.js",
-  "module": "dist/common-canvas.es.js",
+  "main": "dist/common-canvas.cjs",
+  "module": "dist/common-canvas.js",
   "exports": {
     ".": {
-      "import": "./dist/common-canvas.es.js",
-      "require": "./dist/common-canvas.js",
-      "types": "./types/index.d.ts"
+      "import": {
+        "types": "./types/index.d.ts",
+        "default": "./dist/common-canvas.js"
+      },
+      "require": {
+        "types": "./types/index.d.cts",
+        "default": "./dist/common-canvas.cjs"
+      }
     },
     "./src/*": "./src/*",
+    "./dist/styles/common-canvas.min.css": "./dist/styles/common-canvas.min.css",
     "./locales/*/locales": "./locales/*/locales/index.js",
     "./package.json": "./package.json"
   },
@@ -24,6 +30,7 @@
   },
   "license": "Apache-2.0",
   "sideEffects": false,
+  "type": "module",
   "types": "./types/index.d.ts",
   "scripts": {
     "build": "npx stylelint '**/*.scss' && grunt && rollup -c",
@@ -69,7 +76,7 @@
     "react-virtualized": "9.22.6",
     "redux": "^5.0.1",
     "seedrandom": "^3.0.5",
-    "uuid": "^8.3.0"
+    "uuid": "^14.0.0"
   },
   "devDependencies": {
     "@babel/core": "7.25.2",

package/rollup.config.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2023 Elyra Authors
+ * Copyright 2017-2026 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -40,31 +40,35 @@ export default {
 		"lib/canvas-controller": "./src/common-canvas/canvas-controller.js",
 		"common-canvas": "./src/index.js"
 	},
+	external: [
+		// autoExternal() handles top-level packages from dependencies/peerDependencies
+		// but we need to explicitly externalize React subpath imports
+		"react/jsx-runtime",
+		"react/jsx-dev-runtime"
+	],
 	output: [
 		{
-			entryFileNames: "[name].js",
+			entryFileNames: "[name].cjs",
 			dir: "./dist",
 			format: "cjs",
 			sourcemap: true,
 			exports: "auto"
 		},
 		{
-			entryFileNames: "[name].[format].js",
+			entryFileNames: "[name].js",
 			dir: "./dist",
 			format: "esm",
 			sourcemap: true
 		}
 	],
 	plugins: [
-		autoExternal(),
+		autoExternal({
+			dependencies: true,
+			peerDependencies: true
+		}),
 		json(),
 		url(),
 		scss({ output: false }),
-		resolve(
-			{
-				extensions: [".js", ".jsx", ".json"]
-			}
-		),
 		babel({
 			babelHelpers: "runtime",
 			exclude: "**/node_modules/**",
@@ -80,8 +84,11 @@ export default {
 				["transform-react-remove-prop-types", { removeImport: true }]
 			]
 		}),
-		terser(),
+		resolve({
+			extensions: [".js", ".jsx", ".json"]
+		}),
 		commonjs(),
+		terser(),
 		visualizer({ open: bundleReport })
 	]
 };

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

@@ -1353,6 +1353,14 @@ export default class CanvasController {
 		this.objectModel.getAPIPipeline(pipelineId).setLinkProperties(linkId, properties);
 	}
 
+	// Sets the link parameters
+	// linkId - The ID of the link
+	// parameters - An array of parameters
+	// pipelineId - The ID of the pipeline
+	setLinkParameters(linkId, parameters, pipelineId) {
+		this.objectModel.getAPIPipeline(pipelineId).setLinkParameters(linkId, parameters);
+	}
+
 	// Sets the source properties in the data link identified by the linkId. The
 	// srcNodeId and srcNodePortId will be set to the values provided. If
 	// srcNodePortId is set to null the current srcNodePortId will be removed

package/src/common-canvas/cc-toolbar.jsx

@@ -165,7 +165,7 @@ class CommonCanvasToolbar extends React.Component {
 
 		let paletteLabel = this.getLabel("toolbar.palette");
 
-		// If the leftBar contains and old palette action and if followed by a
+		// If the leftBar contains an old palette action and if followed by a
 		// divider remove them.
 		let newLeftBar = leftBar;
 		if (leftBar && leftBar.length > 0 && leftBar[0].action === "palette") {
@@ -317,6 +317,50 @@ class CommonCanvasToolbar extends React.Component {
 		return toolbarConfig;
 	}
 
+	// Adds appropriate labels to any tools with standard actions if they
+	// don't already have a label.
+	addDefaultCommandLabels(toolbarConfig) {
+		toolbarConfig.leftBar.forEach((tool) => {
+			this.addLabelIfNeeded(tool);
+		});
+		toolbarConfig.rightBar.forEach((tool) => {
+			this.addLabelIfNeeded(tool);
+		});
+		return toolbarConfig;
+	}
+
+	// Add a label to the tool, if it doesn't already have one, where
+	// the label is appropriate if the tool's action is a standard action.
+	addLabelIfNeeded(tool) {
+		if (typeof tool.label === "undefined") {
+			const lk = this.genLabelKey(tool.action);
+			if (lk) {
+				tool.label = this.getLabel(lk);
+			}
+		}
+	}
+
+	// Returns an appropriate label-key for any of the standard actions
+	// or null if this is not a standard action.
+	genLabelKey(action) {
+		switch (action) {
+		case "undo": return "canvas.undo";
+		case "redo": return "canvas.redo";
+		case "cut": return "edit.cutSelection";
+		case "copy": return "edit.copySelection";
+		case "paste": return "edit.pasteSelection";
+		case "createAutoComment": return "canvas.addComment";
+		case "deleteSelectedObjects": return "canvas.deleteObject";
+		case "arrangeHorizontally": return "canvas.arrangeHorizontally";
+		case "arrangeVertically": return "canvas.arrangeVertically";
+		case "zoomIn": return "toolbar.zoomIn";
+		case "zoomOut": return "toolbar.zoomOut";
+		case "zoomToFit": return "toolbar.zoomToFit";
+
+		default: return null;
+		}
+	}
+
 	addUndoRedoCommandLabels(toolbarConfig) {
 		const undoLabel = this.props.undoLabel;
 		const redoLabel = this.props.redoLabel;
@@ -361,6 +405,7 @@ class CommonCanvasToolbar extends React.Component {
 
 		let toolbarConfig = this.generateToolbarConfig();
 		toolbarConfig = this.configureToolbarButtonsState(toolbarConfig);
+		toolbarConfig = this.addDefaultCommandLabels(toolbarConfig);
 		toolbarConfig = this.addUndoRedoCommandLabels(toolbarConfig);
 		let canvasToolbar = null;
 

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

@@ -1913,7 +1913,7 @@ export default class SVGCanvasRenderer {
 		// Node Body
 		nonBindingNodeGrps
 			.selectChildren(".d3-node-body-outline")
-			.data((d) => (d.layout.nodeShapeDisplay ? [d] : []), (d) => d.id)
+			.data((d) => (d.layout.nodeShapeDisplay || CanvasUtils.isExpandedSupernode(d) ? [d] : []), (d) => d.id)
 			.join(
 				(enter) =>
 					enter
@@ -4724,20 +4724,26 @@ export default class SVGCanvasRenderer {
 	}
 
 	displayLinksSubset(selection, linksArray) {
-		selection
-			.data(linksArray, (link) => link.id)
-			.join(
-				(enter) => this.createLinks(enter)
-			)
-			.attr("class", (d) => this.getLinkGroupClass(d))
-			.attr("tabindex", -1)
-			.attr("style", (d) => this.getLinkGrpStyle(d))
-			.attr("data-selected", (d) => (this.activePipeline.isSelected(d.id) ? true : null))
-			.attr("aria-label", (d) => CanvasUtils.getLinkAriaLabel(d, this.canvasController.labelUtil))
-			.attr("aria-roledescription", this.canvasController.labelUtil.getLabel("link.ariaRoleDescription"))
-			.call((joinedLinkGrps) => {
-				this.updateLinks(joinedLinkGrps, linksArray);
-			});
+		// The D3 join operation can sometimes cause focus to be lost from any
+		// currently focused object involved in the join (even if no new objects
+		// have been created or if no objects are removed) so we preserve and
+		// reinstate the focus after this operation is complete.
+		this.preserveFocus(() => {
+			selection
+				.data(linksArray, (link) => link.id)
+				.join(
+					(enter) => this.createLinks(enter)
+				)
+				.attr("class", (d) => this.getLinkGroupClass(d))
+				.attr("tabindex", -1)
+				.attr("style", (d) => this.getLinkGrpStyle(d))
+				.attr("data-selected", (d) => (this.activePipeline.isSelected(d.id) ? true : null))
+				.attr("aria-label", (d) => CanvasUtils.getLinkAriaLabel(d, this.canvasController.labelUtil))
+				.attr("aria-roledescription", this.canvasController.labelUtil.getLabel("link.ariaRoleDescription"))
+				.call((joinedLinkGrps) => {
+					this.updateLinks(joinedLinkGrps, linksArray);
+				});
+		});
 	}
 
 	// Creates all newly created links specified in the enter selection.
@@ -6578,11 +6584,8 @@ export default class SVGCanvasRenderer {
 			// appears in the viewport. If the event was a MouseEvent we don't zoom to reveal
 			// because it interferes with double-click events (also it's not necessary because
 			// the object will be at least partially visible in the view port for it to be clicked).
-			// Also, we don't zoom to reveal if the object is a link in a full-page subflow
-			// because a) they are almost always on display and b) if the link is to, or from, a
-			// binding node zoomToReveal will cause the nodes to be incorrectly moved.
-			if (CanvasUtils.isKeyboardEvent(evt) &&
-					!(type === "link" && this.dispUtils.isDisplayingSubFlowFullPage())) {
+			// Also, some objects should not cause a zoom, so check for them.
+			if (CanvasUtils.isKeyboardEvent(evt) && this.shouldObjectCauseZoom(obj, type)) {
 				const zoom = this.canvasController.getZoomToReveal([obj.id]);
 
 				if (zoom) {
@@ -6602,6 +6605,24 @@ export default class SVGCanvasRenderer {
 		}
 	}
 
+	// Returns true if the object should cause a 'zoom to reveal' to occur when focus
+	// is moved to it. That is, if we are displaying a sub-flow full-page when:
+	// 1. The object is a link - because
+	//    a) they are almost always on display and
+	//    b) if the link is to, or from, a binding node zoomToReveal will cause the
+	//       nodes to be incorrectly moved.
+	// 2. The object is a binding node -- because they are always in a fixed position.
+	shouldObjectCauseZoom(obj, type) {
+		if (this.dispUtils.isDisplayingSubFlowFullPage()) {
+			if (type === "link") {
+				return false;
+			} else if (type === "node" && CanvasUtils.isSuperBindingNode(obj)) {
+				return false;
+			}
+		}
+		return true;
+	}
+
 	// Moves the focus highlighting to the next appropriate sub-object within
 	// the parent object.
 	setFocusNextSubObject(parentObj, evt) {

package/src/common-canvas/svg-canvas-utils-drag-objects.js

@@ -409,12 +409,6 @@ export default class SVGCanvasUtilsDragObjects {
 			this.ren.displayMovedLinks();
 			this.ren.displayCanvasAccoutrements();
 
-			if (CanvasUtils.isExpandedSupernode(resizeObj)) {
-				if (this.ren.dispUtils.isDisplayingSubFlow()) {
-					this.ren.displayBindingNodesToFitSVG();
-				}
-				this.ren.superRenderers.forEach((renderer) => renderer.displaySVGToFitSupernode());
-			}
 			this.logger.logEndTimer("displayObjects");
 		}
 	}

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

@@ -88,7 +88,7 @@ export default class SvgCanvasTextArea {
 	displayCommentTextArea(d, parentDomObj) {
 		this.editingTextData = {
 			id: d.id,
-			comment: d,
+			focusReturn: d,
 			text: d.content,
 			singleLine: false,
 			maxCharacters: null,
@@ -465,6 +465,7 @@ export default class SvgCanvasTextArea {
 
 		this.editingTextData = {
 			id: node.id,
+			focusReturn: node,
 			text: node.label,
 			singleLine: node.layout.labelSingleLine,
 			maxCharacters: node.layout.labelMaxCharacters,
@@ -538,6 +539,7 @@ export default class SvgCanvasTextArea {
 
 		this.editingTextData = {
 			id: dec.id,
+			focusReturn: obj,
 			text: dec.label,
 			singleLine: dec.label_single_line || false,
 			maxCharacters: dec.label_max_characters || null,
@@ -707,10 +709,10 @@ export default class SvgCanvasTextArea {
 			// Tidy up
 			this.foreignObjectComment.remove();
 			this.foreignObjectComment = null;
-			this.canvasController.setFocusObject(data.comment, null, true);
 		}
 		this.editingText = false;
 		this.editingTextId = "";
+		this.canvasController.setFocusObject(data.focusReturn, null, true);
 	}
 
 	// Returns true if one of the keys that are allowed in the text area, when

package/src/common-properties/components/table-toolbar/table-toolbar.jsx

@@ -84,18 +84,23 @@ class TableToolbar extends React.Component {
 		const cancelLabel = formatMessage(this.reactIntl, MESSAGE_KEYS.TABLE_TOOLBAR_BUTTON_CANCEL);
 
 		const editBtn = { action: "multiSelectEdit", label: editLabel, iconEnabled: (<Edit />), enable: true, kind: "primary" };
-		const deleteBtn = (this.props.addRemoveRows && !this.props.isReadonlyTable && !this.props.isSingleSelectTable)
-			? { action: "delete", label: deleteLabel, iconEnabled: (<TrashCan />), enable: true, kind: "primary" } : null;
+		const deleteBtn = { action: "delete", label: deleteLabel, iconEnabled: (<TrashCan />), enable: true, kind: "primary" };
 		const cancelBtn = { action: "cancel", label: cancelLabel, enable: true, incLabelWithIcon: "label-only", kind: "primary" };
 
 		// For delete, edit, show its divider only if those icons are present
 		const toolbarConfig = [
-			...(this.props.moveableRows ? this.getTableRowMoveButtons() : []),
-			deleteBtn,
-			this.props.multiSelectEdit ? editBtn : null,
-			{ divider: true },
-			cancelBtn
+			...(this.props.moveableRows ? this.getTableRowMoveButtons() : [])
 		];
+		if (this.props.addRemoveRows &&
+				!this.props.isReadonlyTable &&
+				!this.props.isSingleSelectTable) {
+			toolbarConfig.push(deleteBtn);
+		}
+		if (this.props.multiSelectEdit) {
+			toolbarConfig.push(editBtn);
+		}
+		toolbarConfig.push({ divider: true });
+		toolbarConfig.push(cancelBtn);
 		return toolbarConfig;
 	}
 

package/src/common-properties/controls/abstract-table.jsx

@@ -437,7 +437,7 @@ export default class AbstractTable extends React.Component {
 		return this.props.controller.getLight() && this.props.control.light;
 	}
 
-	makeTableToolbar(selectedRows, tableLabel) {
+	makeTableToolbar(selectedRows, tableLabel, tableDivId) {
 		// For single select tables, table toolbar doesn't show delete icon because it is added at row level
 		const singleSelectTable = this.props.control.rowSelection === ROW_SELECTION.SINGLE;
 		if (
@@ -471,6 +471,7 @@ export default class AbstractTable extends React.Component {
 						isSingleSelectTable={singleSelectTable}
 						smallFlyout={false}
 						tableLabel={tableLabel}
+						containingDivId={tableDivId}
 					/>
 				</>
 			);
@@ -625,12 +626,13 @@ export default class AbstractTable extends React.Component {
 
 		const headers = this.makeHeader(sortFields, filterFields);
 		const showHeader = this.props.control.header !== false;
+		const tableDivId = "flexible-table-" + uuid4();
 
 		const controlValue = this.props.value;
 		this.makeCells(rows, controlValue, tableState);
 
 		const tableLabel = this.props.control?.label?.text || "";
-		const tableToolbar = this.makeTableToolbar(this.props.selectedRows, tableLabel);
+		const tableToolbar = this.makeTableToolbar(this.props.selectedRows, tableLabel, tableDivId);
 		let topRightPanel = null;
 		if (this.props.selectedRows.length > 0 && tableToolbar) {
 			topRightPanel = tableToolbar;
@@ -681,7 +683,7 @@ export default class AbstractTable extends React.Component {
 				emptyTablePlaceholder={this.props.control.additionalText}
 			/>);
 		return (
-			<div>
+			<div id={tableDivId}>
 				{table}
 			</div>
 		);

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

@@ -69,7 +69,7 @@
 
 		&.cm-focused {
 			outline: 2px solid carbon.$focus;
-			outline-offset: -2px;
+			outline-offset: 0px;
 		}
 
 		.cm-gutters {
@@ -77,6 +77,10 @@
 			background-color: inherit;
 		}
 
+		.cm-cursor {
+			border-left: 1px solid carbon.$text-primary;
+		}
+
 		.cm-content {
 			.cm-line {
 				padding-left: carbon.$spacing-03;
@@ -85,25 +89,49 @@
 			.cm-placeholder {
 				@include carbon.type-style("code-02");
 			}
-			.cm-cursor {
-				border-left: 1px solid carbon.$text-primary;
-			}
 			.cm-lineNumbers .cm-gutterElement {
 				@include carbon.type-style("body-short-01");
 			}
 		}
 
+		// Don't display active line as it's too visually confusing
 		.cm-activeLine {
-			background-color: carbon.$background-selected; // works for both dark n light
+			background-color: transparent;
+		}
+
+		.cm-lineNumbers .cm-gutterElement:not(.cm-activeLineGutter) {
+			color: carbon.$text-primary;
 		}
-		.cm-activeLineGutter {
-			background-color: carbon.$text-placeholder;
+
+		.cm-lineNumbers  .cm-activeLineGutter {
+			background-clip: padding-box;
+			background-color: carbon.$layer-accent-hover-02;
 			color: carbon.$text-primary;
 		}
-		&.cm-focused .cm-selectionBackground, ::selection {
-			/* stylelint-disable-next-line declaration-no-important */
-			background: carbon.$support-info-inverse !important; // add !important to override the selected text style
+
+		.cm-gutter.cm-foldGutter > div.cm-gutterElement.cm-activeLineGutter {
+			background-color: carbon.$layer-accent-hover-02;
+			color: carbon.$text-primary;
 		}
+
+		&.cm-focused {
+			.cm-selectionBackground,
+			.cm-selectionMatch {
+				/* stylelint-disable-next-line declaration-no-important */
+				background-color: carbon.$highlight !important; // !important overrides the selection background style
+			}
+		}
+
+		&:not(.cm-focused) {
+			.cm-selectionBackground {
+				background: carbon.$layer-selected-02;
+			}
+
+			.cm-selectionMatch {
+				background-color: transparent;
+			}
+		}
+
 		.cm-tooltip-autocomplete {
 			z-index: 1110;
 			background: carbon.$field-02; // Background color of the autocompletion menu to support dark mode

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

@@ -56,6 +56,12 @@ class TextareaControl extends React.Component {
 		value = joined.value;
 		const truncated = joined.truncated;
 
+		// Determine if counter should be shown
+		// Show counter only if NOT in a table AND (showCharacterCounter is true OR limit is reached)
+		const showCharacterCounter = this.props.controller.getShowCharacterCounter();
+		const isAtLimit = this.charLimit !== -1 && value.length >= this.charLimit;
+		const shouldShowCounter = !this.props.tableControl && this.charLimit !== -1 && (showCharacterCounter || isAtLimit);
+
 		let textArea = null;
 		let validationProps = ControlUtils.getValidationProps(this.props.messageInfo, this.props.tableControl);
 		let showValidationMessage = false;
@@ -83,7 +89,7 @@ class TextareaControl extends React.Component {
 					helperText={this.props.control.helperText}
 					readOnly={this.props.readOnly}
 					aria-label={this.props.control.labelVisible ? null : this.props.control?.label?.text}
-					enableCounter={this.charLimit !== -1}
+					enableCounter={shouldShowCounter}
 					maxCount={this.charLimit}
 				/>
 				<ValidationMessage inTable={this.props.tableControl} tableOnly={!showValidationMessage} state={""} messageInfo={errorMessage} />
@@ -102,7 +108,7 @@ class TextareaControl extends React.Component {
 					helperText={this.props.control.helperText}
 					readOnly={this.props.readOnly}
 					aria-label={this.props.control.labelVisible ? null : this.props.control?.label?.text}
-					enableCounter={this.charLimit !== -1}
+					enableCounter={shouldShowCounter}
 					maxCount={this.charLimit}
 				/>
 			);

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

@@ -97,6 +97,12 @@ class TextfieldControl extends React.Component {
 			</div>);
 		} else {
 			const validationProps = ControlUtils.getValidationProps(this.props.messageInfo, this.props.tableControl);
+			// Determine if counter should be shown
+			// Show counter only if NOT in a table AND (showCharacterCounter is true OR limit is reached)
+			const showCharacterCounter = this.props.controller.getShowCharacterCounter();
+			const isAtLimit = this.charLimit !== -1 && value.length >= this.charLimit;
+			const shouldShowCounter = !this.props.tableControl && this.charLimit !== -1 && (showCharacterCounter || isAtLimit);
+
 			textInput = (
 				<TextInput
 					{...validationProps}
@@ -113,7 +119,7 @@ class TextfieldControl extends React.Component {
 					aria-label={this.props.control.labelVisible ? null : this.props.control?.label?.text}
 					ref={this.textInputRef}
 					readOnly={this.props.readOnly}
-					enableCounter={this.charLimit !== -1}
+					enableCounter={shouldShowCounter}
 					maxCount={this.charLimit}
 				/>
 			);

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

@@ -1931,6 +1931,18 @@ export default class PropertiesController {
 		return maxLengthForSingleLineControls;
 	}
 
+	/**
+	* Returns whether to show the character counter for textfield and textarea controls
+	* Default value is true
+	* When false, counter is hidden until character limit is reached
+	*/
+	getShowCharacterCounter() {
+		const showCharacterCounter = (typeof this.getPropertiesConfig().showCharacterCounter !== "undefined")
+			? this.getPropertiesConfig().showCharacterCounter
+			: true;
+		return showCharacterCounter;
+	}
+
 	/**
 	* Set the initial values of addRemoveRows for all structure controls
 	*/

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

@@ -696,6 +696,7 @@ PropertiesMain.propTypes = {
 		conditionDisabledPropertyHandling: PropTypes.oneOf(["null", "undefined", "value"]),
 		maxLengthForMultiLineControls: PropTypes.number,
 		maxLengthForSingleLineControls: PropTypes.number,
+		showCharacterCounter: PropTypes.bool,
 		convertValueDataTypes: PropTypes.bool,
 		showRequiredIndicator: PropTypes.bool,
 		showAlertsTab: PropTypes.bool,

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

@@ -1382,6 +1382,10 @@ export default class APIPipeline {
 		this.store.dispatch({ type: "SET_LINK_PROPERTIES", data: { linkId: linkId, linkProperties: linkProperties }, pipelineId: this.pipelineId });
 	}
 
+	setLinkParameters(linkId, parameters) {
+		this.store.dispatch({ type: "SET_LINK_PARAMETERS", data: { linkId: linkId, parameters: parameters }, pipelineId: this.pipelineId });
+	}
+
 	setNodeDataLinkSrcInfo(linkId, srcNodeId, srcNodePortId) {
 		this.store.dispatch({ type: "SET_LINK_SRC_INFO", data: { linkId: linkId, srcNodeId: srcNodeId, srcNodePortId: srcNodePortId }, pipelineId: this.pipelineId });
 	}

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

@@ -397,6 +397,9 @@ export default class PipelineInHandler {
 		if (link.description) { // description is also optional
 			newLink.description = link.description;
 		}
+		if (link.parameters) { // parameters is also optional
+			newLink.parameters = link.parameters;
+		}
 
 		return newLink;
 	}

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

@@ -483,6 +483,11 @@ export default class PipelineOutHandler {
 		if (link.description) {
 			newLink.description = link.description;
 		}
+
+		if (link.parameters) {
+			newLink.parameters = link.parameters;
+		}
+
 		return newLink;
 	}
 }

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

@@ -167,6 +167,7 @@ export default (state = {}, action) => {
 	case "SET_NODE_MESSAGES":
 	case "SET_NODE_DECORATIONS":
 	case "SET_LINK_DECORATIONS":
+	case "SET_LINK_PARAMETERS":
 	case "ADD_NODE_ATTR":
 	case "REMOVE_NODE_ATTR":
 	case "SET_NODE_LABEL":

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

@@ -135,6 +135,16 @@ export default (state = [], action) => {
 			return link;
 		});
 
+	case "SET_LINK_PARAMETERS":
+		return state.map((link, index) => {
+			if (action.data.linkId === link.id) {
+				const newLink = Object.assign({}, link);
+				newLink.parameters = action.data.parameters;
+				return newLink;
+			}
+			return link;
+		});
+
 	case "SET_LINK_SRC_INFO":
 		return state.map((link) => {
 			if (link.id === action.data.linkId) {