@elyra/canvas 12.39.1 → 12.40.0

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

@@ -4204,7 +4204,12 @@ export default class SVGCanvasRenderer {
 
 	// Returns the class string to be appled to the link group object.
 	getLinkGroupClass(d) {
-		return "d3-link-group " + this.getLinkTypeClass(d) + " " + this.getLinkCustomClass(d);
+		return "d3-link-group " + this.getLinkTypeClass(d) + " " + this.getLinkBranchHighlightCLass(d) + " " + this.getLinkCustomClass(d);
+	}
+
+	// Returns the class to be used for branch highlighting if the branchHighlight flag id set for the link.
+	getLinkBranchHighlightCLass(d) {
+		return (d.branchHighlight ? "d3-branch-highlight" : "");
 	}
 
 	// Returns the custom class string for the link object passed in.
@@ -4282,7 +4287,9 @@ export default class SVGCanvasRenderer {
 			? " d3-resized"
 			: "";
 
-		return "d3-node-group" + supernodeClass + resizeClass + draggableClass + customClass;
+		const branchHighlightClass = d.branchHighlight ? " d3-branch-highlight" : "";
+
+		return "d3-node-group" + supernodeClass + resizeClass + draggableClass + branchHighlightClass + customClass;
 	}
 
 	// Pushes the links to be below nodes within the nodesLinksGrp group.

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

@@ -61,6 +61,7 @@ class FlexibleTable extends React.Component {
 		this.onSort = this.onSort.bind(this);
 		this.sortHeaderClick = this.sortHeaderClick.bind(this);
 		this._updateTableWidth = this._updateTableWidth.bind(this);
+		this._updateRows = this._updateRows.bind(this);
 		this._adjustTableHeight = this._adjustTableHeight.bind(this);
 		this.handleCheckedRow = this.handleCheckedRow.bind(this);
 		this.handleCheckedAllRows = this.handleCheckedAllRows.bind(this);
@@ -74,8 +75,11 @@ class FlexibleTable extends React.Component {
 	}
 
 	componentDidUpdate(prevProps, prevState) {
-		if (prevProps.rows !== this.props.rows ||
-			prevProps.columns !== this.props.columns ||
+		if (prevProps.rows !== this.props.rows) {
+			this._updateRows();
+		}
+
+		if (prevProps.columns !== this.props.columns ||
 			prevProps.noAutoSize !== this.props.noAutoSize) {
 			this._adjustTableHeight();
 		}
@@ -243,10 +247,19 @@ class FlexibleTable extends React.Component {
 		}
 	}
 
+	_updateRows() {
+		if (this.props.rows && this.props.rows !== this.state.rows) {
+			this.setState({ rows: this.props.rows }, () => {
+				this._adjustTableHeight();
+			});
+		}
+	}
+
 	_adjustTableHeight() {
 		if (this.props.noAutoSize) {
 			return;
 		}
+
 		let newHeight = this.state.tableHeight;
 		let dynamicH = this.state.dynamicHeight;
 		const multiSelectTableHeight = REM_ROW_HEIGHT + REM_HEADER_HEIGHT;

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

@@ -380,7 +380,7 @@ class VirtualizedTable extends React.Component {
 		}
 
 		if (this.props.selectable) {
-			const rowSelected = this.isRowSelected(rowData.originalRowIndex);
+			const rowSelected = this.props.sortDirection ? this.isRowSelected(rowData.index) : this.isRowSelected(rowData.originalRowIndex); // use current row index when Sorted
 			selectedRow = this.props.selectable && rowSelected;
 			if (this.props.rowSelection !== ROW_SELECTION.SINGLE) {
 				const translatedRowCheckboxLabel = this.props.intl.formatMessage(

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

@@ -73,6 +73,7 @@ export const MESSAGE_KEYS = {
 	EXPRESSION_FIELDS_TITLE: "expression.fields.title",
 	EXPRESSION_VALUES_TITLE: "expression.values.title",
 	EXPRESSION_FIELD_COLUMN: "expression.field.column",
+	EXPRESSION_ADD_COLUMN: "expression.add.column",
 	EXPRESSION_FIELD_COLUMN_DESCRIPTION: "expression.field.column.description",
 	EXPRESSION_STORAGE_COLUMN: "expression.storage.column",
 	EXPRESSION_VALUE_COLUMN: "expression.value.column",

package/src/common-properties/controls/expression/expression-builder/expression-select-field-function.jsx

@@ -16,6 +16,8 @@
 
 import React from "react";
 import PropTypes from "prop-types";
+import { Add16 } from "@carbon/icons-react";
+import { Button } from "carbon-components-react";
 import { Switch, ContentSwitcher, Dropdown } from "carbon-components-react";
 import FlexibleTable from "./../../../components/flexible-table/flexible-table";
 import TruncatedContentTooltip from "./../../../components/truncated-content-tooltip";
@@ -38,6 +40,9 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 			id: this.recentUseCat,
 			locLabel: this.recentUseCat,
 			field_columns: {
+				add_column_info: {
+					locLabel: formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_ADD_COLUMN)
+				},
 				field_column_info: {
 					locLabel: formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_RECENTLY_USED_COLUMN)
 				},
@@ -71,11 +76,11 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 		this.language = props.language;
 
 		this.onFieldTableClick = this.onFieldTableClick.bind(this);
-		this.onFieldTableDblClick = this.onFieldTableDblClick.bind(this);
+		this.onAddFieldClick = this.onAddFieldClick.bind(this);
 		this.onFunctionTableClick = this.onFunctionTableClick.bind(this);
-		this.onFunctionTableDblClick = this.onFunctionTableDblClick.bind(this);
+		this.onAddFunctionClick = this.onAddFunctionClick.bind(this);
 		this.onValueTableClick = this.onValueTableClick.bind(this);
-		this.onValueTableDblClick = this.onValueTableDblClick.bind(this);
+		this.onAddValueClick = this.onAddValueClick.bind(this);
 
 		this.sortTableRows = this.sortTableRows.bind(this);
 		this.shouldQuoteField = this.shouldQuoteField.bind(this);
@@ -120,7 +125,7 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 
 	}
 
-	onFieldTableDblClick(evt, rowKey, index) {
+	onAddFieldClick(rowKey) {
 		const field = this.state.currentFieldDataset[rowKey];
 		let value = field.id;
 		if (this.state.fieldCategory !== this.recentUseCat) {
@@ -145,7 +150,7 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 		});
 	}
 
-	onValueTableDblClick(evt, rowKey, index) {
+	onAddValueClick(rowKey) {
 		if (this.props.onChange) {
 			const field = this.state.currentFieldDataset[this.state.fieldSelected];
 			const quote = "\"";
@@ -174,7 +179,7 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 		});
 	}
 
-	onFunctionTableDblClick(evt, rowKey, index) {
+	onAddFunctionClick(rowKey) {
 		let field;
 		if (this.state.functionCategory === this.recentUseCat) {
 			field = this.props.controller.getExpressionRecentlyUsed()[rowKey];
@@ -265,7 +270,40 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 		return contentObject;
 	}
 
+	createAddButtonContent(index, tableType) {
+		const addValueButtonContent = (
+			<Button
+				className="expression-add-field-button properties-expr-table-cell"
+				onClick={this.handleAddButtonClick.bind(this, index, tableType)}
+				kind="ghost"
+				size="small"
+			>
+				<Add16 aria-label={formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_ADD_COLUMN)} />
+			</Button>
+		);
+		return addValueButtonContent;
+	}
+
+	handleAddButtonClick(index, tableType) {
+		switch (tableType) {
+		case "value": {
+			this.onAddValueClick(index);
+			break;
+		}
+		case "field": {
+			this.onAddFieldClick(index);
+			break;
+		}
+		case "function": {
+			this.onAddFunctionClick(index);
+			break;
+		}
+		default:
+		}
+	}
+
 	_makeDatasetFields(dataset, fieldDataset) {
+		const addNewColumn = formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_ADD_COLUMN);
 		const fieldColumn = formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_FIELD_COLUMN);
 		const fieldColumnDesc = formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_FIELD_COLUMN_DESCRIPTION);
 		const storageColumn = formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_STORAGE_COLUMN);
@@ -274,6 +312,9 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 			id: "fields",
 			locLabel: dropdownLabel,
 			field_columns: {
+				add_column_info: {
+					locLabel: addNewColumn
+				},
 				field_column_info: {
 					locLabel: fieldColumn,
 					descLabel: fieldColumnDesc
@@ -377,17 +418,31 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 		}
 
 		if (categoryInfo) {
-			fieldHeaders.push({
-				key: "fieldName",
-				label: categoryInfo.field_columns.field_column_info.locLabel,
-				description: categoryInfo.field_columns.field_column_info.descLabel,
-				resizable: true
-			});
-			valueHeader.push({
-				key: "values",
-				label: categoryInfo.field_columns.value_column_info.locLabel,
-				description: categoryInfo.field_columns.value_column_info.descLabel
-			});
+			fieldHeaders.push(
+				{
+					key: "addColumn",
+					label: formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_ADD_COLUMN),
+					width: "50px",
+					staticWidth: true
+				},
+				{
+					key: "fieldName",
+					label: categoryInfo.field_columns.field_column_info.locLabel,
+					description: categoryInfo.field_columns.field_column_info.descLabel,
+					resizable: true
+				});
+			valueHeader.push(
+				{
+					key: "addColumn",
+					label: formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_ADD_COLUMN),
+					width: "50px",
+					staticWidth: true
+				},
+				{
+					key: "values",
+					label: categoryInfo.field_columns.value_column_info.locLabel,
+					description: categoryInfo.field_columns.value_column_info.descLabel
+				});
 			if (categoryInfo.field_columns.additional_column_info) {
 				for (let i = 0; i < categoryInfo.field_columns.additional_column_info.length; i++) {
 					sortable.push(categoryInfo.field_columns.additional_column_info[i].id);
@@ -404,8 +459,9 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 				const field = tableContents.field_value_groups[index];
 				const fieldColumns = [];
 				if (!this.state.fieldFilterText || this.state.fieldFilterText.length === 0 ||
-								(field.id.toLowerCase().indexOf(this.state.fieldFilterText.toLowerCase()) > -1)) {
-					fieldColumns.push({ column: "fieldName", content: this.createContentObject(field.id), value: field.id });
+					(field.id.toLowerCase().indexOf(this.state.fieldFilterText.toLowerCase()) > -1)) {
+					fieldColumns.push({ column: "addColumn", content: this.createAddButtonContent(index, "field"), value: field.id },
+						{ column: "fieldName", content: this.createContentObject(field.id), value: field.id });
 					if (field.additional_column_entries) {
 						this._makeAdditionalColumnsContent(field, fieldColumns);
 					}
@@ -453,7 +509,6 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 						rowSelection={ROW_SELECTION.SINGLE}
 						updateRowSelections={this.onFieldTableClick}
 						selectedRows={[selectedField]}
-						onRowDoubleClick={this.onFieldTableDblClick}
 						onSort={this.setSortColumn.bind(this, "fieldTable")}
 						light={this.props.controller.getLight()}
 						emptyTablePlaceholder={emptyFieldsLabel}
@@ -471,7 +526,6 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 						rowSelection={ROW_SELECTION.SINGLE}
 						updateRowSelections={this.onValueTableClick}
 						selectedRows={[selectedValue]}
-						onRowDoubleClick={this.onValueTableDblClick}
 						onSort={this.setSortColumn.bind(this, "valuesTable")}
 						light={this.props.controller.getLight()}
 						emptyTablePlaceholder={emptyValuesLabel}
@@ -504,9 +558,11 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 
 	_addValueRow(content, index, valuesTableData) {
 		if (!this.state.valueFilterText || this.state.valueFilterText.length === 0 ||
-					(String(content).toLowerCase()
-						.indexOf(this.state.valueFilterText.toLowerCase()) > -1)) {
-			const valueColumns = [{ column: "values", content: this.createContentObject(content), value: content }];
+			(String(content).toLowerCase()
+				.indexOf(this.state.valueFilterText.toLowerCase()) > -1)) {
+			const valueColumns = [
+				{ column: "addColumn", content: this.createAddButtonContent(index, "value"), value: content },
+				{ column: "values", content: this.createContentObject(content), value: content }];
 			valuesTableData.push({ columns: valueColumns, rowKey: index });
 		}
 	}
@@ -597,10 +653,12 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 			MESSAGE_KEYS.EXPRESSION_FUNCTION_COLUMN);
 		const returnColumn = formatMessage(this.reactIntl,
 			MESSAGE_KEYS.EXPRESSION_RETURN_COLUMN);
+		const addNewColumn = formatMessage(this.reactIntl,
+			MESSAGE_KEYS.EXPRESSION_ADD_COLUMN);
 
-
-		headers.push({ key: "function", label: functionColumn, width: 73, resizable: true });
-		headers.push({ key: "return", label: returnColumn, width: 27 });
+		headers.push({ key: "addColumn", label: addNewColumn, width: "50px", staticWidth: true });
+		headers.push({ key: "function", label: functionColumn, width: 50, resizable: true });
+		headers.push({ key: "return", label: returnColumn, width: 30 });
 		const table = this._buildFunctionTable(this.state.functionCategory);
 
 		let data = table.rows;
@@ -627,7 +685,6 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 						rowSelection={ROW_SELECTION.SINGLE}
 						updateRowSelections={this.onFunctionTableClick}
 						selectedRows={[selectedFunction]}
-						onRowDoubleClick={this.onFunctionTableDblClick}
 						onSort={this.setSortColumn.bind(this, "functionTable")}
 						light={this.props.controller.getLight()}
 						emptyTablePlaceholder={functionsEmptyLabel}
@@ -650,6 +707,7 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 				if (!this.state.functionFilterText || this.state.functionFilterText.length === 0 ||
 					(catFunction.locLabel.toLowerCase().indexOf(this.state.functionFilterText.toLowerCase()) > -1)) {
 					const returnType = catFunction.locReturnType ? catFunction.locReturnType : catFunction.return_type;
+					columns.push({ column: "addColumn", content: this.createAddButtonContent(index, "function"), value: catFunction.id });
 					columns.push({ column: "function", content: this.createContentObject(catFunction.locLabel), value: catFunction.locLabel });
 					columns.push({ column: "return", content: this.createContentObject(returnType), value: returnType });
 					table.rows.push({ columns: columns, rowKey: index });

package/src/common-properties/controls/expression/expressionInfo-parser.js

@@ -57,7 +57,6 @@ function setExpressionInfo(inExpressionInfo) {
 				if (inExpressionInfo.fields.field_categories) {
 					inExpressionInfo.fields.field_categories.forEach((fieldCat) => {
 						fieldCat.locLabel = l10nProvider.l10nLabel(fieldCat, fieldCat.id);
-
 						fieldCat.field_columns.field_column_info.locLabel = l10nProvider.l10nLabel(fieldCat.field_columns.field_column_info, fieldCat.id + ".field_column_info");
 						fieldCat.field_columns.value_column_info.locLabel = l10nProvider.l10nLabel(fieldCat.field_columns.value_column_info, fieldCat.id + ".value_column_info");
 

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

@@ -395,7 +395,8 @@ export default class PropertiesController {
 		parseUiContent(this.panelTree, this.form, PANEL_TREE_ROOT);
 	}
 
-	_addToControlValues(sameParameterDefRendered, resolveParameterRefs) {
+	_addToControlValues(sameParameterDefRendered, resolveParameterRefs, setDefaultValues) {
+		const defaultControlValues = {};
 		for (const keyName in this.controls) {
 			if (!has(this.controls, keyName)) {
 				continue;
@@ -421,8 +422,11 @@ export default class PropertiesController {
 					controlValue = PropertyUtils.convertObjectStructureToArray(control.valueDef.isList, control.subControls, controlValue);
 				}
 
-				// When parameterDef is dynamically updated, don't set INITIAL_LOAD on pre-existing properties
-				if (sameParameterDefRendered && !this.differentProperties.includes(control.name)) {
+				if (setDefaultValues) {
+					// When setDefaultValues is set, update all default values in a single call
+					defaultControlValues[control.name] = controlValue;
+				} else if (sameParameterDefRendered && !this.differentProperties.includes(control.name)) {
+					// When parameterDef is dynamically updated, don't set INITIAL_LOAD on pre-existing properties
 					this.updatePropertyValue(propertyId, controlValue, true);
 				} else {
 					this.updatePropertyValue(propertyId, controlValue, true, UPDATE_TYPE.INITIAL_LOAD);
@@ -435,6 +439,24 @@ export default class PropertiesController {
 				}
 			}
 		}
+
+		if (setDefaultValues) {
+			this.setDefaultControlValues(defaultControlValues);
+		}
+	}
+
+	setDefaultControlValues(defaultControlValues) {
+		// Update all default values
+		this.propertiesStore.setPropertyValues(defaultControlValues);
+
+		// Single call to the propertyListener
+		if (this.handlers.propertyListener) {
+			this.handlers.propertyListener(
+				{
+					action: ACTIONS.SET_PROPERTIES // Setting the default control values
+				}
+			);
+		}
 	}
 
 	_populateFieldData(controlValue, control) {
@@ -1271,7 +1293,7 @@ export default class PropertiesController {
 		}
 
 		if (options && options.setDefaultValues) {
-			this._addToControlValues(true);
+			this._addToControlValues(false, false, true);
 		}
 	}
 

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

@@ -2302,6 +2302,18 @@ export default class ObjectModel {
 		return port;
 	}
 
+	setObjectsBranchHighlight(pipelineObjIds) {
+		this.store.dispatch({ type: "SET_OBJECTS_BRANCH_HIGHLIGHT", data: { pipelineObjIds: pipelineObjIds } });
+	}
+
+	setLinksBranchHighlight(pipelineLinkIds) {
+		this.store.dispatch({ type: "SET_LINKS_BRANCH_HIGHLIGHT", data: { pipelineObjIds: pipelineLinkIds } });
+	}
+
+	unsetAllBranchHighlight() {
+		this.store.dispatch({ type: "UNSET_OBJECTS_BRANCH_HIGHLIGHT" });
+	}
+
 	// ---------------------------------------------------------------------------
 	// Clipboard methods
 	// ---------------------------------------------------------------------------

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

@@ -445,7 +445,9 @@ export default (state = {}, action) => {
 	}
 
 	case "SET_OBJECTS_STYLE":
-	case "SET_LINKS_STYLE": {
+	case "SET_LINKS_STYLE":
+	case "SET_OBJECTS_BRANCH_HIGHLIGHT":
+	case "SET_LINKS_BRANCH_HIGHLIGHT": {
 		const pipelineIds = Object.keys(action.data.pipelineObjIds);
 		const canvasInfoPipelines = state.pipelines.map((pipeline) => {
 			if (pipelineIds.indexOf(pipeline.id) > -1) {
@@ -461,6 +463,16 @@ export default (state = {}, action) => {
 		return Object.assign({}, state, { pipelines: canvasInfoPipelines });
 	}
 
+	case "UNSET_OBJECTS_BRANCH_HIGHLIGHT": {
+		const canvasInfoPipelines = state.pipelines.map((pipeline) => {
+			return Object.assign({}, pipeline, {
+				nodes: nodes(pipeline.nodes, action),
+				comments: comments(pipeline.comments, action),
+				links: links(pipeline.links, action) });
+		});
+		return Object.assign({}, state, { pipelines: canvasInfoPipelines });
+	}
+
 	case "SET_OBJECTS_MULTI_STYLE":
 	case "SET_LINKS_MULTI_STYLE": {
 		const canvasInfoPipelines = state.pipelines.map((pipeline) => {

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

@@ -206,7 +206,6 @@ export default (state = [], action) => {
 			return comment;
 		});
 
-
 	default:
 		return state;
 	}

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

@@ -251,6 +251,22 @@ export default (state = [], action) => {
 			return link;
 		});
 
+	case "SET_LINKS_BRANCH_HIGHLIGHT":
+		return state.map((link) => {
+			if (action.data.objIds.indexOf(link.id) > -1) {
+				return Object.assign({}, link, { branchHighlight: true });
+			}
+			return link;
+		});
+
+	case "UNSET_OBJECTS_BRANCH_HIGHLIGHT":
+		return state.map((link) => {
+			if (link.branchHighlight) {
+				return Object.assign({}, link, { branchHighlight: false });
+			}
+			return link;
+		});
+
 	case "SET_LINK_DECORATIONS":
 		return state.map((link, index) => {
 			if (action.data.linkId === link.id) {

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

@@ -287,6 +287,22 @@ export default (state = [], action) => {
 			return node;
 		});
 
+	case "SET_OBJECTS_BRANCH_HIGHLIGHT":
+		return state.map((node) => {
+			if (action.data.objIds.indexOf(node.id) > -1) {
+				return Object.assign({}, node, { branchHighlight: true });
+			}
+			return node;
+		});
+
+	case "UNSET_OBJECTS_BRANCH_HIGHLIGHT":
+		return state.map((node) => {
+			if (node.branchHighlight) {
+				return Object.assign({}, node, { branchHighlight: false });
+			}
+			return node;
+		});
+
 	case "SET_INPUT_PORT_LABEL":
 	case "SET_INPUT_PORT_SUBFLOW_NODE_REF":
 		return state.map((node, index) => {