Load notebooks from the CKHub API through their IDs in URL parameters (#63)

* Generate shareable URL using UUID

* Handle notebook from URL params

* Some debugging + handling of null readable IDs

* Linting

* Update Playwright Snapshots

* Add docstring for `generateShareURL`

* Generate shareable link in `showShareDialog`

* Remove redundant comments

* Simplify a few conditional statements

Co-authored-by: Peyton Murray <[email protected]>

* Use object destructuring

Co-Authored-By: Peyton Murray <[email protected]>

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Peyton Murray <[email protected]>

Author: 3 people

src/index.ts

@@ -17,6 +17,17 @@ import { competitions } from './pages/competitions';
 import { notebookPlugin } from './pages/notebook';
 import { generateDefaultNotebookName } from './notebook-name';
 
+/**
+ * Generate a shareable URL for the currently active notebook.
+ * @param notebookID – The ID of the notebook to share (can be readable_id or sharedId).
+ * @returns A URL string that points to the notebook with the given notebookID.
+ */
+function generateShareURL(notebookID: string): string {
+  const currentUrl = new URL(window.location.href);
+  const baseUrl = `${currentUrl.protocol}//${currentUrl.host}${currentUrl.pathname}`;
+  return `${baseUrl}?notebook=${notebookID}`;
+}
+
 /**
  * Get the current notebook panel
  */
@@ -43,8 +54,18 @@ const manuallySharing = new WeakSet<NotebookPanel>();
  * @param notebookContent - The content of the notebook to share, from which we extract the ID.
  */
 async function showShareDialog(sharingService: SharingService, notebookContent: INotebookContent) {
-  const id = (notebookContent.metadata.readableId || notebookContent.metadata.sharedId) as string;
-  const shareableLink = sharingService.makeRetrieveURL(id).toString();
+  // Grab the readable ID, or fall back to the UUID.
+  const readableID = notebookContent.metadata?.readableId as string | null;
+  const sharedID = notebookContent.metadata?.sharedId as string;
+
+  const notebookID = readableID ?? sharedID;
+
+  if (!notebookID) {
+    console.error('No notebook ID found for sharing');
+    return;
+  }
+
+  const shareableLink = generateShareURL(notebookID);
 
   const dialogResult = await showDialog({
     title: '',

src/pages/notebook.tsx

@@ -5,6 +5,8 @@ import { EverywhereIcons } from '../icons';
 import { ToolbarButton, IToolbarWidgetRegistry } from '@jupyterlab/apputils';
 import { DownloadDropdownButton } from '../ui-components/DownloadDropdownButton';
 import { Commands } from '../commands';
+import { SharingService } from '../sharing-service';
+import { INotebookContent } from '@jupyterlab/nbformat';
 
 export const notebookPlugin: JupyterFrontEndPlugin<void> = {
   id: 'jupytereverywhere:notebook',
@@ -19,57 +21,104 @@ export const notebookPlugin: JupyterFrontEndPlugin<void> = {
     const contents = app.serviceManager.contents;
 
     const params = new URLSearchParams(window.location.search);
-    const notebookId = params.get('notebook');
+    let notebookId = params.get('notebook');
 
-    if (notebookId) {
-      // TODO replace with API call (and iteration over cells to set `editable: false`)
-      const content = {
-        cells: [
-          {
-            cell_type: 'code',
-            execution_count: null,
-            id: '55eb9a2d-401d-4abd-b0eb-373ded5b408d',
-            metadata: {
-              // This makes cell non-editable
+    if (notebookId?.endsWith('.ipynb')) {
+      notebookId = notebookId.slice(0, -6);
+    }
+
+    /**
+     * Load a shared notebook from the CKHub API
+     */
+    const loadSharedNotebook = async (id: string): Promise<void> => {
+      try {
+        console.log(`Loading shared notebook with ID: ${id}`);
+
+        const apiUrl = 'http://localhost:8080/api/v1';
+        const sharingService = new SharingService(apiUrl);
+
+        console.log(`API URL: ${apiUrl}`);
+        console.log('Retrieving notebook from API...');
+
+        const notebookResponse = await sharingService.retrieve(id);
+        console.log('API Response received:', notebookResponse); // debug
+
+        const content: INotebookContent = notebookResponse.content;
+
+        // We make all cells read-only by setting editable: false
+        // by iterating over each cell in the notebook content.
+        if (content.cells) {
+          content.cells.forEach(cell => {
+            cell.metadata = {
+              ...cell.metadata,
               editable: false
-            },
-            outputs: [],
-            source: [`# This is notebook '${notebookId}'`]
-          }
-        ],
-        metadata: {
-          kernelspec: {
-            display_name: 'Python 3 (ipykernel)',
-            language: 'python',
-            name: 'python3'
-          },
-          language_info: {
-            codemirror_mode: {
-              name: 'ipython',
-              version: 3
-            },
-            file_extension: '.py',
-            mimetype: 'text/x-python',
-            name: 'python',
-            nbconvert_exporter: 'python',
-            pygments_lexer: 'ipython3'
-          }
-        },
-        nbformat: 4,
-        nbformat_minor: 5
-      };
-      contents
-        .save('Untitled.ipynb', {
+            };
+          });
+        }
+
+        content.metadata = {
+          ...content.metadata,
+          isSharedNotebook: true,
+          sharedId: notebookResponse.id,
+          readableId: notebookResponse.readable_id,
+          domainId: notebookResponse.domain_id
+        };
+
+        // Generate a meaningful filename for the shared notebook
+        const filename = `Shared_${notebookResponse.readable_id || notebookResponse.id}.ipynb`;
+
+        await contents.save(filename, {
           content,
           format: 'json',
           type: 'notebook',
           writable: false
-        })
-        .then(() => commands.execute('docmanager:open', { path: 'Untitled.ipynb' }));
+        });
+
+        await commands.execute('docmanager:open', {
+          path: filename,
+          factory: 'Notebook'
+        });
+
+        console.log(`Successfully loaded shared notebook: ${filename}`);
+      } catch (error) {
+        console.error('Failed to load shared notebook:', error);
+
+        const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+        const errorStack = error instanceof Error ? error.stack : undefined;
+
+        console.error('Error details:', {
+          message: errorMessage,
+          stack: errorStack,
+          notebookId: id,
+          errorType: typeof error,
+          errorConstructor: error?.constructor?.name
+        });
+
+        alert(`Failed to load shared notebook "${id}": ${errorMessage}`);
+        await createNewNotebook();
+      }
+    };
+
+    /**
+     * Create a new blank notebook
+     */
+    const createNewNotebook = async (): Promise<void> => {
+      try {
+        const result = await commands.execute('docmanager:new-untitled', { type: 'notebook' });
+        if (result) {
+          await commands.execute('docmanager:open', { path: 'Untitled.ipynb' });
+        }
+      } catch (error) {
+        console.error('Failed to create new notebook:', error);
+      }
+    };
+
+    // If a notebook ID is provided in the URL, load it; otherwise,
+    // create a new notebook
+    if (notebookId) {
+      void loadSharedNotebook(notebookId);
     } else {
-      commands.execute('docmanager:new-untitled', { type: 'notebook' }).then(() => {
-        commands.execute('docmanager:open', { path: 'Untitled.ipynb' });
-      });
+      void createNewNotebook();
     }
 
     const sidebarItem = new SidebarIcon({

src/sharing-service.ts

@@ -19,7 +19,7 @@ export interface IShareResponse {
   message: string;
   notebook: {
     id: UUID;
-    readable_id: string;
+    readable_id: string | null;
   };
 }
 
@@ -29,7 +29,7 @@ export interface IShareResponse {
 export interface INotebookResponse {
   id: UUID;
   domain_id: string;
-  readable_id: string;
+  readable_id: string | null;
   content: INotebookContent;
 }
 
@@ -85,15 +85,35 @@ export function validateNotebookContent(data: unknown): data is INotebookContent
  * @returns A boolean indicating whether the data conforms to the IShareResponse interface.
  */
 function validateShareResponse(data: unknown): data is IShareResponse {
-  return (
-    hasRequiredKeys<IShareResponse, keyof IShareResponse>(data, ['message', 'notebook']) &&
-    typeof (data as IShareResponse).message === 'string' &&
-    hasRequiredKeys<IShareResponse['notebook'], keyof IShareResponse['notebook']>(
-      (data as IShareResponse).notebook,
+  if (!hasRequiredKeys<IShareResponse, keyof IShareResponse>(data, ['message', 'notebook'])) {
+    return false;
+  }
+
+  const response = data as IShareResponse;
+
+  if (typeof response.message !== 'string') {
+    return false;
+  }
+
+  if (
+    !hasRequiredKeys<IShareResponse['notebook'], keyof IShareResponse['notebook']>(
+      response.notebook,
       ['id', 'readable_id']
-    ) &&
-    validateUUID((data as IShareResponse).notebook.id)
-  );
+    )
+  ) {
+    return false;
+  }
+
+  if (!validateUUID(response.notebook.id)) {
+    return false;
+  }
+
+  // readable_id can be null or string
+  if (response.notebook.readable_id !== null && typeof response.notebook.readable_id !== 'string') {
+    return false;
+  }
+
+  return true;
 }
 
 /**
@@ -103,18 +123,37 @@ function validateShareResponse(data: unknown): data is IShareResponse {
  * @returns A boolean indicating whether the data is a valid INotebookResponse.
  */
 function validateNotebookResponse(data: unknown): data is INotebookResponse {
-  return (
-    hasRequiredKeys<INotebookResponse, keyof INotebookResponse>(data, [
+  if (
+    !hasRequiredKeys<INotebookResponse, keyof INotebookResponse>(data, [
       'id',
       'domain_id',
       'readable_id',
       'content'
-    ]) &&
-    validateUUID((data as INotebookResponse).id) &&
-    typeof (data as INotebookResponse).domain_id === 'string' &&
-    typeof (data as INotebookResponse).readable_id === 'string' &&
-    validateNotebookContent((data as INotebookResponse).content)
-  );
+    ])
+  ) {
+    return false;
+  }
+
+  const response = data as INotebookResponse;
+
+  if (!validateUUID(response.id)) {
+    return false;
+  }
+
+  if (typeof response.domain_id !== 'string') {
+    return false;
+  }
+
+  // readable_id can be null or string
+  if (response.readable_id !== null && typeof response.readable_id !== 'string') {
+    return false;
+  }
+
+  if (!validateNotebookContent(response.content)) {
+    return false;
+  }
+
+  return true;
 }
 
 /**