Add notebook picker to toolbar

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

Author: andyjakubowski

jupyterlab_deepnote/contents.py

@@ -1,7 +1,6 @@
 # deepnote_jupyter_extension/contents.py
 from jupyter_server.services.contents.filemanager import FileContentsManager
 from typing import cast
-import nbformat
 
 import yaml
 from nbformat.v4 import new_notebook, new_code_cell, new_markdown_cell
@@ -17,6 +16,7 @@ def yaml_to_ipynb(yaml_text: str):
     notebooks = (
         data.get("project", {}).get("notebooks", []) if isinstance(data, dict) else []
     )
+
     if not notebooks:
         return new_notebook(cells=[])
 
@@ -33,7 +33,9 @@ def yaml_to_ipynb(yaml_text: str):
         else:
             cells.append(new_markdown_cell(content))
 
-    return new_notebook(cells=cells, metadata={})
+    notebook_names = [nb.get("name", "") for nb in notebooks]
+    metadata = {"notebook_names": notebook_names}
+    return new_notebook(cells=cells, metadata=metadata)
 
 
 def yaml_to_ipynb_dummy(yaml_text: str) -> dict:
@@ -43,9 +45,6 @@ def yaml_to_ipynb_dummy(yaml_text: str) -> dict:
 class DeepnoteContentsManager(FileContentsManager):
     def get(self, path, content=True, type=None, format=None, require_hash=False):
         if path.endswith(".deepnote") and (content == 1):
-            self.log.info(
-                "\n\n\n🌴🌴🌴 path %s, content: %s, type: %s", path, content, type
-            )
             os_path = self._get_os_path(path)
 
             # _read_file may return 2- or 3-tuple depending on raw flag in implementation hints
@@ -56,8 +55,7 @@ def get(self, path, content=True, type=None, format=None, require_hash=False):
             else:
                 yaml_text = cast(str, _content)
 
-            nb_dict = yaml_to_ipynb(yaml_text)
-            nb_node = nbformat.from_dict(nb_dict)
+            nb_node = yaml_to_ipynb(yaml_text)
 
             model = self._base_model(path)
             model["type"] = "notebook"

src/index.ts

@@ -0,0 +1,93 @@
+import {
+  JupyterFrontEnd,
+  JupyterFrontEndPlugin
+} from '@jupyterlab/application';
+import React from 'react';
+import { IToolbarWidgetRegistry, ReactWidget } from '@jupyterlab/apputils';
+import {
+  INotebookWidgetFactory,
+  NotebookPanel,
+  NotebookWidgetFactory
+} from '@jupyterlab/notebook';
+import { Widget } from '@lumino/widgets';
+import { HTMLSelect } from '@jupyterlab/ui-components';
+
+const plugin: JupyterFrontEndPlugin<void> = {
+  id: 'jupyterlab-deepnote:plugin',
+  description: 'Open .deepnote files as notebooks.',
+  autoStart: true,
+  requires: [INotebookWidgetFactory, IToolbarWidgetRegistry],
+  activate: (
+    app: JupyterFrontEnd,
+    notebookWidgetFactory: NotebookWidgetFactory,
+    toolbarRegistry: IToolbarWidgetRegistry
+  ) => {
+    app.docRegistry.addFileType(
+      {
+        name: 'deepnote',
+        displayName: 'Deepnote Notebook',
+        extensions: ['.deepnote'],
+        mimeTypes: ['text/yaml', 'application/x-yaml'],
+        fileFormat: 'text',
+        contentType: 'file'
+      },
+      [notebookWidgetFactory.name]
+    );
+
+    app.docRegistry.setDefaultWidgetFactory(
+      'deepnote',
+      notebookWidgetFactory.name
+    );
+
+    toolbarRegistry.addFactory<NotebookPanel>(
+      notebookWidgetFactory.name,
+      'deepnote:switch-notebook',
+      panel => {
+        if (!panel.context.path.endsWith('.deepnote')) {
+          return new Widget(); // don’t render for .ipynb or others
+        }
+
+        return new NotebookPicker(panel);
+      }
+    );
+  }
+};
+
+class NotebookPicker extends ReactWidget {
+  constructor(private panel: NotebookPanel) {
+    super();
+    // when the context becomes ready, trigger re-render
+    void panel.context.ready.then(() => {
+      this.update();
+    });
+  }
+
+  render(): JSX.Element {
+    const metadataNames =
+      this.panel.context.model.getMetadata('notebook_names');
+    const names =
+      Array.isArray(metadataNames) &&
+      metadataNames.every(n => typeof n === 'string')
+        ? metadataNames
+        : [];
+
+    return (
+      <HTMLSelect
+        value={names[0] ?? '-'}
+        onChange={() => {}}
+        onKeyDown={() => {}}
+        aria-label="Select active notebook"
+        title="Select active notebook"
+      >
+        <option value="-">-</option>
+        {names.map(n => (
+          <option key={n} value={n}>
+            {n}
+          </option>
+        ))}
+      </HTMLSelect>
+    );
+  }
+}
+
+export default plugin;