@elyra/canvas 12.39.1 → 12.40.1

package/src/common-canvas/svg-canvas-d3.scss

@@ -77,8 +77,8 @@ $node-port-input-arrow-connected-fill-color: transparent;
 // Comment colors
 $comment-outline-color: $active-light-ui;
 $comment-outline-hover-color: $inverse-hover-ui;
-$comment-fill-color: $white-0;
-$comment-text-color: $gray-100;
+$comment-fill-color: $ui-01;
+$comment-text-color: $text-01;
 
 // Comment properties
 $comment-text-font-size: 12px;
@@ -261,7 +261,7 @@ $link-highlight-color: $support-04;
 	}
 }
 
-/* Node highlight when end of new link line is over, or approaching, the node */
+/* Node selection highlight when end of new link line is over, or approaching, the node */
 
 .d3-node-group[data-new-link-over="yes"] {
 	.d3-node-selection-highlight {
@@ -273,6 +273,28 @@ $link-highlight-color: $support-04;
 	}
 }
 
+/* Node branch highlight styles */
+
+.d3-node-group.d3-branch-highlight {
+	.d3-node-body-outline {
+		stroke: $ui-05;
+		stroke-width: 2px;
+		fill: $highlight;
+	}
+
+	.d3-node-label {
+		color: $text-01;
+	}
+}
+
+.d3-node-group.d3-branch-highlight:hover {
+	.d3-node-body-outline {
+		stroke: $ui-05;
+		stroke-width: 2px;
+		fill: $hover-primary;
+	}
+}
+
 /* Node styles - Error indication */
 
 .d3-node-error-label {
@@ -609,10 +631,13 @@ $link-highlight-color: $support-04;
 	user-select: none;
 }
 
-@mixin d3-comment-color-overrides($background-color) {
+@mixin d3-comment-color-overrides($background-color, $text-color) {
 	.d3-comment-rect {
 		fill: $background-color;
 	}
+	.d3-comment-text {
+		color: $text-color;
+	}
 	.d3-comment-entry {
 		background-color: $background-color;
 		color: $gray-100;
@@ -625,40 +650,41 @@ $link-highlight-color: $support-04;
 // assumption is, the user would prefer the color they set in the UI to
 // override any color provided by the host app.
 g.bkg-col-white-0 {
-	@include d3-comment-color-overrides($white-0);
+	// In dark-mode, white-0 will be interpreted as black background with white text.
+	@include d3-comment-color-overrides($ui-01, $text-01);
 }
 g.bkg-col-yellow-20 {
-	@include d3-comment-color-overrides($yellow-20);
+	@include d3-comment-color-overrides($yellow-20, $gray-100);
 }
 g.bkg-col-gray-20 {
-	@include d3-comment-color-overrides($gray-20);
+	@include d3-comment-color-overrides($gray-20, $gray-100);
 }
 g.bkg-col-green-20 {
-	@include d3-comment-color-overrides($green-20);
+	@include d3-comment-color-overrides($green-20, $gray-100);
 }
 g.bkg-col-teal-20 {
-	@include d3-comment-color-overrides($teal-20);
+	@include d3-comment-color-overrides($teal-20, $gray-100);
 }
 g.bkg-col-cyan-20 {
-	@include d3-comment-color-overrides($cyan-20);
+	@include d3-comment-color-overrides($cyan-20, $gray-100);
 }
 g.bkg-col-red-50 {
-	@include d3-comment-color-overrides($red-50);
+	@include d3-comment-color-overrides($red-50, $gray-100);
 }
 g.bkg-col-orange-40 {
-	@include d3-comment-color-overrides($orange-40);
+	@include d3-comment-color-overrides($orange-40, $gray-100);
 }
 g.bkg-col-gray-50 {
-	@include d3-comment-color-overrides($gray-50);
+	@include d3-comment-color-overrides($gray-50, $gray-100);
 }
 g.bkg-col-green-50 {
-	@include d3-comment-color-overrides($green-50);
+	@include d3-comment-color-overrides($green-50, $gray-100);
 }
 g.bkg-col-teal-50 {
-	@include d3-comment-color-overrides($teal-50);
+	@include d3-comment-color-overrides($teal-50, $gray-100);
 }
 g.bkg-col-cyan-50 {
-	@include d3-comment-color-overrides($cyan-50);
+	@include d3-comment-color-overrides($cyan-50, $gray-100);
 }
 
 .d3-comment-selection-highlight {
@@ -865,7 +891,20 @@ g.bkg-col-cyan-50 {
 	}
 }
 
-/* Link styles */
+/* Link styles for branch highlighting */
+
+.d3-link-group.d3-branch-highlight {
+	.d3-link-line {
+		stroke: $inverse-02;
+	}
+}
+
+.d3-link-group.d3-branch-highlight:hover {
+	.d3-link-line {
+		stroke: $inverse-02;
+		stroke-width: 3px;
+	}
+}
 
 // Common styles for all links
 .d3-link-line,

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

@@ -28,7 +28,7 @@ import { STATES, ACTIONS, CONDITION_TYPE, PANEL_TREE_ROOT, CONDITION_MESSAGE_TYP
 import CommandStack from "../command-stack/command-stack.js";
 import ControlFactory from "./controls/control-factory";
 import { Type, ParamRole, ControlType, ItemType } from "./constants/form-constants";
-import { has, cloneDeep, assign, isEmpty, isEqual, isUndefined, get, difference } from "lodash";
+import { has, cloneDeep, assign, isEmpty, isEqual, isUndefined, get, difference, merge } from "lodash";
 import Form from "./form/Form";
 import { getConditionOps } from "./ui-conditions/condition-ops/condition-ops";
 import { DEFAULT_LOCALE } from "./constants/constants";
@@ -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,12 @@ export default class PropertiesController {
 				}
 			}
 		}
+
+		if (setDefaultValues) {
+			return defaultControlValues;
+		}
+
+		return null;
 	}
 
 	_populateFieldData(controlValue, control) {
@@ -1232,6 +1242,11 @@ export default class PropertiesController {
 			}
 		}
 
+		if (options && options.setDefaultValues) {
+			const defaultValues = this._addToControlValues(false, false, true);
+			inValues = merge(defaultValues, inValues);
+		}
+
 		this.propertiesStore.setPropertyValues(inValues);
 
 		if (options && options.isInitProps) {
@@ -1269,10 +1284,6 @@ export default class PropertiesController {
 				}
 			);
 		}
-
-		if (options && options.setDefaultValues) {
-			this._addToControlValues(true);
-		}
 	}
 
 	/**

package/src/context-menu/common-context-menu.jsx

@@ -258,6 +258,19 @@ class CommonContextMenu extends React.Component {
 		return subMenuPosStyle;
 	}
 
+	// Returns the menu definition array passed in making sure any
+	// submenu items have an action. Note: some applications forget
+	// to do provide an action because for the submenu it is only
+	// used by the context menu code.
+	ensureAllSubMenuItemsHaveAction(menuDef) {
+		return menuDef.map((item, index) => {
+			if (item.submenu && typeof item.action === "undefined") {
+				return { ...item, action: "submenu_" + index };
+			}
+			return item;
+		});
+	}
+
 	render() {
 		// Reposition contextMenu so that it does not show off the screen
 		const menuSize = this.calculateMenuSize(this.props.menuDefinition);
@@ -267,7 +280,8 @@ class CommonContextMenu extends React.Component {
 			top: menuPos.y + "px"
 		};
 
-		const menuItems = this.buildMenu(this.props.menuDefinition, menuSize, menuPos, this.props.canvasRect);
+		const menuDefinition = this.ensureAllSubMenuItemsHaveAction(this.props.menuDefinition);
+		const menuItems = this.buildMenu(menuDefinition, menuSize, menuPos, this.props.canvasRect);
 
 		return (
 			<div id="context-menu-popover" className="context-menu-popover" style={posStyle} onContextMenu={this.onContextMenu}>

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) => {