Migrate to the latest version of canvas

packages/pipeline-editor/package.json

@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@elyra/application": "^1.0.0-rc.1",
-    "@elyra/canvas": "6.1.23",
+    "@elyra/canvas": "8.0.32",
     "@elyra/ui-components": "^1.0.0-rc.1",
     "@jupyterlab/application": "^2.0.2",
     "@jupyterlab/apputils": "^2.0.2",
@@ -56,7 +56,8 @@
     "json-loader": "^0.5.7",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-intl": "^2.3.0",
+    "react-intl": "^3.0.0",
+    "react-redux": "^7.2.0",
     "react-scripts": "3.0.1",
     "uuid": "^3.4.0"
   },

packages/pipeline-editor/src/PipelineEditorWidget.tsx

@@ -46,8 +46,8 @@ import { notebookIcon } from '@jupyterlab/ui-components';
 import { toArray } from '@lumino/algorithm';
 import { IDragEvent } from '@lumino/dragdrop';
 
-import '@elyra/canvas/dist/common-canvas.min.css';
 import 'carbon-components/css/carbon-components.min.css';
+import '@elyra/canvas/dist/common-canvas.min.css';
 import '../style/canvas.css';
 
 import * as React from 'react';
@@ -68,10 +68,6 @@ const NODE_TOOLTIP_CLASS = 'elyra-PipelineNodeTooltip';
 
 const TIP_TYPE_NODE = 'tipTypeNode';
 
-const SAVE_ICON_ID = 'toolbar-icon-save';
-const EXPORT_ICON_ID = 'toolbar-icon-export';
-const CLEAR_ICON_ID = 'toolbar-icon-clear';
-
 const NodeProperties = (properties: any): React.ReactElement => {
   return (
     <dl className={NODE_TOOLTIP_CLASS}>
@@ -115,25 +111,6 @@ export class PipelineEditorWidget extends ReactWidget {
     this.context = props.context;
   }
 
-  themeChanged(isLight: boolean): void {
-    [SAVE_ICON_ID, EXPORT_ICON_ID, CLEAR_ICON_ID].forEach((id: string) => {
-      const element = document.getElementById(id) as HTMLImageElement;
-      if (element) {
-        switch (element.id) {
-          case SAVE_ICON_ID:
-            element.src = Utils.getEncodedIcon(savePipelineIcon, !isLight);
-            break;
-          case EXPORT_ICON_ID:
-            element.src = Utils.getEncodedIcon(exportPipelineIcon, !isLight);
-            break;
-          case CLEAR_ICON_ID:
-            element.src = Utils.getEncodedIcon(clearPipelineIcon, !isLight);
-            break;
-        }
-      }
-    });
-  }
-
   render(): React.ReactElement {
     return (
       <PipelineEditor
@@ -202,9 +179,7 @@ export class PipelineEditor extends React.Component<
     this.canvasController.setPipelineFlowPalette(palette);
     this.widgetContext = props.widgetContext;
 
-    this.toolbarMenuActionHandler = this.toolbarMenuActionHandler.bind(this);
     this.contextMenuHandler = this.contextMenuHandler.bind(this);
-    this.contextMenuActionHandler = this.contextMenuActionHandler.bind(this);
     this.clickActionHandler = this.clickActionHandler.bind(this);
     this.editActionHandler = this.editActionHandler.bind(this);
     this.tipHandler = this.tipHandler.bind(this);
@@ -229,7 +204,6 @@ export class PipelineEditor extends React.Component<
 
   render(): React.ReactElement {
     const style = { height: '100%' };
-    const darkmode = !!document.querySelector("[data-jp-theme-light='false']");
     const emptyCanvasContent = (
       <div>
         <dragDropIcon.react tag="div" elementPosition="center" height="120px" />
@@ -243,7 +217,16 @@ export class PipelineEditor extends React.Component<
       enableInternalObjectModel: true,
       emptyCanvasContent: emptyCanvasContent,
       enablePaletteLayout: 'Modal',
-      paletteInitialState: false
+      paletteInitialState: false,
+      enableInsertNodeDroppedOnLink: true,
+      enableNodeFormatType: 'Horizontal'
+    };
+    const contextMenuConfig = {
+      enableCreateSupernodeNonContiguous: false,
+      defaultMenuEntries: {
+        saveToPalette: false,
+        createSupernode: false
+      }
     };
     const pipelineDefinition = this.canvasController.getPipelineFlow();
     const emptyCanvas = Utils.isEmptyCanvas(pipelineDefinition);
@@ -257,31 +240,31 @@ export class PipelineEditor extends React.Component<
         action: 'save',
         label: 'Save Pipeline',
         enable: true,
-        iconEnabled: Utils.getEncodedIcon(savePipelineIcon, darkmode),
-        iconDisabled: Utils.getEncodedIcon(savePipelineIcon, darkmode)
+        iconEnabled: IconUtil.encode(savePipelineIcon),
+        iconDisabled: IconUtil.encode(savePipelineIcon)
       },
       {
         action: 'export',
         label: 'Export Pipeline',
         enable: !this.state.emptyPipeline,
-        iconEnabled: Utils.getEncodedIcon(exportPipelineIcon, darkmode),
-        iconDisabled: Utils.getEncodedIcon(exportPipelineIcon, darkmode)
+        iconEnabled: IconUtil.encode(exportPipelineIcon),
+        iconDisabled: IconUtil.encode(exportPipelineIcon)
       },
       {
         action: 'clear',
         label: 'Clear Pipeline',
         enable: !this.state.emptyPipeline || !emptyCanvas,
-        iconEnabled: Utils.getEncodedIcon(clearPipelineIcon, darkmode),
-        iconDisabled: Utils.getEncodedIcon(clearPipelineIcon, darkmode)
+        iconEnabled: IconUtil.encode(clearPipelineIcon),
+        iconDisabled: IconUtil.encode(clearPipelineIcon)
       },
       { divider: true },
       { action: 'undo', label: 'Undo' },
       { action: 'redo', label: 'Redo' },
       { action: 'cut', label: 'Cut' },
       { action: 'copy', label: 'Copy' },
       { action: 'paste', label: 'Paste' },
-      { action: 'addComment', label: 'Add Comment', enable: true },
-      { action: 'delete', label: 'Delete' },
+      { action: 'createAutoComment', label: 'Add Comment', enable: true },
+      { action: 'deleteSelectedObjects', label: 'Delete' },
       {
         action: 'arrangeHorizontally',
         label: 'Arrange Horizontally',
@@ -315,17 +298,23 @@ export class PipelineEditor extends React.Component<
 
     return (
       <div style={style} ref={this.node}>
-        <CommonCanvas
-          canvasController={this.canvasController}
-          toolbarMenuActionHandler={this.toolbarMenuActionHandler}
-          contextMenuHandler={this.contextMenuHandler}
-          contextMenuActionHandler={this.contextMenuActionHandler}
-          clickActionHandler={this.clickActionHandler}
-          editActionHandler={this.editActionHandler}
-          tipHandler={this.tipHandler}
-          toolbarConfig={toolbarConfig}
-          config={canvasConfig}
-        />
+        <IntlProvider
+          key="IntlProvider1"
+          locale={'en'}
+          messages={i18nData.messages}
+        >
+          <CommonCanvas
+            canvasController={this.canvasController}
+            contextMenuHandler={this.contextMenuHandler}
+            clickActionHandler={this.clickActionHandler}
+            editActionHandler={this.editActionHandler}
+            tipHandler={this.tipHandler}
+            toolbarConfig={toolbarConfig}
+            config={canvasConfig}
+            notificationConfig={{ enable: false }}
+            contextMenuConfig={contextMenuConfig}
+          />
+        </IntlProvider>
         {commProps}
       </div>
     );
@@ -402,8 +391,6 @@ export class PipelineEditor extends React.Component<
    */
   contextMenuHandler(source: any, defaultMenu: any): any {
     let customMenu = defaultMenu;
-    // Remove option to create super node
-    customMenu.splice(4, 2);
     if (source.type === 'node') {
       if (source.selectedObjectIds.length > 1) {
         // multiple nodes selected
@@ -428,24 +415,6 @@ export class PipelineEditor extends React.Component<
     return customMenu;
   }
 
-  /*
-   * Handles context menu actions
-   * Pipeline specific actions are:
-   *  - Open the associated Notebook
-   *  - Open node properties dialog
-   */
-  contextMenuActionHandler(action: any, source: any): void {
-    if (action === 'openNotebook' && source.type === 'node') {
-      this.handleOpenNotebook(source.selectedObjectIds);
-    } else if (action === 'properties' && source.type === 'node') {
-      if (this.state.showPropertiesDialog) {
-        this.closePropertiesDialog();
-      } else {
-        this.openPropertiesDialog(source);
-      }
-    }
-  }
-
   /*
    * Handles mouse click actions
    */
@@ -460,6 +429,37 @@ export class PipelineEditor extends React.Component<
    * Handles creating new nodes in the canvas
    */
   editActionHandler(data: any): void {
+    if (data && data.editType) {
+      console.log(`Handling action: ${data.editType}`);
+
+      switch (data.editType) {
+        case 'run':
+          this.handleRunPipeline();
+          break;
+        case 'export':
+          this.handleExportPipeline();
+          break;
+        case 'save':
+          this.handleSavePipeline();
+          break;
+        case 'clear':
+          this.handleClearPipeline();
+          break;
+        case 'openNotebook':
+          if (data.type === 'node') {
+            this.handleOpenNotebook(data.selectedObjectIds);
+          }
+          break;
+        case 'properties':
+          if (data.type === 'node') {
+            this.state.showPropertiesDialog
+              ? this.closePropertiesDialog()
+              : this.openPropertiesDialog(data);
+          }
+          break;
+      }
+    }
+
     this.updateModel();
   }
 
@@ -748,25 +748,6 @@ export class PipelineEditor extends React.Component<
     }
   }
 
-  /**
-   * Handles submitting pipeline runs
-   */
-  toolbarMenuActionHandler(action: any, source: any): void {
-    console.log('Handling action: ' + action);
-    if (action == 'run') {
-      // When executing the pipeline
-      this.handleRunPipeline();
-    } else if (action == 'export') {
-      this.handleExportPipeline();
-    } else if (action == 'save') {
-      this.handleSavePipeline();
-    } else if (action == 'clear') {
-      this.handleClearPipeline();
-    } else if (['undo', 'redo', 'delete', 'addComment'].includes(action)) {
-      this.updateModel();
-    }
-  }
-
   componentDidMount(): void {
     const node = this.node.current!;
     node.addEventListener('dragenter', this.handleEvent);

packages/pipeline-editor/src/index.ts

@@ -21,11 +21,7 @@ import {
   JupyterFrontEndPlugin,
   ILayoutRestorer
 } from '@jupyterlab/application';
-import {
-  ICommandPalette,
-  IThemeManager,
-  WidgetTracker
-} from '@jupyterlab/apputils';
+import { ICommandPalette, WidgetTracker } from '@jupyterlab/apputils';
 import { DocumentWidget } from '@jupyterlab/docregistry';
 import { IFileBrowserFactory } from '@jupyterlab/filebrowser';
 import { ILauncher } from '@jupyterlab/launcher';
@@ -53,15 +49,13 @@ const extension: JupyterFrontEndPlugin<void> = {
     ILayoutRestorer,
     IMainMenu
   ],
-  optional: [IThemeManager],
   activate: (
     app: JupyterFrontEnd,
     palette: ICommandPalette,
     launcher: ILauncher,
     browserFactory: IFileBrowserFactory,
     restorer: ILayoutRestorer,
-    menu: IMainMenu,
-    themeManager: IThemeManager | null
+    menu: IMainMenu
   ) => {
     console.log('Elyra - pipeline-editor extension is activated!');
 
@@ -155,16 +149,6 @@ const extension: JupyterFrontEndPlugin<void> = {
       command: commandIDs.submitNotebook,
       rank: -0.5
     });
-
-    const updateTheme = (widget: any): void => {
-      widget.content.themeChanged(themeManager.isLight(themeManager.theme));
-    };
-
-    if (themeManager) {
-      themeManager.themeChanged.connect((): void => {
-        tracker.forEach(widget => updateTheme(widget));
-      });
-    }
   }
 };
 export default extension;

packages/pipeline-editor/src/utils.ts

@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-import { IconUtil } from '@elyra/ui-components';
-import { LabIcon } from '@jupyterlab/ui-components';
 import uuid4 from 'uuid/v4';
 
 import { PIPELINE_CURRENT_VERSION } from './constants';
@@ -148,9 +146,4 @@ export default class Utils {
       this.deletePipelineAppdataField(node, currentFieldName);
     }
   }
-
-  static getEncodedIcon = (icon: LabIcon, darkTheme: boolean): string => {
-    const themedIcon = darkTheme ? IconUtil.colorize(icon, '#f4f4f4') : icon;
-    return IconUtil.encode(themedIcon);
-  };
 }