Skip to content

Commit

Permalink
#1976 Miscellaneous docs changes (#1983)
Browse files Browse the repository at this point in the history
Signed-off-by: CTomlyn <[email protected]>
  • Loading branch information
tomlyn authored May 23, 2024
1 parent 6b0842b commit 4302343
Show file tree
Hide file tree
Showing 7 changed files with 13 additions and 6 deletions.
2 changes: 1 addition & 1 deletion docs/pages/01.01.01-nodes.md
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ Here's an example of a node using a JSX object which is an icon imported from th

## Node positioning

Nodes are positioned at the x/y coordinate from the canvas origin of the node's top-left corner. The x/y corrdinates are stored in the node object from the pipeline flow.
Nodes are positioned at the x/y coordinate from the canvas origin of the node's top-left corner. The x/y coordinates are stored in the node object from the pipeline flow.

## Ports

Expand Down
13 changes: 10 additions & 3 deletions docs/pages/01.06-notification-panel.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,19 @@

The Notificaiotn Panel allows the application to display error, warning, success and info messages to the user.

The canvas toolbar can provide a button to display a [sub-panel](01.05-toolbar.md/#sub-panel) that contains the notifications. The button will be added to the far right side of the toolbar whenever a [Notification Config](03.02.03-notification-config.md) is specified to the `<CommonCanvas>` React object.
<img src="../assets/cc-notification-panel.png" width="350" />

The notifications button in the toolbar indictaes the state and number of the messages in the panel. If any message in the array is of type 'warning', a notifications icon in warning (yellow) state will be shown. If any message in the array is of type 'error', a notifications icon in error (red) state will be shown. A number will be shown within the notifications icon to indicate the number of messages.
The canvas toolbar provides a button to display a [sub-panel](01.05-toolbar.md/#sub-panel) that contains the notifications. The button will be added to the far right side of the toolbar whenever a [Notification Config](03.02.03-notification-config.md) is specified to the `<CommonCanvas>` React object.

The notifications button in the toolbar indicates the state and number of the messages in the panel.

A colored circle will be shown to indicate the highest severity message to be shown in the notification panel: info/blue, success/green, warning/yellow or error/red. Also, a number is displayed within the icon to indicate the number of current messages.

<img src="../assets/cc-notif-icon-info.png" width="75" />
<img src="../assets/cc-notif-icon-success.png" width="79" />
<img src="../assets/cc-notif-icon-warning.png" width="75" />
<img src="../assets/cc-notif-icon-error.png" width="77" />

<img src="../assets/cc-notification-panel.png" width="350" />



Binary file added docs/pages/assets/cc-notif-icon-error.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/pages/assets/cc-notif-icon-info.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/pages/assets/cc-notif-icon-success.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/pages/assets/cc-notif-icon-warning.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions docs/pages/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,11 @@ display connected nodes representing any kind of operations.
* Is fast to get running - and **easy to customize** - with extensive customization capability.
* Delivers a JSON powered **properties management** component to allow easy, no-code handling of
mulltiple properties windows - for when you have a multitude of node types each with their own range of properties.
* Is delivered as a package from the [**NPM registry**](https://www.npmjs.com/package/@elyra/canvas)
* Conforms to the [**IBM Carbon**](https://carbondesignsystem.com/all-about-carbon/what-is-carbon/) visual design language - and therefore plugs in easily to any application wishing to follow the Carbon standards including dark mode and light mode themes.
* Delivers built-in **accessibility** so there's no need to worry about keyboard navigation, accessible colors, screen reader integration, etc.
* Is translated into **12 languages**.
* Is the mainstay of several IBM products/applications.
* Is delivered as a package from the [**NPM registry**](https://www.npmjs.com/package/@elyra/canvas)

## Try Elyra Canvas

Expand All @@ -44,7 +44,7 @@ The elyra-ai/canvas repo contains three main modules:

Common Properties is a React component and has an associated properties controller object.

* [Test Harness](https://github.com/elyra-ai/canvas/tree/master/canvas_modules/harness#test-harness) - This is a node.js application that wrappers `<CommonCanvas>` and `<CommonProperties>`. Although it is primarily for testing it does provides a UI that:
* [Test Harness](https://elyra-canvas-test-harness.u20youmx4sm.us-south.codeengine.appdomain.cloud/#/) - This is a node.js application that wrappers `<CommonCanvas>` and `<CommonProperties>`. Although it is primarily for testing it does provides a UI that:
* Displays a set of sample applications
* Is a sandbox to try out different Elyra Canvas features.

Expand Down

0 comments on commit 4302343

Please sign in to comment.