feat/thebe v2 - interactive figures in articles

.changeset/dull-ladybugs-pay.md

@@ -0,0 +1,8 @@
+---
+'myst-to-react': patch
+'@myst-theme/jupyter': patch
+'@myst-theme/article': patch
+'@myst-theme/site': patch
+---
+
+Updates for Jupyter

.changeset/gold-trees-do.md

@@ -0,0 +1,5 @@
+---
+'@myst-theme/site': patch
+---
+
+Fix the table of contents indentation

packages/jupyter/package.json

@@ -17,7 +17,8 @@
     "build:esm": "tsc --module es2020 --outDir dist/esm",
     "build:types": "tsc --declaration --emitDeclarationOnly --declarationMap --outDir dist/types",
     "build": "npm-run-all -l clean -p build:cjs build:esm build:types",
-    "test": "vitest run"
+    "test": "vitest run",
+    "test:watch": "vitest watch"
   },
   "dependencies": {
     "@headlessui/react": "^1.7.15",
@@ -30,20 +31,20 @@
     "myst-config": "^1.0.0",
     "myst-frontmatter": "^1.0.0",
     "myst-spec": "^0.0.4",
+    "myst-to-react": "^0.3.2",
     "nanoid": "^4.0.2",
     "nbtx": "^0.2.3",
     "react-syntax-highlighter": "^15.5.0",
     "swr": "^2.1.5",
-    "thebe-core": "^0.2.5",
-    "thebe-lite": "^0.2.5",
-    "thebe-react": "^0.2.5",
+    "thebe-core": "^0.2.6",
+    "thebe-lite": "^0.2.6",
+    "thebe-react": "^0.2.6",
     "unist-util-select": "^4.0.3"
   },
   "peerDependencies": {
     "@types/react": "^16.8 || ^17.0 || ^18.0",
     "@types/react-dom": "^16.8 || ^17.0 || ^18.0",
     "react": "^16.8 || ^17.0 || ^18.0",
     "react-dom": "^16.8 || ^17.0 || ^18.0"
-  },
-  "devDependencies": {}
+  }
 }

packages/jupyter/src/ConnectionStatusTray.tsx

@@ -1,19 +1,20 @@
 import { useEffect, useState } from 'react';
-import { useThebeServer, useThebeSession } from 'thebe-react';
+import { useThebeServer } from 'thebe-react';
 import { useComputeOptions } from './providers';
 import type { ThebeEventData, ThebeEventType } from 'thebe-core';
+import { selectAreExecutionScopesBuilding, useExecutionScope } from './execute';
 
 export function ConnectionStatusTray() {
   const { thebe } = useComputeOptions();
   const { connecting, ready: serverReady, error: serverError, events } = useThebeServer();
-  const { starting, ready: sessionReady, error: sessionError } = useThebeSession();
+  const { slug, ready: scopeReady, state } = useExecutionScope();
   const [show, setShow] = useState(false);
   const [unsub, setUnsub] = useState<() => void | undefined>();
   const [status, setStatus] = useState<string>('[client] Connecting...');
 
-  const error = serverError || sessionError;
-  const ready = serverReady && sessionReady;
-  const busy = connecting || starting;
+  const error = serverError; // TODO scope bulding error handling || sessionError;
+  const ready = serverReady && scopeReady;
+  const busy = connecting || selectAreExecutionScopesBuilding(state, slug);
 
   const handleStatus = (event: any, data: ThebeEventData) => {
     setStatus(`[${data.subject}]: ${data.message}`);
@@ -44,6 +45,7 @@ export function ConnectionStatusTray() {
 
   const host = thebe?.useBinder ? 'Binder' : thebe?.useJupyterLite ? 'JupyterLite' : 'Local Server';
 
+  // TODO radix ui toast!
   if (show && error) {
     return (
       <div className="fixed p-3 text-sm text-gray-700 bg-white border rounded shadow-lg bottom-2 sm:right-2 max-w-[90%] md:max-w-[300px] min-w-0">

packages/jupyter/src/ErrorTray.tsx

@@ -0,0 +1,60 @@
+import { useEffect, useState } from 'react';
+import type { PassiveCellRenderer } from 'thebe-core';
+import type { IThebeNotebookError } from 'thebe-react';
+import { useThebeLoader } from 'thebe-react';
+
+function ErrorDecoration({ children, idx }: React.PropsWithChildren<{ idx?: number }>) {
+  return (
+    <div className="relative py-3 mx-2 my-8 border rounded">
+      <div className="absolute z-10 flex items-center bg-white -top-3 -left-2">
+        {idx && <div className="ml-1 text-sm text-gray-500">cell #: {idx}</div>}
+      </div>
+      <div className="mx-3">{children}</div>
+    </div>
+  );
+}
+
+function ErrorTrayMessage({ errors }: { errors: IThebeNotebookError[] }) {
+  const { core } = useThebeLoader();
+
+  const [cells, setCells] = useState<PassiveCellRenderer[]>([]);
+  const [refs, setRefs] = useState<((node: HTMLDivElement) => void)[]>([]);
+
+  useEffect(() => {
+    if (!core) return;
+    const cs = errors.map(() => new core.PassiveCellRenderer('any'));
+    setRefs(
+      errors.map((_, idx) => (node: any) => {
+        if (node) {
+          cs[idx].attachToDOM(node);
+          cs[idx].render(errors[idx].error ?? []);
+        }
+      }),
+    );
+    setCells(cells);
+  }, [core, errors]);
+
+  if (!core) return null;
+  return (
+    <div>
+      {errors.map((error, idx) => (
+        <div className="min-w-[400px]">
+          <ErrorDecoration idx={error.index}>
+            <div className="z-100" key={error.id} ref={refs[idx]}></div>
+          </ErrorDecoration>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function ErrorTray({ errors }: { errors: IThebeNotebookError[] }) {
+  return (
+    <div className="relative px-4 pt-3 mt-8 text-sm text-red-600 border border-red-400 rounded border-1">
+      <div>
+        <span className="font-bold">Error</span> - a page refresh may resolve this.
+      </div>
+      <ErrorTrayMessage errors={errors} />
+    </div>
+  );
+}

packages/jupyter/src/controls/ArticleCellControls.tsx

@@ -0,0 +1,54 @@
+import { useThebeServer } from 'thebe-react';
+import { useNotebookExecution } from '../execute/hooks';
+import { Reset, Run, SpinnerStatusButton } from './Buttons';
+
+import { selectAreExecutionScopesBuilding } from '../execute';
+
+export function ArticleStatusBadge({ id }: { id: string }) {
+  const { connect, connecting } = useThebeServer();
+  const { slug, state, start, ready, executionCount } = useNotebookExecution(id);
+
+  const building = selectAreExecutionScopesBuilding(state, slug);
+
+  const handleStart = () => {
+    connect();
+    start();
+  };
+
+  return (
+    <SpinnerStatusButton
+      ready={ready}
+      busy={building || connecting}
+      modified={executionCount != null}
+      onClick={handleStart}
+    />
+  );
+}
+
+export function ArticleRunNotebook({ id }: { id: string }) {
+  const { ready, cellIsExecuting, notebookIsBusy, execute } = useNotebookExecution(id);
+  if (!ready) return null;
+  return (
+    <Run
+      ready={ready}
+      executing={cellIsExecuting}
+      disabled={notebookIsBusy}
+      onClick={execute}
+      title="Run the notebook that creates this figure"
+    />
+  );
+}
+
+export function ArticleResetNotebook({ id }: { id: string }) {
+  const { ready, notebookIsResetting, notebookIsBusy, reset } = useNotebookExecution(id);
+  if (!ready) return null;
+  return (
+    <Reset
+      ready={ready}
+      resetting={notebookIsResetting}
+      disabled={notebookIsBusy}
+      onClick={reset}
+      title="Reset the figure to its original state and restart the kernel"
+    />
+  );
+}