Refactor code to remove isExecuted property in NotebookModel.js and C…

…ell.js, and update dependencies in package.json (#228)
xuwenyihust · Jun 22, 2024 · 976d0f0 · 976d0f0
1 parent 329d80a
commit 976d0f0
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 60 deletions.
diff --git a/examples/notebook.ipynb b/examples/notebook.ipynb
@@ -2,6 +2,7 @@
  "cells": [
   {
    "cell_type": "markdown",
+   "isExecuted": true,
    "lastExecutionResult": null,
    "lastExecutionTime": null,
    "metadata": {},
@@ -15,8 +16,9 @@
   {
    "cell_type": "code",
    "execution_count": null,
+   "isExecuted": false,
    "lastExecutionResult": "success",
-   "lastExecutionTime": "2024-06-17 14:22:59",
+   "lastExecutionTime": "2024-06-22 14:29:44",
    "metadata": {},
    "outputs": [],
    "source": [
@@ -27,8 +29,9 @@
   {
    "cell_type": "code",
    "execution_count": null,
+   "isExecuted": false,
    "lastExecutionResult": "success",
-   "lastExecutionTime": "2024-06-17 14:23:10",
+   "lastExecutionTime": "2024-06-22 14:50:15",
    "metadata": {},
    "outputs": [
     {
@@ -43,7 +46,7 @@
        "dtype: float64"
       ]
      },
-     "execution_count": 27,
+     "execution_count": 3,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -56,8 +59,9 @@
   {
    "cell_type": "code",
    "execution_count": 1,
-   "lastExecutionResult": null,
-   "lastExecutionTime": null,
+   "isExecuted": false,
+   "lastExecutionResult": "error",
+   "lastExecutionTime": "2024-06-22 14:50:24",
    "metadata": {},
    "outputs": [
     {
@@ -67,7 +71,7 @@
      "traceback": [
       "\u001b[0;31m---------------------------------------------------------------------------\u001b[0m",
       "\u001b[0;31mNameError\u001b[0m                                 Traceback (most recent call last)",
-      "Cell \u001b[0;32mIn[12], line 1\u001b[0m\n\u001b[0;32m----> 1\u001b[0m \u001b[38;5;28mprint\u001b[39m(\u001b[43mqegnvoign\u001b[49m)          \n",
+      "Cell \u001b[0;32mIn[4], line 1\u001b[0m\n\u001b[0;32m----> 1\u001b[0m \u001b[38;5;28mprint\u001b[39m(\u001b[43mqegnvoign\u001b[49m)          \n",
       "\u001b[0;31mNameError\u001b[0m: name 'qegnvoign' is not defined"
      ]
     }
@@ -79,20 +83,22 @@
   {
    "cell_type": "code",
    "execution_count": null,
-   "lastExecutionResult": null,
-   "lastExecutionTime": null,
+   "isExecuted": true,
+   "lastExecutionResult": "success",
+   "lastExecutionTime": "2024-06-22 14:54:22",
    "metadata": {},
    "outputs": [],
    "source": [
     "import time\n",
-    "time.sleep(5)"
+    "time.sleep(20)"
    ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
-   "lastExecutionResult": null,
-   "lastExecutionTime": null,
+   "isExecuted": false,
+   "lastExecutionResult": "success",
+   "lastExecutionTime": "2024-06-22 14:50:45",
    "metadata": {},
    "outputs": [
     {
@@ -110,11 +116,22 @@
   {
    "cell_type": "code",
    "execution_count": null,
-   "lastExecutionResult": null,
-   "lastExecutionTime": null,
+   "isExecuted": false,
+   "lastExecutionResult": "success",
+   "lastExecutionTime": "2024-06-22 14:50:51",
    "metadata": {},
-   "outputs": [],
-   "source": []
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "333\n"
+     ]
+    }
+   ],
+   "source": [
+    "print(333)"
+   ]
   }
  ],
  "metadata": {

diff --git a/examples/quickstart.ipynb b/examples/quickstart.ipynb
@@ -25,12 +25,7 @@
    "lastExecutionTime": null,
    "metadata": {},
    "source": [
-    "## Table Display\n",
-    "\n",
-    "| id| name |\n",
-    "|---|------|\n",
-    "|  0| a    |\n",
-    "|  1| b    |\n"
+    "## Table Display\n"
    ]
   },
   {
@@ -67,8 +62,8 @@
   {
    "cell_type": "code",
    "execution_count": 4,
-   "lastExecutionResult": "success",
-   "lastExecutionTime": "2024-06-21 07:08:28",
+   "lastExecutionResult": null,
+   "lastExecutionTime": null,
    "metadata": {},
    "outputs": [
     {
@@ -98,8 +93,8 @@
   {
    "cell_type": "code",
    "execution_count": 5,
-   "lastExecutionResult": "success",
-   "lastExecutionTime": "2024-06-21 07:09:57",
+   "lastExecutionResult": null,
+   "lastExecutionTime": null,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -110,8 +105,8 @@
   {
    "cell_type": "code",
    "execution_count": null,
-   "lastExecutionResult": "success",
-   "lastExecutionTime": "2024-06-21 07:09:57",
+   "lastExecutionResult": null,
+   "lastExecutionTime": null,
    "metadata": {},
    "outputs": [
     {
@@ -134,8 +129,8 @@
   {
    "cell_type": "code",
    "execution_count": null,
-   "lastExecutionResult": "success",
-   "lastExecutionTime": "2024-06-21 07:11:12",
+   "lastExecutionResult": null,
+   "lastExecutionTime": null,
    "metadata": {},
    "outputs": [
     {

diff --git a/webapp/src/components/notebook/Notebook.js b/webapp/src/components/notebook/Notebook.js
@@ -50,8 +50,8 @@ function Notebook({
             const notebookContentWithCustomFields = notebook.content.cells.map(cell => ({
                 ...cell,
                 isExecuted: cell.cell_type === 'code' ? false : cell.cell_type === 'markdown' ? true : cell.isExecuted,
-                lastExecutionResult: null, 
-                lastExecutionTime: null,
+                lastExecutionResult: cell.lastExecutionResult === null? null : cell.lastExecutionResult, 
+                lastExecutionTime: cell.lastExecutionTime === null? null : cell.lastExecutionTime
               }));
             setNotebookState({
                 ...notebook,

diff --git a/webapp/src/components/notebook/cell/Cell.js b/webapp/src/components/notebook/cell/Cell.js
@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { Card, CardContent, Typography } from '@mui/material';
+import AceEditor from 'react-ace';
 import 'ace-builds/src-noconflict/mode-python';
 import 'ace-builds/src-noconflict/mode-markdown';
 import 'ace-builds/src-noconflict/theme-github';

diff --git a/webapp/src/components/notebook/cell/header/CellHeader.js b/webapp/src/components/notebook/cell/header/CellHeader.js
@@ -20,35 +20,45 @@ function CellHeader({
     <CardHeader title={
       <Box style={{ display: 'flex', justifyContent: 'space-between' }}>
         <Box display="flex" alignItems="center">
-        {cellStatus === CellStatus.BUSY || 
-          cellStatus === CellStatus.INITIALIZING ||
-          cellStatus === CellStatus.WAITING ? 
-          <CircularProgress size={15} /> :
-          <RunButton 
-            cell={cell} 
-            index={index} 
-            handleRunCell={handleRunCell}/>
-          } { (cellStatus === CellStatus.BUSY || 
-              cellStatus === CellStatus.INITIALIZING ||
-              cellStatus === CellStatus.WAITING) ?
-          <Typography 
-            variant="body2"
-            style={{ marginLeft: 10 }}
-            color="textSecondary">
-            {cellStatus}
-          </Typography> :
-          cell.lastExecutionResult === null ? null :
-          (cell.lastExecutionResult === CellExecuteResultType.SUCCESS ?
-            <CgCheck style={{ color: 'green', marginLeft: 10 }}/> :
-            (cell.lastExecutionResult === CellExecuteResultType.ERROR ?
-              <CgDanger size={16} style={{ color: 'red', marginLeft: 10 }}/> : null))}
-          {cellStatus === CellStatus.IDLE &&
+          {
+            cellStatus === CellStatus.BUSY || 
+            cellStatus === CellStatus.INITIALIZING ||
+            cellStatus === CellStatus.WAITING ? 
+            <CircularProgress size={15} /> :
+            <RunButton 
+              cell={cell} 
+              index={index} 
+              handleRunCell={handleRunCell}/>
+          } 
+
+          { 
+            (cellStatus === CellStatus.BUSY || 
+                cellStatus === CellStatus.INITIALIZING ||
+                cellStatus === CellStatus.WAITING) ?
+            <Typography 
+              variant="body2"
+              style={{ marginLeft: 10 }}
+              color="textSecondary">
+              {cellStatus}
+            </Typography> :
+            cell.lastExecutionResult === null ? null :
+            (cell.lastExecutionResult === CellExecuteResultType.SUCCESS ?
+              <CgCheck style={{ color: 'green', marginLeft: 10 }}/> :
+              (cell.lastExecutionResult === CellExecuteResultType.ERROR ?
+                <CgDanger size={16} style={{ color: 'red', marginLeft: 10 }}/> : null))    
+          }
+
+          { (cellStatus === CellStatus.BUSY || 
+                cellStatus === CellStatus.INITIALIZING ||
+                cellStatus === CellStatus.WAITING) ? null :
             <Typography
-            variant="body2"
-            color="textSecondary"
-            style={{ marginLeft: 10 }}>
-            {cell.lastExecutionTime}
-          </Typography>}
+              variant="body2"
+              color="textSecondary"
+              style={{ marginLeft: 10 }}>
+              {cell.lastExecutionTime}
+            </Typography>
+          }
+
         </Box>
         <Box display="flex" justifyContent="flex-end">
           <TypeSelect 

diff --git a/webapp/src/models/NotebookModel.js b/webapp/src/models/NotebookModel.js
@@ -188,7 +188,7 @@ class NotebookModel {
 
     updatedContent.cells = updatedContent.cells.map(cell => {
       const updatedCell = { ...cell };
-      delete updatedCell.isExecuted;
+      // delete updatedCell.isExecuted;
       return updatedCell;
       });