Releases: elyra-ai/canvas
v12.45.1
v13.0.0-alpha.1
Feature Enhancements
Build
#1576 Removed react-redux from peerDependencies
react-redux is no longer a peerDependency. We have moved it under dependencies so that elyra canvas can have its own version of react-redux as a production dependency.
Common-Canvas
#1846 Enable zoomTo function to execute with animation
The canvas controller zoomTo method can now be called with an animateTime parameter which is the amount of time in milliseconds the zoom action will take. If omitted the animation will default to 500ms. Set it to 0 for no animation.
canvasController.zoomTo(zoomObject, animateTime)
Common-Properties
Just bug fixes.
Issues Resolved
- #1768 Improve format of mkdocs version of Elyra Canvas Help (part 2) by @tomlyn in #1771
- #1766 Fixed ibm/plex errors in console by @nmgokhale in #1767
- #1775 Update test harness dependencies to latest by @matthoward366 in #1776
- #1780 Link guide icon in Stages sample app in wrong position by @tomlyn in #1781
- #1576 Add react-redux@8 in peerDependencies by @nmgokhale in #1774
- #1786 Command label for sizeAndPositionObjectsAction incorrect for com… by @tomlyn in #1787
- #1784 Two size node events being redone as one by @tomlyn in #1785
- #1782 Toolbar CSS styles are applied in sub-panels by @tomlyn in #1783
- #1811 First right-side toolbar item is displayed in overflow menu by @tomlyn in #1812
- #1815 Create a prototype of multiple-undo capability by @tomlyn in #1816
- #1778 Use React Testing Library for Palette tests by @srikant-ch5 in #1779
- #1821 Update styling documentation for Carbon 11 by @nmgokhale in #1823
- #1822 Change version number to instead be deployment date by @Paul-Kawalkowski in #1797
- #1826 Context toolbar is partly off the screen by @tomlyn in #1827
- #1824 Delta Translations by @sara-akhtar in #1825
- #1829 editActionHandler not called with multi-undo prototype by @tomlyn in #1830
- #1834 Unable to move around the canvas or make any drag selections if only… by @tomlyn in #1835
- #1832 Background color of selected toolbar icons has been lost by @tomlyn in #1833
- #1768 Improve format of mkdocs version of Elyra Canvas Help by @tomlyn in #1842
- #1818 Enable jest-enzyme tests using React 17 adapter by @nmgokhale in #1819
- #1846 Enable zoomTo function to execute with animation by @tomlyn in #1847
- #1844 Broken layout handler and palette open/close in v12.44.0 and hi… by @tomlyn in #1845
Full Changelog: v13.0.0-alpha.0...v13.0.0-alpha.1
Contributors
Assets 2
v12.45.0
Feature enhancements
Build
#1748 Upgrade Elyra canvas and Test harness to Node 20.x.
Elyra Canvas has been upgraded from Node 16.x to 20.x.
Common Canvas
#1846 Enable zoomTo function to execute with animation
The canvas controller zoomTo method can now be called with an animateTime parameter which is the amount of time in milliseconds the zoom action will take. If omitted the animation will default to 500ms. Set it to 0 for no animation.
canvasController.zoomTo(zoomObject, animateTime)
Common Properties
Just bug fixes
Issues resolved
- #1748 Upgrade Elyra Canvas to Node 20.x by @srikant-ch5 in #1749
- #1758 Typo in Readme by @srikant-ch5 in #1760
- #1761 Add Elyra documentation link in readme and npm by @nmgokhale in #1762
- #1761 Add Elyra documentation link in readme and npm (#1762) by @nmgokhale in #1764
- #1703 Carbon 11, React 18, Webpack 5 for Elyra canvas by @nmgokhale in #1704
- Bump webpack-dev-middleware from 7.0.0 to 7.1.0 in /canvas_modules/harness by @dependabot in #1765
- #1768 Improve format of mkdocs version of Elyra Canvas Help by @tomlyn in #1769
- #1766 Fixed ibm/plex errors in console by @nmgokhale in #1767
- #1775 Update test harness dependencies to latest by @matthoward366 in #1776
- #1780 Link guide icon in Stages sample app in wrong position by @tomlyn in #1781
- #1576 Add react-redux@8 in peerDependencies by @nmgokhale in #1774
- #1786 Command label for sizeAndPositionObjectsAction incorrect for com… by @tomlyn in #1808
- #1784 Two size node events being redone as one (#1785) by @tomlyn in #1809
- #1811 First right-side toolbar item is displayed in overflow menu by @tomlyn in #1813
- #1782 Toolbar CSS styles are applied in sub-panels by @tomlyn in #1783
- #1815 Create a prototype of multiple-undo capability (#1816) by @tomlyn in #1820
- #1826 Context toolbar is partly off the screen (#1827) by @tomlyn in #1836
- #1829 editActionHandler not called with multi-undo prototype (#1830) by @tomlyn in #1839
- #1834 Unable to move around the canvas or make any drag selections if… by @tomlyn in #1840
- #1832 Background color of selected toolbar icons has been lost (#1833) by @tomlyn in #1841
- #1846 Enable zoomTo function to execute with animation (#1847) by @tomlyn in #1848
- #1844 Broken layout handler and palette open/close in v12.44.0 and hi… by @tomlyn in #1849
Full Changelog: v12.44.0...v12.45.0
Contributors
Assets 2
v13.0.0-alpha.0
Feature Enhancements
This new major version of Elyra Canvas is an alpha release. In it Elyra Canvas now supports:
- Carbon 11
- React 18
- Node 20
Note - We are releasing an alpha version because all the unit tests are currently disabled because React 18 no longer supports enzyme testing library. We are actively working on finding a replacement for enzyme. Unit tests will be enabled in the upcoming 13.x version.
Developer Notes
We will continue to support two versions of @elyra/canvas until September 2024. All consuming applications should plan to upgrade to Carbon 11 within this time.
- @elyra/canvas - v12.x uses Carbon 10 - Support will end on 30 September 2024
- @elyra/canvas - v13.x uses Carbon 11
12.x versions will be in maintenance mode supporting bugs and security fixes. Any new features will be available in 13.x versions. Both versions support consuming applications running on React 16, 17 and 18.
General
#1703 Carbon 11 and React 18 for elyra-canvas
Carbon has been updated to the latest version v1.53.1. All the consuming applications using @elyra/canvas v13.x must be using Carbon 11. @carbon/react package is added as a peerDependency in v13.x. Please follow carbon v10 to v11 migration guide for more details.
Elyra canvas is now using React 18. However, we continue to support consuming applications running on React 16, 17 and 18.
#1748 Upgrade Elyra canvas and Test harness to Node 20.x.
Elyra Canvas has been upgraded from Node 16.x to 20.x.
Issues Resolved
- #1748 Upgrade Elyra Canvas to Node 20.x by @srikant-ch5 in #1749
- #1758 : Typo in Readme by @srikant-ch5 in #1760
- #1761 Add Elyra documentation link in readme and npm by @nmgokhale in #1762
- #1703 Carbon 11, React 18, Webpack 5 for Elyra canvas by @nmgokhale in #1704
- Bump webpack-dev-middleware from 7.0.0 to 7.1.0 in /canvas_modules/harness by @dependabot in #1765
- #1768 Improve format of mkdocs version of Elyra Canvas Help by @tomlyn in #1769
Full Changelog: v12.44.0...v13.0.0-alpha.0
Contributors
Assets 2
v12.44.0
Feature Enhancements
Common-Canvas
#1744 Palette icon should show selected (blue underline) highlighting when displayed in wide state
Note: The implementation of this issue required a change to the Notifications icon in the toolbar. The class that specifies the severity of the notifications (info. success, warning or error) has moved from the toolbar-content-item to its ancestor class toolbar-item.
#1750 Setting input port positions for nodes with multiple inputs
Applications are now able to programmatically position either single or multiple input/output ports anywhere relative to the node boundary: either inside or outside the node. Previously, applications could only position single input/output nodes. Multiple nodes were always arranged by the common-canvas layout code.
The following layout fields have been introduced. They can be overridden in the config passed to <CommonCanvas>, by specifying them in the config.enableNodeLayout object, or in the layout object returned from the layoutHandler callback.
For input ports:
-
inputPortAutoPosition
- This is a boolean. If set to true (the default) multiple input ports are automatically arranged by common-canvas also single input ports are automatically positioned by common-canvas when the node height is greater than the default height which it might be with resizable nodes. If set to false, the entries in the
inputPortPositionsarray will be used to position single and multiple input ports.
- This is a boolean. If set to true (the default) multiple input ports are automatically arranged by common-canvas also single input ports are automatically positioned by common-canvas when the node height is greater than the default height which it might be with resizable nodes. If set to false, the entries in the
-
inputPortPositions
-
This is an array. Each element of the array looks like this:
{ pos: “topLeft”, x_pos: 10, y_pos: 10 }Theposfield can be one of the nine points around the node:"topLeft", "topCenter", "topRight",
"middleLeft", "middleCenter", "middleRight",
"bottomLeft", "bottomCenter", "bottomRight".
-
while x_pos and y_pos are additional offsets (in pixels) from that position. Specifying a position (pos) for a port ties that port to that position on the node which means, with resizable nodes, the port will move with the position it is attached to as the node is sized.
If a node has a single input port and the node is the default height, common-canvas will use the zeroth element from inputPortPositions to position it, regardless of what inputPortAutoPosition is set to. If the node is greater than the default height, the single port will be positioned by common-canvas automatically when inputPortAutoPosition is set to true and will use the position from the array when inputPortAutoPosition is set to false.
If a node has more than one input port and inputPortAutoPosition is false, common-canvas will use the elements from the inputPortPositions array to position the ports in the same order that they appear for the node’s inputs array in the pipeline flow. If inputPortAutoPosition is set to true, common-canvas will automatically position the ports vertically (in the y direction) however it will use the pos and x_pos from the zeroth element of the array to position the nodes horizontally (in the x direction) - this is to maintain historic behavior.
Note: the behavior described above is slightly different if config.enableLinkDirection is set to either TopBottom or BottomTop. With those settings the behaviors are transposed between vertical and horizontal as might be expected. So for example, a single port is positioned based on whether the width of the node is wider than the default width rather that it based on height.
For output ports:
These two fields have been added. These behave in the same way as their input port equivalents.
- outputPortAutoPosition
- ouputPortPositions
The following 12 node layout fields have been deprecated and support for them will be removed in a future major release. If you have overridden them in your application’s config (in config.enableNodeLayout) or in what is returned from the layoutHandler callback, they will continue to work as before but it is recommended that you convert to use the new approach now by specifying a single entry in the inputPortPositions and/or outputPortPositions array containing the appropriate pos, x_pos and y_pos values.
inputPortLeftPosX
inputPortLeftPosY
inputPortTopPosX
inputPortTopPosY
inputPortBottomPosX
inputPortBottomPosY
outputPortRightPosX
outputPortRightPosY
outputPortTopPosX
outputPortTopPosY
outputPortBottomPosX
outputPortBottomPosY
Common-Properties
Just bug fixes.
Issues Resolved
- #1742 Overflow menu is not closed when canvas width is increased by @tomlyn in #1743
- #1744 Palette icon should show selected (blue underline) highlighting… by @tomlyn in #1745
- #1746 Refactor node preparation code in object model by @tomlyn in #1747
- #1752 Common-canvas mapping relation adjusting port position performa… by @tomlyn in #1753
- #1750 Setting input port positions for nodes with multiple inputs by @tomlyn in #1751
- #1754 Tooltip information icon should use -02 color by @tomlyn in #1755
- #1756 Switching between show and hide comments causes focus to move a… by @tomlyn in #1757
Full Changelog: v12.43.0...v12.44.0
Contributors
Assets 2
v12.43.0
Feature Enhancements
Common-Canvas
#1730 Canvas Controller should support command stack do() method
The canvas-controller is now offers methods that can manage the command stack. If your app directly interacts with the command stack in any way it is recommended you call these methods instead of calling the command stack directly. The methods in the command stack are:
do(command) - push the command onto the command stack and then invoke command.do()
undo() - pop a command from the command stack and then invoke command.undo()
redo() - push last undo command onto the command stack and then invoke command.redo()
canUndo() - returns true if there is a command on the command stack that can be undone.
canRedo() - returns true if there is a command on the command stack that can be redone.
getUndoLabel() - returns the label for the next command to be undone.
getRedoLabel() - returns the label for the next command to be redone.
clearCommandStack() - empties the command stack
Note: The canvas-controller method `getCommandStack() is now deprecated.
Common-Properties
#1715 Export getPythonHints and clem from common-properties
Elyra-canvas now exports clem (custom language for expression control) and getPythonHints (Python language specific additional keywords). Host application can import them like this -
import { clem, getPythonHints } from "@elyra/canvas";
#1715 Replace codemirror-lang-r package with @codemirror/legacy-modes
codemirror-lang-r package is not maintained in last 2 years. This package was also causing build issues for CommonJS applications. We have replaced this package with @codemirror/legacy-modes.
Elyra canvas is no longer using lezer-r package.
Note: If you’re upgrading from elyra-canvas v12.42.0, please remove following config from your package.json file -
"jest": {
"transformIgnorePatterns": [
"node_modules/@elyra/canvas/node_modules/(?!lezer-r)"
]
}
Issues Resolved
- #1715 Export getPythonHints and clem from common-properties by @nmgokhale in #1716
- #1711: Include focus on tooltip link by @srikant-ch5 in #1712
- #1717 Accessibility: Notification panel should be enabled for keyboard navigation by @tomlyn in #1718
- #1713 Display Palette category content using keyboard by @srikant-ch5 in #1714
- #1701 Elyra Canvas Documentation using mkdocs by @srikant-ch5 in #1702
- #1701 Update site_url in mkdocs and Rename ci.yml file by @srikant-ch5 in #1720
- #1723 Some dark mode styling issues by @tomlyn in #1724
- #1721 Replace codemirror-lang-r package with @codemirror/legacy-modes by @nmgokhale in #1722
- #1732 Fix Common Properties Checkbox Information Icon alignment for long text. by @srikant-ch5 in #1733
- #1728 Use carbon icons in place of hand-crafted icons by @tomlyn in #1729
- #1725 Toolbar icon selected highlighting not thick enough by @tomlyn in #1726
- #1730 Canvas Controller should support command stack do() method by @tomlyn in #1731
- #1735 Comment box - Higher text contrast by @tomlyn in #1736
- #1737 Field-picker - Disable Reset button until changes are made by @veenas1 in #1738
- #1741 Update Publishing Workflow by @Paul-Kawalkowski in #1734
- #1739 Tooltip should change when moving cursor from decoration to node by @tomlyn in #1740
Contributors
Assets 2
release_12.42.0
Feature Enhancements
Common-Canvas
#1542 Classes required to implement and extend Action are not exported
Six "action classes" are now exported from common-canvas. These cover some of the basic operations on the canvas:
- CreateAutoNodeAction
- CreateNodeAction
- CreateNodeLinkAction
- DeleteObjectsAction
- DisconnectObjectsAction
- PasteAction
Applications can extend these classes to augment the basic behavior with application specific behavior. It is the application’s responsibility to add the extended object to the command stack when the user performs the corresponding action.
Although we don't have any plans to alter the internal workings of these six command action classes, there is always the chance that a change in the future might alter a field name. If you extend these classes, it is therefore recommended that you have sufficient regression tests for your extensions that would highlight such a problem, should it occur.
#1705 Canvas-controller method isContextMenuForNonSelectedObj incorrectly named
The name of the internal canvas-controller method has changed from isContextMenuForNonSelectedObj to isContextToolbarForNonSelectedObj
#1680 Accessibility: Toolbar should use arrow keys to move focus to buttons
Some of the internal class names for DOM elements in the toolbar have changed.
toolbar-spacer is now toolbar-overflow-container and
toolbar-overflow-menu-item is now toolbar-sub-menu-item
Common-Properties
#1640 Remove react-codemirror2 and upgrade to codemirror 6
react-codemirror2 wrapper (an unsupported package) is now removed. This change involves a major version upgrade from Codemirror 5.x to Codemirror 6.x. We have implemented these changes to upgrade to the latest supported code mirror libraries. This affects the code editor in Expression control.
The expression builder will continue to work successfully with your current code however with this release you might see an error in the console. To fix the console error, please follow instructions given under "Gruntfile changes" section.
Gruntfile changes -
Common-properties is no longer exporting lib/codemirror.css and addon/hint/show-hint.css files.
If your application is using following grunt config, please remove this grunt config -
codeMirror: {
files: [{
expand: true,
flatten: false,
cwd: "./node_modules/codemirror/",
src: ["lib/codemirror.css", "addon/hint/show-hint.css"],
dest: ".build/css/codemirror"
}]
}
Also remove following stylesheets from your application's index.js file -
<link rel="stylesheet" href={`/canvas${getHashedResource("/css/codemirror/addon/hint/show-hint.css")}`} />
<link rel="stylesheet" href={`/canvas${getHashedResource("/css/codemirror/lib/codemirror.css")}`} />
CSS Changes -
Since common-properties is no longer exporting lib/codemirror.css file, if you create a new Codemirror 6.x instance in your application, elyra-canvas codemirror CSS from this file will no longer be imported into your classnames. Please ensure all custom CSS overrides works fine in your application.
Codemirror 6.x creates a rather different DOM structure for the editor. If you're writing custom CSS for the editor, you'll probably have to change it a bit. Class names roughly correspond like this -
react-codemirror2 → elyra-CodeMirror
CodeMirror → cm-editor
CodeMirror-line → cm-line
CodeMirror-scroll → cm-scroller
CodeMirror-sizer → cm-content
CodeMirror-focused → cm-focused
CodeMirror-gutters → cm-gutters
CodeMirror-gutter → cm-gutter
CodeMirror-gutter-elt → cm-gutterElement
Please make any other changes in class names as required after inspecting Elements tab in the browser.
Autocompletions -
Expression control supports following languages -
- Python
- R
- SQL
- JavaScript
- CLEM
Autocompletions will start showing up as soon as you start typing in the code editor. They can also show up using ctrl + space key combination. Autocompletions will show language specific keywords, custom keywords specified here, and field names from the expression builder table.
Jest tests failures -
If you notice several jest unit tests are failing with this error -
● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
...
Details:
@elyra/canvas/canvas_modules/common-canvas/node_modules/lezer-r/dist/highlight.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { styleTags, tags as t } from "@lezer/highlight";
^^^^^^
SyntaxError: Cannot use import statement outside a module
Please add this config in your package.json file to fix jest tests -
"jest": {
"transformIgnorePatterns": [
"node_modules/@elyra/canvas/node_modules/(?!lezer-r)"
]
}
Issues Resolved
#1707 Context toolbar overflow menu not fully displayed when no enough vertical space (#1708)
#1709 Animate the opening of toolbar sub-areas (#1710)
#1640 Remove react-codemirror2 and upgrade to codemirror 6 (#1641)
#1680 Accessibility: Toolbar should use arrow keys to move focus to buttons (#1681)
#1705 Canvas-controller method isContextMenuForNonSelectedObj incorrectly named (#1706)
#1699 Context toolbar overflow menu remains open when moving mouse cursor to new node (#1700)
#1542 Classes required to implement and extend Action are not exported (part 2) (#1698)
#1542 Classes required to implement and extend Action are not exported (#1697)
#1695 Elyra/canvas failed with error while rendered on Node.js (#1696)
#1693 Test harness crashes when opening the API tab after selecting sample flow (#1694)
#1689 Add set active tab method in Common Properties (#1690)
#1691 Link temporarily visually connected to new target when cancelling updateLink via beforeEditActionHandler (#1692)
#1685 : Set tooltip visible based on closest for link click (#1686)
release_12.41.0
Feature Enhancements
Common-Canvas
Some bug fixes.
Common-Properties
#1674 Add New Slider Support in Common Properties
A new Slider Control has been added to Common Properties, providing the ability to increase or decrease a value by moving the handle along a horizontal track.
To utilize the slider control, set the control type to 'slider' in UI hints, along with specifying parameters such as min_value, max_value, and increment (step). This enables the effective use of the slider control. Labels for min_value and max_value can be passed through resources, if these labels are not provided the min and max values will be used as default labels.
The 'Step' is defined using the 'increment' parameter in UI hints. It determines how many increments the input value and slider handle will jump when the handle is moved. Additionally, an input box allows users to enter values within the slider range.
Issues Resolved
#1682 [Dark mode] Text Analysis and other nodes - overlay color (#1683)
#1684 Add Slider Control Documentation in Common Properties (#1687)
#1674 Add Support for New Slider in Common Properties (#1675)
#1678 In dark mode, text displayed with incorrect color when editing a comment with bkg-col-white-0 class applied (#1679)
#1676 New Translation Update (#1677)
#1671 Tabbing to the information icon opens the tooltip but it doesn't close (#1672)
#1598 Prototype the mapping transformer application (show drag icons - part2) (#1673)
#1598 Prototype the mapping transformer application (show drag icons) (#1670)
#1668 Fixed bug setDefaultValues not picking up defaults 2nd call onwards (#1669)
release_12.40.1
release_12.40.0
Feature Enhancements
Common-Canvas
#1659 Highlight branch feature to support dark theme or custom css
The highlight feature allows the user to highlight upstream nodes, downstream nodes or the entire branch of nodes (both upstream and downstream) by choosing one of the ‘Highlight’ options from the context menu for a particular node.
Clicking this:
Results in this:
The way common-canvas displays the ‘highlight’ styling for nodes and links in a branch has changed. Previously this was done by applying in-line styles to the nodes and links. The change is that now, a new class called ‘d3-branch-highlight’ is applied to the group <g> object of the node or the link in the branch.
By default, common-canvas provides colors and styles for the highlighted branch nodes and links, but the application can override them if desired using CSS like this.
d3-node-group.d3-branch-highlight {
.d3-node-body-outline {
stroke: red;
}
}
Common-Properties
#1649 Added a new parameter in setPropertyValues() to set default properties
When an application provides new properties by calling controller.setPropertyValues(values), some applications need to be able to reset the default values. A new options parameter has been added to the setPropertyValues API method which is a config object. The object can contain a boolean field called setDefaultValues which, when set to true, will cause the default values to be loaded again from the parameter definition.
/*
* options - optional object of config options where
* setDefaultValues (boolean): when set to true, set default values from parameter definition
*/
setPropertyValues(values, options)
#1644 Add button for VirtualizedTable rows in Expression Builder
In Expression Builder, new + button introduced in each row of the table. Instead of double clicking the row, the user should now click on the + button to add values to the editor.
Issues Resolved
#1659 Highlight branch feature to support dark theme or custom css (#1660)
#1657 setDefaultValues config option should call propertyListener() once (#1658)
#1644 Add button for VirtualizedTable Rows in Expression Builder (#1645)
#1655 Readjust FlexibleTable height when number of rows changes (#1656)