Rework of monitoring output execution together with execution phase (#312)

* Added Output with monitoring sampe

* 290 - rework of output monitoring getting execution phase and output model together

* 290 - Rework of output monitoring getting execution phase and output model together

---------

Co-authored-by: Sergey Kadnikov <skadnikov@seeneco.ru>

Author: sok82

.gitignore

@@ -155,6 +155,9 @@ packages/*/content
 # Static
 **/static/*
 
+# VS Code settings
+packages/react/.vscode/launch.json
+
 # Include
 !**/.*ignore
 !**/.*rc

packages/react/src/components/output/Output.tsx

@@ -5,21 +5,22 @@
  * MIT License
  */
 
-import { useState, useEffect } from 'react';
-import { Box } from '@primer/react';
 import { IOutput } from '@jupyterlab/nbformat';
 import { IOutputAreaModel } from '@jupyterlab/outputarea';
 import { KernelMessage } from '@jupyterlab/services';
-import { newUuid } from '../../utils';
+import { Box } from '@primer/react';
+import { useEffect, useState } from 'react';
 import { useJupyter } from '../../jupyter/JupyterContext';
 import { Kernel } from '../../jupyter/kernel/Kernel';
-import { KernelActionMenu, KernelProgressBar } from './../kernel';
-import { Lumino } from '../lumino/Lumino';
+import { newUuid } from '../../utils';
 import { CodeMirrorEditor } from '../codemirror/CodeMirrorEditor';
+import { Lumino } from '../lumino/Lumino';
+import { KernelActionMenu, KernelProgressBar } from './../kernel';
 import { OutputAdapter } from './OutputAdapter';
 import { OutputRenderer } from './OutputRenderer';
 import { useOutputsStore } from './OutputState';
 
+import { IExecutionPhaseOutput } from '../../jupyter/kernel';
 import './Output.css';
 
 export type IOutputProps = {
@@ -40,9 +41,9 @@ export type IOutputProps = {
   showControl?: boolean;
   showEditor: boolean;
   showKernelProgressBar?: boolean;
+  suppressCodeExecutionErrors?: boolean;
   toolbarPosition: 'up' | 'middle' | 'none';
-  notifyOnComplete?: boolean;
-  onCodeExecutionError?: (err : any) => void;
+  onExecutionPhaseChanged? : (phaseOutput : IExecutionPhaseOutput) => void
 };
 
 export const Output = (props: IOutputProps) => {
@@ -65,8 +66,8 @@ export const Output = (props: IOutputProps) => {
     showControl,
     showEditor,
     showKernelProgressBar = true,
-    notifyOnComplete = false,
-    onCodeExecutionError,
+    suppressCodeExecutionErrors = false,
+    onExecutionPhaseChanged,
     id: sourceId,
     toolbarPosition,
   } = props;
@@ -102,7 +103,7 @@ export const Output = (props: IOutputProps) => {
       }
     };
     if (id && kernel) {
-      const adapter = propsAdapter ?? new OutputAdapter(id, kernel, outputs ?? [], model);
+      const adapter = propsAdapter ?? new OutputAdapter(id, kernel, outputs ?? [], model,suppressCodeExecutionErrors);
       setAdapter(adapter);
       outputStore.setAdapter(id, adapter);
       if (model) {
@@ -126,7 +127,7 @@ export const Output = (props: IOutputProps) => {
   useEffect(() => {
     if (adapter) {
       if (autoRun) {
-        adapter.execute(code, notifyOnComplete,onCodeExecutionError);
+        adapter.execute(code,onExecutionPhaseChanged);
       }
     }
   }, [adapter]);
@@ -146,12 +147,12 @@ export const Output = (props: IOutputProps) => {
   const executeRequest = outputStore.getExecuteRequest(sourceId);
   useEffect(() => {
     if (adapter && executeRequest && executeRequest === id) {
-      adapter.execute(code, notifyOnComplete,onCodeExecutionError);
+      adapter.execute(code,onExecutionPhaseChanged);
     }
   }, [executeRequest, adapter]);
   useEffect(() => {
     if (adapter && executeTrigger > 0) {
-      adapter.execute(code, notifyOnComplete,onCodeExecutionError);
+      adapter.execute(code,onExecutionPhaseChanged);
     }
   }, [executeTrigger]);
   useEffect(() => {

packages/react/src/components/output/OutputAdapter.ts

@@ -4,8 +4,13 @@
  * MIT License
  */
 
+import {
+  WIDGET_MIMETYPE,
+  WidgetRenderer,
+} from '@jupyter-widgets/html-manager/lib/output_renderers';
+import { rendererFactory as javascriptRendererFactory } from '@jupyterlab/javascript-extension';
+import { rendererFactory as jsonRendererFactory } from '@jupyterlab/json-extension';
 import { IOutput } from '@jupyterlab/nbformat';
-import { JSONObject } from '@lumino/coreutils';
 import {
   IOutputAreaModel,
   OutputArea,
@@ -16,14 +21,10 @@ import {
   RenderMimeRegistry,
   standardRendererFactories,
 } from '@jupyterlab/rendermime';
-import { rendererFactory as jsonRendererFactory } from '@jupyterlab/json-extension';
-import { rendererFactory as javascriptRendererFactory } from '@jupyterlab/javascript-extension';
-import {
-  WIDGET_MIMETYPE,
-  WidgetRenderer,
-} from '@jupyter-widgets/html-manager/lib/output_renderers';
-import { requireLoader as loader } from '../../jupyter/ipywidgets/libembed-amd';
+import { JSONObject } from '@lumino/coreutils';
 import { ClassicWidgetManager } from '../../jupyter/ipywidgets/classic/manager';
+import { requireLoader as loader } from '../../jupyter/ipywidgets/libembed-amd';
+import { IExecutionPhaseOutput } from '../../jupyter/kernel';
 import { Kernel } from '../../jupyter/kernel/Kernel';
 import { execute } from './OutputExecutor';
 
@@ -34,15 +35,18 @@ export class OutputAdapter {
   private _outputArea: OutputArea;
   private _rendermime: RenderMimeRegistry;
   private _iPyWidgetsClassicManager: ClassicWidgetManager;
+  private _suppressCodeExecutionErrors: boolean;
 
   public constructor(
     id: string,
     kernel?: Kernel,
     outputs?: IOutput[],
-    outputAreaModel?: IOutputAreaModel
+    outputAreaModel?: IOutputAreaModel,
+    suppressCodeExecutionErrors: boolean = false
   ) {
     this._id = id;
     this._kernel = kernel;
+    this._suppressCodeExecutionErrors = suppressCodeExecutionErrors;
     this._renderers = standardRendererFactories.filter(
       factory => factory.mimeTypes[0] !== 'text/javascript'
     );
@@ -93,8 +97,7 @@ export class OutputAdapter {
 
   public async execute(
     code: string,
-    notifyOnComplete?: boolean,
-    onCodeExecutionError?: (err: any) => void
+    onExecutionPhaseChanged?: (phaseOutput: IExecutionPhaseOutput) => void
   ) {
     if (this._kernel) {
       this.clear();
@@ -105,8 +108,8 @@ export class OutputAdapter {
         this._outputArea,
         this._kernel,
         metadata,
-        notifyOnComplete,
-        onCodeExecutionError
+        this._suppressCodeExecutionErrors,
+        onExecutionPhaseChanged
       );
       await done;
     }

packages/react/src/components/output/OutputExecutor.ts

@@ -4,9 +4,10 @@
  * MIT License
  */
 
-import { JSONObject } from '@lumino/coreutils';
-import { KernelMessage } from '@jupyterlab/services';
 import { OutputArea } from '@jupyterlab/outputarea';
+import { KernelMessage } from '@jupyterlab/services';
+import { JSONObject } from '@lumino/coreutils';
+import { IExecutionPhaseOutput } from '../../jupyter/kernel';
 import { Kernel } from './../../jupyter/kernel/Kernel';
 
 /**
@@ -18,8 +19,8 @@ export async function execute(
   output: OutputArea,
   kernel: Kernel,
   metadata?: JSONObject,
-  notifyOnComplete?: boolean,
-  onCodeExecutionError?: (err: any) => void
+  suppressCodeExecutionErrors: boolean = false,
+  onExecutionPhaseChanged?: (phaseOutput: IExecutionPhaseOutput) => void
 ): Promise<KernelMessage.IExecuteReplyMsg | undefined> {
   // Override the default for `stop_on_error`.
   let stopOnError = true;
@@ -33,9 +34,10 @@ export async function execute(
   const kernelExecutor = kernel.execute(code, {
     model: output.model,
     stopOnError,
-    notifyOnComplete,
-    onCodeExecutionError,
+    suppressCodeExecutionErrors,
+    onExecutionPhaseChanged,
   });
+
   const future = kernelExecutor!.future;
   // TODO fix in upstream jupyterlab if possible...
   (output as any)._onIOPub = future!.onIOPub;