Home

Welcome to the canvas Wiki

canvas wiki contains three main areas:

• Common Canvas - This is the reusable canvas functionality which is packaged into an npm module and deployed on the whitewater npm registry. It provides a way for an application to display a flow of data operations to the user and to allow the user to interact with the display to modify the flow. Common canvas is a react component which can be imported and is assisted by a regular JavaScript class called ObjectModel which handles the internal data model of the flow. You can see the documentation on how to use common canvas in your application.

• Common Properties - This is the reusable canvas functionality which is packaged into an npm module and deployed on the whitewater npm registry.

• The Test Harness - This provides a node.js app which serves a UI which allows you to test the common canvas and common properties components.

Installation

You'll need to build your application with common canvas. Assuming you're setup to use Artifactory's npm, follow these steps:

• common-canvas requires react, react-dom, react-intl, and react-redux libraries to be installed. See peerDependencies for versions requirements.

Use the command:

npm install @elyra-ai/canvas --save-dev

or add this to your package.json file and run

npm install

Localization

You must wrapper <CommonCanvas> and <CommonProperties> in an <IntlProvider> object.

If you want to display translated text, the sample code below shows how <IntlProvider> should be initialized. Your code can set this.locale to indicate which language should override the default which, in this sample code, is set to english en. The default locale will be used if this.locale is set to a language which is not currently supported.

If you want to provide translations for your own application's text you can import your own bundles and load them into the this.messages object along with the common canvas and common properties text. If you do this you will have to move <IntlProvider/> so that it wrappers your React objects as well as <CommonCanvas/> and/or <CommonProperties>.

import { IntlProvider } from "react-intl";
import CommandActionsBundles from "@elyra-ai/canvas/locales/command-actions/locales";
import CommonCanvasBundles from "@elyra-ai/canvas/locales/common-canvas/locales";
import CommonPropsBundles from "@elyra-ai/canvas/locales/common-properties/locales";
import PaletteBundles from "@elyra-ai/canvas/locales/palette/locales";
import ToolbarBundles from "@elyra-ai/canvas/locales/toolbar/locales";

class App extends React.Component {

constructor() {
    this.locale = "en";
    this.messages = this._getMessages(
        this.locale,
        [CommandActionsBundles, CommonCanvasBundles, CommonPropsBundles,
         PaletteBundles, ToolbarBundles]
    );
}

_getMessages(locale, bundles) {
  const messages = {};
  for (const bundle of bundles) {
    Object.assign(messages, bundle[locale]);
  }
  return messages;
}

render() {
  <IntlProvider locale={this.locale} defaultLocale="en" messages={this.messages}>
    {Add your <CommonCanvas/> or <CommonProperties/> element here.}
  </IntlProvider>
}

Notes

When building your application you will need to load fonts and override styles can be found here: https://github.com/elyra-ai/canvas/wiki/5.0-Styling