Document how to execute code and render outputs

Author: hbcarlos

src/index.ts

@@ -53,9 +53,17 @@ const plugin: JupyterFrontEndPlugin<IBlocklyManager> = {
       modelName: 'text',
       fileTypes: ['json'],
       defaultFor: ['json'],
+
+      // Kernel options, in this case we need to execute the code generated
+      // in the blockly editor. The best way would be to use kernels, for
+      // that reason, we tell the widget factory to start a kernel session
+      // when opening the editor, and close the session when closing the editor.
       canStartKernel: true,
       preferKernel: true,
       shutdownOnClose: true,
+
+      // The rendermime instance, necessary to render the outputs
+      // after a code execution.
       rendermime: rendermime
     });
 

src/layout.ts

@@ -1,4 +1,3 @@
-import { SimplifiedOutputArea, OutputAreaModel } from '@jupyterlab/outputarea';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { ISessionContext } from '@jupyterlab/apputils';
 
@@ -19,7 +18,7 @@ export class BlocklyLayout extends PanelLayout {
   private _manager: BlocklyManager;
   private _workspace: Blockly.WorkspaceSvg;
   private _sessionContext: ISessionContext;
-  private _outputArea: SimplifiedOutputArea;
+  private _outputArea: Widget;
 
   /**
    * Construct a `BlocklyLayout`.
@@ -35,11 +34,9 @@ export class BlocklyLayout extends PanelLayout {
     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 SimplifiedOutputArea({
-      model: new OutputAreaModel({ trusted: true }),
-      rendermime
-    });
+    this._outputArea = new Widget();
   }
 
   get workspace(): PartialJSONValue {
@@ -89,12 +86,7 @@ export class BlocklyLayout extends PanelLayout {
 
   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));
+    // Execute the code using the kernel
   }
 
   /**

src/widget.ts

@@ -18,11 +18,11 @@ export class BlocklyEditor extends DocumentWidget<BlocklyPanel, DocumentModel> {
   constructor(options: DocumentWidget.IOptions<BlocklyPanel, DocumentModel>) {
     super(options);
 
-    const run = new Widget();
-    run.node.style.width = '25px';
-    run.node.style.backgroundColor = 'green';
-    run.node.onclick = () => (this.content.layout as BlocklyLayout).run();
-    this.toolbar.addItem('run', run);
+    // 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);
   }
 
   /**