User notebooks

package.json

@@ -88,6 +88,7 @@
     "react-dom": "18.3.1",
     "react-error-boundary": "^4.0.4",
     "react-intersection-observer": "^9.5.2",
+    "react-ipynb-renderer": "^2.2.4",
     "react-markdown": "^9.0.3",
     "react-pdf": "^7.7.0",
     "react-plotly.js": "^2.6.0",

src/app/api/github/download-notebook/route.ts

@@ -1,5 +1,5 @@
 import { NextResponse } from 'next/server';
-import { downloadZippedFolder } from '@/util/virtual-lab/github';
+// import { downloadZippedNotebook } from '@/util/virtual-lab/github';
 import { assertErrorMessage } from '@/util/utils';
 
 export async function GET(request: Request): Promise<NextResponse> {
@@ -11,9 +11,9 @@ export async function GET(request: Request): Promise<NextResponse> {
   }
 
   try {
-    const zipContent = await downloadZippedFolder(folder);
+    // const zipContent = await downloadZippedFolder(folder);
 
-    return new NextResponse(zipContent, {
+    return new NextResponse(null, {
       headers: {
         'Content-Type': 'application/zip',
         'Content-Disposition': `attachment; filename="${folder}.zip"`,

src/app/api/github/fetch-file/route.ts

@@ -1,5 +1,5 @@
 import { NextResponse } from 'next/server';
-import { fetchFile } from '@/util/virtual-lab/github';
+import { fetchGithubFile } from '@/util/virtual-lab/github';
 
 export async function GET(request: Request): Promise<NextResponse> {
   const { searchParams } = new URL(request.url);
@@ -9,7 +9,7 @@ export async function GET(request: Request): Promise<NextResponse> {
     return NextResponse.json({ error: 'Missing required parameters' }, { status: 400 });
   }
 
-  const file = await fetchFile(path);
+  const file = await fetchGithubFile(path);
 
   return new NextResponse(file, {
     headers: {

src/app/virtual-lab/lab/[virtualLabId]/project/[projectId]/(pages)/notebooks/ContentModal.tsx

@@ -1,53 +1,75 @@
 import { useEffect, useState } from 'react';
 import { Modal } from 'antd/lib';
 import ReactMarkdown from 'react-markdown';
-import { basePath, notebookRepository } from '@/config';
+import { IpynbRenderer } from 'react-ipynb-renderer';
+import { Notebook } from '@/util/virtual-lab/github';
+import { basePath } from '@/config';
+
+import 'react-ipynb-renderer/dist/styles/monokai.css';
 
 import 'github-markdown-css';
+import { notification } from '@/api/notifications';
 
 export default function ContentModal({
-  file,
+  notebook,
   onCancel,
+  display,
 }: {
-  file: { path: string; type: 'notebook' | 'text' } | null;
+  notebook: Notebook | null;
+  display: 'notebook' | 'readme' | null;
   onCancel: () => void;
 }) {
   const [content, setContent] = useState<string | null>(null);
 
   useEffect(() => {
+    const controller = new AbortController();
+
     async function fetchFile() {
-      if (!file) return;
-      const res = await fetch(
-        `${basePath}/api/github/fetch-file?path=${encodeURIComponent(file.path)}`
-      );
-
-      if (!res.ok) {
-        setContent('Cannot display the contents, ensure the repository is public');
-      } else {
-        setContent(await res.text());
+      if (!notebook || !display) return;
+
+      try {
+        const res = await fetch(
+          `${basePath}/api/github/fetch-file?path=${encodeURIComponent(display === 'notebook' ? notebook.notebookUrl : notebook.readmeUrl)}`,
+          { signal: controller.signal }
+        );
+
+        if (!res.ok) {
+          notification.error('Cannot display the contents, ensure the repository is public');
+        } else {
+          setContent(await res.text());
+        }
+      } catch (error) {
+        if (error instanceof Error && error.name !== 'AbortError') {
+          notification.error('An error occurred while fetching the file');
+        }
       }
     }
 
     fetchFile();
-  }, [file]);
+
+    return () => controller.abort();
+  }, [notebook, display]);
 
   return (
-    <Modal open={!!file && !!content} onCancel={onCancel} footer={false} width="70%">
+    <Modal
+      open={!!notebook && !!content}
+      onCancel={() => {
+        setContent(null);
+        onCancel();
+      }}
+      footer={false}
+      width="70%"
+    >
       <div>
-        {file?.type === 'text' && (
+        {display === 'readme' && !!content && (
           <div className="markdown-body">
             <ReactMarkdown>{content}</ReactMarkdown>
           </div>
         )}
 
-        {file?.type === 'notebook' && content && (
-          <div className="h-[80vh] w-full">
-            <iframe
-              title={file.path}
-              src={`https://nbviewer.org/github/${notebookRepository.user}/${notebookRepository.repository}/blob/main/${encodeURIComponent(file.path)}`}
-              width="100%"
-              height="100%"
-            />
+        {display === 'notebook' && !!notebook && !!content && (
+          <div className="h-[80vh] w-full overflow-y-scroll">
+            <IpynbRenderer ipynb={JSON.parse(content)} />
           </div>
         )}
       </div>