Send execution requests from frontend

Author: trungleduc

packages/voila/src/plugins/outputs/plugins.ts

@@ -17,12 +17,15 @@ import { Widget } from '@lumino/widgets';
 import { VoilaApp } from '../../app';
 import { RenderedCells } from './renderedcells';
 import {
+  createOutputArea,
   createSkeleton,
+  executeCode,
   getExecutionURL,
   handleExecutionResult,
   IExecutionMessage,
   IReceivedWidgetModel
 } from './tools';
+import { SimplifiedOutputArea } from '@jupyterlab/outputarea';
 
 /**
  * The plugin that renders outputs.
@@ -115,53 +118,25 @@ export const renderOutputsProgressivelyPlugin: JupyterFrontEndPlugin<void> = {
       return;
     }
 
-    const kernelId = widgetManager.kernel.id;
-
-    const receivedWidgetModel: IReceivedWidgetModel = {};
-    const modelRegisteredHandler = (_: any, modelId: string) => {
-      if (receivedWidgetModel[modelId]) {
-        const { outputModel, executionModel } = receivedWidgetModel[modelId];
-        outputModel.add(executionModel);
-        widgetManager.removeRegisteredModel(modelId);
-      }
-    };
-    widgetManager.modelRegistered.connect(modelRegisteredHandler);
-    const wsUrl = getExecutionURL(kernelId);
-    const ws = new WebSocket(wsUrl);
-    ws.onmessage = async (msg) => {
-      const { action, payload }: IExecutionMessage = JSON.parse(msg.data);
-      switch (action) {
-        case 'execution_result': {
-          const result = handleExecutionResult({
-            payload,
-            rendermime,
-            widgetManager
-          });
-          if (result) {
-            Object.entries(result).forEach(([key, val]) => {
-              receivedWidgetModel[key] = val;
-            });
-          }
-          const { cell_index, total_cell } = payload;
-          if (cell_index + 1 === total_cell) {
-            // Executed all cells
-            ws.close();
+    const cells = document.querySelectorAll('[cell-index]');
+    const cellsNumber = cells.length;
+    for (let cellIdx = 0; cellIdx < cellsNumber; cellIdx++) {
+      const el = cells.item(cellIdx);
+      const codeCell = el.getElementsByClassName('jp-CodeCell').item(0);
+      if (codeCell) {
+        // codeCell.classList.remove('jp-mod-noOutputs', 'jp-mod-noInput');
+
+        const { area } = createOutputArea({ rendermime, parent: codeCell });
+        const source = `${cellIdx}`;
+        executeCode(source, area, widgetManager.kernel).then((future) => {
+          const skeleton = el
+            .getElementsByClassName('voila-skeleton-container')
+            .item(0);
+          if (skeleton) {
+            el.removeChild(skeleton);
           }
-
-          break;
-        }
-        case 'execution_error': {
-          console.error(`Execution error: ${payload.error}`);
-          break;
-        }
-        default:
-          break;
+        });
       }
-    };
-    ws.onopen = () => {
-      ws.send(
-        JSON.stringify({ action: 'execute', payload: { kernel_id: kernelId } })
-      );
-    };
+    }
   }
 };

packages/voila/src/plugins/outputs/tools.ts

@@ -1,9 +1,15 @@
 import { IOutput } from '@jupyterlab/nbformat';
-import { OutputAreaModel, SimplifiedOutputArea } from '@jupyterlab/outputarea';
+import {
+  OutputArea,
+  OutputAreaModel,
+  SimplifiedOutputArea
+} from '@jupyterlab/outputarea';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { Widget } from '@lumino/widgets';
 import { PageConfig, URLExt } from '@jupyterlab/coreutils';
 import { type VoilaWidgetManager } from '@voila-dashboards/widgets-manager8/lib/manager';
+import { Kernel, KernelMessage } from '@jupyterlab/services';
+import { JSONObject } from '@lumino/coreutils';
 
 /**
  * Interface representing the structure of an execution result message.
@@ -74,7 +80,7 @@ export function handleExecutionResult({
     if (skeleton) {
       element.removeChild(skeleton);
     }
-    const model = createOutputArea({ rendermime, parent: element });
+    const { model } = createOutputArea({ rendermime, parent: element });
     if (!output_cell.outputs) {
       return;
     }
@@ -118,7 +124,7 @@ export function createOutputArea({
 }: {
   rendermime: IRenderMimeRegistry;
   parent: Element;
-}): OutputAreaModel {
+}): { model: OutputAreaModel; area: SimplifiedOutputArea } {
   const model = new OutputAreaModel({ trusted: true });
   const area = new SimplifiedOutputArea({
     model,
@@ -134,14 +140,19 @@ export function createOutputArea({
     'jp-Cell-outputCollapser'
   );
   wrapper.appendChild(collapser);
-  parent.lastElementChild?.appendChild(wrapper);
+  parent.appendChild(wrapper);
   area.node.classList.add('jp-Cell-outputArea');
 
   area.node.style.display = 'flex';
   area.node.style.flexDirection = 'column';
 
   Widget.attach(area, wrapper);
-  return model;
+  area.outputLengthChanged.connect((_, number) => {
+    if (number) {
+      parent.classList.remove('jp-mod-noOutputs');
+    }
+  });
+  return { model, area };
 }
 
 export function createSkeleton(): void {
@@ -152,9 +163,40 @@ export function createSkeleton(): void {
     </div>`;
   const elements = document.querySelectorAll('[cell-index]');
   elements.forEach((it) => {
-    const element = document.createElement('div');
-    element.className = 'voila-skeleton-container';
-    element.innerHTML = innerHtml;
-    it.appendChild(element);
+    const codeCell = it.getElementsByClassName('jp-CodeCell').item(0);
+    if (codeCell) {
+      const element = document.createElement('div');
+      element.className = 'voila-skeleton-container';
+      element.innerHTML = innerHtml;
+      it.appendChild(element);
+    }
   });
 }
+
+export async function executeCode(
+  code: string,
+  output: OutputArea,
+  kernel: Kernel.IKernelConnection | null | undefined,
+  metadata?: JSONObject
+): Promise<KernelMessage.IExecuteReplyMsg | undefined> {
+  // Override the default for `stop_on_error`.
+  let stopOnError = false;
+  if (
+    metadata &&
+    Array.isArray(metadata.tags) &&
+    metadata.tags.indexOf('raises-exception') !== -1
+  ) {
+    stopOnError = false;
+  }
+  const content: KernelMessage.IExecuteRequestMsg['content'] = {
+    code,
+    stop_on_error: stopOnError
+  };
+
+  if (!kernel) {
+    throw new Error('Session has no kernel.');
+  }
+  const future = kernel.requestExecute(content, false, metadata);
+  output.future = future;
+  return future.done;
+}

share/jupyter/voila/templates/classic/index.html.j2

@@ -44,7 +44,7 @@
   <style>
     /*Hide empty cells*/
     .jp-mod-noOutputs.jp-mod-noInput {
-      display: none;
+      padding: 0!important;
     }
   </style>
 

share/jupyter/voila/templates/lab/index.html.j2

@@ -19,7 +19,7 @@
   <style>
     /*Hide empty cells*/
     .jp-mod-noOutputs.jp-mod-noInput {
-      display: none;
+      padding: 0!important;
     }
   </style>
 {% if resources.show_margins %}

share/jupyter/voila/templates/reveal/index.html.j2

@@ -45,7 +45,7 @@
   <style>
     /*Hide empty cells*/
     .jp-mod-noOutputs.jp-mod-noInput {
-      display: none;
+      padding: 0!important;
     }
     #rendered_cells {
       padding: 0px!important

tsconfigbase.json

@@ -10,7 +10,7 @@
     "moduleResolution": "node",
     "noEmitOnError": true,
     "noImplicitAny": true,
-    "noUnusedLocals": true,
+    "noUnusedLocals": false,
     "preserveWatchOutput": true,
     "resolveJsonModule": true,
     "strict": true,

voila/app.py

@@ -653,6 +653,7 @@ def init_settings(self) -> Dict:
             connection_dir=self.connection_dir,
             kernel_spec_manager=self.kernel_spec_manager,
             allowed_message_types=[
+                "execute_request",
                 "comm_open",
                 "comm_close",
                 "comm_msg",

voila/handler.py

@@ -19,7 +19,7 @@
 from tornado.httputil import split_host_and_port
 from traitlets.traitlets import Bool
 
-from voila.tornado.execution_request_handler import ExecutionRequestHandler
+from voila.tornado.kernel_websocket_handler import VoilaKernelWebsocketHandler
 
 from .configuration import VoilaConfiguration
 
@@ -253,8 +253,8 @@ def time_out():
             kernel_future = self.kernel_manager.get_kernel(kernel_id)
             queue = asyncio.Queue()
             if self.voila_configuration.progressive_rendering:
-                ExecutionRequestHandler._execution_data[kernel_id] = {
-                    "nb": gen.notebook,
+                VoilaKernelWebsocketHandler._execution_data[kernel_id] = {
+                    "cells": gen.notebook.cells,
                     "config": self.traitlet_config,
                     "show_tracebacks": self.voila_configuration.show_tracebacks,
                 }

voila/tornado/kernel_websocket_handler.py

@@ -5,6 +5,10 @@
     from jupyter_server.services.kernels.websocket import (
         KernelWebsocketHandler as WebsocketHandler,
     )
+    from jupyter_server.services.kernels.connection.base import (
+        deserialize_binary_message,
+        deserialize_msg_from_ws_v1,
+    )
 except ImportError:
     from jupyter_server.services.kernels.handlers import (
         ZMQChannelsHandler as WebsocketHandler,
@@ -27,9 +31,77 @@ def read_header_from_binary_message(ws_msg: bytes) -> Optional[Dict]:
 
 
 class VoilaKernelWebsocketHandler(WebsocketHandler):
+
+    _execution_data = {}
+
+    def on_message(self, ws_msg):
+        connection = self.connection
+        subprotocol = connection.subprotocol
+        if not connection.channels:
+            # already closed, ignore the message
+            connection.log.debug("Received message on closed websocket %r", ws_msg)
+            return
+
+        if subprotocol == "v1.kernel.websocket.jupyter.org":
+            channel, msg_list = deserialize_msg_from_ws_v1(ws_msg)
+            msg = {"header": None, "content": None}
+        else:
+            if isinstance(ws_msg, bytes):  # type:ignore[unreachable]
+                msg = deserialize_binary_message(ws_msg)  # type:ignore[unreachable]
+            else:
+                msg = json.loads(ws_msg)
+            msg_list = []
+            channel = msg.pop("channel", None)
+
+        if channel is None:
+            connection.log.warning("No channel specified, assuming shell: %s", msg)
+            channel = "shell"
+        if channel not in connection.channels:
+            connection.log.warning("No such channel: %r", channel)
+            return
+        am = connection.multi_kernel_manager.allowed_message_types
+        ignore_msg = False
+        msg_header = connection.get_part("header", msg["header"], msg_list)
+        msg_content = connection.get_part("content", msg["content"], msg_list)
+        if msg_header["msg_type"] == "execute_request":
+            execution_data = self._execution_data.get(self.kernel_id, None)
+            cells = execution_data["cells"]
+            code = msg_content.get("code")
+            try:
+                cell_idx = int(code)
+                cell = cells[cell_idx]
+                if cell["cell_type"] != "code":
+                    cell["source"] = ""
+
+                if subprotocol == "v1.kernel.websocket.jupyter.org":
+                    msg_content["code"] = cell["source"]
+                    msg_list[3] = connection.session.pack(msg_content)
+                else:
+                    msg["content"]["code"] = cell["source"]
+
+            except Exception:
+                connection.log.warning("Unsupported code cell %s" % code)
+
+        if am:
+            msg["header"] = connection.get_part("header", msg["header"], msg_list)
+            assert msg["header"] is not None
+            if msg["header"]["msg_type"] not in am:  # type:ignore[unreachable]
+                connection.log.warning(
+                    'Received message of type "%s", which is not allowed. Ignoring.'
+                    % msg["header"]["msg_type"]
+                )
+                ignore_msg = True
+        if not ignore_msg:
+            stream = connection.channels[channel]
+            if subprotocol == "v1.kernel.websocket.jupyter.org":
+                connection.session.send_raw(stream, msg_list)
+            else:
+                connection.session.send(stream, msg)
+
     def write_message(
         self, message: Union[bytes, Dict[str, Any]], binary: bool = False
     ):
+
         if isinstance(message, bytes):
             header = read_header_from_binary_message(message)
         elif isinstance(message, dict):