feat: add support for multiple Cell state management (#255) (#257)

* feat: partially adding support to multiple Cell management

* feat: adding more functionalities to multiple Cell state management #255

* fix: fixing keydown events for individual cells #255

---------

Co-authored-by: Marcos Alves <marcos@aevotech.com.br>

Author: MarcosVn

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

@@ -12,13 +12,17 @@ import CellAdapter from './CellAdapter';
 import Lumino from '../lumino/Lumino';
 import { useJupyter } from './../../jupyter/JupyterContext';
 import useCellStore from './CellState';
+import { newUuid } from '../../utils';
 
 export type ICellProps = {
+  /**
+   * An id that can be provided to identify unique cell
+   */
+  id: string;
   /**
    * Cell type
    */
   type: 'code' | 'markdown' | 'raw';
-
   /**
    * Cell source
    */
@@ -36,26 +40,27 @@ export type ICellProps = {
 export const Cell = (props: ICellProps) => {
   const { type='code', source = '', autoStart, showToolbar=true } = props;
   const { serverSettings, defaultKernel } = useJupyter();
-  const cellStore = useCellStore();
+  const [id] = useState(props.id || newUuid());
   const [adapter, setAdapter] = useState<CellAdapter>();
+  const cellStore = useCellStore();
 
   const handleCellInitEvents = (adapter: CellAdapter) => {
     adapter.cell.model.contentChanged.connect(
       (cellModel, changedArgs) => {
-        cellStore.setSource(cellModel.sharedModel.getSource());
+        cellStore.setSource(id, cellModel.sharedModel.getSource());
       }
     );
 
     if (adapter.cell instanceof CodeCell) {
       adapter.cell.outputArea.outputLengthChanged?.connect(
         (outputArea, outputsCount) => {
-          cellStore.setOutputsCount(outputsCount);
+          cellStore.setOutputsCount(id, outputsCount);
         }
       );
     }
 
     adapter.sessionContext.initialize().then(() => {
-      if (!autoStart) {
+      if (!autoStart || !adapter.cell.model) {
         return
       }
 
@@ -77,7 +82,7 @@ export const Cell = (props: ICellProps) => {
   }
 
   useEffect(() => {
-    if (defaultKernel && serverSettings) {
+    if (id && defaultKernel && serverSettings) {
       defaultKernel.ready.then(() => {
         const adapter = new CellAdapter({
           type,
@@ -86,8 +91,8 @@ export const Cell = (props: ICellProps) => {
           kernel: defaultKernel,
           boxOptions: {showToolbar}
         });
-        cellStore.setAdapter(adapter);
-        cellStore.setSource(source);
+        cellStore.setAdapter(id, adapter);
+        cellStore.setSource(id, source);
         handleCellInitEvents(adapter);
         setAdapter(adapter);
 

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

@@ -189,7 +189,11 @@ export class CellAdapter {
     document.addEventListener(
       'keydown',
       event => {
-        commands.processKeydownEvent(event);
+        // Trigger and process event only in current focused cell
+        const activeElement = document.activeElement;
+        if (activeElement && activeElement.closest('.dla-Jupyter-Cell') === this._cell.node) {
+          commands.processKeydownEvent(event);
+        }
       },
       useCapture
     );

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

@@ -9,30 +9,85 @@ import { useStore } from 'zustand';
 import CellAdapter from './CellAdapter';
 
 export interface ICellState {
-  source: string;
-  outputsCount: number;
-  kernelAvailable: boolean;
+  source?: string;
+  outputsCount?: number;
   adapter?: CellAdapter;
 }
 
-export type CellState = ICellState & {
-  setSource: (source: string) => void;
-  setOutputsCount: (outputsCount: number) => void;
+export interface ICellsState {
+  cells: Map<string, ICellState>;
+  kernelAvailable: boolean; // Currently shared between 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: (kernelAvailable: boolean) => void;
-  setAdapter: (adapter?: CellAdapter) => void;
-  execute: () => void;
+  setAdapter: (id: string, adapter?: CellAdapter) => void;
+  getAdapter: (id: string) => CellAdapter | undefined;
+  getSource: (id: string) => string | undefined;
+  getOutputsCount: (id: string) => number | undefined;
+  execute: (id?: string) => void;
 };
 
 export const cellStore = createStore<CellState>((set, get) => ({
+  cells: new Map<string, ICellState>(),
   source: '',
   outputsCount: 0,
   kernelAvailable: false,
   adapter: undefined,
-  setSource: (source: string) => set((state: CellState) => ({ source })),
-  setOutputsCount: (outputsCount: number) => set((state: CellState) => ({ outputsCount })),
+  setCells: (cells: Map<string, ICellState>) => set((cell: CellState) => ({ cells })),
+
+  setSource: (id: string, source: string) => {
+    const cells = get().cells;
+    const cell = cells.get(id);
+    if (cell) {
+      cell.source = source;
+    } else {
+      cells.set(id, {source});
+    }
+    set((cell: CellState) => ({ cells }))
+  },
+  setOutputsCount: (id: string, outputsCount: number) => {
+    const cells = get().cells;
+    const cell = cells.get(id);
+    if (cell) {
+      cell.outputsCount = outputsCount;
+    } else {
+      cells.set(id, {outputsCount});
+    }
+    set((state: CellState) => ({ cells }))
+  },
   setKernelAvailable: (kernelAvailable: boolean) => set((state: CellState) => ({ kernelAvailable })),
-  setAdapter: (adapter?: CellAdapter) => set((state: CellState) => ({ adapter })),
-  execute: () => { get().adapter?.execute() },
+  setAdapter: (id: string, adapter?: CellAdapter) => {
+    const cells = get().cells;
+    const cell = cells.get(id);
+    if (cell) {
+      cell.adapter = adapter;
+    } else {
+      cells.set(id, { adapter });
+    }
+    set((cell: CellState) => ({ cells }))
+  },
+  getAdapter: (id: string) => {
+    return get().cells.get(id)?.adapter;
+  },
+  getSource: (id: string): string | undefined => {
+    return get().cells.get(id)?.source;
+  },
+  getOutputsCount: (id: string): number | undefined => {
+    return get().cells.get(id)?.outputsCount;
+  },
+  execute: (id: string) => { 
+    const cells = get().cells;
+    const cell = cells.get(id);
+    if (cell) {
+      cell.adapter?.execute() 
+    } else {
+      get().cells.forEach((cell) => cell.adapter?.execute())
+    }
+  },
 }));
 
 export function useCellStore(): CellState;

packages/react/src/examples/All.tsx

@@ -19,7 +19,7 @@ import Terminal from '../components/terminal/Terminal';
 import CellSidebarNew from '../components/notebook/cell/sidebar/CellSidebarButton';
 import CellSidebar from '../components/notebook/cell/sidebar/CellSidebar';
 import Console from '../components/console/Console';
-import { cellStore, useCellStore } from '../components/cell/CellState';
+import { useCellStore } from '../components/cell/CellState';
 import useNotebookStore from '../components/notebook/NotebookState';
 
 import notebook from './notebooks/NotebookExample1.ipynb.json';
@@ -49,39 +49,44 @@ widgets.IntSlider(
     step=1
  )`;
 
-const CellPreview = () => {
-  const { source, kernelAvailable } = useCellStore()
+interface ICellToolProps {
+  id: string; // Cell id
+}
+
+const CellPreview = (props: ICellToolProps) => {
+  const cellStore = useCellStore();
   return (
     <>
-      <>source: {source}</>
-      <>kernel available: {String(kernelAvailable)}</>
+      <>source: {cellStore.getSource(props.id)}</>
+      <>kernel available: {String(cellStore.kernelAvailable)}</>
     </>
   );
 };
 
-const CellToolbar = () => {
-  const { outputsCount } = useCellStore();
+const CellToolbar = (props: ICellToolProps) => {
+  const {id} = props;
+  const cellStore = useCellStore();
   return (
     <>
       <Box display="flex">
         <ButtonGroup>
           <Button
             variant="default"
             size="small"
-            onClick={() => cellStore.getState().execute()}
+            onClick={() => cellStore.execute(id)}
           >
             Run the cell
           </Button>
           <Button
             variant="invisible"
             size="small"
-            onClick={() => cellStore.getState().setOutputsCount(0)}
+            onClick={() => cellStore.setOutputsCount(id, 0)}
           >
             Reset outputs count
           </Button>
         </ButtonGroup>
       </Box>
-      <Box>Outputs count: {outputsCount}</Box>
+      <Box>Outputs count: {cellStore.getOutputsCount(id)}</Box>
     </>
   );
 };
@@ -184,6 +189,7 @@ const Outputs = () => {
 const div = document.createElement('div');
 document.body.appendChild(div);
 const root = createRoot(div);
+const cellId = 'my-cell-1'
 
 root.render(
   <Jupyter terminals={true}>
@@ -198,9 +204,9 @@ root.render(
     <hr />
     <Console />
     <hr />
-    <CellPreview />
-    <CellToolbar />
-    <Cell />
+    <CellPreview id={cellId} />
+    <CellToolbar id={cellId}/>
+    <Cell id={cellId}/>
     <hr />
     <Outputs />
     <hr />

packages/react/src/examples/Cell.tsx

@@ -22,20 +22,22 @@ for i in range(100):
 
 const CellExample = () => {
   const cellStore = useJupyterStore().cellStore();
-  console.log('Cell Outputs', (cellStore.adapter?.cell as CodeCell).outputArea.model.toJSON());
+  const cellId = 'cell-1'
+
+  console.log('Cell Outputs', (cellStore.getAdapter(cellId)?.cell as CodeCell).outputArea.model.toJSON());
   return (
     <Jupyter>
       <Box as="h1">A Jupyter Cell</Box>
       <Box>
-        Outputs Count: {cellStore.outputsCount}
+        Outputs Count: {cellStore.getOutputsCount(cellId)}
       </Box>
       <Box>
-        Source: {cellStore.source}
+        Source: {cellStore.getSource(cellId)}
       </Box>
       <Box>
-        <Button onClick={() => cellStore.execute()}>Run cell</Button>
+        <Button onClick={() => cellStore.execute(cellId)}>Run cell</Button>
       </Box>
-      <Cell source={DEFAULT_SOURCE}/>
+      <Cell source={DEFAULT_SOURCE} id={cellId}/>
     </Jupyter>
   )
 }