Migrate datalayer specific components from jupyter-react to core

Author: goanpeca

CLAUDE.md

@@ -0,0 +1,29 @@
+# CLAUDE.md
+
+Jupyter React UI - React components and utilities for building Jupyter-based applications.
+
+## Architecture
+
+**IMPORTANT**: Dependency direction is `@datalayer/core` depends on `@datalayer/jupyter-react`. 
+- Core imports from jupyter-ui (NOT the other way around)
+- When migrating code, ensure jupyter-ui core is adapted so that it no longer depends on datalyer code.
+- Backward compatibility does not need to be preserved when migrating things from `@datalayer/jupyter-react` to `@datalayer/core`
+
+## Development Commands
+
+**Build**: `npm run build`
+**Test**: `npm run test`
+**Storybook**: `npm run storybook`
+**Docs**: `npm run build:docs`
+
+## Key Components
+
+- Jupyter components: Cell, Console, Notebook, Terminal, Viewer
+- Service providers: ServiceManagerProvider, utility functions for creating ServiceManagers
+- State management: Zustand stores for component state
+- JupyterLab integration: Support for extensions and themes
+
+## Migration Notes
+
+When migrating functionality:
+1. Core should import what it needs from jupyter-ui

examples/lexical/webpack.config.js

@@ -57,7 +57,7 @@ module.exports = {
     filename: '[name].[contenthash].jupyterReactLexicalExample.js',
   },
   resolve: {
-    extensions: [ '.tsx', '.ts', 'jsx', '.js' ],
+    extensions: [ '.tsx', '.ts', '.jsx', '.js', '.css' ],
     alias: { 
       "stream": "stream-browserify",
     },

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

@@ -20,7 +20,7 @@ import { WebsocketProvider as YWebsocketProvider } from 'y-websocket';
 import { jupyterReactStore, KernelTransfer, OnSessionConnection, } from '../../state';
 import { newUuid, sleep } from '../../utils';
 import { asObservable, Lumino } from '../lumino';
-import { COLLABORATION_ROOM_URL_PATH, requestDatalayerollaborationSessionId, ICollaborationProvider, Kernel, Lite, requestJupyterCollaborationSession, useJupyter } from './../../jupyter';
+import { COLLABORATION_ROOM_URL_PATH, ICollaborationProvider, Kernel, Lite, requestJupyterCollaborationSession, useJupyter } from './../../jupyter';
 import { CellMetadataEditor } from './cell/metadata';
 import { NotebookAdapter } from './NotebookAdapter';
 import { useNotebookStore } from './NotebookState';
@@ -303,27 +303,9 @@ export const Notebook = (props: INotebookProps) => {
             },
             awareness,
           });
-        } else if (collaborative == 'datalayer') {
-          const { runUrl, token } = jupyterReactStore.getState().datalayerConfig ?? {};
-          const documentName = id;
-          const documentURL = URLExt.join(runUrl!, `/api/spacer/v1/documents`);
-          const sessionId = await requestDatalayerollaborationSessionId({
-            url: URLExt.join(documentURL, documentName),
-            token,
-          });
-          provider = new YWebsocketProvider(
-            documentURL.replace(/^http/, 'ws'),
-            documentName,
-            ydoc,
-            {
-              disableBc: true,
-              params: {
-                sessionId,
-                token: token!,
-              },
-              awareness,
-            }
-          );
+        } else {
+          // Other collaboration types can be handled by extensions
+          console.warn(`Unsupported collaboration type: ${collaborative}`);
         }
         if (provider) {
           provider.on('sync', onSync);

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

@@ -32,7 +32,7 @@ import { Box } from '@primer/react';
 import { Banner } from '@primer/react/experimental';
 import { EditorView } from 'codemirror';
 import { WebsocketProvider } from 'y-websocket';
-import { COLLABORATION_ROOM_URL_PATH, ICollaborationServer, requestDatalayerollaborationSessionId, requestJupyterCollaborationSession, WIDGET_MIMETYPE, WidgetLabRenderer, WidgetManager } from '../../jupyter';
+import { COLLABORATION_ROOM_URL_PATH, ICollaborationServer, requestJupyterCollaborationSession, WIDGET_MIMETYPE, WidgetLabRenderer, WidgetManager } from '../../jupyter';
 import type { OnSessionConnection } from '../../state';
 import { newUuid, remoteUserCursors } from '../../utils';
 import { Lumino } from '../lumino';
@@ -654,16 +654,9 @@ export function useNotebookModel(options: IOptions): NotebookModel | null {
           if (serverSettings.token) {
             params.token = serverSettings.token;
           }
-        } else if (collaborationServer.type === 'datalayer') {
-          const { baseURL, documentName: documentName_, token } = collaborationServer;
-          documentName = documentName_; // Set non local variable.
-          const serverURL = URLExt.join(baseURL, '/api/spacer/v1/documents');
-          documentURL = serverURL.replace(/^http/, 'ws');
-          params.sessionId = await requestDatalayerollaborationSessionId({
-            url: URLExt.join(serverURL, documentName),
-            token,
-          });
-          params.token = token;
+        } else {
+          // Other collaboration types can be handled by extensions
+          console.warn(`Unsupported collaboration type: ${collaborationServer.type}`);
         }
 
         if (params.sessionId) {

packages/react/src/examples/NotebookMutationsKernel.tsx

@@ -13,10 +13,9 @@ import {
   createLiteServiceManager, createServerSettings, setJupyterServerUrl, getJupyterServerUrl,
   getJupyterServerToken, ServiceManagerLess, loadJupyterConfig, DEFAULT_JUPYTER_SERVER_URL,
 } from '../jupyter';
-import { useJupyterReactStore, OnSessionConnection } from '../state';
+import { OnSessionConnection } from '../state';
 import { useNotebookStore, Notebook, SpinnerCentered } from './../components';
 import { JupyterReactTheme } from '../theme';
-import { createDatalayerServiceManager } from './../providers';
 
 import nbformatExample from './notebooks/NotebookExample1.ipynb.json';
 
@@ -32,11 +31,10 @@ const NotebookMutationsKernel = () => {
   const [readonly, setReadonly] = useState(true);
   const [serverless, setServerless] = useState(true);
   const [kernelIndex, setKernelIndex] = useState(-1);
-  const [waiting, setWaiting] = useState(false);
+  const [waiting] = useState(false);
   const [lite, setLite] = useState(false);
   const [serviceManager, setServiceManager] = useState<ServiceManager.IManager>(SERVICE_MANAGER_LESS);
   const [sessions, setSessions] = useState<Array<Session.ISessionConnection>>([])
-  const { datalayerConfig } = useJupyterReactStore();
   const notebookStore = useNotebookStore();
   const notebook = notebookStore.selectNotebook(NOTEBOOK_ID);
   const onSessionConnection: OnSessionConnection = (session: Session.ISessionConnection | undefined) => {
@@ -83,40 +81,6 @@ const NotebookMutationsKernel = () => {
         setServiceManager(serviceManager);
         break;
       }
-      case 3: {
-//        setWaiting(true);
-        setLite(false);
-        createDatalayerServiceManager(
-          datalayerConfig?.cpuEnvironment || 'python-simple-env',
-          datalayerConfig?.credits || 1,
-        ).then((serviceManager) => {
-          (serviceManager as any)['__NAME__'] = 'DatalayerCPUServiceManager';
-          setServiceManager(serviceManager);
-          setServerless(false);
-          setReadonly(false);
-          setKernelIndex(0);
-          setNbformat(notebook?.adapter?.notebookPanel?.content.model?.toJSON() as INotebookContent);
-//          setWaiting(false);  
-        });
-        break;
-      }
-      case 4: {
-        setWaiting(true);
-        setLite(false);
-        createDatalayerServiceManager(
-          datalayerConfig?.gpuEnvironment || 'pytorch-cuda-env',
-          datalayerConfig?.credits || 1,
-        ).then((serviceManager) => {
-          setKernelIndex(0);
-          (serviceManager as any)['__NAME__'] = 'DatalayerGPUServiceManager';
-          setServiceManager(serviceManager);
-          setNbformat(notebook?.adapter?.notebookPanel?.content.model?.toJSON() as INotebookContent);
-          setServerless(false);
-          setReadonly(false);
-          setWaiting(false);  
-        });
-        break;
-      }
     }
   }
   return (

packages/react/src/examples/NotebookMutationsServiceManager.tsx

@@ -14,10 +14,9 @@ import {
   getJupyterServerToken, ServiceManagerLess, loadJupyterConfig,
   DEFAULT_JUPYTER_SERVER_URL, Lite,
 } from '../jupyter';
-import { useJupyterReactStore, OnSessionConnection } from '../state';
+import { OnSessionConnection } from '../state';
 import { useNotebookStore, Notebook, SpinnerCentered } from './../components';
 import { JupyterReactTheme } from '../theme';
-import { createDatalayerServiceManager } from './../providers';
 
 import nbformatExample from './notebooks/NotebookExample1.ipynb.json';
 
@@ -34,11 +33,10 @@ const NotebookMutationsServiceManager = () => {
   const [serverless, setServerless] = useState(true);
   const [startDefaultKernel, setStartDefaultKernel] = useState(false);
   const [kernelIndex, setKernelIndex] = useState(-1);
-  const [waiting, setWaiting] = useState(false);
+  const [waiting] = useState(false);
   const [lite, setLite] = useState<Lite>(false);
   const [serviceManager, setServiceManager] = useState<ServiceManager.IManager>(SERVICE_MANAGER_LESS);
   const [sessions, setSessions] = useState<Array<Session.ISessionConnection>>([])
-  const { datalayerConfig } = useJupyterReactStore();
   const notebookStore = useNotebookStore();
   const notebook = notebookStore.selectNotebook(NOTEBOOK_ID);
   const onSessionConnection: OnSessionConnection = (session: Session.ISessionConnection | undefined) => {
@@ -88,41 +86,6 @@ const NotebookMutationsServiceManager = () => {
         setServiceManager(serviceManager);
         break;
       }
-      case 3: {
-        createDatalayerServiceManager(
-          datalayerConfig?.cpuEnvironment || 'python-simple-env',
-          datalayerConfig?.credits || 1,
-        ).then((serviceManager) => {
-          setLite(false);
-          setServerless(false);
-          setReadonly(false);
-          setStartDefaultKernel(false);
-          setKernelIndex(0);
-          setNbformat(notebook?.adapter?.notebookPanel?.content.model?.toJSON() as INotebookContent);
-          (serviceManager as any)['__NAME__'] = 'DatalayerCPUServiceManager';
-          setServiceManager(serviceManager);
-//          setWaiting(false);  
-        });
-        break;
-      }
-      case 4: {
-        setWaiting(true);
-        setLite(false);
-        createDatalayerServiceManager(
-          datalayerConfig?.gpuEnvironment || 'pytorch-cuda-env',
-          datalayerConfig?.credits || 1,
-        ).then((serviceManager) => {
-          setNbformat(notebook?.adapter?.notebookPanel?.content.model?.toJSON() as INotebookContent);
-          setServerless(false);
-          setReadonly(false);
-          setStartDefaultKernel(false);
-          setWaiting(false);  
-          setKernelIndex(0);
-          (serviceManager as any)['__NAME__'] = 'DatalayerGPUServiceManager';
-          setServiceManager(serviceManager);
-        });
-        break;
-      }
     }
   }
   return (