Releases: elyra-ai/canvas
release_12.32.0
Common-Properties
#1524 Allow custom search placeholder in Flexible Table
emptyTablePlaceholder prop in Flexible table supports string or react element.
Default search placeholder is Find in column {column_name}. This can be customized by passing searchPlaceholder (string) prop to the FlexibleTable component.
Issues Resolved
Change patch to minor release (#1529)
#1524 Allow custom search placeholder in Flexible Table (#1526)
#1527 Undo comment color token changes (#1528)
#1522 Node icons are flashing when canvas config is altered (#1523)
#1520 Horizontal nodes with input ports flashes on click (#1521)
#1518 Clipboard actions in overflow menu are only enabled when an object is selected (#1519)
#1516 Schema validation error after saving a pipeline flow from the t… (#1517)
#1514 Upgrade to latest Cypress release (#1515)
#1510 Context toolbar overflow menu is truncated at edge of viewport (#1511)
#1512 Delta Translations (#1513)
release_12.31.2
Issues Resolved
#1508 Fixed horizontal scrollbar issue in single category (#1509)
#1506 Fix Flows sample app so properties do not open on click (#1507)
#1504 Context toolbar not appearing for selected canvas (#1505)
#1500 Toolbar overflow menu does not expand for longer text (#1503)
#1501 Categories not opened when Modeler opens palette with is_open: true (#1502)
release_12.31.1
release_12.31.0
Feature Enhancements
Build
#1491 Support react v18 in peerDependencies of elyra-canvas
Elyra-canvas now supports host applications running on react v16 and v18.
Common-Canvas
#1476 Allow tips for palette categories and nodes to be switched on/off independently
Tool tips for the palette can now be switched on or off for the categories and the node templates independently. The host application can do this by altering the palette field in the `tipConfig’ object which is part of the canvas config object. For example, to turn off tool tips for palette categories, but still display tool tips for node templates inside the categories, the config objects should be like this:
const canvasConfig = [
tipConfig: {
palette: {
categories: false,
nodeTemplates: true
}
}
];
the palette field can still be specified as a boolean, true to display tips for both categories and node templates and false to prevent display of tips for those elements.
#1478 Open each category in palette by default at start
The host application can now programmatically open and close palette categories. This can be useful if you want all the palette categories opened when your application first appears. To do this 5 new methods have been added to the canvas controller, as follows:
// Opens the palette category identified by the category ID passed in.
openPaletteCategory(categoryId)
// Closes the palette category identified by the category ID passed in.
closePaletteCategory(categoryId)
// Opens all the palette categories.
openAllPaletteCategories()
// Closes all the palette categories.
closeAllPaletteCategories()
// Returns true or false to indicate whether a palette category is open or not.
isPaletteCategoryOpen(categoryId)
These methods can be called immediately after the palette JSON has been loaded into common-canvas.
in addition a new field called ‘is_open” can be specified in the category objects of the palette JSON file passed to `canvasController.setPipelineFlowPalette(paletteJSON)’
#1493 Display context toolbar with overflow menu
Common-canvas now supports an option to display a ‘context toolbar’ instead of the traditional context menu. A context toolbar is a small toolbar that appears above nodes, links and comments as the mouse cursor is hovered over them. A context toolbar for the canvas background can also be displayed by right-clicking on the canvas background.
The context toolbar displays a set of icons that represent the most likely actions the user would want to perform on the object under the mouse cursor. If necessary, the toolbar can also show an overflow (horizontal ellipsis) icon that, when clicked, reveals additional actions that can be performed on the object.
For a "vertical" style node it looks like this:
For a “horizontal” style node it looks like this:
when the user clicks the overflow icon it looks like this:
Note: Since the mouse cursor can be hovered over a node, comment or link that is NOT currently selected, the actions shown in the context toolbar will apply to just that object, even if there is one or more currently selected objects.
If the mouse cursor is hovered over a selected object when there are other selected objects, the actions in the context toolbar will be applicable to all the selected objects. This is the same as how a traditional content menu shows actions that are applicable to the set of selected objects.
The context toolbar behavior can be switched on by setting the enableContextToolbar canvas configuration field to true.
const config = {
enableContextToolbar: true
};
...
...
<CommonCanvas config={config} ..... />
ContextMenuHandler callback function
When enableContextToolbar is set to false (or omitted from the config), the traditional context menus will be displayed and the optional ContextMenuHandler callback function controls which actions appear in the context menus for selected objects .
When enableContextToolbar is set to true, the ContextMenuHandler callback function will continue to be used to control which actions appear in the context toolbar.
Important note for multiple object selection
The context toolbar is displayed whenever the mouse cursor is hovered over an object, therefore the ContextMenuHandler callback must return an array of actions that is applicable to that object, even if one or more other objects are currently selected. In addition, when the mouse cursor is hovered over one of the selected objects ContextMenuHandler needs to continue its current behavior, which is to return an array of actions applicable to the set of currently selected objects.
This means, when using context toolbars, your ContextMenuHandler will probably return an incorrect array if it handles any situations where there are multiple selected objects because, if the user hovers the mouse cursor over a non-selected object, your current code will most likely return an array for the selected objects. In this case, you'll need to fix your ContextMenuHandler code and detect whether the node being hovered over is, or is not, in the set of selected objects and then return appropriately.
When the user clicks one of the context toolbar options, common-canvas will automatically select the object, if it is not already selected, before calling the editActionHandler callback. So actions will be executed:
- for the set of selected objects when the mouse cursor is over one of them
- for the object the mouse cursor is over when the object is not one of the currently selected objects
When the mouse cursor hovers over an object, the source.targetObject field contains the data for that object. Also, source.selectedObjectIds field contains an array currently selected object IDs. So if source.targetObject.id is not in source.selectedObjectIds you will know the mouse cursor is over a non-selected object. source is the first parameter passed in to ContextMenuHandler.
What to return from ContextMenuHandler callback function
Currently, that callback returns an array of action objects, for example, like this:
contextMenuHandler(source, defaultMenu) {
if (source.type === "comment") {
return [
{ action: "setCommentEditingMode", label: "Edit comment" },
{ action: "colorBackground", label: "Color background" },
{ divider: true },
{ action: "deleteSelectedObjects", label: "Delete" }
];
}
return defaultMenu;
}
When enableContextToolbar is set to false, and the user right-clicks on a comment, this would show a traditional context menu like this:
If the host application then switches enableContextToolbar config option to true, this is displayed when the mouse pointer is hovered over a comment:
And when the overflow icon is clicked this would appear:
If you decide your application needs to show the Edit comment action as a likely action the user wants to perform, the contextMenuHandler function should return a toolbarItem field in the edit action element of the returned array, like this:
contextMenuHandler(source, defaultMenu) {
if (source.type === "comment") {
return [
{ action: "setCommentEditingMode", label: "Edit comment", toolbarItem: true },
{ action: "colorBackground", label: "Color background" },
{ divider: true },
{ action: "deleteSelectedObjects", label: "Delete" }
];
}
return defaultMenu;
}
Which would display this when the mouse pointer is hovered over the comment:
And this, if the overflow menu icon is clicked:
Note: The icons above are displayed because the actions specified in the array are known to common-canvas so it knows which icon to display. If you have an action of your own let’s say ‘Format’ you could specify this:
contextMenuHandler(source, defaultMenu) {
if (source.type === "comment") {
return [
{ action: "setCommentEditingMode", label: "Edit comment", toolbarItem: true },
{ action: "colorBackground", label: "Color background" },
{ divider: true },
{ action: "deleteSelectedObjects", label: "Delete" },
{ divider: true },
{ action: "my_format", label: "Format" }
...
release_12.30.0
Feature Enhancements
Common-Canvas
#1470 Enable JSX decorations
Decorations for nodes and links can now be created using JSX. The JSX is provided in a field called jsx in the decoration specification. If you want to programmatically set JSX decorations, it can be provided using the canvas controller API like this:
import { Play16 } from "@carbon/icons-react";
const decorations = [
{
jsx: (<Play16 />),
position: “topLeft”,
x_pos: 0,
y_pos: -20
}
];
canvasController.setNodeDecorations(“node1”, decorations);
or returned by the layoutHandler callback if you want different nodes to have different decorations based on some property of the node:
import { Play16 } from "@carbon/icons-react";
layoutHandler(node) {
const nodeLayout = {};
if (node.app_data.isPlayable) {
nodeLayout = {
decorations: [
{
jsx: (<Play16 />),
position: “topLeft”,
x_pos: 0,
y_pos: -20
}
]
};
}
return nodeLayout;
or, if you want each node to have the same decoration, in the node layout field of the canvas configuration object, like this:
import { Play16 } from "@carbon/icons-react";
const canvasConfig = {
enableNodeLayout: {
decorations: [
{
jsx: (<Play16 />),
position: “topLeft”,
x_pos: 0,
y_pos: -20
}
]
}
};
...
...
return (<CommonCanvas config={canvasConfig} ... />);
Note: JSX decorations are not serialized into the pipelineFlow document when canvasController.getPipelineFlow() is called even if the temporoary field is set to false.
Common-Properties
#1466 Support custom classes for action buttons and images
An optional config option called class_name was added in uiHints action_info section.
If provided, a custom class will be added to elements, like this:
For action button - <div class="properties-action-button <customClass>" />
For action image - <div class="properties-action-image <customClass>" />
Issues Resolved
#1474 Canvas crash - Cannot read properties of undefined (reading x1) (#1475)
#1470 Enable JSX decorations (#1471)
#1466 Support custom class for action button and image (#1467)
#1468 Datepicker controls are in the wrong color within a Tearsheet (#1469)
#1464 Fixed issue sort icon outside table header (#1465)
release_12.29.0
Feature Enhancements
Common-Canvas
#1251 Support nodes as React objects
React objects can now be used to provide the body of nodes in common-canvas. The React object provides the body while the other graphic elements of the nodes (such as: ports; selection highlighting; ellipsis icon; and resizing area) are displayed by common-canvas.
Your application can now set the following in the canvas config object:
const canvasConfig = {
enableNodeLayout: {
nodeExternalObject: NodeWrapper
}
};
This would set the React object NodeWrapper to provide the body of the node in common-canvas. Note: you can now also instruct common-canvas to not display a shape body object (e.g. rectangle etc) using
const canvasConfig = {
enableNodeLayout: {
nodeShapeDisplay: false
}
};
A new sample application called ‘React Nodes’ has been added to the Test Harness. Here is an example of a React node, taken from the sample app. It shows the CardNode object (from the Carbon Charts library) being used in common-canvas to display the body of a common-canvas node:
Common-Properties
#1461 Update required error message in properties
The error message for empty fields has been improved to be: "You must enter a value for {field_label}". It looks like this:
The following accessibility violations have been fixed in this release:
#1440 Accessibility: The ARIA attributes "aria-labelledby" are not valid for the element <div> with implicit ARIA role "generic"
#1450 Accessibility: The <button> element has the id "subtabs.tab.0" that is already in us
Issues Resolved
#1461 Update required error message in properties (#1462)
#1458 Don’t render properties title when paramDef doesn't have titleDefinition (#1459)
#1455 Support custom filter conditions in properties (#1456)
#1453 Styles picked up in different order than traditionally (#1454)
#1450 Accessibility: Fixed The <button> element has the id 'subtabs.tab.0' that is already in use (#1451)
#1251 Support nodes as react objects (#1449)
#1447 Fixed issue page refresh after clicking 'enter/return' key in password control (#1448)
#1442 Test harness updates (#1443)
#1444 Nodes with asscoiation links has isPortConnected boolean set to true (#1445)
#1440 Accessibility: Fixed 'aria-labelledby' are not valid for the element <div> with implicit ARIA role 'generic' (#1441)
#1434 Calendar icon is misaligned in datepicker with long helper text (#1435)
#1432 Error in console when enablePositionNodeOnRightFlyoutOpen set t… (#1433)
release_12.28.2
release_12.28.1
release_12.28.0
Feature Enhancements
Common-Canvas
#1410 User request: Add Show/Hide Comments
Some host applications want to enable their users to temporarily switch off and switch on the display of comments.
To enable this, three new methods have been added to the canvas controller:
// Hides all comments on the canvas.
hideComments()
// Shows all comments on the canvas - if they were previously hiding.
showComments()
// Returns true if comments are currently hiding.
isHidingComments()
These allow the host application to hide and shows the comments (and any links from comments to nodes) and also query whether the comments are currently hidden or not.
If your application wants to show this function in the toolbar as a button, you can add the following to the toolbar config that is passed as a prop to <CommonCanvas>:
toolbarConfig = [
(this.canvasController.isHidingComments()
? { action: "commentsHide", label: "Hide comments", enable: true }
: { action: "commentsShow", label: "Show comments", enable: true })
];
Specifying the action field as either commentsShow and commentsHide will tell common canvas to automatically display the appropriate icon in the toolbar. When either icon is clicked common-canvas will execute the appropriate canvas controller method to hide or show the comments.
Note: If the comments are hidden it doesn't alter the pipeline flow object returned by canvasController.getPipelineFlow(). The object will still contain all the comments.
This is how it looks:
Common-Properties
#1406 Add Date Picker control to Common Properties
A Datepicker control will be rendered if the control type is set to control=datepicker.
A Datepicker control with a range will be rendered if the control type is set to control=datepickerRange.
The date format can be specified in the uihint date_format field. This defaults to Y-m-d. Datepicker internally uses Flatpickr, so the date tokens differ from the datefield and timefield controls. Only a subset of the tokens are supported in common properties: Y, y, m, n, d, and j. See Flatpickr’s documentation https://flatpickr.js.org/formatting/#date-formatting-tokens. Only valid inputs are accepted, any invalid dates will be adjusted to a valid date.
#1402 Accessibility: Tooltip element's role 'none' is not a widget role
Fixed accessibility violation Tooltip element's role 'none' is not a widget role in all common-properties tooltips.
Issues Resolved
#1406 Support default datepicker date format if not specified (#1426)
#1420 Update how test harness processes scss for HMR (#1421)
#1424 Unable to single left-click and select node in read-only mode (#1425)
#1406 Add datepicker to properties (#1407)
#1422 Updated Translations - CPD 4.7 (#1423)
#1414 Extend 'convertValueDataTypes' support to 'setPropertyValues' (#1415)
#1418 Add new config option to filter specific returned values (#1419)
#1416 Removed control label spacing (#1417)
#1387 Update tooltips to show overflow in textfields and table headers (#1409)
#1410 User request: Add Show/Hide Comments (#1411)
#1412 Context menu gesture on hotspot decoration should open context menu for underlying node or link (#1413)
#1402 Accessibility: Fixed Tooltip element's role 'none' is not a widget role (#1403)
#1404 Node not selected when ellipsis icon is clicked with enableDragWithoutSelect: true (#1405)
#1400 Updated propertiesConfig are not saved (#1401)
release_12.27.1
Feature Enhancements
No feature enhancements: just one bug fix.
Common-Canvas
#1396 Fix Notification Panel Close Button CSS
This is to fix a regression that caused the close button in notification panel to disappear when the header text was very long. This fix will take into consideration all the different languages.
Common-Properties
No change for common-properties
Issues Resolved
#1396 Fix CSS for Close Button in Notification Panel (#1397)
#1392 Accessibility: Fixed violations for complementary role (#1398)