📌 run notebooks on the correct path (#224)

* 📌 using notebook location to properly initialize `thebe` kernel/session

* 📌 provide location on navigate

* ❓NodeRenders cannot return strings, only ReactElements

* 👊🏽 bump to latest myst packages

* 🅾️ fix types

* 📕changeset

.changeset/two-crews-burn.md

@@ -0,0 +1,12 @@
+---
+'myst-to-react': patch
+'myst-demo': patch
+'@myst-theme/providers': patch
+'@myst-theme/jupyter': patch
+'@myst-theme/common': patch
+'@myst-theme/article': patch
+'@myst-theme/site': patch
+'@myst-theme/book': patch
+---
+
+Added ability to start thebe sessions for notebooks on the correct path such that relative importants and file loading will work. As a result base `myst` packages have also been upgraded, mainly for types so we can consume the new `location` field appropraitely, that holds the path information.

packages/common/package.json

@@ -19,9 +19,9 @@
     "build": "npm-run-all -l clean -p build:esm"
   },
   "dependencies": {
-    "myst-common": "^1.1.1",
-    "myst-config": "^1.1.1",
-    "myst-spec-ext": "^1.1.1",
+    "myst-common": "^1.1.4",
+    "myst-config": "^1.1.4",
+    "myst-spec-ext": "^1.1.4",
     "nbtx": "^0.2.3",
     "unist-util-select": "^4.0.3"
   }

packages/jupyter/package.json

@@ -28,10 +28,10 @@
     "ansi-to-react": "^6.1.6",
     "buffer": "^6.0.3",
     "classnames": "^2.3.2",
-    "myst-spec-ext": "^1.1.3",
-    "myst-common": "^1.1.3",
-    "myst-config": "^1.1.3",
-    "myst-frontmatter": "^1.1.3",
+    "myst-spec-ext": "^1.1.4",
+    "myst-common": "^1.1.4",
+    "myst-config": "^1.1.4",
+    "myst-frontmatter": "^1.1.4",
     "myst-spec": "^0.0.4",
     "myst-to-react": "^0.5.4",
     "nanoid": "^4.0.2",

packages/jupyter/src/execute/actions.ts

@@ -7,6 +7,7 @@ export function isNavigatePayload(payload: unknown): payload is NavigatePayload
   const maybePayload = payload as NavigatePayload;
   return (
     typeof maybePayload.slug === 'string' &&
+    typeof maybePayload.location === 'string' &&
     typeof maybePayload.mdast === 'object' &&
     Array.isArray(maybePayload.dependencies) &&
     Array.isArray(maybePayload.computables)
@@ -16,6 +17,7 @@ export function isNavigatePayload(payload: unknown): payload is NavigatePayload
 interface NavigatePayload {
   kind: SourceFileKind;
   slug: string;
+  location: string;
   mdast: GenericParent;
   dependencies: Dependency[];
   computables: Computable[];

packages/jupyter/src/execute/leaf.tsx

@@ -102,11 +102,13 @@ export function NotebookBuilder({
 export function SessionStarter({
   pageSlug,
   notebookSlug,
+  location,
   state,
   dispatch,
 }: {
   pageSlug: string;
   notebookSlug: string;
+  location: string | undefined;
   state: ExecuteScopeState;
   dispatch: React.Dispatch<ExecuteScopeAction>;
 }) {
@@ -119,22 +121,30 @@ export function SessionStarter({
   useEffect(() => {
     if (!core || !server || scope.session || lock.current) return;
     lock.current = true;
-    console.debug(`Jupyter: Starting session for ${pageSlug}-${notebookSlug}`);
+    console.debug(`Jupyter: Starting session for ${pageSlug}-${notebookSlug} at ${location}`);
 
     server.listRunningSessions().then((sessions) => {
       console.debug('Jupyter: running sessions', sessions);
-      const path = `/${pageSlug}-${notebookSlug}.ipynb`;
+
+      // the location gives us the correct path for the notebook including it's filename
+      // we need to replace the filename with one based on the page slug and notebook slug
+      // in order to allow for multiple independent sessions of the same notebook
+      let path = `/${pageSlug}-${notebookSlug}.ipynb`;
+      const match = location?.match(/(.*)\/.*.ipynb$/) ?? null;
+      if (match) {
+        path = `${match[1]}/${pageSlug}-${notebookSlug}.ipynb`;
+      }
 
       const existing = sessions.find((s) => s.path === path);
 
       if (existing) {
-        console.debug(`session already exists for ${pageSlug}-${notebookSlug}`, existing);
+        console.debug(`session already exists for ${path}`, existing);
         server.connectToExistingSession(existing, scope.rendermime).then((sesh) => {
           if (sesh == null) {
-            console.error(`Could not connect to session for ${pageSlug} ${notebookSlug}`);
+            console.error(`Could not connect to session for ${path}`);
             return;
           }
-          console.debug(`reconnected to session for ${pageSlug}/${notebookSlug}`, sesh);
+          console.debug(`reconnected to session for ${path}`, sesh);
           console.debug('restarting session', sesh);
           sesh.kernel?.restart().then(() => {
             const notebook = selectNotebookForPage(state, pageSlug, notebookSlug);
@@ -146,18 +156,17 @@ export function SessionStarter({
         server
           .startNewSession(scope.rendermime, {
             ...config?.kernels,
-            name: `${pageSlug}-${notebookSlug}.ipynb`,
             path,
           })
           .then((sesh) => {
             if (sesh == null) {
               server?.getKernelSpecs().then((specs) => {
-                console.error(`Could not start session for ${pageSlug} ${notebookSlug}`);
+                console.error(`Could not start session for ${path}`);
                 console.debug(`Available kernels: ${Object.keys(specs)}`);
               });
               return;
             }
-            console.debug(`session started for ${pageSlug}/${notebookSlug}`, sesh);
+            console.debug(`session started for ${path}`, sesh);
             const notebook = selectNotebookForPage(state, pageSlug, notebookSlug);
             notebook.attachSession(sesh);
             dispatch({ type: 'ADD_SESSION', payload: { pageSlug, notebookSlug, session: sesh } });