Skip to content

Releases: elyra-ai/canvas

v13.2.0

07 Jun 05:21
@tomlyn tomlyn
v13.2.0
6bdfbda
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.
Compare
Choose a tag to compare
v13.2.0 Latest
Latest

Feature Enhancements

Common Canvas

#1987 Enable options to allow link lines to be drawn over nodes

A new boolean configuration field called enableLinksOverNodes has been that defaults to false. If set to true links are placed above nodes in the canvas.

Issues Resolved

Contributors

tomlyn, srikant-ch5, and mikieyx
Assets 2

v13.1.0

31 May 22:25
@nmgokhale nmgokhale
v13.1.0
f825b44
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.
Compare
Choose a tag to compare
v13.1.0

Common Canvas

#1943 Feature request: Allow categories[0].node_types[0].app_data.ui_data.image to receive an object as well

Node images can now be provided as JSX objects.
See documentation here:
https://elyra-ai.github.io/canvas/01.01.01-nodes/#node-image
https://elyra-ai.github.io/canvas/03.06.01-node-customization/#node-image-as-jsx

#1997 Apply class to objects being moved by dragging

A class called "d3-is-moving" is now applied to the group <g>object of nodes and/or comments when they are being dragged to a new position.

Common Properties

#1908 Added Table toolbar for properties tables

  • Common-properties tables will show a toolbar when 1+ rows are selected in tables which have either Add/remove buttons, row move buttons, or multi select editable tables.
  • Table toolbar replaces table header (which has Add button and Search container). To see the Add button again, user will have to click Cancel button in Table toolbar to clear row selections.
  • In case of multi select edit rows, Edit button will show up in the toolbar. Clicking on Edit button in table toolbar will open a subpanel where users can edit multi-select editable fields. At this time, edit button in selected rows will be disabled.
image
  • For list control in small flyout, showing # item in table toolbar -
image
  • For Fieldpicker and Expression field/function tables, Table toolbar is not shown because there aren't any batch actions (delete, row move) possible for these tables -
image image

#1993 Removed deprecated formData and inputDataModel code from common-properties

We have removed deprecated propertiesInfo.formData code from common-properties. If your application is still using formData, please replace it with propertiesInfo.parameterDef.

Here’s the documentation about parameter definition - https://elyra-ai.github.io/canvas/04.01-parameter-definition/
You can also refer to the example parameter definitions in test harness.

Test Harness

#1947 Toggle between Light and Dark Mode in Test Harness.

A new Toggle is added in Test Harness which can be used to switch between Light mode and Dark mode.
Default state is light mode and when clicked it will switch to dark mode.
image

Issues Resolved

Full Changelog: v13.0.0...v13.1.0

Contributors

tomlyn, srikant-ch5, and 3 other contributors
Assets 2

v12.47.0

07 May 21:58
@nmgokhale nmgokhale
v12.47.0
05c424b
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.
Compare
Choose a tag to compare
v12.47.0

Common Canvas

#1891 Enable multiple undo/redo button and panel

The common-canvas toolbar now supports a “dual-purpose” button. That is, a single button that has two parts, the left side of the button can be clicked to perform the action indicated by the button’s icon and the right side of the button, shown as a chevron, can be clicked to open a panel underneath the chevron that will allow what ever additional function the application developer wishes to present to the user that is connected with the action.

For example, this dual-purpose button, which can be seen in the ‘Stages’ sample app in the test harness, will perform the ‘undo’ action if clicked on the left-hand side:
image

and will display an additional panel when clicked on the right-hand side:
image

A dual-purpose button can be specified in the toolbar config like this:

const toolbarConfig = {

     leftBar: [
         {
             action: "undo",
             label: "Undo",
             purpose: "dual",
             subPanel: MultiUndoPanel,
             subPanelData: { canvasController: this.canvasController }
         }
     ],
     rightBar: []
 };

where:

  • purpose can be either “single” (the default) or “dual”
  • subPanel is the React object to be inserted into the panel
  • subPanelData is an object that is passed into the panel when it is created

Common Properties

Just bug fixes.

Issues Resolved

Full Changelog: v12.46.0...v12.47.0

Contributors

tomlyn and nmgokhale
Assets 2

v13.0.0

23 Apr 17:23
@nmgokhale nmgokhale
v13.0.0
a1d222d
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.
Compare
Choose a tag to compare
v13.0.0

Feature Enhancements

In this new major version, Elyra Canvas supports:

  • Carbon 11
  • React 18
  • Node 20

Documentation

The Elyra Canvas documentation has moved and is now available at a new location: https://elyra-ai.github.io/canvas/ .
We are using GitHub pages for the documentation. Users can now easily search for a word in the entire documentation. Each page shows index on left-side and contents within the page on right-side for better navigation.

The Elyra Canvas Wiki is deprecated and will be removed soon. Please start using the new link.

Elyra.canvas.documentation.mov

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

Carbon 11 and React 18 for elyra-canvas

Carbon has been updated to the latest version v1.55.0. 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.

Upgrade Elyra canvas and Test harness to Node 20.x.

Elyra Canvas has been upgraded from Node 16.x to 20.x.

Common-Canvas

#1865 Add dividers for the context toolbar

Dividers are now supported in the context toolbar. To add a divider, specify the following in the array returned by the contextMenuHandler callback:

   <divider: true, toolbarItem: true />

See details here: https://elyra-ai.github.io/canvas/03.03.01-context-menu-handler/#return-array-for-context-toolbar

#1891 Enable multiple undo/redo button and panel

The common-canvas toolbar now supports a “dual-purpose” button. That is, a single button that has two parts, the left side of the button can be clicked to perform the action indicated by the button’s icon and the right side of the button, shown as a chevron, can be clicked to open a panel underneath the chevron that will allow what ever additional function the application developer wishes to present to the user that is connected with the action.

For example, this dual-purpose button, which can be seen in the ‘Stages’ sample app in the test harness, will perform the ‘undo’ action if clicked on the left-hand side:
image

and will display an additional panel when clicked on the right-hand side:
image

A dual-purpose button can be specified in the toolbar config like this:

const toolbarConfig = {

     leftBar: [
         {
             action: "undo",
             label: "Undo",
             purpose: "dual",
             subPanel: MultiUndoPanel,
             subPanelData: { canvasController: this.canvasController }
         }
     ],
     rightBar: []
 };

where:

  • purpose can be either “single” (the default) or “dual”
  • subPanel is the React object to be inserted into the panel
  • subPanelData is an object that is passed into the panel when it is created

#1888 Enable HTML code in Comments when Markdown is Enabled

When the enableMarkdownInComments config field is set to true, common-canvas allows the user to enter markdown syntax into the comment text which is used to format the text output.
The Markdown support in comments has been extended in this release, to allow the user to enter HTML into the markdown text. This is then run, when the comment is presented in display mode. HTML support allows the user more extensive customization capabilities including the specification of CSS for the text.

For example, specifying this will color the word Red:

Some <span style="color: red">Red</span> text

html-markdown

Common-Properties

#1646 Use Carbon 11 Accordions in Common Properties Panels

Common properties now uses Carbon 11 Accordions for displaying categories in flyout view. Multiple categories can be opened at once.
Note - If consuming application has added any unit tests related to right flyout categories, please update them as now Common Properties is using Carbon 11 Accordion so class names should be updated if needed.

Screenshot 2024-04-23 at 10 21 31 AM

Issues Resolved

Full Changelog: v13.0.0-alpha.1...v13.0.0

Contributors

JesusGuerrero, tomlyn, and 4 other contributors
Assets 2

v12.46.0

23 Apr 21:03
@nmgokhale nmgokhale
v12.46.0
a3d8e44
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.
Compare
Choose a tag to compare
v12.46.0

Common-Canvas

#1865 Add dividers for the context toolbar

Dividers are now supported in the context toolbar. To add a divider, specify the following in the array returned by the contextMenuHandler callback:

 <divider: true, toolbarItem: true />

See details here: https://elyra-ai.github.io/canvas/03.03.01-context-menu-handler/#return-array-for-context-toolbar

#1891 Enable multiple undo/redo button and panel

The common-canvas toolbar now supports a “dual-purpose” button. That is, a single button that has two parts, the left side of the button can be clicked to perform the action indicated by the button’s icon and the right side of the button, shown as a chevron, can be clicked to open a panel underneath the chevron that will allow what ever additional function the application developer wishes to present to the user that is connected with the action.

For example, this dual-purpose button, which can be seen in the ‘Stages’ sample app in the test harness, will perform the ‘undo’ action if clicked on the left-hand side:
undo
and will display an additional panel when clicked on the right-hand side:
additional-panel

A dual-purpose button can be specified in the toolbar config like this:

const toolbarConfig = {

     leftBar: [
         {
             action: "undo",
             label: "Undo",
             purpose: "dual",
             subPanel: MultiUndoPanel,
             subPanelData: { canvasController: this.canvasController }
         }
     ],
     rightBar: []
 };

where:

  • purpose can be either “single” (the default) or “dual”
  • subPanel is the React object to be inserted into the panel
  • subPanelData is an object that is passed into the panel when it is created

#1888 Enable HTML code in Comments when Markdown is Enabled

When the enableMarkdownInComments config field is set to true, common-canvas allows the user to enter markdown syntax into the comment text which is used to format the text output.
The Markdown support in comments has been extended in this release, to allow the user to enter HTML into the markdown text. This is then run, when the comment is presented in display mode. HTML support allows the user more extensive customization capabilities including the specification of CSS for the text.

For example, specifying this will color the word Red:

Some <span style="color: red">Red</span> text

html-markdown

Issues Resolved

Full Changelog: v12.45.1...v12.46.0

Contributors

JesusGuerrero and tomlyn
Assets 2

v12.45.1

10 Apr 19:34
@nmgokhale nmgokhale
v12.45.1
532e3e9
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.
Compare
Choose a tag to compare
v12.45.1

Issues resolved

Full Changelog: v12.45.0...v12.45.1

Contributors

tomlyn and nmgokhale
Assets 2

v13.0.0-alpha.1

08 Apr 21:54
@nmgokhale nmgokhale
v13.0.0-alpha.1
99e3b95
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.
Compare
Choose a tag to compare
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

Full Changelog: v13.0.0-alpha.0...v13.0.0-alpha.1

Contributors

tomlyn, srikant-ch5, and 4 other contributors
Assets 2

v12.45.0

08 Apr 22:35
@tomlyn tomlyn
v12.45.0
1e7b42d
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.
Compare
Choose a tag to compare
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

Full Changelog: v12.44.0...v12.45.0

Contributors

tomlyn, srikant-ch5, and 3 other contributors
Assets 2

v13.0.0-alpha.0

26 Mar 00:04
@nmgokhale nmgokhale
v13.0.0-alpha.0
102ba26
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.
Compare
Choose a tag to compare
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

Full Changelog: v12.44.0...v13.0.0-alpha.0

Contributors

tomlyn, srikant-ch5, and 2 other contributors
Assets 2

v12.44.0

19 Mar 22:26
@tomlyn tomlyn
v12.44.0
c20f7e3
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.
Compare
Choose a tag to compare
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 inputPortPositions array will be used to position single and multiple input ports.

  • inputPortPositions

    • This is an array. Each element of the array looks like this: { pos: “topLeft”, x_pos: 10, y_pos: 10 } The pos field 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

tomlyn
Assets 2