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,64 @@
 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(() => {
     async function fetchFile() {
-      if (!file) return;
+      if (!notebook || !display) return;
+
       const res = await fetch(
-        `${basePath}/api/github/fetch-file?path=${encodeURIComponent(file.path)}`
+        `${basePath}/api/github/fetch-file?path=${encodeURIComponent(display === 'notebook' ? notebook.notebookUrl : notebook.readmeUrl)}`
       );
 
       if (!res.ok) {
-        setContent('Cannot display the contents, ensure the repository is public');
+        notification.error('Cannot display the contents, ensure the repository is public');
       } else {
         setContent(await res.text());
       }
     }
 
     fetchFile();
-  }, [file]);
+  }, [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>