@elyra/canvas 12.14.0 → 12.20.0

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

@@ -25,7 +25,7 @@ import { setActionStates, updateActionState } from "./actions";
 import { clearSelectedRows, updateSelectedRows, disableRowMoveButtons } from "./actions";
 import { clearStaticRows, updateStaticRows } from "./actions";
 import { setErrorMessages, updateErrorMessage, clearErrorMessage } from "./actions";
-import { setDatasetMetadata, setSaveButtonDisable, setAddRemoveRows, setTableButtonEnabled, setHideEditButton } from "./actions";
+import { setDatasetMetadata, setSaveButtonDisable, setWideFlyoutPrimaryButtonDisabled, setAddRemoveRows, setTableButtonEnabled, setHideEditButton } from "./actions";
 import { setTitle, setActiveTab } from "./actions";
 import propertiesReducer from "./reducers/properties";
 import controlStatesReducer from "./reducers/control-states";
@@ -38,6 +38,7 @@ import rowFreezeReducer from "./reducers/row-static";
 import componentMetadataReducer from "./reducers/component-metadata";
 import disableRowMoveButtonsReducer from "./reducers/disable-row-move-buttons";
 import saveButtonDisableReducer from "./reducers/save-button-disable";
+import wideFlyoutPrimaryButtonDisableReducer from "./reducers/wide-flyout-primary-button-disable";
 import propertiesSettingsReducer from "./reducers/properties-settings";
 import * as PropertyUtils from "./util/property-utils.js";
 import { CONDITION_MESSAGE_TYPE, MESSAGE_KEYS } from "./constants/constants.js";
@@ -48,7 +49,7 @@ export default class PropertiesStore {
 	constructor() {
 		this.combinedReducer = combineReducers({ propertiesReducer, controlStatesReducer, panelStatesReducer,
 			errorMessagesReducer, datasetMetadataReducer, rowSelectionsReducer, componentMetadataReducer,
-			disableRowMoveButtonsReducer, actionStatesReducer, saveButtonDisableReducer, propertiesSettingsReducer, rowFreezeReducer });
+			disableRowMoveButtonsReducer, actionStatesReducer, saveButtonDisableReducer, wideFlyoutPrimaryButtonDisableReducer, propertiesSettingsReducer, rowFreezeReducer });
 		let enableDevTools = false;
 		if (typeof window !== "undefined") {
 			enableDevTools = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();
@@ -219,6 +220,22 @@ export default class PropertiesStore {
 		return state.saveButtonDisableReducer.disable;
 	}
 
+	setWideFlyoutPrimaryButtonDisabled(panelId, disableState) {
+		this.store.dispatch(setWideFlyoutPrimaryButtonDisabled({ panelId: panelId, disableState: disableState }));
+	}
+
+	getWideFlyoutPrimaryButtonDisabled(panelId) {
+		if (typeof panelId === "undefined") {
+			return null;
+		}
+		const state = this.store.getState();
+		const disablePrimaryButtonForPanel = state.wideFlyoutPrimaryButtonDisableReducer[panelId.name];
+		if (typeof disablePrimaryButtonForPanel !== "undefined") {
+			return disablePrimaryButtonForPanel;
+		}
+		return null;
+	}
+
 	/*
 	* Retrieves filtered enumeration values for the given propertyId.
 	*/

package/src/common-properties/reducers/wide-flyout-primary-button-disable.jsx

@@ -0,0 +1,31 @@
+/*
+ * Copyright 2017-2022 Elyra Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { SET_WIDE_FLYOUT_PRIMARY_BUTTON_DISABLED } from "../actions";
+
+function setWideFlyoutPrimaryButtonDisabled(state = [], action) {
+	switch (action.type) {
+	case SET_WIDE_FLYOUT_PRIMARY_BUTTON_DISABLED: {
+		const newState = state;
+		newState[action.info.panelId.name] = action.info.disableState;
+		return Object.assign({}, state, newState);
+	}
+	default:
+		return state;
+	}
+}
+
+export default setWideFlyoutPrimaryButtonDisabled;

package/src/common-properties/ui-conditions/condition-ops/colDoesExists.js

@@ -16,6 +16,7 @@
 
 import logger from "./../../../../utils/logger";
 import { fieldValueMatchesProto } from "./../../util/property-utils.js";
+import { isEmpty } from "lodash";
 
 function op() {
 	return "colDoesExists";
@@ -51,9 +52,14 @@ function evaluate(paramInfo, param2Info, value, controller) {
 
 // Return the field if found in dataset, else undefined
 function valueInDataset(dataset, field) {
-	return dataset.find(function(dataModelField) {
-		return fieldValueMatchesProto(field, dataModelField);
-	});
+	// Don't validate empty, null or undefined value
+	return (
+		(typeof field === "undefined" || field === null || isEmpty(field))
+			? true
+			: dataset.find(function(dataModelField) {
+				return fieldValueMatchesProto(field, dataModelField);
+			})
+	);
 }
 
 

package/src/common-properties/ui-conditions/conditions-utils.js

@@ -80,6 +80,7 @@ function validatePropertiesConditions(controller) {
 *
 * @param {object} properties controller. required
 * @param {object} list of control objects or properties. required
+* @param {boolean} showErrors. optional. Set to false to run conditions without displaying errors in the UI
 */
 function validatePropertiesListValues(controller, controls, showErrors) {
 	if (Object.keys(controls).length > 0) {
@@ -697,7 +698,8 @@ function _validateInput(propertyId, controller, control, showErrors) {
 
 				// Determine if this condition is for required parameters
 				errorMessage.required = requiredDefinitionsIds.indexOf(validation.definition.validation.id) > -1;
-				if (!showErrors) {
+				// Only show warning messages for "colDoesExists" condition
+				if (!showErrors && !validation.alwaysShow) {
 					errorMessage.displayError = false;
 				}
 
@@ -1127,6 +1129,7 @@ function _injectInvalidFieldDefinition(control, valDefinitions, keyName, control
 	const label = (control.label && control.label.text) ? control.label.text : keyName;
 	const errorMsg = formatMessage(intl,
 		MESSAGE_KEYS.INVALID_FIELD_ERROR, { label: label });
+	// Note: Please don't update "validField_" in validation id. It is used as identifier in another condition.
 	const injectedDefinition = {
 		params: keyName,
 		definition: {
@@ -1140,23 +1143,14 @@ function _injectInvalidFieldDefinition(control, valDefinitions, keyName, control
 					focus_parameter_ref: keyName
 				},
 				evaluate: {
-					or: [
-						{
-							condition: {
-								parameter_ref: keyName,
-								op: "colDoesExists"
-							}
-						},
-						{
-							condition: {
-								parameter_ref: keyName,
-								op: "isEmpty"
-							}
-						}
-					]
+					condition: {
+						parameter_ref: keyName,
+						op: "colDoesExists"
+					}
 				}
 			}
-		}
+		},
+		alwaysShow: true
 	};
 		// add the new definition to the set of validation definitions for this control.
 	if (valDefinitions.controls[keyName]) {

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

@@ -30,6 +30,7 @@ import { cloneDeep, get, has, set } from "lodash";
 import { ASSOCIATION_LINK, NODE_LINK, COMMENT_LINK, VERTICAL,
 	DAGRE_HORIZONTAL, DAGRE_VERTICAL,
 	CREATE_NODE, CREATE_COMMENT, CREATE_NODE_LINK, CREATE_COMMENT_LINK,
+	SNAP_TO_GRID_AFTER, SNAP_TO_GRID_DURING,
 	BINDING, SUPER_NODE }
 	from "../common-canvas/constants/canvas-constants.js";
 
@@ -1017,12 +1018,18 @@ export default class APIPipeline {
 	// Returns a position for a new comment added by clicking the 'add comment'
 	// button on the toolbar. It searches for a position that is not already
 	// occupied by an existing comment.
-	getNewCommentPosition(svgPos) {
-		const pos = { x_pos: svgPos.x_pos, y_pos: svgPos.y_pos };
+	getAdjustedCommentPosition(comPos) {
+		const stgType = this.objectModel.getCanvasConfig().enableSnapToGridType;
+		const pos = { x_pos: comPos.x, y_pos: comPos.y };
 
 		while (this.exactlyOverlaps(null, [pos], null)) {
-			pos.x_pos += 10;
-			pos.y_pos += 10;
+			if (stgType === SNAP_TO_GRID_DURING || stgType === SNAP_TO_GRID_AFTER) {
+				pos.x_pos += this.objectModel.getCanvasLayout().snapToGridXPx;
+				pos.y_pos += this.objectModel.getCanvasLayout().snapToGridYPx;
+			} else {
+				pos.x_pos += 10;
+				pos.y_pos += 10;
+			}
 		}
 
 		return pos;
@@ -1144,19 +1151,32 @@ export default class APIPipeline {
 		return linkNodeList;
 	}
 
+	// Creates a node link from the srcInfo and trgInfo and other link 'data'
+	// passed in.
 	createNodeLink(srcInfo, trgInfo, data) {
 		const srcNode = this.getNode(srcInfo.id);
 		const trgNode = this.getNode(trgInfo.id);
 		const links = this.getLinks();
 
-		if (CanvasUtils.isConnectionAllowed(srcInfo.portId, trgInfo.portId, srcNode, trgNode, links, data.type)) {
+		if ((srcInfo.srcPos && trgInfo.trgPos) || // Fully detached
+				(srcInfo.srcPos && CanvasUtils.isTrgConnectionAllowedWithDetachedLinks(trgInfo.portId, trgNode, links)) || // Semi-detached
+				(trgInfo.trgPos && CanvasUtils.isSrcConnectionAllowedWithDetachedLinks(srcInfo.portId, srcNode, links)) || // Semi-detached
+				(CanvasUtils.isConnectionAllowed(srcInfo.portId, trgInfo.portId, srcNode, trgNode, links, data.type))) { // Fully attached
 			const link = {};
-			link.id = data.id ? data.id : this.objectModel.getUniqueId(CREATE_NODE_LINK, { "sourceNode": this.getNode(srcInfo.id), "targetNode": this.getNode(trgInfo.id) });
+			link.id = data.id ? data.id : this.objectModel.getUniqueId(CREATE_NODE_LINK, { "sourceNode": srcNode, "targetNode": trgNode });
 			link.type = data.type;
-			link.srcNodeId = srcInfo.id;
-			link.srcNodePortId = srcInfo.portId;
-			link.trgNodeId = trgInfo.id;
-			link.trgNodePortId = trgInfo.portId;
+			if (srcInfo.srcPos) {
+				link.srcPos = srcInfo.srcPos;
+			} else {
+				link.srcNodeId = srcInfo.id;
+				link.srcNodePortId = srcInfo.portId;
+			}
+			if (trgInfo.trgPos) {
+				link.trgPos = trgInfo.trgPos;
+			} else {
+				link.trgNodeId = trgInfo.id;
+				link.trgNodePortId = trgInfo.portId;
+			}
 			if (data.class_name) {
 				link.class_name = data.class_name;
 			}

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

@@ -94,6 +94,7 @@ export default class CanvasUtils {
 			dropZoneCanvasContent: null,
 			enableNodeLayout: {},
 			enableCanvasLayout: {}, // Not documented
+			enableUseCardFromOriginalPorts: false, // Not documented
 			tipConfig: {
 				"palette": true,
 				"nodes": true,

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

@@ -181,21 +181,22 @@ const portsHorizontalDefaultLayout = {
 		outputPortWidth: 12,
 		outputPortHeight: 12,
 
-		// Position of right single input port. Multiple input ports will be
+		// Position of right single output port. Multiple input ports will be
 		// automatically positioned with the Y coordinate being overriden. These
 		// values are an offset from the top right corner of the node outline.
 		// Used when linkDirection is "LeftRight".
+		outputPortRightPosition: "topRight",
 		outputPortRightPosX: 0,
 		outputPortRightPosY: 20,
 
-		// Position of top single input port. Multiple input ports will be
+		// Position of top single output port. Multiple input ports will be
 		// automatically positioned with the X coordinate being overriden. These
 		// values are an offset from the top left corner of the node outline.
 		// Used when linkDirection is "BottomTop".
 		outputPortTopPosX: 80,
 		outputPortTopPosY: 0,
 
-		// Position of bottom single input port. Multiple input ports will be
+		// Position of bottom single output port. Multiple input ports will be
 		// automatically positioned with the X coordinate being overriden. These
 		// values are an offset from the bottom left corner of the node outline.
 		// Used when linkDirection is "TopBottom".
@@ -353,7 +354,8 @@ const portsHorizontalDefaultLayout = {
 		commentSizingArea: 10,
 
 		// Add comment toolbar action, default offset from viewport
-		addCommentOffset: 30,
+		addCommentOffsetX: 30,
+		addCommentOffsetY: 50,
 
 		// Comment port (circle) radius
 		commentPortRadius: 5,
@@ -574,6 +576,7 @@ const portsVerticalDefaultLayout = {
 		// automatically positioned with the Y coordinate being overriden. These
 		// values are an offset from the top right corner of the node outline.
 		// Used when linkDirection is "LeftRight".
+		outputPortRightPosition: "topRight",
 		outputPortRightPosX: 0,
 		outputPortRightPosY: 29,
 
@@ -742,7 +745,8 @@ const portsVerticalDefaultLayout = {
 		commentSizingArea: 10,
 
 		// Add comment toolbar action, default offset from viewport
-		addCommentOffset: 30,
+		addCommentOffsetX: 30,
+		addCommentOffsetY: 50,
 
 		// Comment port (circle) radius
 		commentPortRadius: 5,

package/src/palette/palette-content-list-item.jsx

@@ -250,7 +250,9 @@ class PaletteContentListItem extends React.Component {
 		let icon = null;
 
 		if (has(this.props.nodeTypeInfo.nodeType, "app_data.ui_data.image")) {
-			let image = this.props.nodeTypeInfo.nodeType.app_data.ui_data.image;
+			let image = this.props.nodeTypeInfo.nodeType.app_data.ui_data.palette_image
+				? this.props.nodeTypeInfo.nodeType.app_data.ui_data.palette_image
+				: this.props.nodeTypeInfo.nodeType.app_data.ui_data.image;
 
 			if (image === USE_DEFAULT_ICON) {
 				image = SUPERNODE_ICON;

package/src/palette/palette-flyout-content-category.jsx

@@ -28,6 +28,10 @@ class PaletteFlyoutContentCategory extends React.Component {
 	constructor(props) {
 		super(props);
 
+		this.state = {
+			isOpen: false
+		};
+
 		this.onMouseOver = this.onMouseOver.bind(this);
 		this.onMouseLeave = this.onMouseLeave.bind(this);
 		this.categorySelected = this.categorySelected.bind(this);
@@ -87,24 +91,38 @@ class PaletteFlyoutContentCategory extends React.Component {
 		return content;
 	}
 
+	// Returns the category object for a regular category.
 	getRenderCategory() {
-		let itemImage = null;
-		if (this.props.category.image && this.props.category.image !== "") {
-			if (this.props.category.image.endsWith(".svg")) {
-				itemImage = (
-					<div>
-						<SVG src={this.props.category.image} className="palette-flyout-category-item-icon" draggable="false" />
-					</div>
-				);
-			} else {
-				itemImage = (
-					<div>
-						<img src={this.props.category.image} className="palette-flyout-category-item-icon" draggable="false" />
-					</div>
-				);
-			}
-		}
+		const titleObj = this.getTitleObj();
+		const content = this.getContent();
+		return (
+			<AccordionItem title={titleObj} onHeadingClick={({ isOpen }) => this.setState({ isOpen })}>
+				{content}
+			</AccordionItem>
+		);
+	}
 
+	// Returns the title object for the category consisting of the image and text.
+	getTitleObj() {
+		const itemImage = this.getItemImage();
+		const itemText = this.getItemText();
+		return (
+			<div className="palette-flyout-category"
+				data-id={get(this.props.category, "id", "")}
+				onClick={this.categorySelected}
+				value={this.props.category.label}
+				onMouseOver={this.onMouseOver}
+				onMouseLeave={this.onMouseLeave}
+			>
+				<div className="palette-flyout-category-item">
+					{itemImage}
+					{itemText}
+				</div></div>
+		);
+	}
+
+	// Returns the text for the category
+	getItemText() {
 		let itemText = null;
 		const label = this.getDisplayLabel();
 		if (this.props.isPaletteOpen === true) {
@@ -125,22 +143,39 @@ class PaletteFlyoutContentCategory extends React.Component {
 				</span>
 			);
 		}
-		const nodeTypeInfos = this.props.category.node_types.map((nt) => ({ nodeType: nt, category: this.props.category }));
-		const titleObj = (
-			<div className="palette-flyout-category"
-				data-id={get(this.props.category, "id", "")}
-				onClick={this.categorySelected}
-				value={this.props.category.label}
-				onMouseOver={this.onMouseOver}
-				onMouseLeave={this.onMouseLeave}
-			>
-				<div className="palette-flyout-category-item">
-					{itemImage}
-					{itemText}
-				</div></div>
-		);
-		return (
-			<AccordionItem title={titleObj}>
+		return itemText;
+	}
+
+	// Returns the image for the category
+	getItemImage() {
+		let itemImage = null;
+		if (this.props.category.image && this.props.category.image !== "") {
+			if (this.props.category.image.endsWith(".svg")) {
+				itemImage = (
+					<div>
+						<SVG src={this.props.category.image} className="palette-flyout-category-item-icon" draggable="false" />
+					</div>
+				);
+			} else {
+				itemImage = (
+					<div>
+						<img src={this.props.category.image} className="palette-flyout-category-item-icon" draggable="false" />
+					</div>
+				);
+			}
+		}
+		return itemImage;
+	}
+
+	// Returns the content object for the AccordionItem. This is only set to
+	// something if the category is open (that is: isOpen is true). It is useful
+	// to remove the nodes from the DOM when the category is closed because this
+	// can help inline SVG icons on the canvas, that reference elements in the
+	// <defs> element, to appear correclty.
+	getContent() {
+		if (this.state.isOpen) {
+			const nodeTypeInfos = this.props.category.node_types.map((nt) => ({ nodeType: nt, category: this.props.category }));
+			return (
 				<PaletteContentList
 					key={this.props.category.id + "-nodes"}
 					category={this.props.category}
@@ -149,8 +184,9 @@ class PaletteFlyoutContentCategory extends React.Component {
 					isPaletteOpen={this.props.isPaletteOpen}
 					isEditingEnabled={this.props.isEditingEnabled}
 				/>
-			</AccordionItem>
-		);
+			);
+		}
+		return null;
 	}
 
 	categorySelected() {
@@ -158,14 +194,9 @@ class PaletteFlyoutContentCategory extends React.Component {
 	}
 
 	render() {
-		let content = null;
-		if (this.props.category.loading_text) {
-			content = this.getInlineLoadingRenderCategory();
-		} else {
-			content = this.getRenderCategory();
-		}
-
-		return content;
+		return this.props.category.loading_text
+			? this.getInlineLoadingRenderCategory()
+			: this.getRenderCategory();
 	}
 }
 

package/src/palette/palette.scss

@@ -273,7 +273,7 @@ $palette-search-container-height: 41px;
 
 .palette-flyout-category-text-abbr {
 	line-height: 46px;  /* Must be same as containing div height */
-	margin-left: 16px;
+	margin-left: 0;
 }
 
 .palette-flyout-category-text-no-image {