feat: improve event and add flag to allCellsReady (#273)

Author: Marcos Alves

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

@@ -59,26 +59,29 @@ export const Cell = (props: ICellProps) => {
     }
 
     adapter.sessionContext.initialize().then(() => {
-      if (!adapter.cell.model) {
+      if (!autoStart || !adapter.cell.model) {
         return;
       }
-      // Set that session/kernel is ready for that cell
-      cellStore.setKernelAvailable(id, true);
 
       // Perform auto-start for code or markdown cells
-      if (autoStart) {
-        if (adapter.cell instanceof CodeCell) {
-          CodeCell.execute(
-            adapter.cell,
-            adapter.sessionContext
-          );
-        }
+      if (adapter.cell instanceof CodeCell) {
+        CodeCell.execute(
+          adapter.cell,
+          adapter.sessionContext
+        );
+      }
 
-        if (adapter.cell instanceof MarkdownCell) {
-          adapter.cell.rendered = true;
-        }
+      if (adapter.cell instanceof MarkdownCell) {
+        adapter.cell.rendered = true;
       }
     });
+
+    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);
+      })
+    });
   }
 
   useEffect(() => {

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

@@ -17,6 +17,7 @@ export interface ICellState {
 
 export interface ICellsState {
   cells: Map<string, ICellState>;
+  areAllCellsReady: boolean;
 }
 
 export type CellState = ICellsState & {
@@ -28,15 +29,28 @@ export type CellState = ICellsState & {
   getAdapter: (id: string) => CellAdapter | undefined;
   getSource: (id: string) => string | undefined;
   getOutputsCount: (id: string) => number | undefined;
-  getIsKernelAvaiable: (id: string) => boolean | undefined;
+  getIsKernelAvailable: (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 => {
+  for (const cell of cells.values()) {
+    if (!cell.kernelAvailable) {
+      return false;
+    }
+  }
+  return true;
+};
+
 export const cellStore = createStore<CellState>((set, get) => ({
   cells: new Map<string, ICellState>(),
   source: '',
   outputsCount: 0,
   kernelAvailable: false,
+  areAllCellsReady: false,
   adapter: undefined,
   setCells: (cells: Map<string, ICellState>) => set((cell: CellState) => ({ cells })),
 
@@ -68,7 +82,8 @@ export const cellStore = createStore<CellState>((set, get) => ({
     } else {
       cells.set(id, {kernelAvailable});
     }
-    set((cell: CellState) => ({ cells }))
+    const areAllCellsReady = areAllSessionsAvailable(cells);
+    set((cell: CellState) => ({ cells, areAllCellsReady }));
   },
   setAdapter: (id: string, adapter?: CellAdapter) => {
     const cells = get().cells;
@@ -89,7 +104,7 @@ export const cellStore = createStore<CellState>((set, get) => ({
   getOutputsCount: (id: string): number | undefined => {
     return get().cells.get(id)?.outputsCount;
   },
-  getIsKernelAvaiable: (id: string): boolean | undefined => {
+  getIsKernelAvailable: (id: string): boolean | undefined => {
     return get().cells.get(id)?.kernelAvailable;
   },
   execute: (id: string) => { 

packages/react/src/examples/All.tsx

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