Palette Customization

The Palette’s appearance and behaviour can be customized using configuration options and various canvas controller methods.

Populating the palette

The palette definition is a JavaScript object consisting of an array of category objects with each category containing an array of node templates (node_types).

This object can be specified to Common Canvas by calling the canvas-controller method:

   canvasController.setPipelineFlowPalette(palette);

The palette object is often read from a JSON document stored in the host application’s repository or it can be automatically generated.

JSON Schema

The palette object must conform to the palette schema.

The host application can ensure that the palette conforms to the schema by switching schema validation to true in the canvas configuration. If the palette is not valid, errors will be displayed in the debugger console.

Palette configuration

The following canvas config options can be specified to control aspects of the palette:

• enablePaletteLayout - show or hide the palette
• enableNarrowPalette - display a narrow palette or nothing when the paletete is closed
• enableSingleClickAddFromPalette - allow a single-click on a palette node to automatically add it to the canvas
• enableAutoLinkOnlyFromSelNodes - controls the nodes to which automatically-added nodes are linked.
• enablePaletteHeader - allows the application to add additional content to the palette

Palette methods

The Canvas Controller provides numerous customization methods that can be used to customize the palette contents. There are also some operational methods that can be used to open, close and query the state of the palette.

Example

The “Flows” sample app in the test harness as its own palette. The files for that sample app here: https://github.com/elyra-ai/canvas/tree/main/canvas_modules/harness/src/client/components/custom-canvases/flows This folder contains all the files that make up the Flows sample app. The flows-palette.json file in the folder can be studied to see how it results in the palette displayed.

Search

The user can enter a search string into the Search field at the top of the palette. The behavior is as follows:

1. When the search field is empty, the palette shows categories which can be expanded to show the node templates within the expanded category.
2. As the user enters characters into the search field, Common Canvas immediately searches through the node template labels, node template descriptions and category labels for the characters entered and finds a subset of the node templates that match the search string. Common Canvas then replaces the category-based view of the palette with a list of node templates that match the search criteria. In this view the node templates also include the node description under the node label.
3. The search is case insensitive.
4. The search text is highlighted wherever it appears in the labels, descriptions or category labels.
5. Common Canvas uses a ranking algorithm to order the display of node templates so those most relevant to the search text are positioned at the top of the list. The ranking algorithm puts more weight on those node templates where the search text appears in the label than if the text appears in the description or the category label.
6. If the user enters words into the search field (separated by spaces), Common Canvas searches for each word separately. Therefore, if say the user entered “data import” into the search field, Common Canvas would find a node with “Import Data” as the label or even a node with a description that said “This node does lots of things and also data can be imported.”
7. Nodes that have text which have hits on multiple words are ranked more highly than node templates whose text only contains one search word.
8. Common Canvas uses a debounce function so that, if the user types the search string very quickly, Common Canvas does not perform multiple searches for each key press but only runs a full search when rapid typing has ended.

Recommendation

According to the schema, node template descriptions are not mandatory in the palette object. However, it is recommended you provide descriptions for each of your node templates. The reason for this is that, the search function searches through node template descriptions, as well as node template labels and category labels. This means you can write your node template descriptions to contain appropriate keywords that a user might search for when looking for a node.

For example, if there is a node template called ‘Import Data’ and that node could import comma-separated files you could add ‘comma-separated’ and ‘csv’ into your description for that node template. If the user entered comma in the search field the ‘Import Data’ node template would be shown in the search results even though comma does not appear in the node template label.