Skip to content

Releases: elyra-ai/canvas

v13.6.1

30 Jul 02:19
@tomlyn tomlyn
v13.6.1
c994e2d
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.6.1

This is a patch release. No new features. Just one fix.

Issues Resolved

Full Changelog: v13.6.0...v13.6.1

Contributors

tomlyn
Assets 2
Loading

v13.6.0

30 Jul 01:44
@tomlyn tomlyn
v13.6.0
ef37446
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.6.0

Feature Enhancements

Common Canvas

#2022 Arrange Horizontal does not work when we have a detached link

The arrange horizontal and arrange vertical feature now handle fully-detached and semi-detached links appropriately. Previously the unattached ends of those types of link were left in their original positions. In this release, the ends of those links are moved to a position they would be in if they were attached to a node.

#2064 Enable new Comment type which supports a WYSIWYG

In this release, Elyra Canvas supports a new kind of comment called a WYSIWYG* comment. Applications can choose to support:

  • the current type of comment (which may optionally include markdown syntax) OR
  • the new WYSIWYG comments OR
  • both.

A new canvas config field called enableWYSIWYGComments has been added. When set to true the default context menu / context toolbar displayed when right-clicking on the canvas, will display a New WYSIWYG Comment option. The default toolbar will not be changed.

The application can programmatically customize the canvas toolbar and context menu / context toolbar to issue the new actions "createWYSIWYGComment" and/or "createAutoWYSIWYGComment" which will do the same for WYSIWYG comments as their counterparts "createComment" or "createAutoComment" do for regular comments.

A sample application called "WYSIWYG Comments" has been added to the Test Harness which allows you to try out this new feature. You can see the code for it here which will show how the toolbar can be customized to add the "createAutoWYSIWYGComment" action.

WYSIWYG comments support the following formatting actions that are applied to the entire text entered for the comment:

  • Font
  • Font Size
  • Bold
  • Italics
  • Underline
  • Strikethrough
  • Text color (choice of 64 colors including transparent)
  • Align horizontally (left, center, right)
  • Align Vertically (top, middle, bottom)
  • Background color (choice of 64 colors including transparent)
  • Outline (No outline, Solid outline)

Internally, a WYSIWYG comment is indicated by the presence of a "contentType" field set to "WYSIWYG" in the comment object in the pipeline flow. The comment can also have an array of format objects which contain elements that describe the formatting applied by the user.

More details are here:
https://github.ibm.com/NGP-TWC/wdp-abstract-canvas/issues/3810#issuecomment-86608709

  • WYSIWYG stands for 'What You See Is What You Get'

#2076 Document that a ibm plex scss should be included when building an applications

The Loading Fonts section of the Initial Setup page in the documentation has been updated to mention that applications should include these lines in their .scss files when building.

$font-prefix: './fonts';
@import 'node_modules/@ibm/plex/scss/ibm-plex.scss';

Please make that addition to your application build process.

Common Properties

#2030 Add readOnly control in Common Properties

A new read_only uihint has been added to Common Properties controls. Applying read_only removes all the interactive functions from the component.

A control can be converted into a read-only control by adding “read_only”: true in the uihints parameter_info in the paramDef as shown below:

  "uihints": {
    "id": "Expressions.test",
    "description": {
      "default": "Test expression controls"
    },
    "parameter_info": [
      {
        "parameter_ref": "expression_readonly",
        "read_only": true
      }
   ]
}

Issues Resolved

New Contributors

Full Changelog: v13.5.0...v13.6.0

Contributors

caritaou, tomlyn, and 4 other contributors
Assets 2
Loading

v13.5.0

30 Jun 20:03
@tomlyn tomlyn
v13.5.0
5359601
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.5.0

Feature Enhancements

Common Canvas

#2033 Support new link line types

The link construction and drawing code has been completely overhauled in this release. Previously, Common Canvas supported "Curve" and "Elbow" links which connected ports together, and "Straight" links that were free floating (or 'freeform') which were drawn directly from the source to target node ignoring port positions.

In this new release, these concepts have been split as follows:

  • The existing enableLinkType config field will specify the shape of the links, and can be set to either “Curve”, “Elbow”, “Parallax” or “Straight”. “Parallax” is a new line type which has a small starting and ending line separated by a diagonal line.
  • A new config field called enableLinkMethod, that can be set to "Ports" or “Freeform”, will control how the links are built, where "Ports" will draw the link from a specific port on the source node to a specific port on the target node and "Freeform" will draw the links between nodes with no reference to where ports are positioned. "Ports" is the default.

The application can use any combination of enableLinkType and enableLinkMethod to get the display required.

Please see the documentation here for some examples of this:
https://elyra-ai.github.io/canvas/01.01.02-links/#data-links

and here for how port positions will affect link drawing:
https://elyra-ai.github.io/canvas/03.06.01-node-customization/#overriding-port-positions-and-link-directions

There are three new sample applications in the test harness called “All ports”, "Parallax" and "Network" which shows some of the combinations of these config fields in action.
https://elyra-canvas-test-harness.u20youmx4sm.us-south.codeengine.appdomain.cloud/#/

enableStraightLinksAsFreeform

To avoid 'breaking' the API and to maintain the previous behavior where "Straight" links were always displayed as “Freeform”, a new config field has been introduced called enableStraightLinksAsFreeform that is a boolean that defaults to true. When true, this will force “Straight” links to be displayed with the “Freeform” option regardless of what enableLinkMethod is set to. If this is set to false , the value specified in enableLinkMethod will be used by Common Canvas for "Straight" links.

Warning: enableStraightLinksAsFreeform is deprecated and will be removed in the next major release. Therefore, applications using enableLinkType set to “Straight” should set enableLinkMethod to “Freeform” NOW to prevent problems when upgrading in the future.

Overriding port position and link drawing

The customization of port positions is already supported by Common Canvas but what is new in this release is that, with enableLinkMethod set to "Ports", Common Canvas will decide on a direction for the links to be drawn to/from ports based on their positions on the node. This change means that, for example, output ports can be displayed at different sides of the node and the links will be drawn away from the node. Please see the docs here for details:
https://elyra-ai.github.io/canvas/03.06.01-node-customization/#overriding-port-positions-and-link-directions

Self-referencing links

In this release, nodes can optionally have self-referencing links that loop back to themselves.

If the new enableSelfRefLinks config field is set to true, users will be able to drag a link from an output port on a node and drop it onto an input port, or body, of the same node to create a self-referencing link. Alternatively, the application can programmatically create self-referencing links. These links will be displayed using the combination of settings specified for enableLinkType and enableLinkMethod described above.

See more in the documentation here:
https://elyra-ai.github.io/canvas/01.01.02-links/#self-referencing-links

Common Properties

Just bug fixes.

Issues Resolved

Full Changelog: v13.4.0...v13.5.0

Contributors

caritaou, tomlyn, and 2 other contributors
Assets 2
Loading

v13.4.0

27 Jun 21:06
@tomlyn tomlyn
v13.4.0
3efae17
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.4.0

Notes

Because of a build issue all of the items from this release are covered by the release notes for v13.5.0. Please refer there for details:
https://github.com/elyra-ai/canvas/releases/tag/v13.5.0

Assets 2
Loading

v13.3.0

19 Jun 00:33
@caritaou caritaou
v13.3.0
3f43a0f
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.3.0

Feature Enhancements

Common Properties

#2012 Add support for helperText in all Common Properties controls. by @srikant-ch5 in #2013

A new helperText uihint is available to all Carbon controls that supports it

Issues Resolved

Contributors

caritaou, srikant-ch5, and 2 other contributors
Assets 2
Loading

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

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
Loading

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
Loading

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
Loading

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
Loading

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
Loading