fix: better serrverless, still wip

Author: echarles

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/examples/JupyterLabAppHeadlessServeless.tsx renamed to packages/react/src/examples/JupyterLabAppHeadlessServerless.tsx

@@ -117,7 +117,9 @@ const JupyterLabAppHeadlessServerless = () => {
           </div>
         )}
         <JupyterLabApp
+          headless
           serverless
+          nosplash={false}
           plugins={[
             lightThemePlugins,
             darkThemePlugins,
@@ -127,8 +129,6 @@ const JupyterLabAppHeadlessServerless = () => {
           mimeRenderers={[
             plotlyMimeRenderers
           ]}
-          headless
-          nosplash={false}
           onJupyterLab={onJupyterLab}
           pluginId="@jupyterlab/apputils-extension:themes"
           PluginType={ThemeManager}

packages/react/src/examples/JupyterLabAppServerless.tsx

@@ -24,6 +24,7 @@ const JupyterLabAppSeverless = () => {
   return (
     <JupyterLabApp
       serverless
+      nosplash={false}
       plugins={[
         lightThemePlugins,
         ipywidgetsPlugins,

packages/react/src/examples/JupyterLabAppServiceManager.tsx

@@ -0,0 +1,54 @@
+/*
+ * Copyright (c) 2021-2023 Datalayer, Inc.
+ *
+ * MIT License
+ */
+
+import { useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import JupyterLabTheme from '../jupyter/lab/JupyterLabTheme';
+import JupyterLabApp from '../components/jupyterlab/JupyterLabApp';
+import JupyterLabAppAdapter from '../components/jupyterlab/JupyterLabAppAdapter';
+import JupyterServiceManagerMock from '../jupyter/services/JupyterServiceManagerMock';
+
+import * as lightThemePlugins from '@jupyterlab/theme-light-extension';
+import * as ipywidgetsPlugins from '@jupyter-widgets/jupyterlab-manager';
+import * as plotlyPlugins from 'jupyterlab-plotly/lib/jupyterlab-plugin';
+import * as reactPlugins from './../jupyter/lab/index';
+
+import * as plotlyMimeRenderers from 'jupyterlab-plotly/lib/plotly-renderer';
+
+const JupyterLabAppServiceManager = () => {
+  const [serviceManager, _] = useState(new JupyterServiceManagerMock());
+  const onJupyterLab = async (jupyterLabAdapter: JupyterLabAppAdapter) => {
+    const jupyterLab = jupyterLabAdapter.jupyterLab;
+    console.log('JupyterLab is ready', jupyterLab);
+  };
+  return (
+    <JupyterLabApp
+      serviceManager={serviceManager}
+      plugins={[
+        lightThemePlugins,
+        ipywidgetsPlugins,
+        plotlyPlugins,
+        reactPlugins,
+      ]}
+      mimeRenderers={[
+        plotlyMimeRenderers
+      ]}
+      height="calc(100vh - 74px)"
+      onJupyterLab={onJupyterLab}
+    />
+  );
+};
+
+const div = document.createElement('div');
+document.body.appendChild(div);
+const root = createRoot(div);
+
+root.render(
+  <JupyterLabTheme>
+    <h1>JupyterLab Application with Service Manager property</h1>
+    <JupyterLabAppServiceManager />
+  </JupyterLabTheme>
+);

packages/react/src/jupyter/JupyterContext.tsx

@@ -9,7 +9,7 @@ import { Kernel as JupyterKernel, ServerConnection, ServiceManager } from '@jupy
 import type { JupyterLiteServerPlugin } from '@jupyterlite/server';
 import { requestAPI } from './JupyterHandlers';
 import Kernel from './kernel/Kernel';
-import { useJupyterStoreFromContext } from '../state';
+import { useJupyterReactStoreFromContext } from '../state';
 
 export type Lite =
   | boolean
@@ -194,7 +194,7 @@ export const useJupyter = (props?: JupyterPropsType): JupyterContextType => {
     kernelIsLoading,
     serviceManager,
     jupyterConfig,
-  } = useJupyterStoreFromContext(props ?? {});
+  } = useJupyterReactStoreFromContext(props ?? {});
   const storeContext: JupyterContextType = {
     collaborative: false,
     defaultKernel: kernel,

packages/react/src/jupyter/services/ServiceManagerMock.ts renamed to packages/react/src/jupyter/services/JupyterServiceManagerMock.ts

@@ -4,12 +4,6 @@
  * MIT License
  */
 
-/*
- * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
- */
-
 import {
   Builder, Contents, Event, IManager, NbConvert, NbConvertManager,
   ServerConnection, ServiceManager, Setting, User, Workspace
@@ -39,7 +33,7 @@ export class TerminalManagerMock implements ITerminaManager {
     return true;
   }
   running(): IterableIterator<ISessionModel> {
-    return [] as unknown as IterableIterator<ISessionModel>;
+    return [].values();
   }
   startNew(options?: ITerminal.IOptions | undefined): Promise<ITerminalConnection> {
     return Promise.resolve({} as unknown as ITerminalConnection);
@@ -135,7 +129,7 @@ export class KernelsManagerMock implements IKernelManager {
     this.serverSettings = serverSettings;
   }
   running(): IterableIterator<IModel> {
-    return [] as any;
+    return [].values();
   }
   refreshRunning(): Promise<void> {
     return new Promise(() => {});
@@ -190,7 +184,7 @@ export class SessionManagerMock implements ISessionManager {
     this.serverSettings = serverSettings;
   }
   running(): IterableIterator<ISessionModel> {
-    return [] as any;
+    return [].values();
   }
   startNew(createOptions: ISessionOptions, connectOptions?: Omit<ISessionConnection.IOptions, 'serverSettings' | 'model' | 'connectToKernel'> | undefined): Promise<ISessionConnection> {
     return new Promise(() => {});
@@ -349,33 +343,33 @@ export class JupyterServiceManagerMock implements ServiceManager.IManager {
   nbconvert: NbConvert.IManager;
   constructor(serverSettings: ServerConnection.ISettings = ServerConnection.makeSettings()) {
     this.serverSettings = serverSettings;
+    this.terminals = new TerminalManagerMock(serverSettings);
+    this.builder = new BuilderManagerMock(serverSettings) as Builder.IManager;
+    this.contents = new ContentsManagerMock(serverSettings);
+    this.events = new EventsManagerMock(serverSettings);
+    this.sessions = new SessionManagerMock(serverSettings);
+    this.kernels = new KernelsManagerMock(serverSettings);
+    this.kernelspecs = new KernelspecManagerMock(serverSettings);
+    this.settings = new SettingManagerMock(serverSettings)
+    this.user = new UserManagerMock(serverSettings)
+    this.workspaces = new WorkspaceManagerMock(serverSettings);
+    this.nbconvert = new NbConvertManagerMock(serverSettings) as unknown as NbConvert.IManager;
     /*
     const serviceManager = new ServiceManager({
       serverSettings,
     })
+    this.settings = serviceManager.settings;
     this.terminals = serviceManager.terminals;
     this.builder = serviceManager.builder;
     this.contents = serviceManager.contents;
     this.events = serviceManager.events;
     this.sessions = serviceManager.sessions;
     this.kernels = serviceManager.kernels;
     this.kernelspecs = serviceManager.kernelspecs;
-    this.settings = serviceManager.settings;
     this.user = serviceManager.user;
     this.workspaces = serviceManager.workspaces;
     this.nbconvert = serviceManager.nbconvert;
     */
-    this.terminals = new TerminalManagerMock(serverSettings);
-    this.builder = new BuilderManagerMock(serverSettings) as Builder.IManager;
-    this.contents = new ContentsManagerMock(serverSettings);
-    this.events = new EventsManagerMock(serverSettings);
-    this.sessions = new SessionManagerMock(serverSettings);
-    this.kernels = new KernelsManagerMock(serverSettings);
-    this.kernelspecs = new KernelspecManagerMock(serverSettings);
-    this.settings = new SettingManagerMock(serverSettings)
-    this.user = new UserManagerMock(serverSettings)
-    this.workspaces = new WorkspaceManagerMock(serverSettings);
-    this.nbconvert = new NbConvertManagerMock(serverSettings) as unknown as NbConvert.IManager;
   }
   dispose(): void {
   }

packages/react/src/jupyter/services/Services.ts renamed to packages/react/src/jupyter/services/JupyterServices.ts

@@ -9,7 +9,7 @@ import { IManager as IKernelspecManager} from '@jupyterlab/services/lib/kernelsp
 import { IManager as ISessionManager } from '@jupyterlab/services/lib/session/session';
 import { IManager as ITerminaManager } from '@jupyterlab/services/lib/terminal/terminal';
 
-export class Services {
+export class JupyterServices {
   private _serviceManager: ServiceManager.IManager;
 
   public constructor(services: ServiceManager.IManager) {
@@ -61,4 +61,4 @@ export class Services {
   }
 }
 
-export default Services;
+export default JupyterServices;

packages/react/src/jupyter/services/index.ts

@@ -10,5 +10,5 @@
  * Datalayer License
  */
 
-export * from './Services';
-export * from './ServiceManagerMock';
+export * from './JupyterServiceManagerMock';
+export * from './JupyterServices';

packages/react/src/state/IState.ts renamed to packages/react/src/state/IJupyterReactState.ts

@@ -4,7 +4,7 @@
  * MIT License
  */
 
-export type IDatalayerConfig = {
+export type IJupyterReactState = {
   /**
    * Cloud API URL
    */