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)

release_12.25.0

Feature Enhancements

Common-Properties

Support "max" option for editor_size in common-properties

editor_size attribute in UIHints now supports “max” size having 900px width. Resize button won’t be displayed for max size. However, when editor size is set to “large”, resize button allows the properties panel to be increased in size up to the "max" size.

Issues Resolved

#1335 Add additional checks for pipeline in getNonClonedSelectedObjs() (#1336)
#1330 Test harness - Hide side panel contents when panel is closed (#1332)
#1280 tearsheet subpanel modals (#1329)
#1326 Warning appearing running toolbar-test.js (#1327)
#1324 Support 'max' option for editor_size in common-properties (#1325)
#1321 Update light-on and light-off SVG files (#1323)
#1274 Update icons in common properties (#1275)
#1318 Remove unneeded code (#1319)
#1315 Processing selection can performance issue & cause internal dat… (#1
#1279 Display field-picker in stacked tearsheet (#1317)

release_12.24.0

Feature Enhancements

Common-Canvas

#1287 Accessibility: Support context menu option to enter edit mode for labels

For accessibility, the user will need to be able to edit either node labels or decoration labels added to either a node or a link. To be able to edit the label, the user first needs to change the label to editing mode. This is currently achieved by either clicking the edit icon which appears on hover over the label, or by double-clicking the label. Neither of these approaches are accessible for the keyboard user.

To resolve this, three new canvas controller methods have been added which will change node labels, or decoration labels, into editing mode. They are:

CanvasController.setNodeLabelEditingMode(nodeId, pipelineId)
CanvasController.setNodeDecorationLabelEditingMode(decId, nodeId, pipelineId)
CanvasController.setLinkDecorationLabelEditingMode(decId, linkId, pipelineId)

In addition, a new Rename option is now added to the context menu for nodes that have editable labels. When clicked, this option uses the CanvasController.setNodeLabelEditingMode(nodeId, pipelineId) to change the node label into edit mode.

If you want your application to be accessible, and your application has decoration labels, on either nodes or links, you will have to add your own context menu option to change the labels into editing mode. For example, if you are displaying a label decoration on your links, you could add a Rename Link Label option to the context menu for links. When the user clicks that option, your application code would handle the associated action passed to the editActionHandler callback and then call:

CanvasController.setLinkDecorationLabelEditingMode(decId, linkId, pipelineId)

This would change the decoration label on the link into editing mode.
Note: the label decoration would have to be specified as being editable by setting the label_editable boolean for the label decoration to true.
An example of this can be seen in the Stages sample application in the Test Harness.

#1257 Allow node outline and node selection highlight to be provided by callback

The node outline and node selection highlight shapes can now be provided using a callback function instead of an SVG string. The callback function is provided a single parameter which is the node to which the node outline and node selection highlight apply.

So instead of the following code which would provide a hard-coded size for the outline and selection highlight:

const canvasConfig = {
    enableNodeLayout: {
        bodyPath: “M 0 0 L 50 0 50 100 0 100 Z”,  
        selectionPath: ”M -5 -5 L 60 -5 60 110 -5 110 Z”
    }
};

Your application can specify the following code, so the outline and selection highlight will change shape if the node is resized:

const canvasConfig = {
    enableNodeLayout: {
        bodyPath: (node) => `M 0 0 L ${node.width} 0 ${node.width} ${node.height} 0 ${node.height} Z`,  
        selectionPath: (node) => `M -5 -5 L ${node.width + 10} -5 ${node.width + 10} ${node.height + 10} -5 ${node.height + 10} Z`
    }
};

#1287 Allow class name to be specified in node layout properties

The node layout properties, specified using the enableNodeLayout field in the canvas config, can now contain a className field. This will be added to the container group <g> DOM element for the node when the canvas is displayed, along with other classes that might have been specified for the node in the app_data.ui_data.class_name field of the node.

This means, if you want to specify a single class for all your nodes you can use the className field instead of specifying classes in the node in the pipeline flow document or through the canvas controller API.

In addition, since node layout properties are returned from the layoutHandler a className field can be specified in the returned object which will allow your application to set a different class name to individual nodes based on some criteria, such a a field in the node data.

An example of this usage can be seen in the Explain sample application in the Test Harness, where a value from the application data within each node object in the pipelineFlow can control the class name applied to each node on the canvas.

Common-Properties

#1197 Show error for invalid number in Numberfield and Spinner controls

The Numberfield control is an input field for numbers. However, characters e, E, +, - can be entered into this control. When users enter an invalid number, common-properties will display an error message and the property value will not be updated until the error is fixed.

#1294 Improve node properties undo/redo tooltip to include node name

The default undo/redo tooltip for the save-properties actions now follows this format: Undo: Save {node_name} node properties.

#1245 Add support for a new containerType for tearsheet in common-properties

To display common properties in a tearsheet, specify Tearsheet in the propertiesConfig.containerType

#1278 Sticky primary tabs in tearsheet

Primary tabs will become sticky inside a Tearsheet (containerType=”Tearsheet”). This means the tabs will stay in position when the user scrolls the content below the tabs up and down.

#1260 Add support for left nav when common-properties in tearsheet or modal

Common properties Subtabs will become a leftnav when displayed in containerType=”Tearsheet”

#1307 Expression builder should only quote field if it contains special characters

Expression builder fields will be inserted with quotations, only if the field name contains special characters. These characters include: space, digits, $, - and underscores

#1242 Support tooltip in password control

The text for tooltips shown for the show and hide icons on the password control, can now be customized.

Example of customized 'hide password' icon tooltip:

Example of customized 'show password' icon tooltip:

Issues Resolved

#1313 Change build tag from patch to minor (#1314)
#1311 Node label editing mode doesn't appear after editing link label (#1312)
#1307 Expression builder should only quote field if it contains special characters (#1308)
#1303 Unable to scroll field-picker table (#1304)
#1267 Fix missing translation in unit tests (#1305)
#1260 Add support for left nav when common-properties in tearsheet or modal (#1293)
#1301 enableSnapToGridX/Y causing resize node issues possibly (#1302)
#1299 Fix detached links issues (#1300)
#1296 Many operations are slow when nodes contain large amounts of parameter data (#1297)
#1294 Improve node properties undo/redo tooltip to include node name (#1295)
#1291 Updating Translations (#1292)
#1276 Handle spacing in common properties (#1277)
#1281 Accessibility: Support context menu option to enter edit mode f… (#1282)
#1278 Hide close button if footer buttons visible in tearsheet (#1286)
#1289 Cancel old build jobs when new commit is pushed to a PR (#1290)
#1287 Allow class name to be specified in node layout properties (#1288)
#1278 Sticky primary tabs in tearsheet (#1285)
#1283 Minor chnages to sample apps (#1284)
#1259 Invert colors in tearsheet container (#1261)
#1268 Performance of resize of nodes with multiple link lines should … (#1273)
#1246 Unable to set oneofselect in MSE when reusing previous selection (#1264)
#1242 Support tooltip in password control (#1272)
#1270 Icons from detached-links directory incorrectly referenced from… (#1271)
#1235 Multiselect bug; unable to see rows at the bottom (#1236
#1265 Fix expression test error (#1266)
#1262 Fix decoration label callback (#1263)
#1197 Show error for invalid number in Numberfield and Spinner controls (#1198)
#1245 Add new containerType for Tearsheet in common properties (#1248)
#1255 Allow decoration label text to be provided by callback (#1256)
#1257 Allow node outline and node selection highlight to be provided by callback (#1258)
#1253 Add a 'card node' sample app (#1254)
#1249 Unwanted assistive text appearing in toolbar drop down (#1250)
#1243 Ghost image positioned incorrectly relative to mouse cursor on latest Chrome version (#1244)

release_12.23.2

Feature Enhancements

None, just bug fixes.

Issues Resolved

#1238 SetCanvas canvas-controller API should support styles for nodes, comments and links (#1239)
#1131 Make toolbar size customizable (#1143)
#1233 With markdown in comments, the return (enter) key inserts extra blank line with numbered (#1234)
#1231 Self referencing line sometimes goes over the top and sometimes… (#1232)
#1221 Completing comment edit should not remove selection state (#1227)

release_12.23.1

Feature Enhancements

None, just bug fixes.

Issues Resolved

#1228 Zoom not working on Firefox (#1229)
#1225 Improve default settings for multi-line labels (#1226)

release_12.23.0

Feature Enhancements

Common-Canvas

#1207 Allow enter/return key to finalizes text entry into a label decoration

The host application can now specify that, if the user presses the return/enter key while editing either a node label or a label decoration, the editing will be completed and the newly entered text saved: the same as if the user had clicked on the canvas background to complete the editing.

The function can be switched on as follows:

For node labels, in the canvas config object, the enableNodeLayout field called labelAllowReturnKey can be set to the string "save" like this:

const config = {
    enableNodeLayout: {
        labelAllowReturnKey: "save"
    }
}

For label decorations, in the decoration object, the field label_allow_return_key can be set to the string "save" like this:

const decoration = {
    "id": "123",
    "label": "Some text",
    "label_editable": true,
    "label_allow_return_key": "save"
};

#1185 Implement recommended icon-display and mouse behaviors for canvas

The display of the mouse cursor icons has been changed to comply with the canvas recommendations here:
https://pages.github.ibm.com/cdai-design/pal/patterns/canvas/cursor-settings/

In addition, a new interaction setting called “Carbon” has been added for the enableInteractionType config setting in the common-canvas config object. This setting implements the pan and region-select behaviors specified in the canvas recommendations here:
https://pages.github.ibm.com/cdai-design/pal/patterns/canvas/cursor-settings/

Thus, setting enableInteractionType to “Carbon” will provide the following behavior:

• A mouse down and drag gesture on the canvas background will initiate a “region select” where a rectangle appears which can be used to select multiple canvas objects.
• If the user wants to pan the canvas (up/down or left/right) they must press and hold the space bar and then mouse down and drag on the canvas background.

Here are the details: https://github.com/elyra-ai/canvas/wiki/2.1-Config-Objects#enableinteractiontype
By the way, the “Trackpad” setting for the enableInteractionMode config field is now deprecated and will be removed in a future release.

Common-Properties

#1215 Support info icons in table headers

Table header descriptions, if provided, were previously displayed in the tooltip as part of the label tooltip. In this new release, the description will now appear in a tooltip by clicking on the info icon next to the label.

Before:

After:

#1217 Support info icons in expression builder functions and values table headers

Following the changes from #1215, the expression builder functions and values tables now support displaying the description in a tooltip by clicking on the info icon.

The default for “Fields” and “Recently Used” is an empty description. No info icon will be displayed.

To set a description for these, the application will need to override their resource files for the keys "expression.field.column.description" and "expression.value.column.description".

To set the description for fields, add a description to the expression info for the corresponding label. See the expression info schema https://github.com/elyra-ai/pipeline-schemas/blob/main/common-canvas/expression/expression-info-v3-schema.json#L99

Issues Resolved

#1223 Maintain current default setting for enableInteractionType in c… (#1224)
#1218 Comment link IDs should be persisted when getPipelineFlow is called (#1220)
#1217 Support info icons in expression table headers with custom labels (#1219)
#1215 Support info icons in table header labels (#1216)
#1185 Implement recommended icon-display and mouse behaviors for canvas (#1190)
#1214 Fix Tearsheet to render on visibility condition (#1212)
#1210 Added padding for empty table placeholder text (#1211)
#1207 Allow enter/return key to finalizes text entry into a label dec… (#1208)
#1205 Edit icon for link name translates very far away upon long name (#1206)
#1188 Labels are missing in toggle control (#1189)
#1203 CanvasController.setNodeProperties() should cause layoutHandler callback to be called (#1204)
#1199 Context menu should appear when ellipsis button clicked on Firefox (#1200)
#1201 Set controls in tearsheet panel (#1202)

release_12.22.0

Issues Resolved

#1192 Palette-flyout-catgories height has invalid calculation syntax (#1193)
#1194 Fix calculation syntax in common-properties (#1195)
#1165 Add tearsheet group type - bug fixes (#1166)

release_12.21.0

Feature Enhancements

Common-Canvas

No features, just bug fixes.

Common-Properties

#1165 Add tearsheet group type

A new panel option called tearsheetPanel has been added as a group type in uihints. This is a panel that renders a tearsheet modal which can contain any content provided. The modal can be activated from the host application via the properties controller.

#1183 Ability to translate return type of function in Expression Builder

A new config option called return_type_label has been added in expression function_info section. This is an optional field of type resource_definition. Values in the Return column in Functions table will be read from return_type_label. If a label is not provided it defaults to the return_type.

Issues Resolved

#1165 Add tearsheet group type (#1166)
#1183 Translate return type of function in Expression Builder (#1184)
#1181 Allow primary panels to be hidden (#1182)
#1179 Dragging cursor over the Return to previous flow button should activate the button (#1180)
#1177 Checkboxset long value labels alignment (#1178)
#1174 Password control shows warnings in console (#1175)
#1170 Display labels for empty fields and values table in expression builder (#1171)

release_12.20.0

Feature Enhancements

Note: We had some build issues which prevented 12.17.0, 12.18.0 and 12.19.0 from being published so this is the follow on release from release 12.16.0.

Build

#1155 Support node version 16.x in Elyra Canvas

Elyra Canvas now supports node versions 14.x and 16.x.

Common-Canvas

#1152 Allow alternative image to be displayed in the palette instead of regular image

The nodes within the palette JSON can now contain an optional additional image called palette_image. This can be used to specify an alternative image for the node that will be displayed in the palette in preference to the one that is displayed when the node appears on the canvas.   

This feature is really only of any use when your SVG node icons (that are displayed in-line) contain elements that reference other elements (for example <mask>s)  in the <defs> element of the SVG icon because opening and closing of categories in the palette can cause those images to flicker.

This optional field, called palette_image, can be specified inside the app_data.ui_data field of the node in the palette JSON:

    {
         "id": "",
         "type": "execution_node",
         "op": "sort",
         "app_data": {
             "ui_data": {
                "label": "Sort",
                "description": "Sorts data",
                "image": "/images/sort.svg",
                "palette_image": "/images/sort_palette.svg",
                ...
                ...
             }
        }
     }

#636 Add a new method to calculate default comment position in canvas…

A new method has been added to the canvas controller called getNewCommentPosition() which will return the position of where a new comment should be added to the canvas.

Common-Properties

#1150 Show warning in selectcolumn control when invalid value is selected

For "selectcolumn" and "selectcolumns" controls, when the displayed value doesn't exist in the dropdown options, common-properties will show the invalid value with a warning, like this:

#1162 Show line numbers in code and expression controls

Line numbers are now shown, like this:

#1160 Enable/disable summary panel OK button from properties controller

Some new methods have been added to the properties controller to allow the "OK" button in wide flyout panels to be enabled or disabled, as follows:

/**
* Set the "OK" button in Wide Flyout to disabled (true) or enabled (false) for given summary panel
* @param panelId {name: panel.id}
* @param wideFlyoutPrimaryButtonDisable boolean
*/
setWideFlyoutPrimaryButtonDisabled(panelId, wideFlyoutPrimaryButtonDisable)

/**
* @param panelId {name: panel.id}
*/
getWideFlyoutPrimaryButtonDisabled(panelId)

#1106 Add toggle control to use in Modeler modeling node overrides

A new Toggle control has been created following the same checkbox pattern (error & warning checking, disabled, hidden....) except we are using toggle component from Carbon (small size in tables and medium size for the rest )

Issues Resolved

#1106 Add toggle control to use in Modeler modeling node overrides (#1119)
#1168 Update CodeMirror CSS (#1169)
#636 Add a new method to calculate default comment position in canvas… (#1167)
#1160 Enable/disable summaryPanel OK button from properties controller (#1161)
#1162 Show line numbers in code and expression controls (#1163)
#1150 Show warning in selectcolumn control when invalid value is selected (#1151)
#1158 Translations[08/19/22] (#1159)
#1145 Have a way to differentiate UPDATE_PROPERTY propertyListener fr… (#1157)
#1155 Support node version 16.x in elyra-canvas (#1156)
#1152 Allow alternative image to be displayed in the palette instead of regular image (#1153)
#1148 Use transparent background for detached-canvas sample app nodes (#1149)