Palette Customization

In Common Canvas, flows can be created by the user dragging (or double-clicking) nodes out of the palette into the flow editor where they can be linked up to other nodes.

Consequently, one of the main features of Common Canvas is that the palette nodes can be specified by the application, allowing users to build flows from a palette of nodes appropriate for the applicaiton’s problem domain. Examining sample applicaitons in the test harness will show that the different applications have their own palettes which are different from each other.

The palette definition is provided to Common Canvas as a JavaScript object consisting of an array of category objects with each category containing an array of node templates (noede_types).

The palette object can be specified to the Common Canvas by the application calling the

   canvasController.setPipelineFlowPalette(palette);

Palette Configuration

The Canvas Config has a number of config options that can be specified.

Palette methods

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

JSON Schema

The structure of the palette object is specified in the palette JSON schema which is here -> https://github.com/elyra-ai/pipeline-schemas/blob/main/common-canvas/palette/palette-v3-schema.json

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.