Update notebook execution timestamps and fix styling in TextResult.js…

…, refactor code to remove isExecuted property in NotebookModel.js and Cell.js, update dependencies in package.json, merge 0.5.2, refactor notebook execution code and add keyboard shortcut for running cells, refactor styling and add MoveButton component in NotebookHeader.js, refactor naming conventions in Notebook.js, NotebookTitle.js, DeleteDialog.js, Item.js, and RenameDialog.js, refactor styling in CreateFolderDialog.js, CreateNotebookDialog.js, WorkspaceSidebar.js, and Item.js. (#232)
xuwenyihust · Jun 24, 2024 · 6ca1eed · 6ca1eed
1 parent 48013eb
commit 6ca1eed
Show file tree

Hide file tree

Showing 15 changed files with 55 additions and 127 deletions.
diff --git a/README.md b/README.md
@@ -131,6 +131,7 @@ PawMark is a platform for big data and AI. It is based on Apache Spark and Kuber
 ## Versions
 <details>
 <summary>Details</summary>
+
 | Component    | Version |
 |--------------|---------|
 | Scala        | 2.12    |
@@ -142,6 +143,7 @@ PawMark is a platform for big data and AI. It is based on Apache Spark and Kuber
 | Airflow      | 2.9.1   |
 | Postgres     | 13      |
 | React        | 18.3.1  |
+
 </details>
 
 ## License

diff --git a/examples/demo.ipynb b/examples/demo.ipynb
@@ -2,16 +2,19 @@
  "cells": [
   {
    "cell_type": "markdown",
+   "isExecuted": false,
    "metadata": {},
    "source": [
     "# Demo Notebook\n",
     "\n",
-    "This is just a demo notebook"
+    "- This is just a demo notebook\n",
+    "- For testing"
    ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
+   "isExecuted": false,
    "metadata": {},
    "outputs": [
     {
@@ -42,6 +45,7 @@
   {
    "cell_type": "code",
    "execution_count": 1,
+   "isExecuted": false,
    "metadata": {},
    "outputs": [
     {
@@ -63,6 +67,7 @@
   {
    "cell_type": "code",
    "execution_count": null,
+   "isExecuted": false,
    "metadata": {},
    "outputs": [
     {
@@ -97,7 +102,8 @@
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
    "version": "3.11.6"
-  }
+  },
+  "uuid": "647a82de-693a-48f0-ae3a-64a771d83da5"
  },
  "nbformat": 4,
  "nbformat_minor": 4

diff --git a/examples/notebook-1718195506985.ipynb b/examples/notebook-1718195506985.ipynb
diff --git a/examples/notebook-1718195513502.ipynb b/examples/notebook-1718195513502.ipynb
diff --git a/examples/notebook-1718429485886.ipynb b/examples/notebook-1718429485886.ipynb
diff --git a/examples/notebook-1717590796420.ipynb → examples/notebook-1719231222099.ipynb b/examples/notebook-1717590796420.ipynb → examples/notebook-1719231222099.ipynb
diff --git a/server/app.py b/server/app.py
@@ -16,12 +16,7 @@ def handle_request():
     data = {"message": "Hello from Flask!"}
     return jsonify(data)
 
-# @app.route('/execute_notebook', methods=['POST'])
-# def execute_notebook():
-#     notebook_path = request.json.get('notebook_path')
-#     # Assuming you have set up Jupyter to accept API requests
-#     response = requests.post(f'http://jupyter-server:8888/api/notebooks/{notebook_path}/execute')
-#     return jsonify(response.json())
+
 
 if __name__ == '__main__':
     app.run(debug=True, port=5002)
diff --git a/webapp/src/components/notebook/Notebook.js b/webapp/src/components/notebook/Notebook.js
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import NotebookHeader from './header/NotebookHeader';
 import Code from './content/Code';
+import Runs from './content/Runs';
 import { ContentType } from './content/ContentType';
 import { CellStatus } from './content/cell/CellStatus';
 import { CellType } from './content/cell/CellType';
@@ -310,7 +311,8 @@ function Notebook({
                                     setCellExecutedStatus)}
                             saveNotebook={handleUpdateNotebook}
                             deleteNotebook={handleDeleteNotebook}
-                            /> : <div>666</div>
+                            /> : 
+                        <Runs />
                     }
 
                 </Box>

diff --git a/webapp/src/components/notebook/content/Code.js b/webapp/src/components/notebook/content/Code.js
@@ -38,7 +38,7 @@ const Code = ({
         deleteNotebook={deleteNotebook}/>
 
       <Box sx={{ 
-          width: '100%',
+          width: '95%',
           display: 'flex', 
           flexDirection: 'column',
           marginTop: '50px',

diff --git a/webapp/src/components/notebook/content/Runs.js b/webapp/src/components/notebook/content/Runs.js
@@ -0,0 +1,20 @@
+import React, { useEffect, useState } from 'react';
+
+function Runs() {
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    fetch('http://localhost:5002/test')
+      .then(response => response.json())
+      .then(data => setData(data))
+      .catch(error => console.error('Error:', error));
+  }, []);
+
+  return (
+    <div>
+      {data ? JSON.stringify(data) : 'Loading...'}
+    </div>
+  );
+}
+
+export default Runs;
diff --git a/webapp/src/components/sidebar/Sidebar.js b/webapp/src/components/sidebar/Sidebar.js
@@ -114,15 +114,15 @@ function Sidebar({
                       height: `${itemHeight}px`
                     }}>
                   <ListItemIcon>
-                      <CgAdd style={{ color: openCreateDrawer ? 'white' : 'lightgrey' }} />
+                      <CgAdd style={{ color: openCreateDrawer ? 'white' : 'white' }} />
                   </ListItemIcon>
                   <ListItemText>
                       <Typography 
                         variant="body1" 
                         sx={{ 
                           fontFamily: 'Roboto', 
                           fontSize: '15px',
-                          color: openCreateDrawer ? 'white' : 'lightgrey', 
+                          color: openCreateDrawer ? 'white' : 'white', 
                           marginLeft: '-30px'
                         }}>
                         Create
@@ -156,15 +156,15 @@ function Sidebar({
                     height: `${itemHeight}px`
                   }}>
                   <ListItemIcon>
-                      <CgAlbum style={{ color: openWorkspaceDrawer ? 'white' : 'lightgrey' }} />
+                      <CgAlbum style={{ color: openWorkspaceDrawer ? 'white' : 'white' }} />
                   </ListItemIcon>
                   <ListItemText>
                   <Typography 
                     variant="body1" 
                     sx={{ 
                       fontFamily: 'Roboto', 
                       fontSize: '15px',
-                      color: openWorkspaceDrawer ? 'white' : 'lightgrey', 
+                      color: openWorkspaceDrawer ? 'white' : 'white', 
                       marginLeft: '-30px' 
                     }}>
                     Workspace
@@ -200,15 +200,15 @@ function Sidebar({
                     height: `${itemHeight}px`
                   }}>
                   <ListItemIcon>
-                      <CgEye style={{ color: 'lightgrey' }} />
+                      <CgEye style={{ color: 'white' }} />
                   </ListItemIcon>
                   <ListItemText>
                     <Typography 
                       variant="body1" 
                       sx={{ 
                         fontFamily: 'Roboto', 
                         fontSize: '15px',
-                        color: 'lightgrey', 
+                        color: 'white', 
                         marginLeft: '-30px' 
                       }}>
                       History Server
@@ -231,15 +231,15 @@ function Sidebar({
                     height: `${itemHeight}px`
                   }}>
                   <ListItemIcon>
-                      <CgCalendarToday style={{ color: 'lightgrey' }} />
+                      <CgCalendarToday style={{ color: 'white' }} />
                   </ListItemIcon>
                   <ListItemText>
                     <Typography 
                       variant="body1" 
                       sx={{ 
                         fontFamily: 'Roboto', 
                         fontSize: '15px',
-                        color: 'lightgrey', 
+                        color: 'white', 
                         marginLeft: '-30px' 
                       }}>
                       Scheduler

diff --git a/webapp/src/components/sidebar/create/CreateSidebar.js b/webapp/src/components/sidebar/create/CreateSidebar.js
@@ -52,13 +52,13 @@ function CreateSidebar({
               }}>
               <ListItemIcon>
                   <CgNotes style={{ 
-                    color: 'lightgrey',
+                    color: 'white',
                     marginLeft: '10px'  }} />
               </ListItemIcon>
               <ListItemText>
                   <Typography 
                     variant="body1" 
-                    style={{ color: 'lightgrey' }}
+                    style={{ color: 'white' }}
                     sx={{
                       marginLeft: '-10px'
                     }}>

diff --git a/webapp/src/components/sidebar/workspace/Back.js b/webapp/src/components/sidebar/workspace/Back.js
@@ -6,15 +6,15 @@ const Back = ({ handleBackClick }) => {
   return (
     <ListItem button onClick={handleBackClick}>
       <ListItemIcon>
-          <CgArrowLeftR style={{ color: 'lightgrey' }} />
+          <CgArrowLeftR style={{ color: 'white' }} />
       </ListItemIcon>
       <ListItemText>
           <Typography 
             variant="body1" 
             sx={{ 
               fontFamily: 'Roboto', 
               fontSize: '15px',
-              color: 'lightgrey', 
+              color: 'white', 
               marginLeft: '-30px'
             }}>
             Back

diff --git a/webapp/src/components/sidebar/workspace/item/Item.js b/webapp/src/components/sidebar/workspace/item/Item.js
@@ -25,15 +25,15 @@ const Item = ({
               closeWorkspaceDrawer();
             }}}>
           <ListItemIcon>
-            <IconComponent style={{ color: 'lightgrey' }} />
+            <IconComponent style={{ color: 'white' }} />
           </ListItemIcon>
           <ListItemText>
             <Typography 
               variant="body1" 
               sx={{ 
                 fontFamily: 'Roboto', 
                 fontSize: '15px',
-                color: 'lightgrey', 
+                color: 'white', 
                 marginLeft: '-30px' ,
                 whiteSpace: 'nowrap', 
                 overflow: 'hidden', 

diff --git a/webapp/src/models/NotebookModel.js b/webapp/src/models/NotebookModel.js
@@ -1,6 +1,7 @@
 import { CellStatus } from '../components/notebook/content/cell/CellStatus';
 import { OutputType } from '../components/notebook/content/cell/result/OutputType';
 import { CellExecuteResultType } from "../components/notebook/content/cell/CellExecuteResultType";
+import { v4 as uuidv4 } from 'uuid';
 
 
 class NotebookModel {
@@ -183,14 +184,17 @@ class NotebookModel {
   }; 
 
   static async updateNotebook(path = '', content = {}) {
-    console.log("Updating notebook at path with content:", path, content);
     const updatedContent = { ...content };
 
     updatedContent.cells = updatedContent.cells.map(cell => {
       const updatedCell = { ...cell };
-      // delete updatedCell.isExecuted;
       return updatedCell;
       });
+
+    // Check if notebook content.metadata has uuid
+    if (!updatedContent.metadata.hasOwnProperty('uuid')) {
+      updatedContent.metadata.uuid = uuidv4();
+    }
 
     const response = await fetch(path, {
           method: 'PUT',