Installation¶

NPM Install¶

You’ll need to build your application with Elyra Canvas.

Use the command:

npm install @elyra/canvas --save-dev

or add this to your package.json file:

  "@elyra/canvas": "x.x.x"

where x.x.x is the latest build and then run:

npm install

Peer dependencies¶

Make sure the peer dependency libraries, specified in the package.json, file are installed as part of the application. The application can use whichever versions of the peer dependencies it wants from those specified.

Localization¶

Elyra Canvas text is translated into multple languages. See the Localization page for details on how to include that text in the application. In addition, the text can be customized by the application.

Styling¶

Elyra Canvas uses components, colors, styles and fonts from the Carbon Design System.

More development information about Carbon components can be found here: https://carbondesignsystem.com/developing/frameworks/react#getting-started

When building an application there are two possible approaches to styling:

Quick Start using CSS or
Styling using SASS to allow the application to override colors, styles, etc.

In the examples below, we refer to files in the Elyra Canvas Test Harness which behaves like as a sample application using Common Canvas and Common Properties.

Quick Start using CSS¶

If you just want to get up and running and don’t want to customize styles in the interface, just import this regular CSS file:

@elyra/canvas/dist/styles/common-canvas.min.css

Styling using SASS¶

If you want to use the full power of SASS for styling to override default styling in Common Canvas or Common Properties then you must include this @forward in your SCSS:

@forward "@carbon/react" with (
    $font-path: "/fonts/plex",
    $use-per-family-plex: true
);

For an example of this, refer to the Elyra Canvas Test Harness files:

harness.scss and
carbon.scss

Additionally, to get the IBM Plex fonts to display correctly you must complete the steps in the Loading Fonts section below.

When building:

use autoprefixer
if using webpack, make sure to include the following under the sass-loader
```
    options: { includePaths: ["node_modules"] }
```
You can refer to the test harness webpack.config.dev.js for an example.

Loading Fonts¶

To get the correct display of fonts in Elyra Canvas, the application’s build process should copy the IBM Plex font files from /node_modules/@ibmto a ./fonts folder and the following should be added to the SCSS for the application:

@use "@ibm/plex-sans-condensed/scss" as PlexSansCondensed with (
    $font-prefix: "/fonts/plex-sans-condensed"
);

@use "@ibm/plex-sans/scss" as PlexSans with (
    $font-prefix: "/fonts/plex-sans"
);

@use "@ibm/plex-serif/scss" as PlexSerif with (
    $font-prefix: "/fonts/plex-serif"
);

@use "@ibm/plex-mono/scss" as PlexMono with (
    $font-prefix: "/fonts/plex-mono"
);

@include PlexSansCondensed.all();

@include PlexSans.all();

@include PlexSerif.all();

@include PlexMono.all();

You can see an example of this in the common.scss file for the Elyra Canvas Test Harness.

The Gruntfile that builds the Test Harness contains the following, that ensures the fonts are copied from /node_modules/@ibm to the <carbon fonts folder>:

copy: {
    fonts: {
        files: [{
            expand: true,
            flatten: false,
            cwd: "./node_modules/@ibm",
            src: ["plex-*/fonts/**"],
            dest: ".build/fonts"
        }]
    }
}
...
var buildTasks = ["copy:fonts"];

3rd party styling¶

If you intend to configure Common Properties to use the, now superseded, React-virtualized tables by setting enableTanstackTable configuration property to false then you will need to also include the react-virtualized styles:

react-virtualized/styles.css