Add support for widgets

Author: hbcarlos

packages/blockly-extension/package.json

@@ -43,8 +43,11 @@
     "watch:labextension": "jupyter labextension watch ."
   },
   "dependencies": {
+    "@jupyter-widgets/base": "^6.0.4",
+    "@jupyter-widgets/jupyterlab-manager": "^5.0.7",
     "@jupyterlab/application": "^3.6",
     "@jupyterlab/apputils": "^3.6",
+    "@jupyterlab/cells": "^3.6",
     "@jupyterlab/codeeditor": "^3.6",
     "@jupyterlab/filebrowser": "^3.6",
     "@jupyterlab/launcher": "^3.6",
@@ -81,6 +84,14 @@
       "blockly": {
         "bundled": true,
         "singleton": true
+      },
+      "@jupyter-widgets/base": {
+        "bundled": false,
+        "singleton": true
+      },
+      "@jupyter-widgets/jupyterlab-manager": {
+          "bundled": false,
+          "singleton": true
       }
     },
     "webpackConfig": "./webpack.config.js"

packages/blockly-extension/src/index.ts

@@ -7,12 +7,20 @@ import { jsonIcon } from '@jupyterlab/ui-components';
 import { WidgetTracker, ICommandPalette } from '@jupyterlab/apputils';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { IEditorServices } from '@jupyterlab/codeeditor';
+import { CodeCell } from '@jupyterlab/cells';
 import { IFileBrowserFactory } from '@jupyterlab/filebrowser';
 import { ILauncher } from '@jupyterlab/launcher';
 import { ITranslator } from '@jupyterlab/translation';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
 import { IKernelMenu, IMainMenu } from '@jupyterlab/mainmenu';
 
+import { IJupyterWidgetRegistry } from '@jupyter-widgets/base';
+
+import {
+  WidgetRenderer,
+  registerWidgetManager,
+} from '@jupyter-widgets/jupyterlab-manager';
+
 import { BlocklyEditorFactory } from 'jupyterlab-blockly';
 import { IBlocklyRegistry } from 'jupyterlab-blockly';
 import { BlocklyEditor } from 'jupyterlab-blockly';
@@ -49,7 +57,7 @@ const plugin: JupyterFrontEndPlugin<IBlocklyRegistry> = {
     ISettingRegistry,
     ITranslator
   ],
-  optional: [ILauncher, ICommandPalette, IMainMenu],
+  optional: [ILauncher, ICommandPalette, IMainMenu, IJupyterWidgetRegistry],
   provides: IBlocklyRegistry,
   activate: (
     app: JupyterFrontEnd,
@@ -61,7 +69,8 @@ const plugin: JupyterFrontEndPlugin<IBlocklyRegistry> = {
     translator: ITranslator,
     launcher: ILauncher | null,
     palette: ICommandPalette | null,
-    mainMenu: IMainMenu | null
+    mainMenu: IMainMenu | null,
+    widgetRegistry: IJupyterWidgetRegistry | null
   ): IBlocklyRegistry => {
     console.log('JupyterLab extension jupyterlab-blocky is activated!');
 
@@ -233,8 +242,36 @@ const plugin: JupyterFrontEndPlugin<IBlocklyRegistry> = {
       } as IKernelMenu.IKernelUser<BlocklyEditor>);
     }
 
+    if (widgetRegistry) {
+      tracker.forEach((panel) => {
+        registerWidgetManager(
+          (panel.context as any),
+          panel.content.rendermime,
+          widgetRenderers([panel.content.cell])
+        );
+      });
+  
+      tracker.widgetAdded.connect((sender, panel) => {
+        registerWidgetManager(
+          (panel.context as any),
+          panel.content.rendermime,
+          widgetRenderers([panel.content.cell])
+        );
+      });
+    }
+
     return widgetFactory.registry;
   }
 };
 
+function* widgetRenderers(
+  cells: CodeCell[]
+): IterableIterator<WidgetRenderer> {
+  for (const w of cells) {
+    if (w instanceof WidgetRenderer) {
+      yield w;
+    }
+  }
+}
+
 export default plugin;

packages/blockly/src/layout.ts

@@ -57,12 +57,25 @@ export class BlocklyLayout extends SplitLayout {
     this._manager.changed.connect(this._onManagerChanged, this);
   }
 
+  /*
+   * The code cell.
+   */
+  get cell(): CodeCell {
+    return this._cell;
+  }
+
+  /*
+   * The current workspace.
+   */
   get workspace(): Blockly.Workspace {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     return Blockly.serialization.workspaces.save(this._workspace);
   }
 
+  /*
+   * Set a new workspace.
+   */
   set workspace(workspace: Blockly.Workspace) {
     const data = workspace === null ? { variables: [] } : workspace;
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -138,12 +151,16 @@ export class BlocklyLayout extends SplitLayout {
     return finalToplevelInit;
   }
 
+  /*
+   * Generates and runs the code from the current workspace.
+   */
   run(): void {
     // Get extra code from the blocks in the workspace.
     const extra_init = this.getBlocksToplevelInit();
     // Serializing our workspace into the chosen language generator.
     const code =
       extra_init + this._manager.generator.workspaceToCode(this._workspace);
+    //const code = "import ipywidgets as widgets\nwidgets.IntSlider()";
     this._cell.model.sharedModel.setSource(code);
 
     // Execute the code using the kernel, by using a static method from the

packages/blockly/src/widget.ts

@@ -19,6 +19,7 @@ import {
   SelectToolbox,
   Spacer
 } from './toolbar';
+import { CodeCell } from '@jupyterlab/cells';
 
 /**
  * DocumentWidget: widget that represents the view or editor for a file type.
@@ -80,6 +81,7 @@ export namespace BlocklyEditor {
  */
 export class BlocklyPanel extends SplitPanel {
   private _context: DocumentRegistry.IContext<DocumentModel>;
+  private _rendermime: IRenderMimeRegistry;
 
   /**
    * Construct a `BlocklyPanel`.
@@ -96,13 +98,28 @@ export class BlocklyPanel extends SplitPanel {
     });
     this.addClass('jp-BlocklyPanel');
     this._context = context;
+    this._rendermime = rendermime;
 
     // Load the content of the file when the context is ready
     this._context.ready.then(() => this._load());
     // Connect to the save signal
     this._context.saveState.connect(this._onSave, this);
   }
 
+  /*
+   * The code cell.
+   */
+  get cell(): CodeCell {
+    return (this.layout as BlocklyLayout).cell;
+  }
+
+  /*
+   * The rendermime instance used in the code cell.
+   */
+  get rendermime(): IRenderMimeRegistry {
+    return this._rendermime;
+  }
+
   /**
    * Dispose of the resources held by the widget.
    */

pyproject.toml

@@ -23,7 +23,8 @@ classifiers = [
     "Programming Language :: Python :: 3.11",
 ]
 dependencies = [
-	"jupyterlab~=3.6"
+	"jupyterlab~=3.6",
+    "jupyterlab_widgets~=3.0"
 ]
 dynamic = ["version", "description", "authors", "urls", "keywords"]