passive thebe manager (#756)

* wip

* latest

* controls are rendering

* revert notebookId change

* remove lumino

* use the rendermime

* 🎉 outputs

* fix markdown cell

* alert on comms change

* add factory method

* added on message handler

* 🧹 tidy up, upgrade demo

* 📗 changeset

Author: stevejpurves

.changeset/clever-balloons-reply.md

@@ -0,0 +1,7 @@
+---
+'demo-react': patch
+'thebe-react': patch
+'thebe-core': patch
+---
+
+Added a passive widget manager and integrated into `thebe-react` and `demo-react`

apps/demo-react/package.json

@@ -10,6 +10,7 @@
     "@types/node": "^16.18.14",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
+    "classnames": "^2.5.1",
     "localforage": "^1.10.0",
     "match-sorter": "^6.3.1",
     "react": "^18.2.0",

apps/demo-react/public/widget-test.ipynb

@@ -1,23 +1,34 @@
-import { ThebeSessionProvider, ThebeRenderMimeRegistryProvider, useThebeServer } from 'thebe-react';
+import {
+  ThebeSessionProvider,
+  ThebeRenderMimeRegistryProvider,
+  useThebeServer,
+  useThebeLoader,
+} from 'thebe-react';
 import { ConnectionStatusTray } from './ConnectionStatusTray';
 import { ConnectionErrorTray } from './ConnectionErrorTray';
 import { NotebookStatusTray } from './NotebookStatusTray';
 import { NotebookErrorTray } from './NotebookErrorTray';
 import { AdminPanel } from './AdminPanel';
 
 export function NotebookPage({ children }: React.PropsWithChildren) {
-  const { connecting, ready, config, error } = useThebeServer();
+  const { core } = useThebeLoader();
+  const { connecting, config, ready, error } = useThebeServer();
+
+  if (!core) return null;
 
-  if (!connecting && !ready && !error) return null;
   return (
     <ThebeRenderMimeRegistryProvider>
       <ThebeSessionProvider start path={config?.kernels.path}>
         <>
-          <ConnectionStatusTray />
-          <ConnectionErrorTray />
-          <NotebookStatusTray />
-          <NotebookErrorTray />
-          <AdminPanel />
+          {(connecting || ready || error) && (
+            <>
+              <ConnectionStatusTray />
+              <ConnectionErrorTray />
+              <NotebookStatusTray />
+              <NotebookErrorTray />
+              <AdminPanel />
+            </>
+          )}
           {children}
         </>
       </ThebeSessionProvider>

apps/demo-react/src/NotebookPage.tsx

@@ -1,10 +1,11 @@
 import { useNotebook } from 'thebe-react';
 import JupyterOutputDecoration from './JupyterOutputDecoration';
 import { useParams } from 'react-router-dom';
+import classNames from 'classnames';
 
 export function WidgetsPage() {
   const { notebookName } = useParams<{ notebookName: string }>();
-  const { ready, executing, executeAll, cellRefs, cellIds } = useNotebook(
+  const { ready, executing, executeAll, cellRefs, cellIds, errors } = useNotebook(
     notebookName ?? 'widget-test',
     async (n) => {
       const url = `/${n}.ipynb`;
@@ -27,12 +28,22 @@ export function WidgetsPage() {
       <h4 className="text-sm">
         notebook: <code>{notebookName}.ipynb</code>
       </h4>
-      <div className="inline-block px-4 py-2 mt-3 text-sm font-bold text-white bg-green-500 rounded-full">
+      <div
+        className={classNames(
+          'inline-block px-4 py-2 mt-3 text-sm font-bold text-white rounded-full',
+          { 'bg-gray-500': !ready, 'bg-green-500': ready },
+        )}
+      >
         {ready ? 'ready' : 'not ready'}
       </div>
       <div className="mt-4">
         {!executing && (
-          <button className="button" onClick={clickExecute}>
+          <button
+            className={classNames('button', {
+              'text-gray-400 bg-gray-100 border-gray-300 cursor-not-allowed': !ready || errors,
+            })}
+            onClick={clickExecute}
+          >
             run all
           </button>
         )}

apps/demo-react/src/WidgetsPage.tsx

@@ -10,32 +10,31 @@ import { ensureString, shortId } from './utils';
 
 class ThebeCodeCell extends PassiveCellRenderer implements IThebeCell {
   kind: CellKind;
+  notebookId: string;
   source: string;
   metadata: JsonObject;
   session?: ThebeSession;
   executionCount: number | null;
-  protected initialOutputs: IOutput[];
-  readonly notebookId: string;
   protected busy: boolean;
   protected events: EventEmitter;
 
   constructor(
     id: string,
     notebookId: string,
     source: string,
+    outputs: IOutput[],
     config: Config,
     metadata: JsonObject,
     rendermime: IRenderMimeRegistry,
   ) {
-    super(id, rendermime);
+    super(id, outputs, rendermime);
     this.kind = 'code';
     this.events = new EventEmitter(id, config, EventSubject.cell, this);
     this.notebookId = notebookId;
     this.source = source;
     this.metadata = metadata;
     this.busy = false;
     this.executionCount = null;
-    this.initialOutputs = [];
     console.debug('thebe:cell constructor', this);
   }
 
@@ -49,6 +48,7 @@ class ThebeCodeCell extends PassiveCellRenderer implements IThebeCell {
       icc.id ?? shortId(),
       notebookId,
       ensureString(icc.source),
+      icc.outputs ?? [],
       config,
       icc.metadata,
       rendermime,

package-lock.json

@@ -11,6 +11,7 @@ export * from './thebe/api';
 export * from './thebe/entrypoint';
 export * from './utils';
 export * from './manager';
+export * from './passiveManager';
 export * from './rendermime';
 export * from './types';
 export * from './config';

packages/core/src/cell.ts

@@ -1,20 +1,23 @@
 import type { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import type { Widget } from '@lumino/widgets';
-
 import * as LuminoWidget from '@lumino/widgets';
 import { MessageLoop } from '@lumino/messaging';
-
 import { KernelWidgetManager, WidgetRenderer, output } from '@jupyter-widgets/jupyterlab-manager';
-
-export const WIDGET_MIMETYPE = 'application/vnd.jupyter.widget-view+json';
-
 import * as base from '@jupyter-widgets/base';
 import * as controls from '@jupyter-widgets/controls';
 import { shortId } from './utils';
 import { RequireJsLoader } from './requireJsLoader';
 import { requireLoader } from './loader';
 import type { Kernel } from '@jupyterlab/services';
 
+export const WIDGET_STATE_MIMETYPE = 'application/vnd.jupyter.widget-state+json';
+export const WIDGET_VIEW_MIMETYPE = 'application/vnd.jupyter.widget-view+json';
+
+/**
+ * @deprecated use WIDGET_VIEW_MIMETYPE
+ */
+export const WIDGET_MIMETYPE = WIDGET_VIEW_MIMETYPE;
+
 /**
  * A Widget Manager class for Thebe using the context-free KernelWidgetManager from
  * the JupyterLab  Manager and inspierd by the implementation in Voila here:
@@ -32,25 +35,17 @@ export class ThebeManager extends KernelWidgetManager {
     /** ensure this registry always gets the widget renderer.
      * This is essential for cases where widgets are rendered heirarchically
      */
-    this.addWidgetFactories();
-
-    this._registerWidgets();
-    this._loader = new RequireJsLoader();
-  }
-
-  addWidgetFactories() {
     this.rendermime.addFactory(
       {
         safe: false,
-        mimeTypes: [WIDGET_MIMETYPE],
+        mimeTypes: [WIDGET_VIEW_MIMETYPE],
         createRenderer: (options) => new WidgetRenderer(options, this as any),
       },
       1,
     );
-  }
 
-  removeWidgetFactories() {
-    this.rendermime.removeMimeType(WIDGET_MIMETYPE);
+    this._registerWidgets();
+    this._loader = new RequireJsLoader();
   }
 
   /**

packages/core/src/index.ts

@@ -5,6 +5,7 @@ import PassiveCellRenderer from './passive';
 import type ThebeSession from './session';
 import type { CellKind, IThebeCell, IThebeCellExecuteReturn, JsonObject } from './types';
 import { ensureString, shortId } from './utils';
+import type ThebeNotebook from './notebook';
 
 /**
  * A Thebe cell that is exepected to contain markdown (or raw) source.
@@ -28,7 +29,7 @@ export default class ThebeMarkdownCell extends PassiveCellRenderer implements IT
     metadata: JsonObject,
     rendermime: IRenderMimeRegistry,
   ) {
-    super(id, rendermime);
+    super(id, [], rendermime);
     this.kind = 'markdown';
     this.id = id;
     this.notebookId = notebookId;