Change cell type on the fly

zasper-io · Dec 18, 2024 · 62b2012 · 62b2012
1 parent 11c6ac7
commit 62b2012
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 6 deletions.
diff --git a/ui/src/ide/editor/notebook/NbButtons.tsx b/ui/src/ide/editor/notebook/NbButtons.tsx
@@ -7,10 +7,6 @@ function NbButtons(props){
         { label: 'Markdown', value: 'markdown' },
         { label: 'Raw', value: 'raw' },
     ]
-
-    const changeCellType = (value) =>{
-
-    }
 
     return (
       <div className='text-editor-tool'>
@@ -23,7 +19,7 @@ function NbButtons(props){
         <button type='button' className='editor-button' onClick={() => props.stopKernel()}><i className='fas fa-square' /></button>
         <button type='button' className='editor-button' onClick={() => props.restartKernel()}><i className='fas fa-redo' /></button>
         <button type='button' className='editor-button' onClick={() => props.reExecuteNotebook()}><i className='fas fa-forward' /></button>
-        <select onChange={e => changeCellType(e.target.value)} className="form-select editor-select" value={props.notebook.cells.length > 0 && props.notebook.cells[props.focusedIndex].cell_type}>
+        <select onChange={e => props.changeCellType(e.target.value)} className="form-select editor-select" value={props.notebook.cells.length > 0 && props.notebook.cells[props.focusedIndex].cell_type}>
             {options.map((option, index) => (
                 <option key={index} value={option.value}>{option.label}</option>
             ))}

diff --git a/ui/src/ide/editor/notebook/NotebookEditor.tsx b/ui/src/ide/editor/notebook/NotebookEditor.tsx
@@ -238,6 +238,21 @@ export default function NotebookEditor(props) {
     });
   }
 
+  const changeCellType = (value: string) =>{
+    setNotebook((prevNotebook) => {
+      const updatedCells = prevNotebook.cells.map((cell, idx) => {
+
+        // If index is provided and valid, update the cell at that index
+        if (idx === focusedIndex) {
+          return { ...cell, cell_type: value };
+        }
+        return cell;
+      });
+
+      return { ...prevNotebook, cells: updatedCells };
+    });
+  }
+
   const submitCell = (source: string, cellId: string) => {
     setNotebook((prevNotebook) => {
       const updatedCells = prevNotebook.cells.map((cell) => {
@@ -359,7 +374,7 @@ export default function NotebookEditor(props) {
   };
 
   const [copiedCell, setCopiedCell] = useState<ICell|null>(null);  // To store the copied or cut cell
-const [cutCellIndex, setCutCellIndex] = useState<number|null>(null); // To store the index of the cut cell
+  const [cutCellIndex, setCutCellIndex] = useState<number|null>(null); // To store the index of the cut cell
 
 // Function to copy the cell at the current focused index
   const copyCell = () => {
@@ -459,6 +474,7 @@ const [cutCellIndex, setCutCellIndex] = useState<number|null>(null); // To store
           notebook={notebook}
           kernelName={kernelName}
           kernelStatus={kernelStatus}
+          changeCellType={changeCellType}
         />
         {debugMode && (
           <div>