Skip to content

Releases: elyra-ai/canvas

v13.13.0

17 Dec 19:40
@tomlyn tomlyn
v13.13.0
79db419
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.13.0 Latest
Latest

Feature Enhancements

Common Canvas

#2266 Custom port images

The specification for the way ports are displayed has been changed in this release. The following fields in the node layout object (enableNodeLayout in the canvas config object) have been removed:

  • outputPortObject
  • outputPortImage
  • outputPortWidth
  • outputPortHeight

They have been replaced with a field called outputPortDisplayObjects. This contains an array with an element that corresponds to each output port specified for the nodes. The elements of the array can have different structures as follows:

Either: 
{ type: “circle” } // Draws a circle to represent the port
Or:
{ type: “circleWithArrow” } // Draws a circle with an arrow head (shown when port is connected) to represent the port.  
Or:
{ type: “image”, src: “path/picture.svg”, width: 10, height: 10 } // Displays an image for the port
Or:
{ type: “jsx”, src: (<FaceCool />), width: 10, height: 10 } // Displays a JSX object for the port

If the node has more output ports (outputs) than elements in the array the last element from the array will be used for the remaining ports. So if you want all ports to be displayed the same, just specify one element in the array.

The same change has been made for output ‘guide objects’. A Guide object is the image displayed at the end of the new link line as it is dragged away from the node. These fields have been removed:

  • outputPortGuideObject
  • outputPortGuideImage

They have been replaced with the field outputPortGuideObjects which is an array with the same structure as for outputPortDisplayObjects.

The same change has been made for input ports. These fields have been removed:

  • inputPortObject
  • inputPortImage
  • inputPortWidth
  • inputPortHeight

and have been replaced by inputPortDisplayObjects.

And also these fields have been removed:

  • inputPortGuideObject
  • inputPortGuideImage

and have been replaced by the field inputPortGuideObjects

These changes allow something like this where each output port can have a different image:

image

Notes:

  1. The Prompt sample application has been altered to use this new approach.
  2. The old fields will continue to work in the current release but will be removed in the next major release (which is not that far in the future). It is therefore strongly recommended, if your code is overriding any of the defaults for these fields, that you convert your code to use the new arrays. This will save having migration work in the future.

#2276 Allow click on a port to cause an action

The user can now click on a port which will cause the clickActionHandler callback to be called with a source parameter object that contains information about the node and port that was clicked.

The Prompt sample application in the test harness has been updated to enable this, so the user can click a port to display a link and prompt for that port.

Dec-17-2024 11-36-42

Common Properties

  • Just bug fixes

Issues Resolved

Full Changelog: v13.12.0...v13.13.0

Contributors

tomlyn, srikant-ch5, and Jerinjk14
Assets 2
Loading

v13.12.0

05 Dec 19:32
@tomlyn tomlyn
v13.12.0
d3a80ca
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.12.0

Feature Enhancements

Build

#2205 Upgrade @carbon/react to 1.71.0

Carbon react has been upgraded to 1.17.0

Common Canvas

#2137 Enable Common Properties Right Flyout resize using drag

The Right Flyout can now be resized horizontally by dragging its left border.

To enable this behavior, set the enableRightFlyoutDragToResize canvas configuration field to true. The default value is false.

When hovering over the left border, the cursor will change to indicate that resizing is available. The flyout's width can then be adjusted by dragging the border, allowing it to expand or collapse. The maximum width the flyout can be dragged to is 70% of the total available width.

This shows the basic behavior for the right flyout in the test harness:

Dec-05-2024 10-23-28

This shows the usage when Common Properties is used to provide the content in the right flyout:

Dragflyout

When Common Properties provides the content, the user may also use the arrow buttons to size the flyout:

ButtonResize

The resize button disappears as soon as flyout is resized by dragging. To restore the resize button flyout can be dragged back to its smallest possible width to interact with resize button to adjust as per width set in the paramDef.

ButtonAppearance

#2252 Create a sample app that shows a prompt interface

A new sample application, called "Prompt", has been added to the test harness to display a prompt interface, where the user is prompted for the next node in the flow instead of having to drag nodes from the palette and create links. This uses the function in Common Canvas that allows the body of a node to be displayed as a React object.

Prompt2

#1438 Accessibility: Tabbing - Keyboard navigation of canvas objects (Part 2)

This feature implements extensive support for keyboard navigation with the flow editor and Common Canvas components in general. The keyboard user can now:

  • Pan, zoom and zoom to fit the canvas
  • Display a context menu or context toolbar for canvas object and the canvas background
  • Move node and comments around on the canvas
  • Size comments and node (when enabled)
  • Add nodes to the canvas from the palette
  • Create links between nodes

These functions are enabled when the enableKeyboardNavigation canvas config field is set to true. In the test harness this can be switched on in the 'Operational' section of the Common Canvas flyout in the test harness.

image

The shortcut keys used with Keyboard Navigation are documented in the Keyboard Support page of the documentation.

This feature can be thought of as a work in progress. The Design team will assess what has been implemented and feedback on any needed improvements or changes to keyboard shortcuts. Consequently, it is recommended that applications DO NOT enable this function for use by customers at this time.

Common Properties

  • Just bug fixes

Issues Resolved

New Contributors

Full Changelog: v13.11.1...v13.12.0

Contributors

akchinSTC, tomlyn, and 5 other contributors
Assets 2
Loading

v13.11.1

30 Oct 18:34
@nmgokhale nmgokhale
v13.11.1
5ccc291
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.11.1

Just bug fixes

Issues Resolved

Full Changelog: v13.11.0...v13.11.1

Contributors

nmgokhale, PRINCESANCHEZ, and mikieyx
Assets 2
Loading

v13.11.0

22 Oct 21:45
@tomlyn tomlyn
v13.11.0
0fe97d7
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.11.0

Feature Enhancements

Common Canvas

#2215 Fix accessibility issues for palette search

Resolved an accessibility violation caused by duplicate id attributes (palette-flyout-search). The id was removed from the Search component, as it is not mandatory in Carbon. This change resolves the issue and ensures Hopscotch tours functions properly without conflicts from duplicate id’s.

Common Properties

#2120 Added icon support for dropdown menus

The behavior of dropdown menus has been enhanced to support an icon switch feature. When this feature is enabled, a user-defined icon can be displayed next to items in dropdown menus.

This new functionality uses a callback function that allows users to pass in custom icons for any dropdown or specific dropdown values. The icon will appear based on the return value of the callback, making it flexible to use different icons for different dropdown items.

An example of this has been added to the enum value orange in the oneofselect dropdown in oneofselect_paramDef.

image
image

#2199 Allow expression text editor to be expandable

Expression Builder editor can be expanded by dragging vertically. Drag can enabled by hovering over bottom right corner and resize as per requirement.

xxx

Issues Resolved

Full Changelog: v13.10.1...v13.11.0

Contributors

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

v13.10.1

07 Oct 01:15
@tomlyn tomlyn
v13.10.1
cba7304
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.10.1

Fixpak

Issues Resolved

Full Changelog: v13.10.0...v13.10.1

Contributors

tomlyn, nmgokhale, and 2 other contributors
Assets 2
Loading

v13.10.0

26 Sep 23:51
@tomlyn tomlyn
v13.10.0
68b04c0
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.10.0

Feature Enhancements

Build

#2180 Upgrade to react-redux@8

Elyra Canvas has been upgraded to use react redux v8 . Please npm install to pick up the latest.

Common Canvas

#2170 Toolbar to support Toggletip, and it should popup like tooltip

The behavior of toolbar tooltips has been changed. The mouse cursor can now be ‘hovered over’ the tooltip, and the tooltip will remain displayed until the mouse cursor is moved away from the tooltip.

This allows applications to display action items (such as buttons or links) within the body of the tooltip. The user can then hover the mouse over the tooltip and click the action item or even select text in the tooltip and copy it to the clipboard.

The body of the tooltip can be provided using the currently supported tooltip field for the toolbar button — this can be either text or a JSX expression. An example of this has been added to the ‘SubAreas’ sample toolbar in the Test Harness. Here is the JSX expression and this is how it is included in the toolbar.

image

#2176 Add button to node palette

A new canvas config field called enablePaletteHeader has been added in this release. This can be set to a JSX object which will be displayed in the palette, positioned below the Search bar and above the categories and nodes. This JSX can be used to display, say, a button for launching a data browser.

The palette header is only displayed when the palette is in its wide mode and it is not displayed when the user searches nodes using the search bar.

An example of this has been added to the Stages sample application in the Test Harness:

image

#2172 Make automatic focus on CommonCanvas opt-out

The current behavior of Common Canvas is that keyboard focus is set on the flow editor when Common Canvas first appears to force keyboard shortcuts to go the the canvas without the user having to click on the canvas first. Some applications do not want that behavior.

A new canvas config field called enableFocusOnMount has been added. This is a booelan that default to true which means the keyboard focus will automatically be set on the flow editor part of the UI when Common Canvas is first created. Setting it to false disables this behavior.

    const canvasConfig = {
        enableFocusOnMount: false
    };

#2132 Need ability to add custom icon to notificationConfig

and

#2151 Allow applications to customize the default toolbar buttons' icons, position in toolbar, etc.

Currently, Common Canvas automatically adds to the canvas toolbar:

  • a palette icon (to the far left of the toolbar) when a palette is configured
  • a notification icon (to the far right of the toolbar) when a notification panel has been configured

Previously the application could not customize these icons. In this release, the icon and other attributes that are used for the toolbar buttons can now be customized. This can be done by specifying an entry in the toolbar config (in either the leftBar or rightBar arrays) using the actions togglePalette and toggleNotificationPanel.

Here's an example showing a customized palette icon (with label) and a customized Notification Panel icon:

image

See the documentation

#2158 Update palette open/close icon in toolbar

As agreed by the Elyra Canvas design council the icons for opening and closing the palette have been changed to use icons with little arrows showing the direction.

image
image

#2146 Add a Configuration flag to allow a scroll bar for Annotations and Comments

In this release, comments (either regular or WYSIWYG), will become scrollable if their dimensions are too small to fit the contents. This is now the default behavior and cannot be turned off. When a comment is scrollable and the mouse is hovered over the comment the scroll gesture will scroll the text however if the comment is not scrollable (because its dimensions are big enough for the text) the scroll gesture will zoom the canvas, as before.

comments

In addition, some applications do not want the auto-size feature which automatically increases the size of the comment to accommodate text as it is entered. The auto-size feature can be switched off by setting the commentAutoSize in the canvasLayout field, thus:

    const canvasConfig = {
        enableCanvasLayout: {
            commentAutoSize: false
        }    
    }

#2140 WYSIWYG comment should show current parameter selections

The toolbar for WYSIWYG comments now shows the current selections for the toolbar controls . For example, like this:

image

For colors and 'boolean' values like bold like this:

image

Common Properties

Just bug fixes

Issues Resolved

Full Changelog: v13.9.1...v13.10.0

Contributors

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

v13.9.1

27 Aug 21:31
@caritaou caritaou
v13.9.1
52e740e
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.9.1

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

Issues Resolved

Full Changelog: v13.9.0...v13.9.1

Contributors

caritaou
Assets 2
Loading

v13.9.0

26 Aug 17:06
@caritaou caritaou
v13.9.0
62b5521
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.9.0

Common Canvas

#2115 Support collapsed super node resizingCollapsed supernodes can now be resized when the config field enableResizableNodes is set to true. This behavior is separate to the resizing behavior when the supernode is expanded to display the sub-flow in-place.

Common Properties

#2108 Need shouldFilterItem support for oneofselect control
The Oneofselect Control now filters items by default based on the input text.
oneofselect

Issues Resolved

Full Changelog: v13.8.0...v13.9.0

Contributors

caritaou, tomlyn, and 2 other contributors
Assets 2
Loading

v13.8.0

12 Aug 22:03
@caritaou caritaou
v13.8.0
8483035
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.8.0

Common Canvas

Just bug fixes

Common Properties

#2088 Include actions in properties title editor

Parameter definitions now supports a title_info section in the uihints (elyra-ai/pipeline-schemas#148) where a list of actions can be specified to be displayed in the title section. These actionRefs will be mapped to actions defined in the action_info section.
image

Issues Resolved

Full Changelog: v13.7.0...v13.8.0

Contributors

caritaou and veenas1
Assets 2
Loading

v13.7.0

06 Aug 23:07
@tomlyn tomlyn
v13.7.0
bd46e16
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.7.0

Feature Enhancements

Common Canvas

#2090 Add new left side panel to allow toggling between palette and search panel

This requirement has two parts:

  1. The application needs control over what is displayed in the left flyout. Based on the user clicking buttons in the toolbar, sometimes the Palette is displayed and sometimes a Search panel is displayed showing a sophisticated search UI.

  2. The palette (or any replacement search panel) should be displayable underneath the toolbar rather that at the side of the toolbar.

Requirement 1

Common Canvas has default behavior for the palette. This is enabled when the canvas config field enablePaletteLayout is set to “Flyout”. This default behavior involves:

  • automatically displaying a palette icon as the left most button in the toolbar
  • handling clicks on the button to control the opening and closing of the Palette in the left flyout
  • allowing the application to specify whether the “closed” palette is shown as a narrow palette or hidden completely. (This is controlled by the enableNarrowPalette canvas config field).

This default behavior might conflict with any control the application is given over the contents and behavior of the left-flyout. Therefore, to implement this requirement, the default palette behavior and the ability to control the left flyout have been separated as follows.:

  • When the default palette behavior is switched on (enablePaletteLayout === "Flyout") Common Canvas manages everything to do with the left flyout and the left flyout cannot be controlled by the application.
  • When default palette behavior is switched off (enablePaletteLayout === "None") the application must handle all aspects of the left flyout.

Consequently, to implement this requirement with this Elyra Canvas release, the application must do these things:

  • Disable the default Palette behavior by setting enablePaletteLayout to “None”
  • Add whatever buttons are required to the toolbar for opening the palette or search panels
  • Control the display and contents of the left-flyout based on which toolbar buttons are clicked

To allow for the third item two new props have been added to <CommonCanvas> called leftFlyoutContent and showLeftFlyout.

These work in the same way as these currently supported props:

  • rightFlyoutContent and showRightFlyout
  • topPanelContent and showTopPanel
  • bottomPanelContent and showBottomPanel

Notes

  1. To allow the application to provide the Palette as content for the left flyout the Palette object is now exported from Elyra Canvas. To satisfy this requirement the application must import the Palette from Elyra Canvas and then specify it in the leftFlyoutContent prop of <CommonCanvas>

  2. The width of the left flyout will expand to accommodate whatever contents that are specified in the leftFlyoutContent prop of <CommonCanvas>

  3. The Stages sample application in the Test Harness has been updated to implement the steps mentioned above. To see this, open the Test Harness, click the Common Canvas button and then click the 'Stages' sample application.

  4. You can see the code that was added to the Stages sample app, as follow:

    • The default behavior of the Palette has been switched off here
    • The two buttons for the toolbar are specified here
    • The editActionHandler has been updated to handle the click on each of these buttons here
    • The render method has been updated to render the appropriate content into the left flyout here and here

  5. For this work item a number of internal class names have been removed. These were not part of the documented API but are documented here for completeness:
    common-canvas-items-container
    common-canvas-right-side-items
    common-canvas-right-side-items-under-toolbar
    common-canvas-items-container-under-toolbar
    common-canvas-with-top-and-bottom-panel

Requiremnt 2

The left flyout (whether it is displaying the default palette or the left flyout contents provided by the app) can be displayed underneath the toolbar by setting the enableLeftFlyoutUnderToolbar config field to true. (This is the equivalent of the enableRightFlyoutUnderToolbar config field). You can see this behavior if you view the Stages sample app where you will see the Palette/Search panel appearing below the toolbar. You can see it has been switched on in the Stages sample app code here

#2079 Add ability to adjust position of context toolbar for links

Two new Canvas Layout fields have been added called linkContextToolbarPosX and linkContextToolbarPosY. These are used as an offset for the bottom center position of the context toolbar for all links. Positive X is to the right, negative X is to the left, and positive Y is down, negative Y is up.

They can be specified like this:

    const canvasConfig = {
        enableCanvasLayout: {
            linkContextToolbarPosX: 10,
            linkContextToolbarPosY: -10
        }
    };

This behavior has been implemented in the Stages sample app. You can see it in the Test Harness. In the Test Harness click the “Common Canvas“ button and the “Stages” sample app. You can see the code for it here

#2095 Hide link Label with ... and decorations based on link length in Common Canvas

Two more new Canvas Layout fields have been added in this release called:

  • linkDistanceForAltDecorations — A distance in pixels between the start point and end point of the link below which the ‘alternative decorations’ will be displayed. This defaults to 150.

  • linkAltDecorations. — Should be set to an array of alternative decorations for the link. Each element of the array should follow the decoration specification just the same as the regular decorations. The default for this field is null, which means no alternative decorations will be displayed. They can be specified something like this:

    const canvasConfig = {
        enableCanvasLayout: {
            linkDistanceForAltDecorations: 100,
            linkAltDecorations: [
                { id: “alt-123”, label: “XXX” }
            ]
        }
    }

This will display a label “XXX” in the middle of the link when the distance from the start point to the end point of the link is below 100 pixels.

The Stages sample app in the Test Harness has been updated to use this feature. In the Test Harness click the “Common Canvas“ button and the “Stages” sample app. You can see the code here.

Common Properties

Just bug fixes

Issues Resolved

  • #2079 Add ability to adjust position of context toolbar for links by @tomlyn in #2080
  • #2083 With WYSIWYG comments IBM Plex Condensed font display incorrectly by @tomlyn in #2084
  • #2085 Page crashes when mousing over node while submenu toolbaritem i… by @tomlyn in #2086
  • #2093 Text decoration on a Link -- entry area closes when mouse cursor moved out (intermittent). by @srikant-ch5 in #2094
  • #2081 Conditions + small portion of controls by @mikieyx in #2082
  • #2090 Add new left side panel to allow toggling between palette and s… by @tomlyn in #2091
  • #2095 Hide link Label with ... and decorations based on link length i… by @tomlyn in #2096

Full Changelog: v13.6.1...v13.7.0

Contributors

tomlyn, srikant-ch5, and mikieyx
Assets 2
Loading