feat: improve isKernelSession prop naming (#273)

Author: Marcos Alves

packages/react/src/components/cell/Cell.tsx

@@ -79,7 +79,7 @@ export const Cell = (props: ICellProps) => {
     adapter.sessionContext.kernelChanged.connect(() => {
       void adapter.sessionContext.session?.kernel?.info.then(info => {
         // Set that session/kernel is ready for this cell when the kernel is guaranteed to be connected 
-        cellStore.setKernelAvailable(id, true);
+        cellStore.setIsKernelSessionAvailable(id, true);
       })
     });
   }

packages/react/src/components/cell/CellState.ts

@@ -12,33 +12,33 @@ export interface ICellState {
   source?: string;
   outputsCount?: number;
   adapter?: CellAdapter;
-  kernelAvailable?: boolean;
+  isKernelSessionAvailable?: boolean; // Individual, for cell
 }
 
 export interface ICellsState {
   cells: Map<string, ICellState>;
-  areAllCellsReady: boolean;
+  areAllKernelSessionsReady: boolean; // Control the state for all cells
 }
 
 export type CellState = ICellsState & {
   setCells: (cells: Map<string, ICellState>) => void;
   setSource: (id: string, source: string) => void;
   setOutputsCount: (id: string, outputsCount: number) => void;
-  setKernelAvailable: (id: string, kernelAvailable: boolean) => void;
+  setIsKernelSessionAvailable: (id: string, kernelAvailable: boolean) => void;
   setAdapter: (id: string, adapter?: CellAdapter) => void;
   getAdapter: (id: string) => CellAdapter | undefined;
   getSource: (id: string) => string | undefined;
   getOutputsCount: (id: string) => number | undefined;
-  getIsKernelAvailable: (id: string) => boolean | undefined;
+  getIsKernelSessionAvailable: (id: string) => boolean | undefined;
   execute: (id?: string) => void;
 };
 
 /**
  * Iterate over all cells map and check if all cells/sessions are ready
  */
-const areAllSessionsAvailable = (cells: Map<string, ICellState>): boolean => {
+const areAllKernelSessionsAvailable = (cells: Map<string, ICellState>): boolean => {
   for (const cell of cells.values()) {
-    if (!cell.kernelAvailable) {
+    if (!cell.isKernelSessionAvailable) {
       return false;
     }
   }
@@ -49,8 +49,8 @@ export const cellStore = createStore<CellState>((set, get) => ({
   cells: new Map<string, ICellState>(),
   source: '',
   outputsCount: 0,
-  kernelAvailable: false,
-  areAllCellsReady: false,
+  isKernelSessionAvailable: false,
+  areAllKernelSessionsReady: false,
   adapter: undefined,
   setCells: (cells: Map<string, ICellState>) => set((cell: CellState) => ({ cells })),
 
@@ -74,16 +74,16 @@ export const cellStore = createStore<CellState>((set, get) => ({
     }
     set((state: CellState) => ({ cells }))
   },
-  setKernelAvailable: (id: string, kernelAvailable: boolean) => {
+  setIsKernelSessionAvailable: (id: string, isKernelSessionAvailable: boolean) => {
     const cells = get().cells;
     const cell = cells.get(id);
     if (cell) {
-      cell.kernelAvailable = kernelAvailable;
+      cell.isKernelSessionAvailable = isKernelSessionAvailable;
     } else {
-      cells.set(id, {kernelAvailable});
+      cells.set(id, {isKernelSessionAvailable});
     }
-    const areAllCellsReady = areAllSessionsAvailable(cells);
-    set((cell: CellState) => ({ cells, areAllCellsReady }));
+    const areAllKernelSessionsReady = areAllKernelSessionsAvailable(cells);
+    set((cell: CellState) => ({ cells, areAllKernelSessionsReady }));
   },
   setAdapter: (id: string, adapter?: CellAdapter) => {
     const cells = get().cells;
@@ -104,8 +104,8 @@ export const cellStore = createStore<CellState>((set, get) => ({
   getOutputsCount: (id: string): number | undefined => {
     return get().cells.get(id)?.outputsCount;
   },
-  getIsKernelAvailable: (id: string): boolean | undefined => {
-    return get().cells.get(id)?.kernelAvailable;
+  getIsKernelSessionAvailable: (id: string): boolean | undefined => {
+    return get().cells.get(id)?.isKernelSessionAvailable;
   },
   execute: (id: string) => { 
     const cells = get().cells;

packages/react/src/examples/All.tsx

@@ -58,7 +58,7 @@ const CellPreview = (props: ICellToolProps) => {
   return (
     <>
       <>source: {cellStore.getSource(props.id)}</>
-      <>kernel available: {String(cellStore.getIsKernelAvailable(props.id))}</>
+      <>kernel available: {String(cellStore.getIsKernelSessionAvailable(props.id))}</>
     </>
   );
 };

packages/react/src/examples/Notebook.tsx

@@ -6,27 +6,52 @@
 import { createRoot } from 'react-dom/client';
 import Jupyter from '../jupyter/Jupyter';
 import Notebook from '../components/notebook/Notebook';
+import Cell from '../components/cell/Cell';
 import NotebookToolbar from './toolbars/NotebookToolbar';
 import CellSidebar from '../components/notebook/cell/sidebar/CellSidebarButton';
+import React, {useRef, useEffect} from 'react';
+import { cellStore } from '../components/cell/CellState';
 
 const NOTEBOOK_UID = 'notebook-uid';
 
 const div = document.createElement('div');
 document.body.appendChild(div);
 const root = createRoot(div);
 
-root.render(
-  <Jupyter
-    jupyterServerUrl="https://oss.datalayer.run/api/jupyter-server"
-    jupyterServerToken="60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
-  >
-    <Notebook
-      path="ipywidgets.ipynb"
-      uid={NOTEBOOK_UID}
-      height="calc(100vh - 2.6rem)" // (Height - Toolbar Height).
-      cellSidebarMargin={60}
-      CellSidebar={CellSidebar}
-      Toolbar={NotebookToolbar}
-    />
-  </Jupyter>
-);
+
+const CellComp: React.FC<any> = () => {
+
+  const isExecutingRef = useRef(false);
+  useEffect(() => {
+      const handleChange = (newState: any) => {
+        console.log('CHANGED', newState);
+        if (newState.areAllKernelSessionsReady && !isExecutingRef.current) {
+          isExecutingRef.current = true;
+          cellStore.getState().execute('1');
+          cellStore.getState().execute('2');
+        }
+      };
+
+      // Subscribe to cellStore changes
+      const unsubscribe = cellStore.subscribe(handleChange);
+
+      // Cleanup function to unsubscribe on unmount
+      return () => {
+        unsubscribe();
+      };
+  }, []);
+
+  return (
+      <Jupyter
+      jupyterServerUrl="https://oss.datalayer.run/api/jupyter-server"
+      jupyterServerToken="60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
+    >
+      <Cell id={'1'} type={'code'} autoStart={false} showToolbar={false} source={'x = 5'}></Cell>
+      <Cell id={'2'} type={'code'} autoStart={false} showToolbar={false} source={'x + 5'}></Cell>
+    </Jupyter>
+  )
+}
+
+root.render(<>
+  <CellComp></CellComp>
+</>);