Merge pull request #66 from hbcarlos/kernel

Kernel controls and split panel

Author: DenisaCG

packages/blockly-extension/package.json

@@ -48,6 +48,7 @@
     "@jupyterlab/codeeditor": "^3.4",
     "@jupyterlab/filebrowser": "^3.4",
     "@jupyterlab/launcher": "^3.4",
+    "@jupyterlab/mainmenu": "^3.4",
     "@jupyterlab/rendermime": "^3.4",
     "@jupyterlab/settingregistry": "^3.4",
     "@jupyterlab/translation": "^3.4",

packages/blockly-extension/src/index.ts

@@ -11,6 +11,7 @@ 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 { BlocklyEditorFactory } from 'jupyterlab-blockly';
 import { IBlocklyRegistry } from 'jupyterlab-blockly';
@@ -48,7 +49,7 @@ const plugin: JupyterFrontEndPlugin<IBlocklyRegistry> = {
     ISettingRegistry,
     ITranslator
   ],
-  optional: [ILauncher, ICommandPalette],
+  optional: [ILauncher, ICommandPalette, IMainMenu],
   provides: IBlocklyRegistry,
   activate: (
     app: JupyterFrontEnd,
@@ -59,7 +60,8 @@ const plugin: JupyterFrontEndPlugin<IBlocklyRegistry> = {
     settings: ISettingRegistry,
     translator: ITranslator,
     launcher: ILauncher | null,
-    palette: ICommandPalette | null
+    palette: ICommandPalette | null,
+    mainMenu: IMainMenu | null
   ): IBlocklyRegistry => {
     console.log('JupyterLab extension jupyterlab-blocky is activated!');
 
@@ -80,7 +82,6 @@ const plugin: JupyterFrontEndPlugin<IBlocklyRegistry> = {
     }
 
     const { commands } = app;
-    const command = CommandIDs.createNew;
 
     // Creating the widget factory to register it so the document manager knows about
     // our new DocumentWidget
@@ -159,7 +160,7 @@ const plugin: JupyterFrontEndPlugin<IBlocklyRegistry> = {
       widgetFactory.registry.setlanguage(language);
     });
 
-    commands.addCommand(command, {
+    commands.addCommand(CommandIDs.createNew, {
       label: args =>
         args['isPalette'] ? 'New Blockly Editor' : 'Blockly Editor',
       caption: 'Create a new Blockly Editor',
@@ -188,7 +189,7 @@ const plugin: JupyterFrontEndPlugin<IBlocklyRegistry> = {
     // Add the command to the launcher
     if (launcher) {
       launcher.add({
-        command,
+        command: CommandIDs.createNew,
         category: 'Other',
         rank: 1
       });
@@ -197,12 +198,41 @@ const plugin: JupyterFrontEndPlugin<IBlocklyRegistry> = {
     // Add the command to the palette
     if (palette) {
       palette.addItem({
-        command,
+        command: CommandIDs.createNew,
         args: { isPalette: true },
         category: PALETTE_CATEGORY
       });
     }
 
+    // Add the command to the main menu
+    if (mainMenu) {
+      mainMenu.kernelMenu.kernelUsers.add({
+        tracker,
+        interruptKernel: current => {
+          const kernel = current.context.sessionContext.session?.kernel;
+          if (kernel) {
+            return kernel.interrupt();
+          }
+          return Promise.resolve(void 0);
+        },
+        reconnectToKernel: current => {
+          const kernel = current.context.sessionContext.session?.kernel;
+          if (kernel) {
+            return kernel.reconnect();
+          }
+          return Promise.resolve(void 0);
+        },
+        restartKernel: current => {
+          const kernel = current.context.sessionContext.session?.kernel;
+          if (kernel) {
+            return kernel.restart();
+          }
+          return Promise.resolve(void 0);
+        },
+        shutdownKernel: current => current.context.sessionContext.shutdown()
+      } as IKernelMenu.IKernelUser<BlocklyEditor>);
+    }
+
     return widgetFactory.registry;
   }
 };

packages/blockly/src/layout.ts

@@ -4,7 +4,7 @@ import { CodeCell, CodeCellModel } from '@jupyterlab/cells';
 
 import { Message } from '@lumino/messaging';
 import { PartialJSONValue } from '@lumino/coreutils';
-import { PanelLayout, Widget } from '@lumino/widgets';
+import { SplitLayout, SplitPanel, Widget } from '@lumino/widgets';
 import { IIterator, ArrayIterator } from '@lumino/algorithm';
 import { Signal } from '@lumino/signaling';
 
@@ -16,8 +16,8 @@ import { THEME } from './utils';
 /**
  * A blockly layout to host the Blockly editor.
  */
-export class BlocklyLayout extends PanelLayout {
-  private _host: HTMLElement;
+export class BlocklyLayout extends SplitLayout {
+  private _host: Widget;
   private _manager: BlocklyManager;
   private _workspace: Blockly.WorkspaceSvg;
   private _sessionContext: ISessionContext;
@@ -32,13 +32,13 @@ export class BlocklyLayout extends PanelLayout {
     sessionContext: ISessionContext,
     rendermime: IRenderMimeRegistry
   ) {
-    super();
+    super({ renderer: SplitPanel.defaultRenderer, orientation: 'vertical' });
     this._manager = manager;
     this._sessionContext = sessionContext;
 
     // Creating the container for the Blockly editor
     // and the output area to render the execution replies.
-    this._host = document.createElement('div');
+    this._host = new Widget();
 
     // Creating a CodeCell widget to render the code and
     // outputs from the execution reply.
@@ -83,7 +83,8 @@ export class BlocklyLayout extends PanelLayout {
   init(): void {
     super.init();
     // Add the blockly container into the DOM
-    this.addWidget(new Widget({ node: this._host }));
+    this.addWidget(this._host);
+    this.addWidget(this._cell);
   }
 
   /**
@@ -141,8 +142,6 @@ export class BlocklyLayout extends PanelLayout {
     const code =
       extra_init + this._manager.generator.workspaceToCode(this._workspace);
     this._cell.model.sharedModel.setSource(code);
-    this.addWidget(this._cell);
-    this._resizeWorkspace();
 
     // Execute the code using the kernel, by using a static method from the
     // same class to make an execution request.
@@ -165,49 +164,49 @@ export class BlocklyLayout extends PanelLayout {
    * Handle `update-request` messages sent to the widget.
    */
   protected onUpdateRequest(msg: Message): void {
+    super.onUpdateRequest(msg);
     this._resizeWorkspace();
   }
 
   /**
    * Handle `resize-request` messages sent to the widget.
    */
-  protected onResize(msg: Message): void {
+  protected onResize(msg: Widget.ResizeMessage): void {
+    super.onResize(msg);
     this._resizeWorkspace();
   }
 
   /**
    * Handle `fit-request` messages sent to the widget.
    */
   protected onFitRequest(msg: Message): void {
+    super.onFitRequest(msg);
     this._resizeWorkspace();
   }
 
   /**
    * Handle `after-attach` messages sent to the widget.
    */
   protected onAfterAttach(msg: Message): void {
+    super.onAfterAttach(msg);
     //inject Blockly with appropiate JupyterLab theme.
-    this._workspace = Blockly.inject(this._host, {
+    this._workspace = Blockly.inject(this._host.node, {
       toolbox: this._manager.toolbox,
       theme: THEME
     });
+
+    this._workspace.addChangeListener(() => {
+      // 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);
+      this._cell.model.sharedModel.setSource(code);
+    });
   }
 
   private _resizeWorkspace(): void {
     //Resize logic.
-    const rect = this.parent.node.getBoundingClientRect();
-    const { height } = this._cell.node.getBoundingClientRect();
-    const margin = rect.height / 3;
-
-    if (height > margin) {
-      this._host.style.height = rect.height - margin + 'px';
-      this._cell.node.style.height = margin + 'px';
-      this._cell.node.style.overflowY = 'scroll';
-    } else {
-      this._host.style.height = rect.height - height + 'px';
-      this._cell.node.style.overflowY = 'scroll';
-    }
-
     Blockly.svgResize(this._workspace);
   }
 

packages/blockly/src/widget.ts

@@ -6,7 +6,7 @@ import {
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { runIcon } from '@jupyterlab/ui-components';
 
-import { Panel } from '@lumino/widgets';
+import { SplitPanel } from '@lumino/widgets';
 import { Signal } from '@lumino/signaling';
 
 import { BlocklyLayout } from './layout';
@@ -76,7 +76,7 @@ export namespace BlocklyEditor {
 /**
  * Widget that contains the main view of the DocumentWidget.
  */
-export class BlocklyPanel extends Panel {
+export class BlocklyPanel extends SplitPanel {
   private _context: DocumentRegistry.IContext<DocumentModel>;
 
   /**