release_12.31.1

Common-Properties

#1497 Add additional checks in properties conditions for the control in cases where they are not defined (#1498)

release_12.31.0

Feature Enhancements

Build

#1491 Support react v18 in peerDependencies of elyra-canvas

Elyra-canvas now supports host applications running on react v16 and v18.

Common-Canvas

#1476 Allow tips for palette categories and nodes to be switched on/off independently

Tool tips for the palette can now be switched on or off for the categories and the node templates independently. The host application can do this by altering the palette field in the `tipConfig’ object which is part of the canvas config object. For example, to turn off tool tips for palette categories, but still display tool tips for node templates inside the categories, the config objects should be like this:

    const canvasConfig = [
        tipConfig: {
            palette: {
                categories: false,
                nodeTemplates: true
            }
        }
    ];

the palette field can still be specified as a boolean, true to display tips for both categories and node templates and false to prevent display of tips for those elements.

#1478 Open each category in palette by default at start

The host application can now programmatically open and close palette categories. This can be useful if you want all the palette categories opened when your application first appears. To do this 5 new methods have been added to the canvas controller, as follows:

    // Opens the palette category identified by the category ID passed in.
    openPaletteCategory(categoryId) 

    // Closes the palette category identified by the category ID passed in.
    closePaletteCategory(categoryId) 

    // Opens all the palette categories.
    openAllPaletteCategories() 

    // Closes all the palette categories.
    closeAllPaletteCategories() 

    // Returns true or false to indicate whether a palette category is open or not.
    isPaletteCategoryOpen(categoryId)

These methods can be called immediately after the palette JSON has been loaded into common-canvas.

in addition a new field called ‘is_open” can be specified in the category objects of the palette JSON file passed to `canvasController.setPipelineFlowPalette(paletteJSON)’

#1493 Display context toolbar with overflow menu

Common-canvas now supports an option to display a ‘context toolbar’ instead of the traditional context menu. A context toolbar is a small toolbar that appears above nodes, links and comments as the mouse cursor is hovered over them. A context toolbar for the canvas background can also be displayed by right-clicking on the canvas background.

The context toolbar displays a set of icons that represent the most likely actions the user would want to perform on the object under the mouse cursor. If necessary, the toolbar can also show an overflow (horizontal ellipsis) icon that, when clicked, reveals additional actions that can be performed on the object.

For a "vertical" style node it looks like this:

For a “horizontal” style node it looks like this:

when the user clicks the overflow icon it looks like this:

Note: Since the mouse cursor can be hovered over a node, comment or link that is NOT currently selected, the actions shown in the context toolbar will apply to just that object, even if there is one or more currently selected objects.

If the mouse cursor is hovered over a selected object when there are other selected objects, the actions in the context toolbar will be applicable to all the selected objects. This is the same as how a traditional content menu shows actions that are applicable to the set of selected objects.

The context toolbar behavior can be switched on by setting the enableContextToolbar canvas configuration field to true.

    const config = {
        enableContextToolbar: true
    };

    ...
    ...
    <CommonCanvas config={config} ..... />

ContextMenuHandler callback function

When enableContextToolbar is set to false (or omitted from the config), the traditional context menus will be displayed and the optional ContextMenuHandler callback function controls which actions appear in the context menus for selected objects .

When enableContextToolbar is set to true, the ContextMenuHandler callback function will continue to be used to control which actions appear in the context toolbar.

Important note for multiple object selection

The context toolbar is displayed whenever the mouse cursor is hovered over an object, therefore the ContextMenuHandler callback must return an array of actions that is applicable to that object, even if one or more other objects are currently selected. In addition, when the mouse cursor is hovered over one of the selected objects ContextMenuHandler needs to continue its current behavior, which is to return an array of actions applicable to the set of currently selected objects.

This means, when using context toolbars, your ContextMenuHandler will probably return an incorrect array if it handles any situations where there are multiple selected objects because, if the user hovers the mouse cursor over a non-selected object, your current code will most likely return an array for the selected objects. In this case, you'll need to fix your ContextMenuHandler code and detect whether the node being hovered over is, or is not, in the set of selected objects and then return appropriately.

When the user clicks one of the context toolbar options, common-canvas will automatically select the object, if it is not already selected, before calling the editActionHandler callback. So actions will be executed:

• for the set of selected objects when the mouse cursor is over one of them
• for the object the mouse cursor is over when the object is not one of the currently selected objects

When the mouse cursor hovers over an object, the source.targetObject field contains the data for that object. Also, source.selectedObjectIds field contains an array currently selected object IDs. So if source.targetObject.id is not in source.selectedObjectIds you will know the mouse cursor is over a non-selected object. source is the first parameter passed in to ContextMenuHandler.

What to return from ContextMenuHandler callback function

Currently, that callback returns an array of action objects, for example, like this:

    contextMenuHandler(source, defaultMenu) {
        if (source.type === "comment") {
            return [
                { action: "setCommentEditingMode", label: "Edit comment" },
                { action: "colorBackground", label: "Color background" },
                { divider: true },
                { action: "deleteSelectedObjects", label: "Delete" }
            ];
        }
        return defaultMenu;
    }

When enableContextToolbar is set to false, and the user right-clicks on a comment, this would show a traditional context menu like this:

If the host application then switches enableContextToolbar config option to true, this is displayed when the mouse pointer is hovered over a comment:

And when the overflow icon is clicked this would appear:

If you decide your application needs to show the Edit comment action as a likely action the user wants to perform, the contextMenuHandler function should return a toolbarItem field in the edit action element of the returned array, like this:

    contextMenuHandler(source, defaultMenu) {
        if (source.type === "comment") {
            return [
                { action: "setCommentEditingMode", label: "Edit comment", toolbarItem: true },
                { action: "colorBackground", label: "Color background" },
                { divider: true },
                { action: "deleteSelectedObjects", label: "Delete" }
            ];
        }
        return defaultMenu;
    }

Which would display this when the mouse pointer is hovered over the comment:

And this, if the overflow menu icon is clicked:

Note: The icons above are displayed because the actions specified in the array are known to common-canvas so it knows which icon to display. If you have an action of your own let’s say ‘Format’ you could specify this:

    contextMenuHandler(source, defaultMenu) {
        if (source.type === "comment") {
            return [
                { action: "setCommentEditingMode", label: "Edit comment", toolbarItem: true },
                { action: "colorBackground", label: "Color background" },
                { divider: true },
                { action: "deleteSelectedObjects", label: "Delete" },
                { divider: true },
                { action: "my_format", label: "Format" }
          ...

release_12.30.0

Feature Enhancements

Common-Canvas

#1470 Enable JSX decorations

Decorations for nodes and links can now be created using JSX. The JSX is provided in a field called jsx in the decoration specification. If you want to programmatically set JSX decorations, it can be provided using the canvas controller API like this:

     import { Play16 } from "@carbon/icons-react";

     const decorations = [
         {
             jsx: (<Play16 />),
             position: “topLeft”,
             x_pos: 0,
             y_pos: -20
         }
     ];

     canvasController.setNodeDecorations(“node1”,  decorations);

or returned by the layoutHandler callback if you want different nodes to have different decorations based on some property of the node:

     import { Play16 } from "@carbon/icons-react";

     layoutHandler(node) {
         const nodeLayout = {};

         if (node.app_data.isPlayable) {               
             nodeLayout = {
                 decorations: [
                     {
                          jsx: (<Play16 />),
                          position: “topLeft”,
                          x_pos: 0,
                          y_pos: -20
                     }
                 ]
             };
         }

         return nodeLayout; 

or, if you want each node to have the same decoration, in the node layout field of the canvas configuration object, like this:

     import { Play16 } from "@carbon/icons-react";     

     const canvasConfig = {
         enableNodeLayout: {
             decorations: [
                 {
                     jsx: (<Play16 />),
                     position: “topLeft”,
                     x_pos: 0,
                     y_pos: -20
                 }
             ]
         }
     };

     ...
     ...

    return (<CommonCanvas config={canvasConfig} ... />);

Note: JSX decorations are not serialized into the pipelineFlow document when canvasController.getPipelineFlow() is called even if the temporoary field is set to false.

Common-Properties

#1466 Support custom classes for action buttons and images

An optional config option called class_name was added in uiHints action_info section.

If provided, a custom class will be added to elements, like this:

For action button - <div class="properties-action-button <customClass>" />
For action image - <div class="properties-action-image <customClass>" />

Issues Resolved

#1474 Canvas crash - Cannot read properties of undefined (reading x1) (#1475)
#1470 Enable JSX decorations (#1471)
#1466 Support custom class for action button and image (#1467)
#1468 Datepicker controls are in the wrong color within a Tearsheet (#1469)
#1464 Fixed issue sort icon outside table header (#1465)

release_12.29.0

Feature Enhancements

Common-Canvas

#1251 Support nodes as React objects

React objects can now be used to provide the body of nodes in common-canvas. The React object provides the body while the other graphic elements of the nodes (such as: ports; selection highlighting; ellipsis icon; and resizing area) are displayed by common-canvas.

Your application can now set the following in the canvas config object:

     const canvasConfig = {
          enableNodeLayout: {
               nodeExternalObject: NodeWrapper
          }
     }; 

This would set the React object NodeWrapper to provide the body of the node in common-canvas. Note: you can now also instruct common-canvas to not display a shape body object (e.g. rectangle etc) using

     const canvasConfig = {
          enableNodeLayout: {
               nodeShapeDisplay: false
          }
     }; 

A new sample application called ‘React Nodes’ has been added to the Test Harness. Here is an example of a React node, taken from the sample app. It shows the CardNode object (from the Carbon Charts library) being used in common-canvas to display the body of a common-canvas node:

Common-Properties

#1461 Update required error message in properties

The error message for empty fields has been improved to be: "You must enter a value for {field_label}". It looks like this:

The following accessibility violations have been fixed in this release:

#1440 Accessibility: The ARIA attributes "aria-labelledby" are not valid for the element <div> with implicit ARIA role "generic"
#1450 Accessibility: The <button> element has the id "subtabs.tab.0" that is already in us

Issues Resolved

#1461 Update required error message in properties (#1462)
#1458 Don’t render properties title when paramDef doesn't have titleDefinition (#1459)
#1455 Support custom filter conditions in properties (#1456)
#1453 Styles picked up in different order than traditionally (#1454)
#1450 Accessibility: Fixed The <button> element has the id 'subtabs.tab.0' that is already in use (#1451)
#1251 Support nodes as react objects (#1449)
#1447 Fixed issue page refresh after clicking 'enter/return' key in password control (#1448)
#1442 Test harness updates (#1443)
#1444 Nodes with asscoiation links has isPortConnected boolean set to true (#1445)
#1440 Accessibility: Fixed 'aria-labelledby' are not valid for the element <div> with implicit ARIA role 'generic' (#1441)
#1434 Calendar icon is misaligned in datepicker with long helper text (#1435)
#1432 Error in console when enablePositionNodeOnRightFlyoutOpen set t… (#1433)

release_12.28.2

Common-Properties

#1430 Fix tooltip error without content (#1431)

release_12.28.1

Common-Properties

#1428 Fix error when converting current parameters if control is not defined (#1429)

release_12.28.0

Feature Enhancements

Common-Canvas

#1410 User request: Add Show/Hide Comments

Some host applications want to enable their users to temporarily switch off and switch on the display of comments.

To enable this, three new methods have been added to the canvas controller:

// Hides all comments on the canvas.
hideComments()

// Shows all comments on the canvas - if they were previously hiding.
showComments()

// Returns true if comments are currently hiding.
isHidingComments()

These allow the host application to hide and shows the comments (and any links from comments to nodes) and also query whether the comments are currently hidden or not.

If your application wants to show this function in the toolbar as a button, you can add the following to the toolbar config that is passed as a prop to <CommonCanvas>:

toolbarConfig = [
       (this.canvasController.isHidingComments()
           ? { action: "commentsHide", label: "Hide comments", enable: true }
            : { action: "commentsShow", label: "Show comments", enable: true })
];

Specifying the action field as either commentsShow and commentsHide will tell common canvas to automatically display the appropriate icon in the toolbar. When either icon is clicked common-canvas will execute the appropriate canvas controller method to hide or show the comments.

Note: If the comments are hidden it doesn't alter the pipeline flow object returned by canvasController.getPipelineFlow(). The object will still contain all the comments.

This is how it looks:

Common-Properties

#1406 Add Date Picker control to Common Properties

A Datepicker control will be rendered if the control type is set to control=datepicker.

A Datepicker control with a range will be rendered if the control type is set to control=datepickerRange.

The date format can be specified in the uihint date_format field. This defaults to Y-m-d. Datepicker internally uses Flatpickr, so the date tokens differ from the datefield and timefield controls. Only a subset of the tokens are supported in common properties: Y, y, m, n, d, and j. See Flatpickr’s documentation https://flatpickr.js.org/formatting/#date-formatting-tokens. Only valid inputs are accepted, any invalid dates will be adjusted to a valid date.

#1402 Accessibility: Tooltip element's role 'none' is not a widget role

Fixed accessibility violation Tooltip element's role 'none' is not a widget role in all common-properties tooltips.

Issues Resolved

#1406 Support default datepicker date format if not specified (#1426)
#1420 Update how test harness processes scss for HMR (#1421)
#1424 Unable to single left-click and select node in read-only mode (#1425)
#1406 Add datepicker to properties (#1407)
#1422 Updated Translations - CPD 4.7 (#1423)
#1414 Extend 'convertValueDataTypes' support to 'setPropertyValues' (#1415)
#1418 Add new config option to filter specific returned values (#1419)
#1416 Removed control label spacing (#1417)
#1387 Update tooltips to show overflow in textfields and table headers (#1409)
#1410 User request: Add Show/Hide Comments (#1411)
#1412 Context menu gesture on hotspot decoration should open context menu for underlying node or link (#1413)
#1402 Accessibility: Fixed Tooltip element's role 'none' is not a widget role (#1403)
#1404 Node not selected when ellipsis icon is clicked with enableDragWithoutSelect: true (#1405)
#1400 Updated propertiesConfig are not saved (#1401)

release_12.27.1

Feature Enhancements

No feature enhancements: just one bug fix.

Common-Canvas

#1396 Fix Notification Panel Close Button CSS

This is to fix a regression that caused the close button in notification panel to disappear when the header text was very long. This fix will take into consideration all the different languages.

Common-Properties

No change for common-properties

Issues Resolved

#1396 Fix CSS for Close Button in Notification Panel (#1397)
#1392 Accessibility: Fixed violations for complementary role (#1398)

release_12.27.0

Feature Enhancements

Common-Canvas

#1385 Enhancement request: Add top panel option

A new feature has been added to display a 'top panel' in common-canvas. This appears below the toolbar and between the palette and the right side flyout. The height of the top panel will change to accommodate whatever contents are displayed within it.

There are two new props for CommonCanvas react object called:

• showTopPanel - this is a boolean that, when set to true, will display the top panel
• topPanelContent - this is a JSX object that contains the contents to be displayed in the top panel

In addition there is a new CanvasController method called isTopPanelOpen() which will return true if the panel is open and false if not.

Common-Properties

#1370 Removed default placeholder for empty list selectcolumn and selelectschema controls

In elyra-ai/canvas version 12.26.0, we added a default placeholder "No options available" for empty dropdown lists. This default placeholder has been removed.

In elyra-ai/canvas version 12.27.0, the default placeholder for empty and non-empty dropdown lists will be …. Like this:

#1372 Add a line break when description contains \n

When a description contains \n, common-properties will add a line break in the tooltip or on_panel descriptions. For example,

"description": {
    "default": "checkbox with a default value of 'true'\nThis text should be on a new line.\nThis text should also be on a new line."
}

would display this:

#1379 Added a config option for required/optional label indicator

In elyra-ai/canvas version 12.26.0, common-properties internally set the required or optional indicator based on number of properties. This internal setting way of showing the optional/required indicator has been removed.

In elyra-ai/canvas version 12.27.0, a new config option showRequiredIndicator has been added to the propertiesConfig object to let the host application decide which indicator to show.

The showRequiredIndicator config option defaults to true to show the (required) indicator next to the property's label, like this:

When set to false, it will show the (optional) indicator next to the property's label, like this:

Issues Resolved

#1394 Reverse change to common-canvas scss (#1395)
#1391 Accessibility: Fixed Properties tearsheet does not have associated name (#1393)
#1389 Accessibility: Fixed violation in properties table (#1390)
#1385 Enhancement request: Add top panel option (#1386)
#1383 Node port icon still displayed after outputs array is set to undefined (#1384)
#1379 Added a config option for required/optional label indicator (#1380)
#1381 Updated Translations (#1382)
#1377 Warnings showing up in jests tests (#1378)
#1337 Create tests for new enableNodeLayout config parameter and layo… (#1339)
#1375 Fix glmm example in properties (#1376)
#1372 Add a line break when on panel description contains \n (#1374)
#1372 Add a line break when tooltip contains \n (#1373)
#1366 Documentation Updates (#1367)
#1370 Removed default placeholder for empty list selectcolumn and selectschema controls (#1371)
#1368 Align Close Icon With Carbon (#1369)

release_12.26.0

Feature Enhancements

Common-Properties

#1360 Enable getZoomToReveal to work with links

The canvas controller method getZoomToReveal(objectIds, xPos, yPos) now supports links as well as nodes and comments. This means an array of link IDs can be provided for the objectIds parameter and the method will return a zoom object that will zoom the center of the link(s) to the position in the viewport identified by the xPos and yPos parameters.

#1344 Accessibility: Run Accessibility Checker Tool and fix errors

The high priorty issues identifed by the accessibility checker browser plugin, that showed up when testing with the test harness, have been fixed. Note many of these issues were caused by customization (such as icons) provided by the test harness, so if you are seeing accessibility errors that look like they are inside common-canvas, make sure they are not caused by icons your app provides to common-canvas.

#1364 Refactor App.js so progress indication sample code is contained in a sample app

A new Sample application called “Progress” has been added to the test harness. This demonstrates how CSS styling and decorations can be used by a host application to show the progress of a run of the flow.

#1362 Add custom button in notification center

New properties have been introduced in the notification config object to enable a secondary button in the notification panel.

Common-Properties

#1333 Required or optional indicator for properties labels

Following the carbon guidelines for optional vs mandatory fields:

• If the majority of the fields are required, mark only the optional field labels with (optional).

• If the majority of the fields are optional, mark only the required field labels with (required).

#1342 New properties config to convert value data type

A new properties config option convertValueDataTypes has been added in this release. If set to true, it will convert the currentParameter values to the data type specified in the parameter definition. This defaults to false.

#1354 Support empty list placeholder in selectcolumn and selectschema controls

The selectcolumn and selectschema controls use the dropdown component. When the dropdown list is empty, common-properties will display the following default placeholder: "No options available".

This placeholder text can be customized by setting [parameter_id].emptyList.placeholder in the resources section. If custom empty list placeholder text is provided, the empty list control will be disabled.

 "resources": {
     "field1_panel.emptyList.placeholder": "Empty list placeholder text"
  }

Issues Resolved

#1354 Support empty list placeholder in selectcolumn and selechschema (#1355)
#1362 Add custom button in notification center (#1363)
#1364 Refactor App.js so progress indication sample code is contained… (#1365)
#1356 ClickActionHandler not being called with Mouse Interaction type (#1357)
#1360 Enable getZoomToReveal to work with links (#1361)
#1358 Typo in field name in svg-canvas-renderer: textEditingClosedfOnZoom (#1359)
#1331 Test harness - Hide side panel contents when panel is closed (part 2) (#1348)
#1344 Accessibility: Run Accessibility Checker Tool and fix errors (#1345)
#1350 Unable to open subpanel of structureeditor in tearsheet (#1351)
#1352 Update styling of properties error panel (#1353)
#1346 Do not render hidden controls (#1347)
#1213 Support spaces in common properties (#1240)
#1340 Fix bug where selection doesn't work in subpanels (#1341)
#1342 New properties config to convert value data type (#1343)
#1333 Show 'required' or 'optional' indicator for properties labels (#1334)