Skip to content

Releases: elyra-ai/canvas

v13.38.0

07 Jan 00:04
@tomlyn tomlyn
v13.38.0
4d19046
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

Choose a tag to compare

View all tags
v13.38.0 Latest
Latest

Minor Release v13.38.0

Build

#2712 Update elyra-canvas to use ESM format instead of commonjs

Elyra Canvas has been converted, where possible, from Common JS modules (CJS) to use ECMAScript modules (ESM).

Common Canvas

#4211 Double-click on link should call clickActionHandler (just like with nodes and comments)

A double-click action on a link now calls the clickActionHandler callback provided the config property enableLinkSelection is not set to “None”. This makes the behavior the same as for nodes and comments.

Common Properties

No changes

Issues Resolved

Full Changelog: v13.37.1...v13.38.0

Contributors

tomlyn, nmgokhale, and dependabot
Assets 2
Loading

v13.37.1

25 Nov 00:56
@tomlyn tomlyn
v13.37.1
7a4003a
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

Choose a tag to compare

View all tags
v13.37.1

Patch Release v13.37.1

Common Canvas

Bug fixes

Common Properties

Bug fixes

Issues Resolved

Full Changelog: v13.37.0...v13.37.1

Contributors

samueldmeyer, tomlyn, and 4 other contributors
Loading

v13.37.0

07 Nov 00:08
@tomlyn tomlyn
v13.37.0
bef843a
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

Choose a tag to compare

View all tags
v13.37.0

Minor Release v13.37.0

Common Canvas

#2790 Need a case-insensitive parameter so that all occurrences of the text in comments are highlighted, regardless of case sensitivity by @tomlyn

The comment highlighting feature introduced in the previous release has been extended to:

  • highlight the search string if there are multiple occurrences of it in the comment
  • highlight text based on a case insensitive search

The Elyra Cavnas test harness has also been extended so the API panel can be used to specify a search string to be highlighted in comments in the flow.

image

#2792 Draggable sample app should specify default action required by @tomlyn

When nodes are displayed using a React object, applications can make the nodes draggable (independent of the in-built drag/drop behavior provided by Common Canvas) by setting the draggable property of the React's <div> to true. If this arrangement is used with keyboard navigation enabled (the config property enableKeyboardNavigation is set to true), a usability problem occurs when the drag begins because the node needs to be clicked before it can be dragged, rather than being dragged in one gesture.

To circumvent this problem, a new boolean node-layout property called onFocusAllowDefaultAction has been added. When set to true, Common Canvas will allow the default action (that is, the drag) to be enacted when the user presses the mouse button over the node and begins to drag. It can be set like this:

    config = {
        enableNodeLayout: {
            onFocusAllowDefaultAction: true
        }
    };

Common Properties

No changes

Issues Resolved

Full Changelog: v13.36.0...v13.37.0

Contributors

tomlyn
Loading

v13.36.0

25 Oct 01:04
@tomlyn tomlyn
v13.36.0
8add5db
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

Choose a tag to compare

View all tags
v13.36.0

Minor Release v13.36.0

Build

#2741 Support applications moving to React 19 by @caritaou in #2742

React 19 is now supported by Elyra Canvas.

Common Canvas

* #2749 Enable keyboard navigation and movement of ends of a detached link by @tomlyn in #2750

The ends of detached links can now be manipulated using the keyboard during keyboard navigation. To do this the user presses

  • Option + Tab to enable the highlighting of the link handles at the start and end of the link.
  • The user can then press Tab or Shift Tab to move the focus from one handle to the other. (Note: if there are focusable decorations for on the link these will also be focused in sequence with the handles).
  • When focus is on a handle, the user can press Command + <arrow key> to move the end of the link around.

Using these gestures, the keyboard user can duplicate the same actions that can be performed using the mouse, for example to:

  • detach the end of link from a node and move it to an arbitrary point on the canvas,
  • move the end of a link from the canvas and connect it to to a node
  • move the end of a link from one arbitrary point on the canvas to another.
Oct-24-2025.17-54-25.mp4

#2751 Prototype function to drag a node from the flow editor to an external panel by @tomlyn in #2752

A new sample application has been added to the test harness called React nodes - Draggable. This shows how nodes displayed using a React object can be used to enable:

  • Dragging from one node to another (without moving link lines)
  • Dragging from an external panel to the canvas or to another node
  • Dragging a node from the canvas to an external panel
Oct-24-2025.17-49-22.mp4

#2763 Need support to highlight text/word under comment by @tomlyn in #2764

A new API function has been added to the Canvas Controller:

     canvasController.setCommentHighlightText(commentIds, highlightText, pipelineId)

This can be called by the application to highlight text in one or more comments, indicated by the array of comment IDs passed in.
If null or undefined is specified as the highlightText the highlighting will be removed.

The highlighting can be applied to all types of comment supported by Common Canvas, that is:

  • Regular comments
  • Comments with Markdown applied
  • WYSIWYG comments

The result looks this like when applied to a comment formatted using markdown:

image

#2772 EditActionData for 'paste' action is missing by @tomlyn in #2773

New data types have been added to the typescript definitions called EditActionPaste and EditActionPasteContextMenu to support the clipboard support operations.

#2775 Feature request: Need to handle nodes where body is provided by… by @tomlyn in #2776

The React Nodes - Carbon Charts sample application has been extended to demonstrate how React nodes can be resized by the application to accommodate varying sizes of the content provided by the React object. In the screen shot below, the Regular Card Node has been increased in height to display the lengthy text

image

Common Properties

#2695 Allow custom data types to be filtered in structuretable control by @veenas1 in #2696

In the Field Picker component, users can now add custom data types and set custom Icon and label for the same.
The callback buttonIconHandler with a new type customDataTypeIcon should be used to return the custom icons.

To define the custom label, use the following format in the app’s locale: fieldPicker.<type>.label
Example available in FieldPicker and StructureTable paramdef in Elyra Canvas Test Harness.

image

Issues Resolved

Full Changelog: v13.35.1...v13.36.0

Contributors

caritaou, tomlyn, and 3 other contributors
Loading

v13.35.1

27 Sep 01:43
@tomlyn tomlyn
v13.35.1
a95c01f
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

Choose a tag to compare

View all tags
v13.35.1

Patch Release v13.35.1

Bug fixes.

Issues Resolved

Full Changelog: v13.35.0...v13.35.1

Contributors

tomlyn, srikant-ch5, and 3 other contributors
Loading

v13.35.0

24 Sep 00:53
@tomlyn tomlyn
v13.35.0
a216a17
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

Choose a tag to compare

View all tags
v13.35.0

Minor Release v13.35.0

Common Canvas

#2724 Allow application to override minimum width for right flyout by @tomlyn

A new Canvas Controller API call has been added called setRightFlyoutMinWidth(wd) where wd is a number of pixels. This allows the application to specify a minimum width that overrides the default minimum width for the right flyout which, by default, is set by the content placed in the right-flyout.

This is necessary for applications that want to simulate the right-flyout closing without using the showRightFlyout boolean prop of <CommonCanvas>. In this case they would set the min width to zero.

#2703 Allow user to move focus to decorations using keyboard navigation by @tomlyn

For keyboard navigation, the user can now navigate the focus highlighting to "focusable" decorations of a node or a link. This is done by the user:

  1. Moving the focus to the node or link and
  2. Pressing Option + Tab - this will move the focus to the first found focusable decoration
  3. Pressing Tab or Shift + Tab to navigate to other decorations. Focus will rotate around the decorations
  4. Pressing ESC key to move the focus back to the parent node or link
  5. Pressing space or return key to activate a "hotspot" decoration

A decoration may be made "focusable" by specify the new boolean focusable property of the decoration to true.

Note: If there are also focusable ports of a node, pressing Tab or Shift + Tab will rotate focus around the ports and focusable decorations in the order they are found.

Common Properties

#2701 Support JSON in CodeMirror by @srikant-ch5

Added comprehensive JSON language support to the CodeMirror editor component (expression control). This enhancement enables proper syntax highlighting capabilities for JSON content. The implementation leverages CodeMirror's built-in JSON mode to provide error detection, and structured editing features for JSON content.

image

Issues Resolved

New Contributors

Full Changelog: v13.34.0...v13.35.0

Contributors

tomlyn, srikant-ch5, and 3 other contributors
Loading

v13.34.0

11 Aug 20:05
@caritaou caritaou
v13.34.0
e1cf840
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

Choose a tag to compare

View all tags
v13.34.0

Minor Release v13.34.0

Common Canvas

No changes

Common Properties

#2687 Add support for 'kind' in custom table toolbar buttons

Custom table toolbar now supports the 'kind' of Carbon button to be rendered. Previously only the default tertiary buttons were used.

Issues Resolved

Full Changelog: v13.33.0...v13.34.0

Contributors

caritaou, nmgokhale, and veenas1
Loading

v13.33.0

04 Aug 23:45
@tomlyn tomlyn
v13.33.0
e27ec91
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

Choose a tag to compare

View all tags
v13.33.0

Minor Release v13.33.0

Build

Notes:

  1. Support for React 16 and React 17 is now deprecated in Elyra Canvas. This support will be removed in a future major release.

  2. To allow Elyra Canvas components to work correctly with Carbon themes, applications should include @carbon/react in their SCSS file and NOT individual files from that package. As documented: https://elyra-ai.github.io/canvas/02-set-up/#styling-using-sass

Common Canvas

#1579 Bi-directional links

In this release the application can customize links to make them bi-directional if needed. That is:

  • with an arrow head at the target end of the link (as usual) or
  • with an arrow head at the source end of the link or
  • with arrow heads at both ends of the link or
  • with no arrow heads.

There have been a couple of changes to Common Canvas to support this:

  1. The canvasLayout property called dataLinkArrowHead can now be set explicitly set to false to switch off the display of link arrow heads provided by Common Canvas.

        const config = {
        enableCanvasLayout: {
            dataLinkArrowHead: false:
        }
    };

  2. The arrow heads can then be drawn using decorations. To help with that a new boolean property for decoration specifications has been added called rotate. This is only applicable for decorations applied to links. If set to true it will cause the decoration to rotate to an angle the same as the link line -- so the arrow heads will move around in the correct way when the links move.

These changes can be seen in the new Link Types sample application in the Elyra Canvas Test Harness.

image

Common Properties

#2675 Enhancement: Support for icons in action buttons.

Action buttons now support both icon and text simultaneously using the buttonIconHandler callback with new type actionButtonIcon. Previously, either icon or text was supported.

An example of this can be seen in the action_paramDef.json test file in the Elyra Canvas Test Harness:

image

Issues Resolved

Full Changelog: v13.32.0...v13.33.0

Contributors

tomlyn, srikant-ch5, and 2 other contributors
Loading

v13.32.0

22 Jul 01:49
@tomlyn tomlyn
v13.32.0
6b96632
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

Choose a tag to compare

View all tags
v13.32.0

Minor Release v13.32.0

Build

#2659 Import @ibm/plex fonts using @use AND

#2603 Replace @import with @use/@forward in elyra-canvas

In Sass, @import is now deprecated.
https://sass-lang.com/blog/import-is-deprecated/

To get ahead of the curve, Elyra Canvas has been converted to use @use or @forward instead of @import.

Consequently, to prepare for @import being removed from Sass, there is a new recommended way to pull IBM Plex fonts into Elyra Canvas, which is documented here:
https://elyra-ai.github.io/canvas/02-set-up/#loading-fonts

If you want to do a similar conversion on your application's SCSS, this article is very useful to understand how to use @use/@forward
http://mr-alien.medium.com/use-forward-in-sass-70b9cd44218b.

And this is the official documentation on @use and @forward.

Common Canvas

#2657 Keyboard accessibility: ports should be focusable

In this release, the user can navigate focus highlighting to the node's individual elements (sub-objects) such as input ports and output ports. To enable this behavior, the application must set one of these two node layout properties to true in the canvas configuration object.

    const config = {
        enableNodeLayout: {
            inputPortFocusable: false,
            outputPortFocusable: true
       }
    };

When enabled, if the user moves focus to a node and then presses Option + Tab the focus will be moved to the first focusable port. The user can then press Tab to move focus around the different ports. This will move the focus in a loop around the ports.

The user can click Shift + Tab to move the focus in the opposite direction. The user can press the Return key if they want to activate a port which is the equivalent of clicking on the port with the mouse/trackpad. The user can press the Esc key to escape from the tabbing behavior of the sub-objects and move the focus back to the node.

See keyboard support docs

#2662 Enable sub-object navigation with an embedded React object (for Prompt sample application)

A number of changes have been made in this release to enable keyboard navigation when the node contents are provided by a React object. An accessibility page has been added to the documentation that explains the steps that need to be implemented in the React object to make keyboard navigation work consistently.

To support this, the following functions have been added to the canvas controller:

// Sets the focus function for the node identified by the node ID passed in.
// The focus function will be function on a React object which is used to
// display the contents of the node. The focus function will be called when the
// user presses shortcuts to move the focus highlighting to the node's sub-objects.
setSubObjectFocusFunction(nodeId, focusFunction, pipelineId);

// Sets focus on the next sub-object in the object provided.
setFocusNextSubObject(parentObj, evt);

// Sets focus on the previous sub-object in the object provided.
setFocusPreviousSubObject(parentObj, evt);

Additionally, the Common Canvas Palette object has been extended to take a new prop called tabOutOfPalette. This is a callback function which the palette will call when the user presses Tab on the bottom-most object in the palette: this can be different depending on whether the user has entered a search string or not into the palette's search field.

These functions are used in the Prompt sample application's prompt-react-node.jsx.

#2636 When comment is moved, move any nodes positioned inside it

A new experimental feature has been added in this release. It can be switched on by setting the enableMoveNodesInComment config property to true. When set to true if a comment is positioned under one or more nodes, when the comment is moved the nodes will move with it. You can play with it in the test harness as shown below. Please provide feedback on this feature. Thanks!

Jul-21-2025 18-46-53

Common Properties

Bug fixes only.

Issues Resolved

Full Changelog: v13.31.0...v13.32.0

Contributors

use, forward, and 7 other contributors
Loading

v13.31.0

01 Jul 22:03
@tomlyn tomlyn
v13.31.0
a12eb69
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

Choose a tag to compare

View all tags
v13.31.0

Minor Release v13.31.0

Common Canvas

#2622 Disable the movement of nodes in the canvas

Nodes can now be prevented from being moved. This can be specified by setting the nodeMovable property of the enableNodeLayout field of the canvas config object to false. The application can specify that all nodes should not be movable like this:

    const config = {
        enableNodeLayout: {
            nodeMovable: false
        }
    };
     …
    render{
        return (<CommonCanvas … config={config} />);
    }

To prevent movement of nodes on a node-by-node basis, the application can return the nodeMovable setting from the layoutHandler, like this:

    layoutHandler(node) {
        if (node.id === “id81692345XW”) {
            return { nodeMovable: false };
        }

        return {};
    }

where “id81692345XW” is the ID of the node to be prevented from moving.

#2640 Animate zoom to fit

The canvasController.ZoomToFit function has been extended in this release to accept an optional parameter called animateTime. When the parameter is provided, the zoom operation will display an animation of the transition that takes the animateTime number of milliseconds.

    canvasController.zoomToFit(animateTime);

#2644 getZoomToReveal: calculate scale needed to fit specified nodes in screen

The canvasController.getZoomToReveal(objectIds, xPos, yPos) function behavior has changed slightly in this release. Now, if the objects specified in the objectIds array parameter, at the current scale amount, occupy a space that is bigger than the viewport, Common Canvas will return a zoom object that does the equivalent of a zoom to fit transition on those objects. That is it will move and scale them so they all appear within the viewport regardless of the xPos and yPos settings.

#2636 When comment is moved, move any nodes and comments positioned inside a comment

A prototype feature has been added in this release for assessment by designers. Please provide feedback if you have any thoughts about this feature. This feature is subject to change or removal.

If one or move nodes are positioned over a comment and the comment is moved, the nodes inside the comment will move with it. This feature could be useful for users of applications where comments are often used to highlight a grouping of nodes.

It can be activated by setting the enableMoveNodesInComment config property to true or in the harness by switching the "Enable Move Nodes In Comments" option in the Comments section of the Common Canvas right side flyout.

Jul-01-2025 14-46-19

Common Properties

#2632 Allow specifying a static width for structures in CommonProperties

Previously only a number was allowed as relative widths for each column within a table. Now you can specify a string of the exact pixel width the column should be, for example "40px".

Issues Resolved

  • #2618 Staring drag of right-flyout cuases very small reduction in pan… by @tomlyn in #2619
  • #2596 Slider track background does not reset on hide/unhide by @srikant-ch5 in #2597
  • #2605 Allow searchable oneofselect without treating typed input as selection by @veenas1 in #2606
  • #2585 Tearsheet- Pressing ESC closes the modal, but fails to reopen on clicking the btn again by @veenas1 in #2586
  • #2620 Refactor panels code for consistency by @tomlyn in #2621
  • Build failing with: error TS1205: Re-exporting a type when 'isolatedModules' is enabled requires using 'export type'. by @mariyageorge01 in #2626
  • #2624 Double-clicking partially obscured node causes flash but no pro… by @tomlyn in #2625
  • #2622 Disable the movement of nodes in the canvas by @tomlyn in #2623
  • #2628 Fixed [WARNING]: Control not found for test-tabletoolbar: by @nmgokhale in #2629
  • #2630 Auto-create of node should not cause focus to move to canvas by @tomlyn in #2631
  • #2634 Dragging width of right flyout sluggish when left flyout under … by @tomlyn in #2635
  • #2600 Sub-panel should act as a modal dialog (keyboard accessibility)… by @Jerinjk14 in #2601
  • #2632 Allow specifying a static width for structures in common properties by @caritaou in #2633
  • #2638 Intermittent link display with displayLinkOnOverlap in canvas l… by @tomlyn in #2639
  • #2636 When comment is moved, move any nodes and comments positioned i… by @tomlyn in #2637
  • #2640 Animate zoom to fit by @tomlyn in #2641
  • #2646 Logging activation using keyboard no longer working by @tomlyn in #2647
  • #2644 getZoomToReveal: calculate scale needed to fit specified nodes … by @tomlyn in #2645

Full Changelog: v13.30.0...v13.31.0

Contributors

caritaou, tomlyn, and 5 other contributors
Loading