fix: notebook2 example

Author: echarles

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

@@ -9,6 +9,7 @@
 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 INotebookComponentProps = {
   colorMode?: 'light' | 'dark';
@@ -22,6 +23,9 @@ export const NotebookComponent = (props: INotebookComponentProps) => {
     jupyterServerToken: "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6",
     startDefaultKernel: true,
   });
+  const extensions = useMemo(() => [
+    new CellSidebarExtension({ factory: CellSidebarButton })
+  ], []);
   return (
     <>
      { defaultKernel && serviceManager ?
@@ -51,7 +55,7 @@ export const NotebookComponent = (props: INotebookComponentProps) => {
               height="500px"
               kernelId={defaultKernel.id}
               serviceManager={serviceManager}
-              extensions={[new CellSidebarExtension({ factory: CellSidebarButton })]}
+//              extensions={extensions}
               Toolbar={NotebookToolbar}
             />
           </Box>

examples/vite/src/examples/NotebookExample.tsx

@@ -4,6 +4,7 @@
  * 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';
@@ -17,6 +18,9 @@ type INotebookExampleProps = {
 
 export const NotebookExample = (props: INotebookExampleProps) => {
   const { kernel, serviceManager } = props;
+  const extensions = useMemo(() => [
+    new CellSidebarExtension({ factory: CellSidebarButton })
+  ], []);
   return (
     <>
       <Box as="h1">A Jupyter Notebook</Box>
@@ -25,7 +29,7 @@ export const NotebookExample = (props: INotebookExampleProps) => {
         id={NOTEBOOK_ID}
         serviceManager={serviceManager}
         kernelId={kernel.id}
-        extensions={[new CellSidebarExtension({ factory: CellSidebarButton })]}
+//        extensions={extensions}
         Toolbar={NotebookToolbar}
       />
     </>

packages/react/src/components/notebook/cell/sidebar/CellSidebarExtension.tsx

@@ -125,6 +125,7 @@ export class CellSidebarExtension implements DatalayerNotebookExtension {
   protected commands?: CommandRegistry;
   protected nbgrader?: boolean;
   protected sidebarWidth?: number;
+  readonly component: null;
 
   /**
    * Constructor
@@ -147,8 +148,6 @@ export class CellSidebarExtension implements DatalayerNotebookExtension {
     this.sidebarWidth = options.sidebarWidth;
   }
 
-  readonly component: null;
-
   createNew(panel: NotebookPanel): IDisposable {
     // We assume the extension was either created within JupyterLab passing
     // the app commands registry or through Datalayer workflow that set it

packages/react/src/examples/Notebook2.tsx

@@ -4,27 +4,32 @@
  * MIT License
  */
 
+import { useMemo } from 'react';
 import { createRoot } from 'react-dom/client';
 import { INotebookContent } from '@jupyterlab/nbformat';
 import { JupyterReactTheme } from '../theme/JupyterReactTheme';
 import { useJupyter } from '../jupyter';
-import { NotebookToolbar } from './../components/notebook/toolbar/NotebookToolbar';
-import { Notebook2 } from '../components/notebook/Notebook2';
+import { Notebook2, CellSidebarExtension, CellSidebarButton } from '../components';
+import { CellToolbarExtension } from './extensions';
 
 import nbformat from './notebooks/NotebookExample1.ipynb.json';
 
-const Notebook = () => {
+const Notebook2Example = () => {
   const { serviceManager } = useJupyter();
+  const extensions = useMemo(() => [
+    new CellToolbarExtension(),
+    new CellSidebarExtension({ factory: CellSidebarButton })
+  ], []);
   return (
     serviceManager ?
       <JupyterReactTheme>
         <Notebook2
           nbformat={nbformat as INotebookContent}
           id="notebook-nbformat-id"
           startDefaultKernel
+          serviceManager={serviceManager}
           height="calc(100vh - 2.6rem)" // (Height - Toolbar Height).
-          cellSidebarMargin={120}
-          Toolbar={NotebookToolbar}
+          extensions={extensions}
           /*
           collaborationServer={{
             baseURL: 'https://prod1.datalayer.run',
@@ -33,7 +38,6 @@ const Notebook = () => {
             type: 'datalayer'
           }}
           */
-          serviceManager={serviceManager}
         />
       </JupyterReactTheme>
     :
@@ -45,4 +49,4 @@ const div = document.createElement('div');
 document.body.appendChild(div);
 const root = createRoot(div);
 
-root.render(<Notebook />);
+root.render(<Notebook2Example />);

packages/react/webpack.config.js

@@ -20,7 +20,7 @@ const ENTRY =
   // './src/app/App';
   // './src/examples/Bokeh';
   // './src/examples/Bqplot';
-  './src/examples/Cell';
+  // './src/examples/Cell';
   // './src/examples/CellLite';
   // './src/examples/Cells';
   // './src/examples/CellsExecute';
@@ -44,7 +44,7 @@ const ENTRY =
   // './src/examples/Kernels';
   // './src/examples/Lumino';
   // './src/examples/Matplotlib';
-  // './src/examples/Notebook';
+  './src/examples/Notebook';
   // './src/examples/Notebook2';
   // './src/examples/NotebookCellSidebar';
   // './src/examples/NotebookCellToolbar';