Merge pull request #15 from DenisaCG/code_execution

code execution implementation

Author: hbcarlos

src/layout.ts

@@ -1,3 +1,4 @@
+import { SimplifiedOutputArea, OutputAreaModel } from '@jupyterlab/outputarea';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { ISessionContext } from '@jupyterlab/apputils';
 
@@ -18,8 +19,8 @@ export class BlocklyLayout extends PanelLayout {
   private _host: HTMLElement;
   private _manager: BlocklyManager;
   private _workspace: Blockly.WorkspaceSvg;
-  //private _sessionContext: ISessionContext;
-  private _outputArea: Widget;
+  private _sessionContext: ISessionContext;
+  private _outputArea: SimplifiedOutputArea;
 
   /**
    * Construct a `BlocklyLayout`.
@@ -32,12 +33,18 @@ export class BlocklyLayout extends PanelLayout {
   ) {
     super();
     this._manager = manager;
-    //this._sessionContext = sessionContext;
+    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._outputArea = new Widget();
+
+    // Creating a SimplifiedOutputArea widget to render the 
+    // outputs from the execution reply.
+    this._outputArea= new SimplifiedOutputArea({
+      model: new OutputAreaModel({ trusted: true }),
+      rendermime
+    });
   }
 
   get workspace(): PartialJSONValue {
@@ -86,8 +93,17 @@ export class BlocklyLayout extends PanelLayout {
   }
 
   run(): void {
-    //const code = this._manager.generator.workspaceToCode(this._workspace);
-    // Execute the code using the kernel
+    // Serializing our workspace into the chosen language generator.
+    const code = this._manager.generator.workspaceToCode(this._workspace);
+
+    // Execute the code using the kernel, by using a static method from the
+    // same class to make an execution request.
+    SimplifiedOutputArea.execute(code, this._outputArea, this._sessionContext)
+    .then(resp => {
+      this.addWidget(this._outputArea);
+      this._resizeWorkspace();
+    })
+    .catch(e => console.error(e));
   }
 
   /**

src/widget.ts

@@ -3,7 +3,9 @@ import {
   DocumentWidget,
   DocumentModel
 } from '@jupyterlab/docregistry';
+import { ToolbarButton } from '@jupyterlab/apputils';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { runIcon } from '@jupyterlab/ui-components';
 
 import { Panel } from '@lumino/widgets';
 import { Signal } from '@lumino/signaling';
@@ -20,9 +22,18 @@ export class BlocklyEditor extends DocumentWidget<BlocklyPanel, DocumentModel> {
 
     // Create and add a button to the toolbar to execute
     // the code.
-    // Example: https://github.com/jupyterlab/extension-examples/blob/9c35013ce5da125f1b5865b3f7cbb301970d5970/toolbar-button/src/index.ts#L44-L52
-    // (this.content.layout as BlocklyLayout).run();
-    // this.toolbar.addItem('run', button);
+    const runCode = () => {
+      (this.content.layout as BlocklyLayout).run();
+    };
+    const button = new ToolbarButton({
+      label: 'Run Code',
+      icon: runIcon,
+      className: 'jp-blockly-button',
+      onClick: runCode,
+      tooltip: 'Run Code'
+    });
+    button.addClass('jp-blockly-runButton');
+    this.toolbar.addItem('run', button);
   }
 
   /**

style/base.css

@@ -0,0 +1,11 @@
+.jp-blockly-button:hover {
+	background-color: transparent !important;
+}
+
+.jp-blockly-runButton {
+	background-color: var(--md-green-500)
+}
+
+.jp-blockly-runButton:hover {
+	background-color: var(--md-green-700)
+}