fix: notebook state (#458)

* fix: notebook state

* fix: build

Author: echarles

examples/lexical/src/AppNbformat.tsx

@@ -93,21 +93,21 @@ const Tabs = () => {
         <UnderlineNav.Item
           href=""
           aria-current={tab === 'editor' ? 'page' : undefined}
-          //          onClick={(e: any) => goToTab(e, 'editor', notebook?.model)}
+          onClick={(e: any) => goToTab(e, 'editor', notebook?.model)}
         >
           Editor
         </UnderlineNav.Item>
         <UnderlineNav.Item
           href=""
           aria-current={tab === 'notebook' ? 'page' : undefined}
-          //          onClick={(e: any) => goToTab(e, 'notebook', notebook?.model)}
+          onClick={(e: any) => goToTab(e, 'notebook', notebook?.model)}
         >
           Notebook
         </UnderlineNav.Item>
         <UnderlineNav.Item
           href=""
           aria-current={tab === 'nbformat' ? 'page' : undefined}
-          //          onClick={(e: any) => goToTab(e, 'nbformat', notebook?.model)}
+          onClick={(e: any) => goToTab(e, 'nbformat', notebook?.model)}
         >
           NbFormat
         </UnderlineNav.Item>

packages/lexical/src/examples/AppNbformat.tsx

@@ -5,10 +5,10 @@
  */
 
 import { useState, useMemo } from 'react';
-// import { $getRoot } from 'lexical';
+import { $getRoot } from 'lexical';
 import styled from 'styled-components';
 import {
-  //  useNotebookStore,
+  useNotebookStore,
   useJupyter,
   JupyterReactTheme,
   Notebook,
@@ -20,8 +20,8 @@ import { UnderlineNav, Button } from '@primer/react';
 import { ThreeBarsIcon } from '@primer/octicons-react';
 import { JSONTree } from 'react-json-tree';
 import { INotebookContent } from '@jupyterlab/nbformat';
-// import { INotebookModel } from '@jupyterlab/notebook';
-// import { lexicalToNbformat } from './..';
+import { INotebookModel } from '@jupyterlab/notebook';
+import { lexicalToNbformat } from './..';
 import { useLexical, LexicalProvider, Editor } from './..';
 
 import INITIAL_LEXICAL_MODEL from './content/Example.lexical.json';
@@ -43,16 +43,15 @@ const Tabs = () => {
   const { serviceManager, defaultKernel } = useJupyter({
     startDefaultKernel: true,
   });
-  //  const notebookStore = useNotebookStore();
-  const [tab, _] = useState<TabType>('editor');
+  const notebookStore = useNotebookStore();
+  const [tab, setTab] = useState<TabType>('editor');
   const [nbformat, setNbformat] = useState<INotebookContent>(
     INITIAL_NBFORMAT_MODEL,
   );
   const extensions = useMemo(
     () => [new CellSidebarExtension({ factory: CellSidebar })],
     [],
   );
-  /*
   const notebook = notebookStore.selectNotebook(NOTEBOOK_UID);
   const goToTab = (
     e: any,
@@ -80,28 +79,27 @@ const Tabs = () => {
     }
     setTab(toTab);
   };
-  */
   return (
     <Box className="center">
       <UnderlineNav aria-label="Underline Navigation">
         <UnderlineNav.Item
           href=""
           aria-current={tab === 'editor' ? 'page' : undefined}
-          //          onClick={e => goToTab(e, 'editor', notebook?.model)}
+          onClick={e => goToTab(e, 'editor', notebook?.model)}
         >
           Editor
         </UnderlineNav.Item>
         <UnderlineNav.Item
           href=""
           aria-current={tab === 'notebook' ? 'page' : undefined}
-          //          onClick={e => goToTab(e, 'notebook', notebook?.model)}
+          onClick={e => goToTab(e, 'notebook', notebook?.model)}
         >
           Notebook
         </UnderlineNav.Item>
         <UnderlineNav.Item
           href=""
           aria-current={tab === 'nbformat' ? 'page' : undefined}
-          //          onClick={e => goToTab(e, 'nbformat', notebook?.model)}
+          onClick={e => goToTab(e, 'nbformat', notebook?.model)}
         >
           NbFormat
         </UnderlineNav.Item>

packages/react/src/components/notebook/NotebookAdapter.ts

@@ -12,7 +12,9 @@ import {
 } from '@jupyterlab/notebook';
 import { Context } from '@jupyterlab/docregistry';
 import { NotebookModel } from '@jupyterlab/notebook';
+import { KernelMessage } from '@jupyterlab/services';
 import * as nbformat from '@jupyterlab/nbformat';
+import { Kernel } from '../../jupyter/kernel/Kernel';
 import { NotebookCommandIds } from './NotebookCommands';
 import * as Diff from 'diff';
 
@@ -22,6 +24,7 @@ export class NotebookAdapter {
   private _notebook: Notebook;
   private _context: Context<NotebookModel>;
   private _defaultCellType: nbformat.CellType = 'code';
+  private _kernelInfo: KernelMessage.IInfoReply | null = null;
 
   constructor(
     commands: CommandRegistry,
@@ -62,6 +65,63 @@ export class NotebookAdapter {
     return this._context;
   }
 
+  /**
+   * Get the session context from the notebook panel.
+   */
+  get sessionContext() {
+    return this._panel.sessionContext;
+  }
+
+  /**
+   * Get the kernel connection from the session context.
+   */
+  get kernel() {
+    return this._panel.sessionContext?.session?.kernel ?? null;
+  }
+
+  /**
+   * Get the cached kernel info (language_info, etc.).
+   * Call fetchKernelInfo() first to populate this.
+   */
+  get kernelInfo(): KernelMessage.IInfoReply | null {
+    return this._kernelInfo;
+  }
+
+  /**
+   * Fetch and cache the kernel info.
+   * Returns the cached info if already fetched.
+   */
+  async fetchKernelInfo(): Promise<KernelMessage.IInfoReply | null> {
+    if (this._kernelInfo) {
+      return this._kernelInfo;
+    }
+    const kernel = this.kernel;
+    if (kernel) {
+      this._kernelInfo = await kernel.info;
+      return this._kernelInfo;
+    }
+    return null;
+  }
+
+  /**
+   * Assign a new kernel to the notebook.
+   *
+   * @param kernel - The Kernel instance to assign to the notebook
+   *
+   * @remarks
+   * This method changes the kernel associated with the notebook's session context.
+   * It uses the kernel's id to request a kernel change through the session context.
+   * The kernel info cache is cleared when a new kernel is assigned.
+   */
+  assignKernel(kernel: Kernel): void {
+    // Clear the cached kernel info since we're changing kernels
+    this._kernelInfo = null;
+    // Change the kernel using the session context
+    this._context?.sessionContext.changeKernel({
+      id: kernel.id,
+    });
+  }
+
   /**
    * Set the default cell type for new cells.
    */

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

@@ -562,7 +562,7 @@ export function NotebookBase(props: INotebookBaseProps): JSX.Element {
       console.log(`[NotebookBase] Adapter cell count:`, adapter.getCellCount());
       const currentNotebooks = notebookStore.getState().notebooks;
       const updatedNotebooks = new Map(currentNotebooks);
-      updatedNotebooks.set(id, { adapter });
+      updatedNotebooks.set(id, { adapter, portals: [] });
       notebookStore.getState().setNotebooks(updatedNotebooks);
       console.log(
         `[NotebookBase] Store now has ${updatedNotebooks.size} notebooks`