Adds a manager to allow other extensions to add more blocks or change the toolbox. Also generates and executes code

Author: hbcarlos

package.json

@@ -45,15 +45,20 @@
     "watch:labextension": "jupyter labextension watch ."
   },
   "dependencies": {
-    "@jupyterlab/application": "^4.0.0-alpha.4",
-    "@jupyterlab/apputils": "^4.0.0-alpha.4",
-    "@jupyterlab/docregistry": "^4.0.0-alpha.4",
+    "@jupyterlab/application": "^4.0.0-alpha.7",
+    "@jupyterlab/apputils": "^4.0.0-alpha.7",
+    "@jupyterlab/docregistry": "^4.0.0-alpha.7",
+    "@jupyterlab/outputarea": "^4.0.0-alpha.7",
+    "@jupyterlab/rendermime": "^4.0.0-alpha.7",
+    "@lumino/algorithm": "^1.9.1",
+    "@lumino/coreutils": "^1.12.0",
+    "@lumino/messaging": "^1.10.1",
     "@lumino/signaling": "^1.10.1",
-    "@lumino/widgets": "^1.31.0",
+    "@lumino/widgets": "^1.31.1",
     "blockly": "^7.20211209.2"
   },
   "devDependencies": {
-    "@jupyterlab/builder": "^4.0.0-alpha.4",
+    "@jupyterlab/builder": "^4.0.0-alpha.7",
     "@typescript-eslint/eslint-plugin": "^5.12.1",
     "@typescript-eslint/parser": "^5.12.1",
     "eslint": "^8.9.0",

src/factory.ts

@@ -3,23 +3,34 @@ import {
   DocumentRegistry,
   DocumentModel
 } from '@jupyterlab/docregistry';
+import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 
 import { BlocklyEditor, BlocklyPanel } from './widget';
+import { BlocklyManager } from './manager';
 
 /**
- * A widget factory to create new instances of ExampleDocWidget.
+ * A widget factory to create new instances of BlocklyEditor.
  */
 export class BlocklyEditorFactory extends ABCWidgetFactory<
   BlocklyEditor,
   DocumentModel
 > {
+  private _manager: BlocklyManager;
+  private _rendermime: IRenderMimeRegistry;
+
   /**
-   * Constructor of ExampleWidgetFactory.
+   * Constructor of BlocklyEditorFactory.
    *
    * @param options Constructor options
    */
-  constructor(options: DocumentRegistry.IWidgetFactoryOptions) {
+  constructor(options: BlocklyEditorFactory.IOptions) {
     super(options);
+    this._manager = new BlocklyManager();
+    this._rendermime = options.rendermime;
+  }
+
+  get manager(): BlocklyManager {
+    return this._manager;
   }
 
   /**
@@ -33,7 +44,16 @@ export class BlocklyEditorFactory extends ABCWidgetFactory<
   ): BlocklyEditor {
     return new BlocklyEditor({
       context,
-      content: new BlocklyPanel(context)
+      content: new BlocklyPanel(context, this._manager, this._rendermime)
     });
   }
 }
+
+export namespace BlocklyEditorFactory {
+  export interface IOptions extends DocumentRegistry.IWidgetFactoryOptions {
+    /*
+     * A rendermime instance.
+     */
+    rendermime: IRenderMimeRegistry;
+  }
+}

src/index.ts

@@ -3,11 +3,11 @@ import {
   JupyterFrontEndPlugin,
   ILayoutRestorer
 } from '@jupyterlab/application';
-
 import { WidgetTracker } from '@jupyterlab/apputils';
+import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 
 import { BlocklyEditorFactory } from './factory';
-
+import { IBlocklyManager } from './token';
 import { BlocklyEditor } from './widget';
 
 /**
@@ -18,11 +18,16 @@ const FACTORY = 'Blockly editor';
 /**
  * Initialization data for the jupyterlab-blocky extension.
  */
-const plugin: JupyterFrontEndPlugin<void> = {
+const plugin: JupyterFrontEndPlugin<IBlocklyManager> = {
   id: 'jupyterlab-blocky:plugin',
   autoStart: true,
-  requires: [ILayoutRestorer],
-  activate: (app: JupyterFrontEnd, restorer: ILayoutRestorer) => {
+  requires: [ILayoutRestorer, IRenderMimeRegistry],
+  provides: IBlocklyManager,
+  activate: (
+    app: JupyterFrontEnd,
+    restorer: ILayoutRestorer,
+    rendermime: IRenderMimeRegistry
+  ): IBlocklyManager => {
     console.log('JupyterLab extension jupyterlab-blocky is activated!');
 
     // Namespace for the tracker
@@ -46,7 +51,12 @@ const plugin: JupyterFrontEndPlugin<void> = {
     const widgetFactory = new BlocklyEditorFactory({
       name: FACTORY,
       modelName: 'text',
-      fileTypes: ['json']
+      fileTypes: ['json'],
+      defaultFor: ['json'],
+      canStartKernel: true,
+      preferKernel: true,
+      shutdownOnClose: true,
+      rendermime: rendermime
     });
 
     // Add the widget to the tracker when it's created
@@ -59,6 +69,8 @@ const plugin: JupyterFrontEndPlugin<void> = {
     });
     // Registering the widget factory
     app.docRegistry.addWidgetFactory(widgetFactory);
+
+    return widgetFactory.manager;
   }
 };
 

src/layout.ts

@@ -1,33 +1,45 @@
-import { Layout, Widget } from '@lumino/widgets';
+import { SimplifiedOutputArea, OutputAreaModel } from '@jupyterlab/outputarea';
+import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { ISessionContext } from '@jupyterlab/apputils';
 
+import { Message } from '@lumino/messaging';
 import { PartialJSONValue } from '@lumino/coreutils';
-
+import { PanelLayout, Widget } from '@lumino/widgets';
 import { IIterator, ArrayIterator } from '@lumino/algorithm';
 
-import { Message } from '@lumino/messaging';
-
 import * as Blockly from 'blockly';
 
-import { TOOLBOX } from './utils';
+import { BlocklyManager } from './manager';
 
 /**
  * A blockly layout to host the Blockly editor.
  */
-export class BlocklyLayout extends Layout {
-  private _workspace: Blockly.WorkspaceSvg;
+export class BlocklyLayout extends PanelLayout {
   private _host: HTMLElement;
+  private _manager: BlocklyManager;
+  private _workspace: Blockly.WorkspaceSvg;
+  private _sessionContext: ISessionContext;
+  private _outputArea: SimplifiedOutputArea;
 
   /**
    * Construct a `BlocklyLayout`.
    *
    */
-  constructor() {
+  constructor(
+    manager: BlocklyManager,
+    sessionContext: ISessionContext,
+    rendermime: IRenderMimeRegistry
+  ) {
     super();
-    console.debug('[BlocklyLayout]');
+    this._manager = manager;
+    this._sessionContext = sessionContext;
 
     // Creating the container for the Blockly editor
     this._host = document.createElement('div');
-    this._host.className = 'grid-stack';
+    this._outputArea = new SimplifiedOutputArea({
+      model: new OutputAreaModel({ trusted: true }),
+      rendermime
+    });
   }
 
   get workspace(): PartialJSONValue {
@@ -55,9 +67,8 @@ export class BlocklyLayout extends Layout {
    */
   init(): void {
     super.init();
-    console.debug('[BlocklyLayout] init');
     // Add the blockly container into the DOM
-    this.parent!.node.appendChild(this._host);
+    this.addWidget(new Widget({ node: this._host }));
   }
 
   /**
@@ -76,49 +87,61 @@ export class BlocklyLayout extends Layout {
     return;
   }
 
+  run(): void {
+    const code = this._manager.generator.workspaceToCode(this._workspace);
+    SimplifiedOutputArea.execute(code, this._outputArea, this._sessionContext)
+      .then(resp => {
+        this.addWidget(this._outputArea);
+        this._resizeWorkspace();
+      })
+      .catch(e => console.error(e));
+  }
+
   /**
    * Handle `update-request` messages sent to the widget.
    */
   protected onUpdateRequest(msg: Message): void {
-    console.debug('[BlocklyLayout] onUpdateRequest');
-    // TODO: write the resize logic
+    this._resizeWorkspace();
   }
 
   /**
    * Handle `resize-request` messages sent to the widget.
    */
   protected onResize(msg: Message): void {
-    console.debug('[BlocklyLayout] onResize');
-    // TODO: write the resize logic
-    const rect = this.parent.node.getBoundingClientRect();
-    this._host.style.width = rect.width + 'px';
-    this._host.style.height = rect.height + 'px';
-    Blockly.svgResize(this._workspace);
+    this._resizeWorkspace();
   }
 
   /**
    * Handle `fit-request` messages sent to the widget.
    */
   protected onFitRequest(msg: Message): void {
-    console.debug('[BlocklyLayout] onFitRequest');
-    // TODO: write the resize logic
-    //
+    this._resizeWorkspace();
   }
 
   /**
    * Handle `after-attach` messages sent to the widget.
    */
   protected onAfterAttach(msg: Message): void {
-    console.debug('[BlocklyLayout] onAfterAttach');
     this._workspace = Blockly.inject(this._host, {
-      toolbox: TOOLBOX
+      toolbox: this._manager.toolbox
     });
   }
 
-  /**
-   * Handle `after-show` messages sent to the widget.
-   */
-  protected onAfterShow(msg: Message): void {
-    console.debug('[BlocklyLayout] onAfterShow');
+  private _resizeWorkspace(): void {
+    const rect = this.parent.node.getBoundingClientRect();
+    const { height } = this._outputArea.node.getBoundingClientRect();
+    this._host.style.width = rect.width + 'px';
+    const margin = rect.height / 3;
+
+    if (height > margin) {
+      this._host.style.height = rect.height - margin + 'px';
+      this._outputArea.node.style.height = margin + 'px';
+      this._outputArea.node.style.overflowY = 'scroll';
+    } else {
+      this._host.style.height = rect.height - height + 'px';
+      this._outputArea.node.style.overflowY = 'hidden';
+    }
+
+    Blockly.svgResize(this._workspace);
   }
 }

src/manager.ts

@@ -0,0 +1,49 @@
+import { JSONObject } from '@lumino/coreutils';
+
+import * as Blockly from 'blockly';
+
+import BlocklyPy from 'blockly/python';
+
+import { IBlocklyManager } from './token';
+import { TOOLBOX } from './utils';
+
+export class BlocklyManager implements IBlocklyManager {
+  private _toolbox: JSONObject;
+  private _activeGenerator: Blockly.Generator;
+  private _generators: Map<string, Blockly.Generator>;
+
+  /**
+   * Constructor of BlocklyEditorFactory.
+   *
+   * @param options Constructor options
+   */
+  constructor() {
+    this._toolbox = TOOLBOX;
+    this._activeGenerator = BlocklyPy;
+    this._generators = new Map<string, Blockly.Generator>();
+  }
+
+  get toolbox(): JSONObject {
+    return this._toolbox;
+  }
+
+  set activeGenerator(name: string) {
+    this._activeGenerator = this._generators.get(name);
+  }
+
+  get generator(): Blockly.Generator {
+    return this._activeGenerator;
+  }
+
+  registerToolbox(value: JSONObject): void {
+    this._toolbox = value;
+  }
+
+  registerBlocks(blocks: JSONObject[]): void {
+    Blockly.defineBlocksWithJsonArray(blocks);
+  }
+
+  registerGenerator(kernel: string, generator: Blockly.Generator): void {
+    this._generators.set(kernel, generator);
+  }
+}

src/token.ts

@@ -0,0 +1,17 @@
+import { Token } from '@lumino/coreutils';
+import { JSONObject } from '@lumino/coreutils';
+
+import * as Blockly from 'blockly';
+
+/**
+ * The manager token.
+ */
+export const IBlocklyManager = new Token<IBlocklyManager>(
+  'jupyterlab-blockly/manager'
+);
+
+export interface IBlocklyManager {
+  registerToolbox(value: JSONObject): void;
+  registerBlocks(blocks: JSONObject[]): void;
+  registerGenerator(kernel: string, generator: Blockly.Generator): void;
+}