Switch notebooks

Signed-off-by: Andy Jakubowski <hello@andyjakubowski.com>

Author: andyjakubowski

jupyterlab_deepnote/contents.py

@@ -20,21 +20,40 @@ def yaml_to_ipynb(yaml_text: str):
     if not notebooks:
         return new_notebook(cells=[])
 
+    # Collect notebook names
+    notebook_names = [nb.get("name", "") for nb in notebooks]
+
+    # Build all_notebooks dict: name -> full nbformat notebook JSON
+    all_notebooks = {}
+    for nb in notebooks:
+        nb_blocks = nb.get("blocks", [])
+        nb_cells = []
+        for block in sorted(nb_blocks, key=lambda b: b.get("sortingKey", "")):
+            btype = block.get("type", "code")
+            content = block.get("content", "")
+            if btype == "code":
+                nb_cells.append(new_code_cell(content))
+            else:
+                nb_cells.append(new_markdown_cell(content))
+        # Use the notebook name as key
+        nb_name = nb.get("name", "")
+        all_notebooks[nb_name] = new_notebook(cells=nb_cells)
+
+    # Use first notebook's cells to render initially
     nb0 = notebooks[0]
     blocks = nb0.get("blocks", [])
     cells = []
-
     for block in sorted(blocks, key=lambda b: b.get("sortingKey", "")):
         btype = block.get("type", "code")
         content = block.get("content", "")
-
         if btype == "code":
             cells.append(new_code_cell(content))
         else:
             cells.append(new_markdown_cell(content))
 
-    notebook_names = [nb.get("name", "") for nb in notebooks]
-    metadata = {"notebook_names": notebook_names}
+    metadata = {
+        "deepnote": {"notebook_names": notebook_names, "notebooks": all_notebooks}
+    }
     return new_notebook(cells=cells, metadata=metadata)
 
 

src/index.tsx

@@ -54,17 +54,59 @@ const plugin: JupyterFrontEndPlugin<void> = {
 };
 
 class NotebookPicker extends ReactWidget {
+  private selected: string | null = null;
+
   constructor(private panel: NotebookPanel) {
     super();
-    // when the context becomes ready, trigger re-render
+
     void panel.context.ready.then(() => {
+      const deepnoteMetadata = this.panel.context.model.getMetadata('deepnote');
+      const metadataNames = deepnoteMetadata?.notebook_names;
+      const names =
+        Array.isArray(metadataNames) &&
+        metadataNames.every(n => typeof n === 'string')
+          ? metadataNames
+          : [];
+
+      this.selected = names.length > 0 ? names[0] : null;
       this.update();
     });
   }
 
+  private handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const model = this.panel.model;
+    if (!model) {
+      return;
+    }
+
+    const selected = event.target.value;
+    const deepnoteMetadata = this.panel.context.model.getMetadata('deepnote');
+    const notebooks = deepnoteMetadata?.notebooks;
+
+    if (notebooks && selected in notebooks) {
+      // clone the notebook JSON
+      const newModelData = { ...notebooks[selected] };
+
+      // preserve deepnote metadata *without* re-inserting all notebooks
+      newModelData.metadata = {
+        ...(newModelData.metadata ?? {}),
+        deepnote: {
+          notebook_names: deepnoteMetadata?.notebook_names ?? [],
+          notebooks: deepnoteMetadata?.notebooks ?? {}
+        }
+      };
+
+      model.fromJSON(newModelData);
+      model.dirty = false;
+    }
+
+    this.selected = selected;
+    this.update();
+  };
+
   render(): JSX.Element {
-    const metadataNames =
-      this.panel.context.model.getMetadata('notebook_names');
+    const deepnoteMetadata = this.panel.context.model.getMetadata('deepnote');
+    const metadataNames = deepnoteMetadata?.notebook_names;
     const names =
       Array.isArray(metadataNames) &&
       metadataNames.every(n => typeof n === 'string')
@@ -73,18 +115,21 @@ class NotebookPicker extends ReactWidget {
 
     return (
       <HTMLSelect
-        value={names[0] ?? '-'}
-        onChange={() => {}}
+        value={this.selected ?? '-'}
+        onChange={this.handleChange}
         onKeyDown={() => {}}
         aria-label="Select active notebook"
         title="Select active notebook"
       >
-        <option value="-">-</option>
-        {names.map(n => (
-          <option key={n} value={n}>
-            {n}
-          </option>
-        ))}
+        {names.length === 0 ? (
+          <option value="-">-</option>
+        ) : (
+          names.map(n => (
+            <option key={n} value={n}>
+              {n}
+            </option>
+          ))
+        )}
       </HTMLSelect>
     );
   }