Skip to content

Releases: elyra-ai/canvas

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 Latest
Latest

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

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