Skip to content

Palette

Introduction

Common Canvas can display a palette which appears in the left flyout panel. The palette can display a set of palette nodes (sometimes called node templates) split into different categories.

The user can drag any of the palette nodes from the palette onto the canvas to create a new instance of a node on the canvas. The user can then join nodes together by creating link lines.

Alternatively, the user can double click node templates to add, and automatically join, them to the current flow. When a palette node is double clicked, Common Canvas will look for the node at the end of the current flow of nodes and will add the node to the canvas to the right of the end node in the flow. Common Canvas will also automatically join the nodes together by creating a new link line.

Populating the palette

The host application must tell Common Canvas what node templates and categories it wants the user to see in the palette. This is done by providing Common Canvas with a palette (JavaScript) object by calling the canvas-controller setPipelineFlowPalette(palette) method. The palette object is often read from a JSON document stored in the host application’s repository or it can be automatically generated.

The palette object should conform to the palette schema. The host application can ensure that palette conforms to the schema by switching on schema validation in the canvas configuration.

Palette configuration

There are a number of configuration options that control the palette that are specified in the canvas config object:

Palette operation

The palette contents can be manipulated calling these canvas-controller palette methods

The palette can be opened and closed using these canvas-controller operational methods

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.