🧹 tidy up, upgrade demo

Author: stevejpurves

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/src/NotebookPage.tsx

@@ -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/WidgetsPage.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>
         )}

package-lock.json

@@ -7,12 +7,6 @@ import { makeMathjaxOptions } from './options';
 import { Widget } from '@lumino/widgets';
 import { MessageLoop } from '@lumino/messaging';
 
-function assert(condition: any, msg?: string): asserts condition {
-  if (!condition) {
-    throw new Error(msg);
-  }
-}
-
 class PassiveCellRenderer implements IPassiveCell {
   readonly id: string;
   readonly rendermime: IRenderMimeRegistry;
@@ -29,8 +23,6 @@ class PassiveCellRenderer implements IPassiveCell {
   ) {
     this.id = id;
     this.rendermime = rendermime ?? makeRenderMimeRegistry(mathjax ?? makeMathjaxOptions());
-    assert(this.rendermime, 'no rendermime');
-    console.log('rendermime', this.rendermime);
     this.model = new OutputAreaModel({ trusted: true });
     this.area = new OutputArea({
       model: this.model,
@@ -133,11 +125,6 @@ class PassiveCellRenderer implements IPassiveCell {
    */
   render(outputs: nbformat.IOutput[]) {
     this.model.fromJSON(outputs);
-    this.hydrate();
-  }
-
-  hydrate() {
-    console.log('maybe hydrate', this);
   }
 }
 

packages/core/src/passive.ts

@@ -32,6 +32,12 @@ export function placeholder(plainText?: string) {
 `;
 }
 
+export function assert(condition: any, msg?: string): asserts condition {
+  if (!condition) {
+    throw new Error(msg);
+  }
+}
+
 export function stripWidgets(
   outputs: nbformat.IOutput[],
   hideWidgets = true,

packages/core/src/utils.ts

@@ -4,15 +4,15 @@ import { useThebeLoader } from './ThebeLoaderProvider';
 import { useThebeConfig } from './ThebeServerProvider';
 
 const RenderMimeRegistryContext = React.createContext<
-  { rendermime: IRenderMimeRegistry } | undefined
+  { rendermime: IRenderMimeRegistry | undefined } | undefined
 >(undefined);
 
 /* future: could allow for renderer configuration here */
 export function ThebeRenderMimeRegistryProvider({ children }: React.PropsWithChildren) {
   const { core } = useThebeLoader();
   const { config } = useThebeConfig();
   const rendermime = React.useMemo(
-    () => core?.makeRenderMimeRegistry(config?.mathjax) as IRenderMimeRegistry,
+    () => core?.makeRenderMimeRegistry(config?.mathjax),
     [core, config],
   );