fix: nextjs

Author: echarles

examples/next-js/src/app/page.tsx

@@ -4,7 +4,7 @@ import Image from "next/image";
 import dynamic from 'next/dynamic';
 
 const JupyterComponentNoSSR = dynamic(
-  () => import('../components/CellComponent'),
+  () => import('../components/NotebookComponent'),
   { 
     ssr: false,
     loading: () => <p>Loading Jupyter Component...</p>

examples/next-js/src/components/CellComponent.tsx

@@ -6,40 +6,41 @@
 
 'use client';
 
-import { useEffect, useState } from 'react';
-import { useJupyter, JupyterReactTheme } from '@datalayer/jupyter-react';
+import { useJupyter, JupyterReactTheme, Cell } from '@datalayer/jupyter-react';
+/*
 import dynamic from 'next/dynamic';
-
-// Dynamically import the Cell component with SSR disabled
 const Cell = dynamic(
   () => import('@datalayer/jupyter-react').then((mod) => ({ default: mod.Cell })),
   { 
     ssr: false,
     loading: () => <p>Loading Jupyter Cell...</p>
   }
 );
-
+*/
 export const CellComponent = () => {
   const { defaultKernel } = useJupyter({
     jupyterServerUrl: "https://oss.datalayer.run/api/jupyter-server",
     jupyterServerToken: "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6",
     startDefaultKernel: true,
   });
-  if (!defaultKernel) {
-    return <p>Loading Jupyter Cell...</p>;
-  }
   return (
     <>
-       <div style={{fontSize: 20}}>Jupyter Cell in Next.js</div>
-      <JupyterReactTheme>
-        <Cell 
-          id="test-cell"
-          type="code"
-          source="1+1"
-          kernel={defaultKernel}
-          autoStart
-        />
-      </JupyterReactTheme>
+      {defaultKernel ?
+        <>
+          <div style={{fontSize: 20}}>Jupyter Cell in Next.js</div>
+          <JupyterReactTheme>
+            <Cell
+              id="test-cell"
+              type="code"
+              source="1+1"
+              kernel={defaultKernel}
+              autoStart
+            />
+          </JupyterReactTheme>
+        </>
+      :
+        <p>Loading Jupyter Cell...</p>
+      }
     </>
   )
 }

examples/next-js/src/components/NotebookComponent.tsx

@@ -6,30 +6,60 @@
 
 'use client'
 
-import { JupyterReactTheme, Notebook, CellSidebarExtension, CellSidebarButton } from '@datalayer/jupyter-react';
-import { NotebookToolbar } from '@datalayer/jupyter-react';
+import { useJupyter, JupyterReactTheme, Notebook2, NotebookToolbar, CellSidebarExtension, CellSidebarButton } from '@datalayer/jupyter-react';
+import { Box } from '@primer/react';
 import { PrimerTheme } from './PrimerTheme';
 
-type NotebookComponentProps = {
+type INotebookComponentProps = {
   colorMode?: 'light' | 'dark';
   theme?: PrimerTheme;
 }
 
-export const NotebookComponent = (props: NotebookComponentProps) => {
-  const { colorMode, theme } = props;
+export const NotebookComponent = (props: INotebookComponentProps) => {
+//  const { colorMode, theme } = props;
+  const { defaultKernel, serviceManager } = useJupyter({
+    jupyterServerUrl: "https://oss.datalayer.run/api/jupyter-server",
+    jupyterServerToken: "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6",
+    startDefaultKernel: true,
+  });
   return (
     <>
-      <div style={{fontSize: 20}}>Jupyter Notebook in Next.js</div>
-      <JupyterReactTheme>
-        <Notebook
-          path="ipywidgets.ipynb"
-          id="notebook-nextjs-1"
-          cellSidebarMargin={120}
-          height="500px"
-          extensions={[new CellSidebarExtension({ factory: CellSidebarButton })]}
-          Toolbar={NotebookToolbar}
-        />
-    </JupyterReactTheme>
+     { defaultKernel && serviceManager ?
+      <>
+        <div style={{fontSize: 20}}>Jupyter Notebook in Next.js</div>
+        <JupyterReactTheme>
+          <Box
+            sx={{
+              '& .jp-NotebookPanel': {
+                height: '500px !important',
+                maxHeight: '500px !important',
+                width: '100%',
+                overflowY: 'hidden',
+              },
+              '& .jp-Notebook': {
+                flex: '1 1 auto !important',
+                height: '500px !important',
+                maxHeight: '500px !important',
+                overflowY: 'scroll',
+              },
+            }}
+          >
+            <Notebook2
+              path="ipywidgets.ipynb"
+              id="notebook-nextjs-1"
+              cellSidebarMargin={120}
+              height="500px"
+              kernelId={defaultKernel.id}
+              serviceManager={serviceManager}
+              extensions={[new CellSidebarExtension({ factory: CellSidebarButton })]}
+              Toolbar={NotebookToolbar}
+            />
+          </Box>
+        </JupyterReactTheme>
+      </>
+    :
+      <p>Loading Jupyter Notebook...</p>
+    }
   </>
   )
 }

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/jupyter-react",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Jupyter React - React.js components 100% compatible with Jupyter.",
   "license": "MIT",
   "main": "lib/index.js",

packages/react/src/components/notebook/Notebook2.tsx

@@ -195,8 +195,8 @@ export function Notebook2(props: React.PropsWithChildren<INotebook2Props>): JSX.
             overflowY: 'scroll',
           },
           '& .jp-NotebookPanel': {
-            height: '100% !important',
-            width: '100% !important',
+//            height: '100% !important',
+//            width: '100% !important',
           },
           '& .jp-Toolbar': {
             display: 'none',