From 62b20121e80d881237e4aeffda654b3d730dbf2c Mon Sep 17 00:00:00 2001
From: Prasun Anand <prasunanand.bitsp@gmail.com>
Date: Wed, 18 Dec 2024 15:34:04 +0530
Subject: [PATCH] Change cell type on the fly

---
 ui/src/ide/editor/notebook/NbButtons.tsx      |  6 +-----
 ui/src/ide/editor/notebook/NotebookEditor.tsx | 18 +++++++++++++++++-
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/ui/src/ide/editor/notebook/NbButtons.tsx b/ui/src/ide/editor/notebook/NbButtons.tsx
index 3fdc4dd..b5c7303 100644
--- 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
index e8d10e5..69444ec 100644
--- 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>