Fix: example (#383)

* rename: notebook2

* output: reactive codemirror editor

* fix: nextjs

* lint

* fix: cell example

* fix: plotlye

* example: vite

* fix: notebook2 example

* fix: notebook2 sidebar

* fix: enable back the sidebars in the examples

* readme

Author: echarles

README.md

@@ -5,6 +5,10 @@
 # 🪐 ⚛️ Jupyter UI
 
 > React.js components 💯% compatible with 🪐 Jupyter.
+>
+> Documentation: https://jupyter-ui.datalayer.tech
+>
+> Storybook: https://jupyter-ui-storybook.datalayer.tech
 
 Jupyter UI is a set of [React.js](https://react.dev) components that allow a frontend/webapp developer to build data products compatible with the [Jupyter](https://jupyter.org) ecosystem. The user interface delivers executable notebooks, cells, terminals, file browsers and allows the developer to manage a full integrated React tree instead of relying on iframes to display the Jupyter noteboks.
 

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,64 @@
 
 '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';
+import { useMemo } from 'react';
 
-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,
+  });
+  const extensions = useMemo(() => [
+    new CellSidebarExtension({ factory: CellSidebarButton })
+  ], []);
   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={extensions}
+              Toolbar={NotebookToolbar}
+            />
+          </Box>
+        </JupyterReactTheme>
+      </>
+    :
+      <p>Loading Jupyter Notebook...</p>
+    }
   </>
   )
 }

examples/vite/src/App.tsx

@@ -6,7 +6,9 @@
 
 import { useState } from "react";
 import reactLogo from "./assets/react.svg";
-import CellExample from "./examples/CellExample";
+import { useJupyter, JupyterReactTheme } from '@datalayer/jupyter-react';
+import { CellExample } from "./examples/CellExample";
+import { NotebookExample } from "./examples/NotebookExample";
 
 // Fix for controls version failing to load in Vite.
 // import * as controls from "@jupyter-widgets/controls/lib/index";
@@ -16,11 +18,19 @@ import CellExample from "./examples/CellExample";
 import "./App.css";
 
 function App() {
+  const { defaultKernel, serviceManager } = useJupyter({
+    jupyterServerUrl: "https://oss.datalayer.run/api/jupyter-server",
+    jupyterServerToken: "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6",
+    startDefaultKernel: true,
+  });
   const [count, setCount] = useState(0);
   return (
     <div className="App">
       <>
-        <CellExample />
+        <JupyterReactTheme>
+          { defaultKernel && <CellExample kernel={defaultKernel}/> }
+          { defaultKernel && serviceManager && <NotebookExample kernel={defaultKernel} serviceManager={serviceManager}/> }
+        </JupyterReactTheme>
       </>
       <div>
         <a href="https://reactjs.org" target="_blank">

examples/vite/src/examples/CellExample.tsx

@@ -5,8 +5,7 @@
  */
 
 import { Box, Button, Label } from '@primer/react';
-import { CodeCell } from '@jupyterlab/cells';
-import { JupyterReactTheme, useJupyter, Cell, KernelIndicator, useKernelsStore, useCellsStore } from '@datalayer/jupyter-react';
+import { Cell, KernelIndicator, useKernelsStore, useCellsStore, Kernel } from '@datalayer/jupyter-react';
 
 const CELL_ID = 'cell-example-1';
 
@@ -15,12 +14,16 @@ const DEFAULT_SOURCE = `from IPython.display import display
 for i in range(10):
     display('I am a long string which is repeatedly added to the dom in separated divs: %d' % i)`;
 
-const CellExample = () => {
-  const { defaultKernel } = useJupyter();
+type ICellExampleProps = {
+  kernel: Kernel;
+}
+
+export const CellExample = (props: ICellExampleProps) => {
+  const { kernel } = props;
   const cellsStore = useCellsStore();
   const kernelsStore = useKernelsStore();
   return (
-    <JupyterReactTheme>
+    <>
       <Box as="h1">A Jupyter Cell</Box>
       <Box>
         Source: {cellsStore.getSource(CELL_ID)}
@@ -29,24 +32,24 @@ const CellExample = () => {
         Outputs Count: {cellsStore.getOutputsCount(CELL_ID)}
       </Box>
       <Box>
-        Kernel State: <Label>{defaultKernel && kernelsStore.getExecutionState(defaultKernel.id)}</Label>
+        Kernel State: <Label>{kernelsStore.getExecutionState(kernel.id)}</Label>
       </Box>
       <Box>
-        Kernel Phase: <Label>{defaultKernel && kernelsStore.getExecutionPhase(defaultKernel.id)}</Label>
+        Kernel Phase: <Label>{kernelsStore.getExecutionPhase(kernel.id)}</Label>
       </Box>
       <Box display="flex">
         <Box>
           Kernel Indicator:
         </Box>
         <Box ml={3}>
-          <KernelIndicator kernel={defaultKernel && defaultKernel.connection}/>
+          <KernelIndicator kernel={kernel.connection}/>
         </Box>
       </Box>
       <Box>
         <Button onClick={() => cellsStore.execute(CELL_ID)}>Run cell</Button>
       </Box>
       <Cell source={DEFAULT_SOURCE} id={CELL_ID}/>
-    </JupyterReactTheme>
+    </>
   )
 }
 

examples/vite/src/examples/NotebookExample.tsx

@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2021-2023 Datalayer, Inc.
+ *
+ * MIT License
+ */
+
+import { useMemo } from 'react';
+import { Box } from '@primer/react';
+import { Notebook2, Kernel, NotebookToolbar, CellSidebarExtension, CellSidebarButton } from '@datalayer/jupyter-react';
+import { ServiceManager } from '@jupyterlab/services';
+
+const NOTEBOOK_ID = 'notebook-example-1';
+
+type INotebookExampleProps = {
+  kernel: Kernel;
+  serviceManager: ServiceManager.IManager;
+}
+
+export const NotebookExample = (props: INotebookExampleProps) => {
+  const { kernel, serviceManager } = props;
+  const extensions = useMemo(() => [
+    new CellSidebarExtension({ factory: CellSidebarButton })
+  ], []);
+  return (
+    <>
+      <Box as="h1">A Jupyter Notebook</Box>
+      <Notebook2
+        path="ipywidgets.ipynb"
+        id={NOTEBOOK_ID}
+        serviceManager={serviceManager}
+        kernelId={kernel.id}
+        extensions={extensions}
+        Toolbar={NotebookToolbar}
+      />
+    </>
+  )
+}
+
+export default NotebookExample;

packages/react/package.json

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

packages/react/src/app/tabs/components/NotebookComponent.tsx

@@ -13,7 +13,7 @@ export const NotebookComponent = () => {
   return (
     <>
       <Notebook
-        startDefaultKernel={true}
+        startDefaultKernel
         nbformat={nbformat}
         id="notebook-id"
         cellSidebarMargin={60}

packages/react/src/components/codemirror/CodeMirrorDatalayerEditor.tsx

@@ -80,7 +80,7 @@ export const CodeMirrorDatalayerEditor = (props: {
   };
   useEffect(() => {
     outputStore.setInput(sourceId, code);
-   const language = new Compartment();
+    const language = new Compartment();
     const keyBinding = [
       {
         key: 'Shift-Enter',
@@ -92,10 +92,10 @@ export const CodeMirrorDatalayerEditor = (props: {
       doc: code,
       extensions: [
         basicSetup,
-       language.of(python()),
+        language.of(python()),
         EditorView.lineWrapping,
         keymap.of([...keyBinding]),
-       codeMirrorTheme,
+        codeMirrorTheme,
         EditorView.updateListener.of((viewUpdate: ViewUpdate) => {
           if (viewUpdate.docChanged) {
             const source = viewUpdate.state.doc.toString();