Jupyterlab 2 compatibility updates

Author: Danyaal Masood

README.md

@@ -234,7 +234,7 @@ A diagram showing roughly how the different components interact is shown below.
 
 JupyterLab Component:
 
-- [JupyterLab](https://jupyter.org/) (v1.0.0 or compatible) - *BSD 3-Clause*
+- [JupyterLab](https://jupyter.org/) (v2.0.0 or compatible) - *BSD 3-Clause*
 - [jupyterlab_toastify](https://www.npmjs.com/package/jupyterlab_toastify) - *BSD 3-Clause*
 
 IPython Component:

autoplot-display/CHANGELOG.md

@@ -1,3 +1,8 @@
+0.2.0
+=====
+
+- Compatibility changes for JupyterLab 2
+
 0.1.1
 =====
 

autoplot-display/package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mangroup/jupyterlab-autoplot-display",
-	"version": "0.1.1",
+	"version": "0.2.0",
 	"description": "The JupyterLab component for the Autoplot JupyterLab extension.",
 	"license": "BSD-3-Clause",
 	"keywords": [
@@ -24,11 +24,11 @@
 		"watch": "tsc -w"
 	},
 	"dependencies": {
-		"@jupyter-widgets/jupyterlab-manager": "^1.1.0",
-		"@jupyterlab/application": "^1.0.0",
-		"@jupyterlab/mainmenu": "^1.2.8",
-		"@jupyterlab/notebook": "^1.2.9",
-		"jupyterlab_toastify": "^4.0.0"
+		"@jupyter-widgets/jupyterlab-manager": "^2.0.0",
+		"@jupyterlab/application": "^2.2.6",
+		"@jupyterlab/mainmenu": "^2.0.0",
+		"@jupyterlab/notebook": "^2.0.0",
+		"jupyterlab_toastify": "^4.1.2"
 	},
 	"devDependencies": {
 		"@typescript-eslint/eslint-plugin": "3.4.0",

autoplot-display/package.json

@@ -35,7 +35,7 @@ export function embedImage(tracker: INotebookTracker, event: CustomEventInit<{ s
 	NotebookActions.changeCellType(notebook, 'markdown');
 
 	const cell = tracker.activeCell;
-	cell.model.value.text = `![${imageAlt}](${dataUrl})`;
+	cell!.model.value.text = `![${imageAlt}](${dataUrl})`;
 
 	// run the cell to render it
 	void NotebookActions.run(notebook);

autoplot-display/src/handlers/embedImage.ts

@@ -7,7 +7,7 @@ import { OutputView } from '@jupyter-widgets/jupyterlab-manager/lib/output';
 import { embedImage } from './handlers/embedImage';
 import { toastHandler } from './handlers/toasts';
 import { AutoplotDisplayModel } from './model';
-import {AutoplotButton, DtaleButton} from './toolbar';
+import { AutoplotButton, DtaleButton } from './toolbar';
 import { WidgetsByNotebook, WidgetManager } from './utils/WidgetManager';
 import { VERSION } from './version';
 

autoplot-display/src/index.ts

@@ -1,9 +1,9 @@
 import { NotebookPanel } from '@jupyterlab/notebook';
 import { OutputArea } from '@jupyterlab/outputarea';
 
-import { UUID } from '@phosphor/coreutils';
-import { Signal } from '@phosphor/signaling';
-import { Panel } from '@phosphor/widgets';
+import { UUID } from '@lumino/coreutils';
+import { Signal } from '@lumino/signaling';
+import { Panel } from '@lumino/widgets';
 
 /**
  * The namespace for the `AutoplotPanel` class statics.

autoplot-display/src/panel.ts

@@ -2,7 +2,7 @@ import { ToolbarButton } from '@jupyterlab/apputils';
 import { DocumentRegistry } from '@jupyterlab/docregistry';
 import { NotebookPanel, NotebookActions, INotebookModel } from '@jupyterlab/notebook';
 
-import { IDisposable } from '@phosphor/disposable';
+import { IDisposable } from '@lumino/disposable';
 
 /**
  * Content of the new cell that will be added to the top of the notebook.
@@ -42,7 +42,7 @@ export class AutoplotButton implements DocumentRegistry.IWidgetExtension<Noteboo
 
 		const button = new ToolbarButton({
 			className,
-			iconClassName: 'fa fa-line-chart',
+			iconClass: 'fa fa-line-chart',
 			onClick,
 			tooltip: 'Add an autoplot display panel to this notebook',
 		});
@@ -81,7 +81,7 @@ export class DtaleButton implements DocumentRegistry.IWidgetExtension<NotebookPa
 
 		const button = new ToolbarButton({
 			className,
-			iconClassName: 'fa fa-table',
+			iconClass: 'fa fa-table',
 			onClick,
 			tooltip: 'Add a dtale display panel to this notebook',
 		});

autoplot-display/src/toolbar.ts

@@ -193,7 +193,8 @@ export class WidgetManager {
 					this.buildWidget(outputArea, notebook, modelId, path);
 				} else {
 					// notebook is running but not open -> define callback
-					notebook.activated.connect(() => this.buildWidget(outputArea, notebook, modelId, path));
+					// @ts-ignore
+					notebook.activated.connect(() => this.buildWidget(outputArea, notebook, modelId, path)); // eslint-disable-line
 				}
 			} else {
 				// no notebook with matching path open -> dispose widget and delete record

autoplot-display/src/utils/WidgetManager.ts

@@ -5,7 +5,7 @@
  */
 export namespace VERSION {
 	export const title = 'Autoplot Display';
-	export const version = '0.1.1';
+	export const version = '0.2.0';
 	export const module = '@jupyter-widgets/autoplot-display';
 
 	export const modelName = 'AutoplotDisplayModel';

autoplot-display/src/version.ts

@@ -6,6 +6,14 @@
 	background-image: var(--jp-icon-autoplot);
 }
 
+.autoplotButton .jp-Icon {
+    color: var(--jp-layout-color4);
+}
+
+.dtaleButton .jp-Icon {
+    color: var(--jp-layout-color4);
+}
+
 /* shrink the whitespace to the right of the plot */
 .autoplot-panel .jp-OutputArea-prompt {
 	width: 3px;