Add support for ipywidgets (#10606)

* Widgets
* Fixes
* Misc
* Crap
* Include requirejs

Author: DonJayamanne

.vscodeignore

@@ -65,6 +65,7 @@ data/**
 debug_coverage*/**
 images/**/*.gif
 images/**/*.png
+ipywidgets/**
 news/**
 node_modules/**
 obj/**

build/webpack/webpack.datascience-ui.config.builder.js

@@ -181,7 +181,11 @@ function buildConfiguration(isNotebook) {
                     { from: './**/*.png', to: '.' },
                     { from: './**/*.svg', to: '.' },
                     { from: './**/*.css', to: '.' },
-                    { from: './**/*theme*.json', to: '.' }
+                    { from: './**/*theme*.json', to: '.' },
+                    {
+                        from: path.join(constants.ExtensionRootDir, 'node_modules/requirejs/require.js'),
+                        to: path.join(constants.ExtensionRootDir, 'out', 'datascience-ui', bundleFolder)
+                    }
                 ],
                 { context: 'src' }
             ),

package-lock.json

@@ -2968,6 +2968,9 @@
         "@blueprintjs/select": "^3.11.2",
         "@enonic/fnv-plus": "^1.3.0",
         "@istanbuljs/nyc-config-typescript": "^0.1.3",
+        "@jupyter-widgets/base": "^2.0.1",
+        "@jupyter-widgets/controls": "^1.5.2",
+        "@jupyter-widgets/html-manager": "^0.18.3",
         "@nteract/plotly": "^1.48.3",
         "@nteract/transform-dataresource": "^4.3.5",
         "@nteract/transform-geojson": "^3.2.3",
@@ -2993,7 +2996,6 @@
         "@types/glob": "^5.0.35",
         "@types/html-webpack-plugin": "^3.2.0",
         "@types/iconv-lite": "^0.0.1",
-        "@types/jquery": "^1.10.35",
         "@types/jsdom": "^11.12.0",
         "@types/koa": "^2.11.0",
         "@types/koa-compress": "^2.0.9",
@@ -3111,6 +3113,7 @@
         "redux-logger": "^3.0.6",
         "relative": "^3.0.2",
         "remove-files-webpack-plugin": "^1.4.0",
+        "requirejs": "^2.3.6",
         "rewiremock": "^3.13.0",
         "sass-loader": "^7.1.0",
         "serialize-javascript": "^2.1.2",

package.json

@@ -0,0 +1,71 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+'use strict';
+
+/**
+ * Serialize ArraBuffer and ArrayBufferView into a fomat such that they are json serializable.
+ *
+ * @export
+ * @param {(undefined | (ArrayBuffer | ArrayBufferView)[])} buffers
+ * @returns
+ */
+export function serializeDataViews(buffers: undefined | (ArrayBuffer | ArrayBufferView)[]) {
+    if (!buffers || !Array.isArray(buffers) || buffers.length === 0) {
+        return;
+    }
+    // tslint:disable-next-line: no-any
+    const newBufferView: any[] = [];
+    // tslint:disable-next-line: prefer-for-of
+    for (let i = 0; i < buffers.length; i += 1) {
+        const item = buffers[i];
+        if ('buffer' in item && 'byteOffset' in item) {
+            // It is an ArrayBufferView
+            // tslint:disable-next-line: no-any
+            const buffer = Array.apply(null, new Uint8Array(item.buffer as any) as any);
+            newBufferView.push({
+                ...item,
+                byteLength: item.byteLength,
+                byteOffset: item.byteOffset,
+                buffer
+                // tslint:disable-next-line: no-any
+            } as any);
+        } else {
+            // tslint:disable-next-line: no-any
+            newBufferView.push(Array.apply(null, new Uint8Array(item as any) as any) as any);
+        }
+    }
+
+    // tslint:disable-next-line: no-any
+    return newBufferView;
+}
+
+/**
+ * Deserializes ArrayBuffer and ArrayBufferView from a format that was json serializable into actual ArrayBuffer and ArrayBufferViews.
+ *
+ * @export
+ * @param {(undefined | (ArrayBuffer | ArrayBufferView)[])} buffers
+ * @returns
+ */
+export function deserializeDataViews(buffers: undefined | (ArrayBuffer | ArrayBufferView)[]) {
+    if (!Array.isArray(buffers) || buffers.length === 0) {
+        return buffers;
+    }
+    const newBufferView: (ArrayBuffer | ArrayBufferView)[] = [];
+    // tslint:disable-next-line: prefer-for-of
+    for (let i = 0; i < buffers.length; i += 1) {
+        const item = buffers[i];
+        if ('buffer' in item && 'byteOffset' in item) {
+            const buffer = new Uint8Array(item.buffer).buffer;
+            // It is an ArrayBufferView
+            // tslint:disable-next-line: no-any
+            const bufferView = new DataView(buffer, item.byteOffset, item.byteLength);
+            newBufferView.push(bufferView);
+        } else {
+            const buffer = new Uint8Array(item).buffer;
+            // tslint:disable-next-line: no-any
+            newBufferView.push(buffer);
+        }
+    }
+    return newBufferView;
+}

src/client/common/utils/serializers.ts

@@ -1070,7 +1070,8 @@ export abstract class InteractiveBase extends WebViewHost<IInteractiveWindowMapp
 
     // ensureNotebook can be called apart from ensureNotebookAndServer and it needs
     // the same protection to not be called twice
-    private async ensureNotebook(server: INotebookServer): Promise<void> {
+    // tslint:disable-next-line: member-ordering
+    protected async ensureNotebook(server: INotebookServer): Promise<void> {
         if (!this.notebookPromise) {
             this.notebookPromise = this.ensureNotebookImpl(server);
         }

src/client/datascience/interactive-common/interactiveBase.ts

@@ -4,6 +4,8 @@
 import * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api';
 import { Uri } from 'vscode';
 import { IServerState } from '../../../datascience-ui/interactive-common/mainState';
+
+import { KernelMessage } from '@jupyterlab/services';
 import { CommonActionType, IAddCellAction } from '../../../datascience-ui/interactive-common/redux/reducers/types';
 import { PythonInterpreter } from '../../interpreter/contracts';
 import { LiveKernelModel } from '../jupyter/kernels/types';
@@ -101,6 +103,18 @@ export enum InteractiveWindowMessages {
     OpenSettings = 'open_settings'
 }
 
+export enum IPyWidgetMessages {
+    IPyWidgets_display_data_msg = 'IPyWidgets_display_data_msg',
+    IPyWidgets_comm_msg = 'IPyWidgets_comm_msg',
+    IPyWidgets_comm_open = 'IPyWidgets_comm_open',
+    IPyWidgets_ShellSend = 'IPyWidgets_ShellSend',
+    IPyWidgets_ShellCommOpen = 'IPyWidgets_ShellCommOpen',
+    IPyWidgets_registerCommTarget = 'IPyWidgets_registerCommTarget',
+    IPyWidgets_ShellSend_onIOPub = 'IPyWidgets_ShellSend_onIOPub',
+    IPyWidgets_ShellSend_reply = 'IPyWidgets_ShellSend_reply',
+    IPyWidgets_ShellSend_resolve = 'IPyWidgets_ShellSend_resolve',
+    IPyWidgets_ShellSend_reject = 'IPyWidgets_ShellSend_reject'
+}
 export enum NativeCommandType {
     AddToEnd = 0,
     ArrowDown,
@@ -448,6 +462,31 @@ export type NotebookModelChange =
 
 // Map all messages to specific payloads
 export class IInteractiveWindowMapping {
+    // tslint:disable-next-line: no-any
+    public [IPyWidgetMessages.IPyWidgets_ShellSend]: {
+        // tslint:disable-next-line: no-any
+        data: any;
+        // tslint:disable-next-line: no-any
+        metadata: any;
+        commId: string;
+        requestId: string;
+        // tslint:disable-next-line: no-any
+        buffers?: any[];
+        disposeOnDone?: boolean;
+        targetName?: string;
+        msgType: string;
+    };
+    // tslint:disable-next-line: no-any
+    public [IPyWidgetMessages.IPyWidgets_ShellSend_onIOPub]: { requestId: string; msg: KernelMessage.IIOPubMessage };
+    public [IPyWidgetMessages.IPyWidgets_ShellSend_reply]: { requestId: string; msg: KernelMessage.IShellMessage };
+    public [IPyWidgetMessages.IPyWidgets_ShellSend_resolve]: { requestId: string; msg?: KernelMessage.IShellMessage };
+    // tslint:disable-next-line: no-any
+    public [IPyWidgetMessages.IPyWidgets_ShellSend_reject]: { requestId: string; msg?: any };
+    public [IPyWidgetMessages.IPyWidgets_registerCommTarget]: string;
+    public [IPyWidgetMessages.IPyWidgets_comm_open]: KernelMessage.ICommOpenMsg;
+    public [IPyWidgetMessages.IPyWidgets_comm_msg]: KernelMessage.ICommMsgMsg;
+    public [IPyWidgetMessages.IPyWidgets_display_data_msg]: KernelMessage.IDisplayDataMsg;
+
     public [InteractiveWindowMessages.StartCell]: ICell;
     public [InteractiveWindowMessages.FinishCell]: ICell;
     public [InteractiveWindowMessages.UpdateCell]: ICell;

src/client/datascience/interactive-common/interactiveWindowTypes.ts

@@ -3,7 +3,7 @@ import {
     CommonActionTypeMapping
 } from '../../../datascience-ui/interactive-common/redux/reducers/types';
 import { CssMessages, SharedMessages } from '../messages';
-import { IInteractiveWindowMapping, InteractiveWindowMessages } from './interactiveWindowTypes';
+import { IInteractiveWindowMapping, InteractiveWindowMessages, IPyWidgetMessages } from './interactiveWindowTypes';
 
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
@@ -175,7 +175,18 @@ const messageWithMessageTypes: MessageMapping<IInteractiveWindowMapping> & Messa
     // Types from Shared Messages
     [SharedMessages.LocInit]: MessageType.userAction,
     [SharedMessages.Started]: MessageType.userAction,
-    [SharedMessages.UpdateSettings]: MessageType.userAction
+    [SharedMessages.UpdateSettings]: MessageType.userAction,
+    // IpyWidgets
+    // [IPyWidgetMessages.IPyWidgets_ShellCommOpen]: MessageType.noIdea,
+    [IPyWidgetMessages.IPyWidgets_ShellSend]: MessageType.noIdea,
+    [IPyWidgetMessages.IPyWidgets_ShellSend_onIOPub]: MessageType.noIdea,
+    [IPyWidgetMessages.IPyWidgets_ShellSend_reject]: MessageType.noIdea,
+    [IPyWidgetMessages.IPyWidgets_ShellSend_reply]: MessageType.noIdea,
+    [IPyWidgetMessages.IPyWidgets_ShellSend_resolve]: MessageType.noIdea,
+    [IPyWidgetMessages.IPyWidgets_comm_msg]: MessageType.noIdea,
+    [IPyWidgetMessages.IPyWidgets_comm_open]: MessageType.noIdea,
+    [IPyWidgetMessages.IPyWidgets_display_data_msg]: MessageType.noIdea,
+    [IPyWidgetMessages.IPyWidgets_registerCommTarget]: MessageType.noIdea
 };
 
 /**