Initial kernel client on Notebook (and favor onsession) to support pygwalker (#326)

* chore: kernel indicators

* chore: ipywidgets

* fix: kernel clients

Author: echarles

packages/react/package.json

@@ -216,6 +216,7 @@
     "prettier": "^3.0.0",
     "process": "^0.11.10",
     "rimraf": "^3.0.2",
+    "source-map-loader": "^5.0.0",
     "storybook": "^8.0.10",
     "stream": "^0.0.2",
     "stream-browserify": "^2.0.2",

packages/react/public/index-local.html

@@ -34,6 +34,11 @@
       "mathjaxConfig": "TeX-AMS_CHTML-full,Safe"
     }
   </script>
+  <script
+    data-jupyter-widgets-cdn="https://cdn.jsdelivr.net/npm/"
+    data-jupyter-widgets-cdn-only="true"
+  >
+  </script>
   <link rel="shortcut icon"
     href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAC7SURBVFiF7ZU9CgIxEIXfTHbPopfYc+pJ9AALtmJnZSOIoJWFoCTzLHazxh/Ebpt5EPIxM8XXTCKTxYyMCYwJFhOYCo4JFiMuu317PZwaqEBUIar4YMmskL73DytGjgu4gAt4PDJdzkkzMBloBhqBgcu69XW+1I+rNSQESNDuaMEhdP/Fj/7oW+ACLuACHk/3F5BAfuMLBjm8/ZnxNvNtHmY4b7Ztut0bqStoVSHfWj9Z6mr8LXABF3CBB3nvkDfEVN6PAAAAAElFTkSuQmCC"
     type="image/x-icon" />

packages/react/src/components/kernel/KernelDetective.tsx

@@ -0,0 +1,82 @@
+/*
+ * Copyright (c) 2021-2023 Datalayer, Inc.
+ *
+ * MIT License
+ */
+
+import { useState, useEffect } from 'react';
+import { ServerConnection, ServiceManager, Session, Kernel } from "@jupyterlab/services";
+import { Box, Text, Label, Button } from '@primer/react';
+
+type IKernelDetectiveProps = {
+  serviceManager?: ServiceManager.IManager;
+}
+
+export const KernelDetective = (props: IKernelDetectiveProps) => {
+  const { serviceManager } = props;
+  const [ serverSettings, setServerSettings ] = useState<ServerConnection.ISettings>(); 
+  const [ sessions, setSessions ] = useState<Session.IModel[]>([]); 
+  const [ kernels, setKernels ] = useState<Kernel.IModel[]>([]); 
+  const refresh = () => {
+    if (serviceManager) {
+      setServerSettings(serviceManager.serverSettings);
+      serviceManager.sessions.refreshRunning().then(() => {
+        setSessions(Array.from(serviceManager.sessions.running()));
+        serviceManager.sessions.runningChanged.connect(() => {
+          //
+        });
+      });
+      serviceManager.kernels.refreshRunning().then(() => {
+        setKernels(Array.from(serviceManager.kernels.running()));
+        serviceManager.kernels.runningChanged.connect(() => {
+          //
+        });
+      });
+    }
+  }
+  useEffect(() => {
+    refresh();
+  }, [serviceManager]);
+  return (
+    <>
+      { serviceManager &&
+        <>
+          <Box mb={3}>
+            <Button onClick={refresh}>Refresh</Button>
+          </Box>
+          <Box>
+            <Text as="h3">Server Settings</Text>
+            <Label>Base URL</Label>
+            <Text> {serverSettings?.baseUrl}</Text>
+          </Box>
+          <Box>
+            <Text as="h3">Kernels</Text>
+            { kernels.map(kernel => {
+              return (
+                <Box key={kernel.id}>
+                  <Label>Kernel</Label>
+                  <Text> {kernel.name} - {kernel.id} - {kernel.connections} connections</Text>
+                </Box>
+              )}
+            )}
+          </Box>
+          <Box>
+            <Text as="h3">Sessions</Text>
+            { sessions.map(session => {
+              return (
+                <Box key={session.id}>
+                  <Label>Kernel</Label>
+                  <Text> {session.kernel?.name} - {session.kernel?.id}</Text>
+                  <Label style={{ marginLeft: 10 }}>Session</Label>
+                  <Text> {session.name} - {session.path} - {session.type}</Text>
+                </Box>
+              )}
+            )}
+          </Box>
+        </>
+      }
+    </>
+  );
+}
+
+export default KernelDetective;

packages/react/src/components/kernel/Kernelndicator.tsx

@@ -17,7 +17,7 @@ import {
   CircleWhiteIcon,
   CircleYellowIcon,
   CircledMIcon,
-  SquareWhiteLargeIcon
+  PlusCircleIcon
 } from '@datalayer/icons-react';
 import { KernelMessage } from '@jupyterlab/services';
 import { ConnectionStatus, IKernelConnection } from '@jupyterlab/services/lib/kernel/kernel';
@@ -56,7 +56,7 @@ export type ExecutionState =
  * Status = 'unknown' | 'starting' | 'idle' | 'busy' | 'terminating' | 'restarting' | 'autorestarting' | 'dead';
  */
 export const KERNEL_STATES: Map<ExecutionState, ReactElement> = new Map([
-  ['connecting', <CircleBlackIcon />],
+  ['connecting', <PlusCircleIcon />],
   ['connected-unknown', <CircledMIcon />],
   ['connected-starting', <CircleYellowIcon />],
   ['connected-idle', <CircleGreenIcon />],
@@ -66,7 +66,7 @@ export const KERNEL_STATES: Map<ExecutionState, ReactElement> = new Map([
   ['connected-autorestarting', <CircleHollowRedIcon />],
   ['connected-dead', <CircleRedIcon />],
   ['disconnecting', <CircleBrownIcon />],
-  ['undefined', <SquareWhiteLargeIcon />],
+  ['undefined', <CircleBlackIcon />],
 ]);
 
 export const toKernelState = (

packages/react/src/components/kernel/index.ts

@@ -5,6 +5,7 @@
  */
 
 export * from './KernelActionMenu';
+export * from './KernelDetective';
 export * from './KernelInspector';
 export * from './KernelLogs';
 export * from './KernelLauncher';

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

@@ -7,20 +7,20 @@
 import { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { Box } from '@primer/react';
-import { NotebookPanel, INotebookModel } from '@jupyterlab/notebook';
 import { Cell, ICellModel } from '@jupyterlab/cells';
+import { NotebookPanel, INotebookModel } from '@jupyterlab/notebook';
 import { CommandRegistry } from '@lumino/commands';
 import { DocumentRegistry } from '@jupyterlab/docregistry';
 import { IRenderMime } from '@jupyterlab/rendermime-interfaces';
 import { INotebookContent } from '@jupyterlab/nbformat';
-import { ServiceManager } from '@jupyterlab/services';
+import { ServiceManager, Kernel as JupyterKernel } from '@jupyterlab/services';
 import { useJupyter, Lite, Kernel } from './../../jupyter';
 import { asObservable, Lumino } from '../lumino';
 import { CellMetadataEditor } from './cell/metadata';
 import { ICellSidebarProps } from './cell/sidebar';
 import { INotebookToolbarProps } from './toolbar/NotebookToolbar';
 import { newUuid } from '../../utils';
-import { OnKernelConnection } from '../../state';
+import { OnSessionConnection } from '../../state';
 import { useNotebookStore } from './NotebookState';
 import { NotebookAdapter } from './NotebookAdapter';
 
@@ -53,18 +53,20 @@ export type INotebookProps = {
   extensions: DatalayerNotebookExtension[]
   height?: string;
   id: string;
-  lite?: Lite;
   kernel?: Kernel;
+  kernelClients?: JupyterKernel.IKernelConnection[];
+  lite?: Lite;
   maxHeight?: string;
   nbformat?: INotebookContent;
   nbgrader: boolean;
-  onKernelConnection?: OnKernelConnection;
+  onSessionConnection?: OnSessionConnection;
   path?: string;
   readonly: boolean;
   renderId: number;
   renderers: IRenderMime.IRendererFactory[];
   serverless: boolean,
   serviceManager?: ServiceManager.IManager,
+  startDefaultKernel?: boolean;
   url?: string;
   /**
    * The Kernel Id to use, as defined in the Kernel API.
@@ -88,6 +90,7 @@ export const Notebook = (props: INotebookProps) => {
     lite: props.lite,
     serverless: props.serverless,
     serviceManager: props.serviceManager,
+    startDefaultKernel: props.startDefaultKernel,
     useRunningKernelId: props.useRunningKernelId,
     useRunningKernelIndex: props.useRunningKernelIndex,
   });
@@ -152,7 +155,7 @@ export const Notebook = (props: INotebookProps) => {
     adapter.notebookPanel?.sessionContext.statusChanged.connect((_, kernelStatus) => {
       notebookStore.changeKernelStatus({ id, kernelStatus });
     });
-    // Add more UI behavior when the Service Manager is ready...
+    // Add more UI behavior when the Service Manager is ready.
     adapter.serviceManager.ready.then(() => {
       if (!readonly) {
         const cellModel = adapter.notebookPanel!.content.activeCell;
@@ -337,12 +340,14 @@ Notebook.defaultProps = {
   cellSidebarMargin: 120,
   extensions: [],
   height: '100vh',
+  kernelClients: [],
   maxHeight: '100vh',
   nbgrader: false,
   readonly: false,
   renderId: 0,
   renderers: [],
   serverless: false,
+  startDefaultKernel: false,
 } as Partial<INotebookProps>;
 
 export default Notebook;