Releases: elyra-ai/canvas
release_12.25.0
Feature Enhancements
Common-Properties
Support "max" option for editor_size in common-properties
editor_size attribute in UIHints now supports “max” size having 900px width. Resize button won’t be displayed for max size. However, when editor size is set to “large”, resize button allows the properties panel to be increased in size up to the "max" size.
Issues Resolved
#1335 Add additional checks for pipeline in getNonClonedSelectedObjs() (#1336)
#1330 Test harness - Hide side panel contents when panel is closed (#1332)
#1280 tearsheet subpanel modals (#1329)
#1326 Warning appearing running toolbar-test.js (#1327)
#1324 Support 'max' option for editor_size in common-properties (#1325)
#1321 Update light-on and light-off SVG files (#1323)
#1274 Update icons in common properties (#1275)
#1318 Remove unneeded code (#1319)
#1315 Processing selection can performance issue & cause internal dat… (#1
#1279 Display field-picker in stacked tearsheet (#1317)
release_12.24.0
Feature Enhancements
Common-Canvas
#1287 Accessibility: Support context menu option to enter edit mode for labels
For accessibility, the user will need to be able to edit either node labels or decoration labels added to either a node or a link. To be able to edit the label, the user first needs to change the label to editing mode. This is currently achieved by either clicking the edit icon which appears on hover over the label, or by double-clicking the label. Neither of these approaches are accessible for the keyboard user.
To resolve this, three new canvas controller methods have been added which will change node labels, or decoration labels, into editing mode. They are:
CanvasController.setNodeLabelEditingMode(nodeId, pipelineId)
CanvasController.setNodeDecorationLabelEditingMode(decId, nodeId, pipelineId)
CanvasController.setLinkDecorationLabelEditingMode(decId, linkId, pipelineId)In addition, a new Rename option is now added to the context menu for nodes that have editable labels. When clicked, this option uses the CanvasController.setNodeLabelEditingMode(nodeId, pipelineId) to change the node label into edit mode.
If you want your application to be accessible, and your application has decoration labels, on either nodes or links, you will have to add your own context menu option to change the labels into editing mode. For example, if you are displaying a label decoration on your links, you could add a Rename Link Label option to the context menu for links. When the user clicks that option, your application code would handle the associated action passed to the editActionHandler callback and then call:
CanvasController.setLinkDecorationLabelEditingMode(decId, linkId, pipelineId)
This would change the decoration label on the link into editing mode.
Note: the label decoration would have to be specified as being editable by setting the label_editable boolean for the label decoration to true.
An example of this can be seen in the Stages sample application in the Test Harness.
#1257 Allow node outline and node selection highlight to be provided by callback
The node outline and node selection highlight shapes can now be provided using a callback function instead of an SVG string. The callback function is provided a single parameter which is the node to which the node outline and node selection highlight apply.
So instead of the following code which would provide a hard-coded size for the outline and selection highlight:
const canvasConfig = {
enableNodeLayout: {
bodyPath: “M 0 0 L 50 0 50 100 0 100 Z”,
selectionPath: ”M -5 -5 L 60 -5 60 110 -5 110 Z”
}
};Your application can specify the following code, so the outline and selection highlight will change shape if the node is resized:
const canvasConfig = {
enableNodeLayout: {
bodyPath: (node) => `M 0 0 L ${node.width} 0 ${node.width} ${node.height} 0 ${node.height} Z`,
selectionPath: (node) => `M -5 -5 L ${node.width + 10} -5 ${node.width + 10} ${node.height + 10} -5 ${node.height + 10} Z`
}
};#1287 Allow class name to be specified in node layout properties
The node layout properties, specified using the enableNodeLayout field in the canvas config, can now contain a className field. This will be added to the container group <g> DOM element for the node when the canvas is displayed, along with other classes that might have been specified for the node in the app_data.ui_data.class_name field of the node.
This means, if you want to specify a single class for all your nodes you can use the className field instead of specifying classes in the node in the pipeline flow document or through the canvas controller API.
In addition, since node layout properties are returned from the layoutHandler a className field can be specified in the returned object which will allow your application to set a different class name to individual nodes based on some criteria, such a a field in the node data.
An example of this usage can be seen in the Explain sample application in the Test Harness, where a value from the application data within each node object in the pipelineFlow can control the class name applied to each node on the canvas.
Common-Properties
#1197 Show error for invalid number in Numberfield and Spinner controls
The Numberfield control is an input field for numbers. However, characters e, E, +, - can be entered into this control. When users enter an invalid number, common-properties will display an error message and the property value will not be updated until the error is fixed.
#1294 Improve node properties undo/redo tooltip to include node name
The default undo/redo tooltip for the save-properties actions now follows this format: Undo: Save {node_name} node properties.
#1245 Add support for a new containerType for tearsheet in common-properties
To display common properties in a tearsheet, specify Tearsheet in the propertiesConfig.containerType
#1278 Sticky primary tabs in tearsheet
Primary tabs will become sticky inside a Tearsheet (containerType=”Tearsheet”). This means the tabs will stay in position when the user scrolls the content below the tabs up and down.
#1260 Add support for left nav when common-properties in tearsheet or modal
Common properties Subtabs will become a leftnav when displayed in containerType=”Tearsheet”
#1307 Expression builder should only quote field if it contains special characters
Expression builder fields will be inserted with quotations, only if the field name contains special characters. These characters include: space, digits, $, - and underscores
#1242 Support tooltip in password control
The text for tooltips shown for the show and hide icons on the password control, can now be customized.
Example of customized 'hide password' icon tooltip:
Example of customized 'show password' icon tooltip:
Issues Resolved
#1313 Change build tag from patch to minor (#1314)
#1311 Node label editing mode doesn't appear after editing link label (#1312)
#1307 Expression builder should only quote field if it contains special characters (#1308)
#1303 Unable to scroll field-picker table (#1304)
#1267 Fix missing translation in unit tests (#1305)
#1260 Add support for left nav when common-properties in tearsheet or modal (#1293)
#1301 enableSnapToGridX/Y causing resize node issues possibly (#1302)
#1299 Fix detached links issues (#1300)
#1296 Many operations are slow when nodes contain large amounts of parameter data (#1297)
#1294 Improve node properties undo/redo tooltip to include node name (#1295)
#1291 Updating Translations (#1292)
#1276 Handle spacing in common properties (#1277)
#1281 Accessibility: Support context menu option to enter edit mode f… (#1282)
#1278 Hide close button if footer buttons visible in tearsheet (#1286)
#1289 Cancel old build jobs when new commit is pushed to a PR (#1290)
#1287 Allow class name to be specified in node layout properties (#1288)
#1278 Sticky primary tabs in tearsheet (#1285)
#1283 Minor chnages to sample apps (#1284)
#1259 Invert colors in tearsheet container (#1261)
#1268 Performance of resize of nodes with multiple link lines should … (#1273)
#1246 Unable to set oneofselect in MSE when reusing previous selection (#1264)
#1242 Support tooltip in password control (#1272)
#1270 Icons from detached-links directory incorrectly referenced from… (#1271)
#1235 Multiselect bug; unable to see rows at the bottom (#1236
#1265 Fix expression test error (#1266)
#1262 Fix decoration label callback (#1263)
#1197 Show error for invalid number in Numberfield and Spinner controls (#1198)
#1245 Add new containerType for Tearsheet in common properties (#1248)
#1255 Allow decoration label text to be provided by callback (#1256)
#1257 Allow node outline and node selection highlight to be provided by callback (#1258)
#1253 Add a 'card node' sample app (#1254)
#1249 Unwanted assistive text appearing in toolbar drop down (#1250)
#1243 Ghost image positioned incorrectly relative to mouse cursor on latest Chrome version (#1244)
release_12.23.2
Feature Enhancements
None, just bug fixes.
Issues Resolved
#1238 SetCanvas canvas-controller API should support styles for nodes, comments and links (#1239)
#1131 Make toolbar size customizable (#1143)
#1233 With markdown in comments, the return (enter) key inserts extra blank line with numbered (#1234)
#1231 Self referencing line sometimes goes over the top and sometimes… (#1232)
#1221 Completing comment edit should not remove selection state (#1227)
release_12.23.1
release_12.23.0
Feature Enhancements
Common-Canvas
#1207 Allow enter/return key to finalizes text entry into a label decoration
The host application can now specify that, if the user presses the return/enter key while editing either a node label or a label decoration, the editing will be completed and the newly entered text saved: the same as if the user had clicked on the canvas background to complete the editing.
The function can be switched on as follows:
For node labels, in the canvas config object, the enableNodeLayout field called labelAllowReturnKey can be set to the string "save" like this:
const config = {
enableNodeLayout: {
labelAllowReturnKey: "save"
}
}
For label decorations, in the decoration object, the field label_allow_return_key can be set to the string "save" like this:
const decoration = {
"id": "123",
"label": "Some text",
"label_editable": true,
"label_allow_return_key": "save"
};
#1185 Implement recommended icon-display and mouse behaviors for canvas
The display of the mouse cursor icons has been changed to comply with the canvas recommendations here:
https://pages.github.ibm.com/cdai-design/pal/patterns/canvas/cursor-settings/
In addition, a new interaction setting called “Carbon” has been added for the enableInteractionType config setting in the common-canvas config object. This setting implements the pan and region-select behaviors specified in the canvas recommendations here:
https://pages.github.ibm.com/cdai-design/pal/patterns/canvas/cursor-settings/
Thus, setting enableInteractionType to “Carbon” will provide the following behavior:
- A mouse down and drag gesture on the canvas background will initiate a “region select” where a rectangle appears which can be used to select multiple canvas objects.
- If the user wants to pan the canvas (up/down or left/right) they must press and hold the space bar and then mouse down and drag on the canvas background.
Here are the details: https://github.com/elyra-ai/canvas/wiki/2.1-Config-Objects#enableinteractiontype
By the way, the “Trackpad” setting for the enableInteractionMode config field is now deprecated and will be removed in a future release.
Common-Properties
#1215 Support info icons in table headers
Table header descriptions, if provided, were previously displayed in the tooltip as part of the label tooltip. In this new release, the description will now appear in a tooltip by clicking on the info icon next to the label.
Before:
After:
#1217 Support info icons in expression builder functions and values table headers
Following the changes from #1215, the expression builder functions and values tables now support displaying the description in a tooltip by clicking on the info icon.
The default for “Fields” and “Recently Used” is an empty description. No info icon will be displayed.
To set a description for these, the application will need to override their resource files for the keys "expression.field.column.description" and "expression.value.column.description".
To set the description for fields, add a description to the expression info for the corresponding label. See the expression info schema https://github.com/elyra-ai/pipeline-schemas/blob/main/common-canvas/expression/expression-info-v3-schema.json#L99
Issues Resolved
#1223 Maintain current default setting for enableInteractionType in c… (#1224)
#1218 Comment link IDs should be persisted when getPipelineFlow is called (#1220)
#1217 Support info icons in expression table headers with custom labels (#1219)
#1215 Support info icons in table header labels (#1216)
#1185 Implement recommended icon-display and mouse behaviors for canvas (#1190)
#1214 Fix Tearsheet to render on visibility condition (#1212)
#1210 Added padding for empty table placeholder text (#1211)
#1207 Allow enter/return key to finalizes text entry into a label dec… (#1208)
#1205 Edit icon for link name translates very far away upon long name (#1206)
#1188 Labels are missing in toggle control (#1189)
#1203 CanvasController.setNodeProperties() should cause layoutHandler callback to be called (#1204)
#1199 Context menu should appear when ellipsis button clicked on Firefox (#1200)
#1201 Set controls in tearsheet panel (#1202)
release_12.22.0
release_12.21.0
Feature Enhancements
Common-Canvas
No features, just bug fixes.
Common-Properties
#1165 Add tearsheet group type
A new panel option called tearsheetPanel has been added as a group type in uihints. This is a panel that renders a tearsheet modal which can contain any content provided. The modal can be activated from the host application via the properties controller.
#1183 Ability to translate return type of function in Expression Builder
A new config option called return_type_label has been added in expression function_info section. This is an optional field of type resource_definition. Values in the Return column in Functions table will be read from return_type_label. If a label is not provided it defaults to the return_type.
Issues Resolved
#1165 Add tearsheet group type (#1166)
#1183 Translate return type of function in Expression Builder (#1184)
#1181 Allow primary panels to be hidden (#1182)
#1179 Dragging cursor over the Return to previous flow button should activate the button (#1180)
#1177 Checkboxset long value labels alignment (#1178)
#1174 Password control shows warnings in console (#1175)
#1170 Display labels for empty fields and values table in expression builder (#1171)
release_12.20.0
Feature Enhancements
Note: We had some build issues which prevented 12.17.0, 12.18.0 and 12.19.0 from being published so this is the follow on release from release 12.16.0.
Build
#1155 Support node version 16.x in Elyra Canvas
Elyra Canvas now supports node versions 14.x and 16.x.
Common-Canvas
#1152 Allow alternative image to be displayed in the palette instead of regular image
The nodes within the palette JSON can now contain an optional additional image called palette_image. This can be used to specify an alternative image for the node that will be displayed in the palette in preference to the one that is displayed when the node appears on the canvas.
This feature is really only of any use when your SVG node icons (that are displayed in-line) contain elements that reference other elements (for example <mask>s) in the <defs> element of the SVG icon because opening and closing of categories in the palette can cause those images to flicker.
This optional field, called palette_image, can be specified inside the app_data.ui_data field of the node in the palette JSON:
{
"id": "",
"type": "execution_node",
"op": "sort",
"app_data": {
"ui_data": {
"label": "Sort",
"description": "Sorts data",
"image": "/images/sort.svg",
"palette_image": "/images/sort_palette.svg",
...
...
}
}
}
#636 Add a new method to calculate default comment position in canvas…
A new method has been added to the canvas controller called getNewCommentPosition() which will return the position of where a new comment should be added to the canvas.
Common-Properties
#1150 Show warning in selectcolumn control when invalid value is selected
For "selectcolumn" and "selectcolumns" controls, when the displayed value doesn't exist in the dropdown options, common-properties will show the invalid value with a warning, like this:
#1162 Show line numbers in code and expression controls
Line numbers are now shown, like this:
#1160 Enable/disable summary panel OK button from properties controller
Some new methods have been added to the properties controller to allow the "OK" button in wide flyout panels to be enabled or disabled, as follows:
/**
* Set the "OK" button in Wide Flyout to disabled (true) or enabled (false) for given summary panel
* @param panelId {name: panel.id}
* @param wideFlyoutPrimaryButtonDisable boolean
*/
setWideFlyoutPrimaryButtonDisabled(panelId, wideFlyoutPrimaryButtonDisable)
/**
* @param panelId {name: panel.id}
*/
getWideFlyoutPrimaryButtonDisabled(panelId)
#1106 Add toggle control to use in Modeler modeling node overrides
A new Toggle control has been created following the same checkbox pattern (error & warning checking, disabled, hidden....) except we are using toggle component from Carbon (small size in tables and medium size for the rest )
Issues Resolved
#1106 Add toggle control to use in Modeler modeling node overrides (#1119)
#1168 Update CodeMirror CSS (#1169)
#636 Add a new method to calculate default comment position in canvas… (#1167)
#1160 Enable/disable summaryPanel OK button from properties controller (#1161)
#1162 Show line numbers in code and expression controls (#1163)
#1150 Show warning in selectcolumn control when invalid value is selected (#1151)
#1158 Translations[08/19/22] (#1159)
#1145 Have a way to differentiate UPDATE_PROPERTY propertyListener fr… (#1157)
#1155 Support node version 16.x in elyra-canvas (#1156)
#1152 Allow alternative image to be displayed in the palette instead of regular image (#1153)
#1148 Use transparent background for detached-canvas sample app nodes (#1149)
release_12.16.0
Feature Enhancements
Common-Canvas
1139 Enhancements for resizable nodes
When supporting resizable node (with the config field enableResizableNodes set to true) some applications want to display different styling when the nodes is resized as opposed to when it is at its default size. To achieve this common-canvas now adds a class called d3-resized to the group object <g> for the node. Consequently, the application can style resized nodes differently to default size nodes using some CSS like this:
.d3-node-group .d3-node-body-outline {
fill: transparent;
stroke: transparent;
}
.d3-node-group.d3-resized .d3-node-body-outline {
fill: ghostwhite;
stroke: grey;
}
An example of a node at the default size:
An example of a node that is larger than the default size with different styling of the node outline:
The d3-resized class will be removed from the node's group <g> object when the node is sized back to its default size.
Additionally, when an application is displaying just a single output node (with config field enableSingleOutputPortDisplay set to true), the port can now be positioned relative to one of nine fixed points around and within the node boundary. The fixed point can be specified using the outputPortRightPosition node layout field which, if not specified, defaults to "topRight".
For example for an application to get the single output port to appear in the center of a resized node, the application would specify something like the following:
const canvasConfig = {
enableNodeLayout: {
outputPortRightPosition: "middleCenter",
outputPortRightPosX: 34,
outputPortRightPosY: 0
}
};
where outputPortRightPosX and outputPortRightPosY are offsets from the center point of the node (regardless of the size of the node).
This can position the output `port guide' image near the node icon and other node elements like this:
When the port guide image is dragged the line that it is creating does not start to appear until the image is dragged outside the node boundary.
1134 Incorrect Binding nodes created when supernode is created
In this release, when a supernode is created, the way the supernode's ports and their corresponding binding nodes in the subflow has been changed. Previously, the ports and corresponding binding nodes adopted the cardinality of the internal edge node included in the subflow. Now, the ports and corresponding binding node have a maximum cardinality of 1.
This is explained more clearly with pictures in issue 1134
Common-Properties
Just bug fixes
Issues Resolved
#1146 getZoom immediately on initializing canvasController, crashes the application (#1147)
#1139 Enhancements for resizeable nodes (#1140)
#1142 On Supernode creation allow original port cardinality to be used (#1144)
#1109 Adjust tooltips on radio number sets in common-properties (#1110)
#1123 Swedish Translations (#1124)
#1136 Single row selection using Space and Enter keys (#1137)
#1122 Creating supernode for node with detached link causes error (#1138)
#1134 Incorrect Binding nodes created when supernode is created (#1135)
release_12.15.0
Feature Enhancements
Common-Canvas
1113 Refactor textarea code in svg-canvas-render
Refactoring for this issue has caused the various foreign objects on the canvas to have different internal classnames. Previously, each foreign object (which are used to display text on the canvas) had the same class name of d3-foreign-object. In this release they have been given specific class names to describe their purpose as follows:
.d3-foreign-object-node-label,
.d3-foreign-object-dec-label,
.d3-foreign-object-comment-text,
.d3-foreign-object-text-entry
.d3-foreign-object-ghost-label, (Doesn't appear on the canvas but is used for the ghost image shown when dragging from the palette)
1125 Remove icons from palette when category is closed (#1128)
Previously the palette, which is now implemented using the Carbon Accordion control, would set the display attribute of the contents of a category (the nodes) to none. This was causing an issue with any inline SVG icons that were displayed on the canvas where that image was used for one of the nodes in a closed category. This could adversely affect the display of the icons on the canvas. See the issue description for details.
In this release the nodes in a closed palette category are now removed instead of the display attribute being set to none. This resolved the icon display issues.
Common-Properties
Just bug fixes
Issues Resolved
#1125 Remove icons from palette when category is closed (#1128)
#1126 Palette test not setting up Palette object correctly (#1127)
#1120 The link to documentation in node property panel should use a d… (#1121)
#1117 Miscellaneous improvements for presentation of markdown functio… (#1118)
#1113 Refactor textarea code in svg-canvas-render (#1114)
#1115 Declare 'associative entities' as objects instead of arrays (#1116)