@elyra/canvas 12.42.0 → 12.44.0

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

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2023 Elyra Authors
+ * Copyright 2017-2024 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -339,20 +339,12 @@ export default class SvgCanvasNodes {
 		return node.layout.errorHeight;
 	}
 
-	getNodeInputPortLeftPosX(node) {
-		return this.getElementPosX(node.width, node.layout.inputPortLeftPosX, node.layout.inputPortLeftPosition);
+	getNodePortPosX(posInfo, node) {
+		return this.getElementPosX(node.width, posInfo.x_pos, posInfo.pos);
 	}
 
-	getNodeInputPortLeftPosY(node) {
-		return this.getElementPosY(node.height, node.layout.inputPortLeftPosY, node.layout.inputPortLeftPosition);
-	}
-
-	getNodeOutputPortRightPosX(node) {
-		return this.getElementPosX(node.width, node.layout.outputPortRightPosX, node.layout.outputPortRightPosition);
-	}
-
-	getNodeOutputPortRightPosY(node) {
-		return this.getElementPosY(node.height, node.layout.outputPortRightPosY, node.layout.outputPortRightPosition);
+	getNodePortPosY(posInfo, node) {
+		return this.getElementPosY(node.height, posInfo.y_pos, posInfo.pos);
 	}
 
 	getElementPosX(width, xOffset = 0, position = "topLeft") {

package/src/common-properties/components/field-picker/field-picker.jsx

@@ -315,9 +315,13 @@ export default class FieldPicker extends React.Component {
 	_genResetButton() {
 		const resetLabel = PropertyUtils.formatMessage(this.props.controller.getReactIntl(),
 			MESSAGE_KEYS.FIELDPICKER_RESETBUTTON_LABEL);
+		const defaultSelections = this.props.currentFields;
+		const selectedFields = this.state.selectedFields;
+		const isSelectionEqual = defaultSelections.length === selectedFields.length && defaultSelections.every((field) => selectedFields.indexOf(field) > -1);
 		return (
 			<Button
 				className="properties-fp-reset-button-container"
+				disabled={isSelectionEqual}
 				onClick={this.handleReset}
 				renderIcon={Reset24}
 				iconDescription={resetLabel}

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

@@ -17,7 +17,6 @@
 .properties-checkbox {
 	display: flex;
 	align-items: center;
-	flex-wrap: wrap;
 	.tooltip-container {
 		margin-left: $spacing-03;
 		cursor: pointer;

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

@@ -41,12 +41,11 @@ import { Compartment } from "@codemirror/state";
 import { tags } from "@lezer/highlight";
 import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
 import { python } from "@codemirror/lang-python";
-import { r } from "codemirror-lang-r";
 import { sql } from "@codemirror/lang-sql";
 import { javascript } from "@codemirror/lang-javascript";
 
 import { getPythonHints } from "./languages/python-hint";
-import { getRHints } from "./languages/r-hint";
+import { rLanguage } from "./languages/r-hint";
 import { clem } from "./languages/CLEM-hint";
 
 const pxPerChar = 8.5;
@@ -168,14 +167,13 @@ class ExpressionControl extends React.Component {
 			this.origHint = getPythonHints();
 			break;
 		case "text/x-rsrc":
-			language = r();
-			this.origHint = getRHints();
+			language = rLanguage(); // custom language
 			break;
 		case "javascript":
 			language = javascript();
 			break;
 		default:
-			language = clem();
+			language = clem(); // custom language
 		}
 
 		// Custom completions add to the language completions

package/src/common-properties/controls/expression/languages/python-hint.js

@@ -14,48 +14,36 @@
  * limitations under the License.
  */
 
+// Ref: https://docs.python.org/3.12/reference/lexical_analysis.html#keywords
 const pythonKeywords = [
-	"and",
-	"del",
-	"not",
-	"as",
-	"elif",
-	"global",
-	"or",
-	"with",
-	"assert",
+	"await",
 	"else",
 	"pass",
-	"yield",
 	"break",
 	"except",
-	"print",
 	"in",
 	"raise",
-	"continue",
 	"finally",
 	"is",
 	"return",
-	"lambda"
+	"and",
+	"continue",
+	"lambda",
+	"as",
+	"nonlocal",
+	"assert",
+	"del",
+	"global",
+	"not",
+	"with",
+	"async",
+	"elif",
+	"or",
+	"yield"
 ];
 
-const pythonFunctions = [
-	"basestring()",
-	"execfile()",
-	"file()",
-	"raw_input()",
-	"unichr()",
-	"reduce()",
-	"unicode()",
-	"long()",
-	"reload()",
-	"xrange()",
-	"cmp()",
-	"apply()",
-	"buffer()",
-	"coerce()",
-	"intern()",
-];
+// Ref: https://docs.python.org/3/library/functions.html
+const pythonFunctions = [];
 
 function getPythonHints() {
 	const pythonHints = [];

package/src/common-properties/controls/expression/languages/r-hint.js

@@ -14,11 +14,9 @@
  * limitations under the License.
  */
 
-const keywords = "function|if|in|break|next|repeat|else|for" +
-	"|return|switch|while|try|tryCatch|stop|warning|require|library" +
-	"|attach|detach|source|setMethod|setGeneric|setGroupGeneric|setClass";
-
-const rKeywords = keywords.split("|");
+import { LanguageSupport, StreamLanguage } from "@codemirror/language";
+import { completeFromList } from "@codemirror/autocomplete";
+import { r } from "@codemirror/legacy-modes/mode/r";
 
 const builtIns = "zapsmall xzfile xtfrm xor writeLines writeChar writeBin write withVisible withRestarts within" +
 	" withCallingHandlers withAutoprint with while which weekdays warnings warning version Vectorize vector vapply" +
@@ -69,13 +67,23 @@ const rBuiltIns = builtIns.split(" ");
 function getRHints() {
 	const rHints = [];
 
-	rKeywords.forEach((keyword) => rHints.push({ label: keyword, type: "keyword" }));
-
 	rBuiltIns.forEach((builtIn) => rHints.push({ label: builtIn, type: "keyword" }));
 
 	return rHints;
 }
 
+// Define R language
+const rLan = StreamLanguage.define(r);
+
+// Autocompletions
+const rCompletion = rLan.data.of({
+	autocomplete: completeFromList(getRHints())
+});
+
+function rLanguage() {
+	return new LanguageSupport(rLan, [rCompletion]);
+}
+
 export {
-	getRHints
+	rLanguage
 };

package/src/common-properties/index.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2023 Elyra Authors
+ * Copyright 2017-2024 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -18,5 +18,7 @@ import CommonProperties from "./common-properties";
 import PropertiesController from "./properties-controller";
 import FlexibleTable from "./components/flexible-table";
 import FieldPicker from "./components/field-picker";
+import { clem } from "./controls/expression/languages/CLEM-hint";
+import { getPythonHints } from "./controls/expression/languages/python-hint";
 
-export { CommonProperties, PropertiesController, FlexibleTable, FieldPicker };
+export { CommonProperties, PropertiesController, FlexibleTable, FieldPicker, clem, getPythonHints };

package/src/icons/icon.scss

@@ -51,5 +51,5 @@ svg.canvas-state-icon-info {
 }
 
 svg.canvas-state-icon-information-hollow {
-	fill: $icon-01;
+	fill: $icon-02;
 }

package/src/index.js

@@ -15,7 +15,7 @@
  */
 
 import { CommonCanvas, CanvasController } from "./common-canvas/index";
-import { CommonProperties, PropertiesController, FieldPicker, FlexibleTable } from "./common-properties/index";
+import { CommonProperties, PropertiesController, FieldPicker, FlexibleTable, clem, getPythonHints } from "./common-properties/index";
 import CommandStack from "./command-stack/command-stack";
 import * as FlowValidation from "./flow-validation/validate-flow";
 import ContextMenuWrapper from "./context-menu/context-menu-wrapper";
@@ -30,6 +30,6 @@ import DisconnectObjectsAction from "../src/command-actions/disconnectObjectsAct
 import PasteAction from "../src/command-actions/pasteAction";
 
 
-export { CommonCanvas, CanvasController, CommonProperties, PropertiesController, FieldPicker, FlexibleTable,
+export { CommonCanvas, CanvasController, CommonProperties, PropertiesController, FieldPicker, FlexibleTable, clem, getPythonHints,
 	CommandStack, FlowValidation, ContextMenuWrapper, ToolTip, ColorPicker,
 	CreateAutoNodeAction, CreateNodeAction, CreateNodeLinkAction, DeleteObjectsAction, DisconnectObjectsAction, PasteAction };

package/src/notification-panel/notification-panel.jsx

@@ -25,6 +25,9 @@ import Logger from "../logging/canvas-logger.js";
 import { DEFAULT_NOTIFICATION_HEADER } from "./../common-canvas/constants/canvas-constants.js";
 import defaultMessages from "../../locales/notification-panel/locales/en.json";
 
+const TAB_KEY = 9;
+const RETURN_KEY = 13;
+const SPACE_KEY = 32;
 
 class NotificationPanel extends React.Component {
 	static getDerivedStateFromProps(nextProps, prevState) {
@@ -38,18 +41,18 @@ class NotificationPanel extends React.Component {
 		super(props);
 		this.state = {};
 
-		this.firstTime = true;
 		this.logger = new Logger("NotificationPanel");
-		this.handleNotificationPanelClickOutside = this.handleNotificationPanelClickOutside.bind(this);
-		this.closeNotificationPanel = this.closeNotificationPanel.bind(this);
+		this.keyDownOnPanel = this.keyDownOnPanel.bind(this);
 	}
 
 	componentDidMount() {
-		document.addEventListener("click", this.handleNotificationPanelClickOutside, true);
+		this.setFocusOnFirstItem();
 	}
 
-	componentWillUnmount() {
-		document.removeEventListener("click", this.handleNotificationPanelClickOutside, true);
+	setFocusOnFirstItem() {
+		if (this.allRefs.length > 0) {
+			this.allRefs[0].focus();
+		}
 	}
 
 	getNotifications() {
@@ -79,9 +82,14 @@ class NotificationPanel extends React.Component {
 				: null;
 
 			const closeMessage = message.closeMessage
-				? (<div className = "notification-message-close" onClick={this.deleteNotification.bind(this, message.id)}>
-					{message.closeMessage}
-				</div>)
+				? (
+					<div tabIndex={0} ref={(ref) => (!ref || this.allRefs.push(ref))}
+						className = "notification-message-close"
+						onClick={this.clickOnCloseButton.bind(this, message)}
+						onKeyDown={this.keyDownOnCloseButton.bind(this, message)}
+					>
+						{message.closeMessage}
+					</div>)
 				: null;
 
 			const timestamp = message.timestamp
@@ -99,6 +107,8 @@ class NotificationPanel extends React.Component {
 				<div
 					className={"notifications " + className + message.type}
 					onClick={this.notificationCallback.bind(this, message.id, message.callback)}
+					tabIndex={0}
+					ref={(ref) => (!ref || this.allRefs.push(ref))}
 				>
 					{type}
 					<div className="notification-message-details">
@@ -117,65 +127,95 @@ class NotificationPanel extends React.Component {
 		return notifications;
 	}
 
-	handleNotificationPanelClickOutside(e) {
-		if (this.props.isNotificationOpen &&
-				this.props.notificationConfig &&
-				!this.props.notificationConfig.keepOpen &&
-				this.isClickOutsideNotificationPanel(e)) {
-			this.props.canvasController.toolbarActionHandler("closeNotificationPanel");
-			e.stopPropagation(); // Prevent D3 canvas code from clearing the selections.
+	notificationCallback(id, messageCallback) {
+		if (messageCallback) {
+			messageCallback(id);
 		}
 	}
 
-	isClickOutsideNotificationPanel(e) {
-		return !e.target.closest(".notification-panel");
+	clickOnCloseButton(message) {
+		this.deleteNotification(message.id);
 	}
 
-	notificationCallback(id, messageCallback) {
-		if (messageCallback) {
-			messageCallback(id);
+	keyDownOnCloseButton(message, evt) {
+		if (evt.keyCode === SPACE_KEY || evt.keyCode === RETURN_KEY) {
+			this.deleteNotification(message.id);
 		}
 	}
 
 	deleteNotification(id) {
-		this.props.canvasController.deleteNotificationMessages(id);
+		this.props.subPanelData.canvasController.deleteNotificationMessages(id);
 	}
 
 	clearNotificationMessages() {
-		this.props.canvasController.clearNotificationMessages();
+		this.props.subPanelData.canvasController.clearNotificationMessages();
+		this.setFocusOnFirstItem();
+
 		if (typeof this.props.notificationConfig.clearAllCallback === "function") {
 			this.props.notificationConfig.clearAllCallback();
 		}
 	}
 
-	closeNotificationPanel() {
-		this.props.canvasController.toolbarActionHandler("closeNotificationPanel");
+	keyDownOnPanel(evt) {
+		if (evt.keyCode === TAB_KEY && !evt.shiftKey) {
+			const lastElement = this.allRefs[this.allRefs.length - 1];
+			if (evt.target === lastElement) {
+				evt.stopPropagation();
+				evt.preventDefault();
+				this.allRefs[0].focus();
+			}
+		} else if (evt.keyCode === TAB_KEY && evt.shiftKey) {
+			const lastElement = this.allRefs[this.allRefs.length - 1];
+			if (evt.target === this.allRefs[0]) {
+				evt.stopPropagation();
+				evt.preventDefault();
+				lastElement.focus();
+			}
+		}
 	}
 
 	render() {
 		this.logger.log("render");
+		this.allRefs = [];
 
 		if (!this.props.notificationConfig) {
 			return null;
 		}
 
-		let notificationPanelClassName = this.props.isNotificationOpen ? "" : "panel-hidden";
-		notificationPanelClassName += this.firstTime ? "" : " panel-transition";
-		this.firstTime = false;
-
-		const notificationHeader = this.props.notificationConfig && this.props.notificationConfig.notificationHeader
+		const headerText = this.props.notificationConfig && this.props.notificationConfig.notificationHeader
 			? this.props.notificationConfig.notificationHeader
 			: DEFAULT_NOTIFICATION_HEADER;
 
+		const notificationHeader = (<div className="notification-panel-header">{headerText}</div>);
+
 		const notificationSubtitle = this.props.notificationConfig && this.props.notificationConfig.notificationSubtitle
 			? (<div className="notification-panel-subtitle">
 				{this.props.notificationConfig.notificationSubtitle}
 			</div>)
 			: null;
 
+		const closeButton = (
+			<div className="notification-panel-close-button">
+				<Button
+					ref={(ref) => (!ref || this.allRefs.push(ref))}
+					size="sm"
+					kind="ghost"
+					renderIcon={Close16}
+					hasIconOnly
+					iconDescription={this.props.intl.formatMessage({
+						id: "notification.panel.close.button.description",
+						defaultMessage: defaultMessages["notification.panel.close.button.description"]
+					})}
+					onClick={this.props.closeSubPanel}
+					tooltipAlignment="end"
+					tooltipPosition="bottom"
+				/>
+			</div>
+		);
+
 		const notificationPanelMessages = this.props.messages.length > 0
 			? this.getNotifications()
-			: (<div className="notification-panel-empty-message-container">
+			: (<div tabIndex={0} ref={(ref) => (!ref || this.allRefs.push(ref))} className="notification-panel-empty-message-container">
 				<div className="notification-panel-empty-message">
 					{this.props.notificationConfig && this.props.notificationConfig.emptyMessage ? this.props.notificationConfig.emptyMessage : null}
 				</div>
@@ -184,6 +224,7 @@ class NotificationPanel extends React.Component {
 		const clearAll = this.props.notificationConfig && this.props.notificationConfig.clearAllMessage
 			? (<div className="notification-panel-clear-all-container">
 				<Button
+					ref={(ref) => (!ref || this.props.messages.length === 0 || this.allRefs.push(ref))}
 					className="notification-panel-clear-all"
 					onClick={this.clearNotificationMessages.bind(this)}
 					kind="ghost"
@@ -200,6 +241,7 @@ class NotificationPanel extends React.Component {
 			this.props.notificationConfig.secondaryButtonCallback
 			? (<div className="notification-panel-secondary-button-container">
 				<Button
+					ref={(ref) => (!ref || this.props.secondaryButtonDisabled || this.allRefs.push(ref))}
 					className="notification-panel-secondary-button"
 					onClick={this.props.notificationConfig.secondaryButtonCallback.bind(this)}
 					kind="ghost"
@@ -211,28 +253,13 @@ class NotificationPanel extends React.Component {
 			</div>)
 			: null;
 
-		return (<div className={"notification-panel-container " + notificationPanelClassName} >
-			<div className="notification-panel">
-				<div className="notification-panel-header-container">
-					<div className="notification-panel-header">
-						{notificationHeader}
-						<Button
-							className="notification-panel-close-button"
-							size="sm"
-							kind="ghost"
-							renderIcon={Close16}
-							hasIconOnly
-							iconDescription={this.props.intl.formatMessage({
-								id: "notification.panel.close.button.description",
-								defaultMessage: defaultMessages["notification.panel.close.button.description"]
-							})}
-							onClick={this.closeNotificationPanel}
-							tooltipAlignment="end"
-							tooltipPosition="bottom"
-						/>
-					</div>
+		return (
+			<div className="notification-panel" onKeyDown={this.keyDownOnPanel}>
+				<div className="notification-panel-header-container" tabIndex={0} ref={(ref) => (!ref || this.allRefs.push(ref))}>
+					{notificationHeader}
 					{notificationSubtitle}
 				</div>
+				{closeButton}
 				<div className="notification-panel-messages">
 					{notificationPanelMessages}
 				</div>
@@ -241,13 +268,14 @@ class NotificationPanel extends React.Component {
 					{secondaryButton}
 				</div>
 			</div>
-		</div>);
+		);
 	}
 }
 
 NotificationPanel.propTypes = {
-	// Provided by CommonCanvas
-	canvasController: PropTypes.object,
+	// Provided by toolbar
+	closeSubPanel: PropTypes.func,
+	subPanelData: PropTypes.object,
 
 	// Provided by Redux
 	notificationConfig: PropTypes.shape({
@@ -277,7 +305,6 @@ NotificationPanel.propTypes = {
 		secondaryButtonDisabled: PropTypes.bool
 	}),
 	secondaryButtonDisabled: PropTypes.bool,
-	isNotificationOpen: PropTypes.bool,
 	messages: PropTypes.array,
 	intl: PropTypes.object.isRequired
 };
@@ -285,7 +312,6 @@ NotificationPanel.propTypes = {
 const mapStateToProps = (state, ownProps) => ({
 	notificationConfig: state.notificationpanel.config,
 	secondaryButtonDisabled: state.notificationpanel.config ? state.notificationpanel.config.secondaryButtonDisabled : false,
-	isNotificationOpen: state.notificationpanel.isOpen,
 	messages: state.notifications
 });
 

package/src/notification-panel/notification-panel.scss

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2023 Elyra Authors
+ * Copyright 2017-2024 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -18,31 +18,9 @@ $notification-panel-header-height: 33px;
 $notification-message-height: 48px;
 $notification-left-border-color-width: 4px;
 $notification-panel-button-container-height: 49px;
-$toolbar-button-height: 41px; // Allow one extra pixel for the toolbar border
-
-// This section adds an ease-in ease-out effect for the notification-panel-container
-.notification-panel-container {
-	opacity: 1;
-	margin-top: 0;
-	z-index: 2; // Ensure panel appears on top of bottom panel.
-
-	&.panel-hidden {
-		display: block;
-		opacity: 0;
-		visibility: hidden;
-	}
-
-	&.panel-transition {
-		transition: 0.25s ease-in-out;
-	}
-}
 
 .notification-panel {
-	position: absolute;
-	top: $toolbar-button-height;
-	right: 0;
-
-	width: 320px;
+	width: 318px;
 	height: fit-content;
 	min-height: calc(#{$notification-panel-header-height} + #{$notification-panel-button-container-height} + #{$notification-message-height});
 	max-height: calc(100% - 53px);
@@ -60,23 +38,33 @@ $toolbar-button-height: 41px; // Allow one extra pixel for the toolbar border
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
-	border: 1px solid $ui-03;
 	border-bottom: 0;
 	padding: $spacing-05;
+	outline: none; // Turn outline off and use carbon style for focus below.
+
+	&:focus {
+		border-color: $interactive-03;
+		box-shadow: inset 0 0 0 2px $interactive-03;
+	}
+
 	.notification-panel-header {
 		@include carbon--type-style("productive-heading-02");
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 	}
+
 	.notification-panel-subtitle {
 		@include carbon--type-style("helper-text-01");
 		color: $text-02;
 		padding-top: $spacing-02;
 	}
-	.notification-panel-close-button {
-		left: $spacing-02;
-	}
+}
+
+.notification-panel-close-button {
+	position: absolute;
+	top: 12px;
+	right: 12px;
 }
 
 .notification-panel-button-container {
@@ -85,7 +73,6 @@ $toolbar-button-height: 41px; // Allow one extra pixel for the toolbar border
 	background-color: $ui-01;
 	display: flex;
 	justify-content: space-between;
-	border: 1px solid $ui-03;
 	border-top: 0;
 	padding: $spacing-03 0;
 	font-weight: 400;
@@ -95,17 +82,27 @@ $toolbar-button-height: 41px; // Allow one extra pixel for the toolbar border
 	overflow-y: auto;
 	line-height: normal;
 	background-color: $ui-01;
-	border: 1px solid $ui-03;
+	border-top: 1px solid $ui-03;
+	border-bottom: 1px solid $ui-03;
 	max-height: 448px;
+
 	.notifications-button-container {
 		border-bottom: 1px solid $ui-03;
 		min-height: $notification-message-height;
 	}
+
 	.notification-panel-empty-message-container {
 		min-height: $notification-message-height;
 		display: flex;
 		justify-content: center;
 		align-items: center;
+		outline: none; // Turn outline off and use carbon style for focus below.
+
+		&:focus {
+			border-color: $interactive-03;
+			box-shadow: inset 0 0 0 2px $interactive-03;
+		}
+
 		.notification-panel-empty-message {
 			@include carbon--type-style("body-short-01");
 			text-align: center;
@@ -129,21 +126,19 @@ $toolbar-button-height: 41px; // Allow one extra pixel for the toolbar border
 		cursor: default;
 		margin-top: 0; // Required for Safari
 		margin-bottom: 0; // Required for Safari
+		outline: none; // Turn outline off and use carbon style for focus below.
 
-		&.clickable {
-			cursor: pointer;
-		}
-
-		&:active,
 		&:focus {
-			outline: none;
-			border-style: none;
-			border-left: $notification-left-border-color-width solid $ui-01;
+			border-color: $interactive-03;
+			box-shadow: inset 0 0 0 2px $interactive-03;
 		}
 
 		&:hover {
 			background-color: $hover-ui;
+		}
 
+		&:focus,
+		&:hover {
 			&.unspecified {
 				border-left: $notification-left-border-color-width solid $field-01;
 			}
@@ -161,6 +156,10 @@ $toolbar-button-height: 41px; // Allow one extra pixel for the toolbar border
 			}
 		}
 
+		&.clickable {
+			cursor: pointer;
+		}
+
 		.notification-message-type {
 			display: flex;
 			justify-content: center;
@@ -226,6 +225,9 @@ $toolbar-button-height: 41px; // Allow one extra pixel for the toolbar border
 	}
 }
 
-.notification-message-close:hover {
-	text-decoration: underline;
+.notification-message-close {
+	width: fit-content;
+	&:hover {
+		text-decoration: underline;
+	}
 }

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

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2023 Elyra Authors
+ * Copyright 2017-2024 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,7 +21,7 @@ import { isMatch, isMatchWith, omit } from "lodash";
 import LayoutDimensions from "./layout-dimensions.js";
 import { ASSOC_STRAIGHT, LINK_SELECTION_NONE } from "../common-canvas/constants/canvas-constants";
 
-export default class CanvasUtils {
+export default class ConfigUtils {
 
 	// Returns a config object which is the result of merging config into
 	// startConfig.