Fixes for the examples and the serverless mode (#298)

* fix: examples

* fix: better serrverless, still wip

* fix: examples

* chore: less

* example: jupyterlab app and notebook serverless

* bump:version

packages/react/package.json

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

packages/react/src/components/filebrowser/FileBrowser.tsx

@@ -8,7 +8,7 @@ import { useState, useEffect, useReducer } from 'react';
 import { TreeView } from '@primer/react';
 import { FileIcon } from '@primer/octicons-react';
 import { useJupyter } from './../../jupyter/JupyterContext';
-import Services from './../../jupyter/services/Services';
+import JupyterServices from './../../jupyter/services/JupyterServices';
 
 interface RenderTree {
   id: string;
@@ -26,12 +26,12 @@ export const FileBrowser = () => {
   const [, forceUpdate] = useReducer(x => x + 1, 0);
   const { serviceManager } = useJupyter();
   const loadPath = (
-    services: Services,
+    services: JupyterServices,
     subTree: RenderTree,
     path: string[]
   ) => {
     const loadFolderItems = (
-      services: Services,
+      services: JupyterServices,
       path: string[]
     ): Promise<RenderTree[]> => {
       const folderItems = services
@@ -79,7 +79,7 @@ export const FileBrowser = () => {
   };
   useEffect(() => {
     if (serviceManager) {
-      const services = new Services(serviceManager);
+      const services = new JupyterServices(serviceManager);
       loadPath(services, initialTree, []);
     }
   }, [serviceManager]);

packages/react/src/components/jupyterlab/JupyterLabApp.tsx

@@ -126,7 +126,7 @@ JupyterLabAppComponent.defaultProps = {
   onJupyterLab: (_: JupyterLabAppAdapter) => {},
   plugins: [],
   position: 'relative',
-  nosplash: true,
+  nosplash: false,
   serverless: false,
   startDefaultKernel: false,
   theme: 'light',

packages/react/src/components/jupyterlab/JupyterLabAppAdapter.ts

@@ -84,7 +84,6 @@ export class JupyterLabAppAdapter {
     const extensionResolved = await Promise.all(extensionPromises!);
     disabledPlugins.push(
       "@jupyterlab/notebook-extension:language-server",
-//      "@jupyterlab/notebook-extension:toc",
       "@jupyterlab/notebook-extension:update-raw-mimetype",
       "@jupyterlab/fileeditor-extension:language-server",
       "@jupyterlab/apputils-extension:sessionDialogs",
@@ -118,8 +117,13 @@ export class JupyterLabAppAdapter {
     */
     this._jupyterLab.start({
       hostID: hostId,
-      startPlugins: [], // How is this used in JupyterLab core?
-      ignorePlugins: [], // How is this used in JupyterLab core?
+      startPlugins: [
+      ], // How is this used in JupyterLab core?
+      ignorePlugins: [        
+      ], // How is this used in JupyterLab core?
+    }).then(() => {
+//      this._plugins = (this._jupyterLab as any)['_plugins'];
+//      this._readyResolve();
     });
     this._jupyterLab.restored.then(() => {
       this._plugins = (this._jupyterLab as any)['_plugins'];

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

@@ -77,8 +77,7 @@ export type INotebookProps = {
  * @returns A Notebook React.js component.
  */
 export const Notebook = (props: INotebookProps) => {
-  const { serviceManager, defaultKernel, kernelManager, lite } =
-    useJupyter();
+  const { serviceManager, defaultKernel, kernelManager, lite } = useJupyter();
   const {
     path,
     kernel: propsKernel,
@@ -97,6 +96,7 @@ export const Notebook = (props: INotebookProps) => {
   const portals = notebookStore.selectNotebookPortals(id);
   const newAdapterState = () => {
     if (id && serviceManager && kernelManager && kernel) {
+      console.log('---', serviceManager, kernelManager, kernel)
       kernel.ready.then(() => {
         const adapter = new NotebookAdapter(
           {

packages/react/src/examples/CellLite.tsx

@@ -17,8 +17,8 @@ root.render(
   <Jupyter lite>
     <Box as="h1">A Jupyter Cell with a Lite Kernel</Box>
     <Cell
-      source={`print('👋 Hello Jupyter UI Lite')
-get_ipython()`}
+      source={`import sys
+print(f"👋 Hello Jupyter UI Lite {sys.platform} {get_ipython()}")`}
     />
   </Jupyter>
 );

packages/react/src/examples/CellsExecute.tsx

@@ -0,0 +1,71 @@
+/*
+ * Copyright (c) 2021-2023 Datalayer, Inc.
+ *
+ * MIT License
+ */
+import { useState, useEffect } from 'react';
+import { createRoot } from 'react-dom/client';
+import { Button, Box } from '@primer/react';
+import { cellsStore, ICellsState } from '../components/cell/CellState';
+import JupyterLabTheme from '../jupyter/lab/JupyterLabTheme';
+import Cell from '../components/cell/Cell';
+
+const CODE_CELL_1 = `import time
+time.sleep(3)
+print("Cell 1 done.")`
+
+const CODE_CELL_2 = `import time
+time.sleep(3)
+print("Cell 2 done.")`
+
+const CellsExecute = () => {
+  const [executionDisable, setExecutionDisable] = useState(false);
+  useEffect(() => {
+    const handleChange = (newState: ICellsState) => {
+      setExecutionDisable(newState.isAnyCellExecuting);
+    };
+    const unsubscribe = cellsStore.subscribe(handleChange);
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+  const onExecuteClick = () => {
+    cellsStore.getState().execute();
+  }
+  return (
+    <JupyterLabTheme>
+      <Box style={{marginTop: '20px'}}>
+        <Cell
+          id='1'
+          type='code'
+          source={CODE_CELL_1} 
+          autoStart={false}
+          showToolbar={false}
+        />
+        <Cell
+          id='2'
+          type='code'
+          source={CODE_CELL_2}
+          autoStart={false}
+          showToolbar={false}
+        />
+        <Button
+          onClick={onExecuteClick} 
+          disabled={executionDisable} 
+          style={{
+            marginLeft: '50px',
+            marginTop: '20px'
+          }}
+        >
+          Execute all
+        </Button>
+      </Box>
+    </JupyterLabTheme>
+  )
+};
+
+const div = document.createElement('div');
+document.body.appendChild(div);
+const root = createRoot(div);
+
+root.render(<CellsExecute/>);

packages/react/src/examples/ConsoleLite.tsx

@@ -19,7 +19,8 @@ root.render(
     <Console
       code={`import piplite
 await piplite.install('numpy')
-print('👋 Hello Jupyter Console')`}
+import numpy
+print(f'👋 Hello Jupyter Console with a Lite Kernel and numpy {numpy.__version__}')`}
     />
   </Jupyter>
 );

packages/react/src/examples/JupyterLabApp.tsx

@@ -35,7 +35,9 @@ const JupyterLabAppExample = () => {
         plotlyPlugins,
         reactPlugins,
       ]}
-      mimeRenderers={[plotlyMimeRenderers]}
+      mimeRenderers={[
+        plotlyMimeRenderers
+      ]}
       height="calc(100vh - 74px)"
       onJupyterLab={onJupyterLab}
     />

packages/react/src/examples/JupyterLabHeadlessApp.tsx → packages/react/src/examples/JupyterLabAppHeadless.tsx

@@ -6,13 +6,7 @@
 
 import { useState } from 'react';
 import { createRoot } from 'react-dom/client';
-import {
-  Box,
-  Text,
-  ToggleSwitch,
-  ThemeProvider,
-  useTheme,
-} from '@primer/react';
+import { Box, Text, ToggleSwitch, ThemeProvider, useTheme } from '@primer/react';
 import { BoxPanel } from '@lumino/widgets';
 import { ThemeManager } from '@jupyterlab/apputils';
 // import { NotebookTracker } from '@jupyterlab/notebook';
@@ -31,15 +25,17 @@ import * as plotlyMimeRenderers from 'jupyterlab-plotly/lib/plotly-renderer';
 
 const height = '900px';
 
-const PATHS = ['ipywidgets.ipynb', 'plotly.ipynb'];
+const PATHS = [
+  'ipywidgets.ipynb',
+  'plotly.ipynb',
+];
 
 const PATH_INDEX = 1;
 
-const JupyterLabHeadlessAppExample = () => {
+const JupyterLabAppHeadless = () => {
   const [notebookBoxPanel, setNotebookBoxPanel] = useState<BoxPanel>();
   const [theme, setTheme] = useState<ColorMode>('light');
-  const [jupyterLabAdapter, setJupyterlabAdapter] =
-    useState<JupyterLabAppAdapter>();
+  const [jupyterLabAdapter, setJupyterlabAdapter] = useState<JupyterLabAppAdapter>();
   const { setColorMode } = useTheme();
   const [isDark, setDark] = useState(false);
   const onSwitchClick = async () => {
@@ -55,9 +51,10 @@ const JupyterLabHeadlessAppExample = () => {
   const handleSwitchChange = (dark: boolean) => {
     setDark(dark);
   };
-  const onJupyterLab = async (jupyterLabAdapter: JupyterLabAppAdapter) => {
-    setJupyterlabAdapter(jupyterLabAdapter);
-    const boxPanel = await jupyterLabAdapter.notebook(PATHS[PATH_INDEX]);
+  const onJupyterLab = async (jupyterLab: JupyterLabAppAdapter) => {
+    setJupyterlabAdapter(jupyterLab);
+    console.log('JupyterLab is ready', jupyterLab);
+    const boxPanel = await jupyterLab.notebook(PATHS[PATH_INDEX]);
     setNotebookBoxPanel(boxPanel);
   };
   const onPlugin = (themeManager: ThemeManager) => {
@@ -123,6 +120,7 @@ const JupyterLabHeadlessAppExample = () => {
           </div>
         )}
         <JupyterLabApp
+          headless
           plugins={[
             lightThemePlugins,
             darkThemePlugins,
@@ -132,8 +130,6 @@ const JupyterLabHeadlessAppExample = () => {
           mimeRenderers={[
             plotlyMimeRenderers
           ]}
-          headless
-          nosplash={false}
           onJupyterLab={onJupyterLab}
           pluginId="@jupyterlab/apputils-extension:themes"
           PluginType={ThemeManager}
@@ -148,4 +144,4 @@ const div = document.createElement('div');
 document.body.appendChild(div);
 const root = createRoot(div);
 
-root.render(<JupyterLabHeadlessAppExample />);
+root.render(<JupyterLabAppHeadless />);