Skip to content

release_12.31.0
Compare
Choose a tag to compare
@tomlyn tomlyn released this 16 Jun 22:58
· 378 commits to main since this release
release_12.31.0
b2f8d8f
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.

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:

image

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

image

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

image

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:

image

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

image

And when the overflow icon is clicked this would appear:

image

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:

image

And this, if the overflow menu icon is clicked:

image

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" }
            ];
        }
        return defaultMenu;
    }

which would display this:

image

Of course, you would have to implement the my_format action in the editActionHandler callback function so that clicking the action in the menu actually does something.

You can provide an icon for your own actions (if you want one) by specifying an icon field, like this:

    import { DataFormat16 } from "@carbon/icons-react";
    …
    … 
    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", icon: (<DataFormat16 />) }
            ];
        }
        return defaultMenu;
    }

which would show this:

image

And if you wanted to promote Format to be a likely action displayed in the toolbar, you would add a toolbarItem field like this:

    import { DataFormat16 } from "@carbon/icons-react";…… contextMenuHandler(source, defaultMenu) {
     ...
    ...
    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", icon: (<DataFormat16 />), toolbarItem: true }
            ];
        }
        return defaultMenu;
    }

which would show:

image

Notes:

  1. You can play with the new context toolbar in the test harness. To switch it on you need to click the Common Canvas (hamburger) icon in the top right of the UI and scroll down to the Operational section and switch it on. Then choose one of the sample applications or select a canvas from the drop down list .
    image
  2. Common-canvas does not show any dividers in the toolbar part of the context toolbar. It only shows them in the overflow menu part of the toolbar if specified. Any unnecessary dividers are stripped out.
  3. If you specify the toolbarItem: true for an action you must also specify an icon to appear in the toolbar otherwise the space in the toolbar will be blank.
  4. Actions with toolbarItem: true can be anywhere in the returned array. They will be collected together into the toolbar by common-canvas.
  5. The enable field of an action, which is currently supported for context menus, can also be specified (as false) to disable actions in the context toolbar.
  6. The positioning of the context toolbars for nodes is top-center for "Vertical" nodes (when enableNodeFormatType === "Vertical") and top-right for horizontal nodes (when enableNodeFormatType === "Horizontal"). These defaults can be overridden by specifying the contextToolbarPosition field of the nodeLayout object in the canvas config or, on a node by node basis, in the layout object returned from the layoutHandler callback function.contextToolbarPosition can be set to either "topCenter" or "topRight".

Common-Properties

#1472 Option to view sidepanel categories in tabs

A new config option called categoryView was added in propertiesConfig object. Please note, this option is only valid for common-properties in right flyout mode.

    categoryView (string) - View categories in right-flyout. Can be "accordions" or "tabs". default: "accordions".

Specifying categoryView="accordions" displays this:

image

Specifying categoryView="tabs" displays this:

image

#1487 Show previous value in propertyListener UPDATE_PROPERTY action

After the user updates a property value, the propertyListener(data) is called with the UPDATE_PROPERTY action. The data object now has a new field calledpreviousValue which contains the value before the user's change.

image

Issues Resolved

#1493 Display context toolbar with overflow menu (#1494)
#1495 Fixed resizing column causes table size to lock when followed by changing editorSize (#1496)
#1472 Option to view right flyout categories in tabs (#1473)
#1491 Support react v18 in peerDependencies of elyra-canvas (#1492)
#1489 notificationConfig is ignoring the enable attribute (#1490)
#1487 Show previous value in PropertyListener UPDATE_PROPERTY action (#1488)
#1485 Fixed when rows=-1 in tearsheet the max height isn't calculated correctly (#1486)
#1482 Added enableResize config option in test harness (#1483)
#1478 Open each category in palette by default at start (#1479)
#1476 Allow tips for palette categories and nodes to be switched on/o… (#1477)
#1480 Input fields on renaming links/nodes to empty string remains in an active state (#1481)

Assets 2
Loading