Skip to content

Commit

Permalink
Update notebook execution timestamps and fix styling in TextResult.js (
Browse files Browse the repository at this point in the history
  • Loading branch information
xuwenyihust committed Jun 24, 2024
1 parent c3dc8c3 commit 48013eb
Show file tree
Hide file tree
Showing 24 changed files with 250 additions and 119 deletions.
53 changes: 27 additions & 26 deletions examples/notebook.ipynb
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,16 @@
"source": [
"# My Notebook\n",
"\n",
"- Just a demo notebook for testing"
"- Just a demo notebook for testing\n",
"- By Wenyi Xu"
]
},
{
"cell_type": "code",
"execution_count": null,
"isExecuted": true,
"isExecuted": false,
"lastExecutionResult": "success",
"lastExecutionTime": "2024-06-23 15:44:54",
"lastExecutionTime": "2024-06-24 08:59:25",
"metadata": {},
"outputs": [],
"source": [
Expand All @@ -29,9 +30,9 @@
{
"cell_type": "code",
"execution_count": null,
"isExecuted": true,
"isExecuted": false,
"lastExecutionResult": "success",
"lastExecutionTime": "2024-06-23 15:44:58",
"lastExecutionTime": "2024-06-24 08:59:26",
"metadata": {},
"outputs": [
{
Expand All @@ -46,7 +47,7 @@
"dtype: float64"
]
},
"execution_count": 2,
"execution_count": 8,
"metadata": {},
"output_type": "execute_result"
}
Expand All @@ -56,12 +57,25 @@
"s"
]
},
{
"cell_type": "code",
"execution_count": null,
"isExecuted": false,
"lastExecutionResult": "success",
"lastExecutionTime": "2024-06-24 08:59:46",
"metadata": {},
"outputs": [],
"source": [
"import time\n",
"time.sleep(20)"
]
},
{
"cell_type": "code",
"execution_count": 1,
"isExecuted": true,
"isExecuted": false,
"lastExecutionResult": "error",
"lastExecutionTime": "2024-06-23 15:45:01",
"lastExecutionTime": "2024-06-24 08:59:47",
"metadata": {},
"outputs": [
{
Expand All @@ -71,7 +85,7 @@
"traceback": [
"\u001b[0;31m---------------------------------------------------------------------------\u001b[0m",
"\u001b[0;31mNameError\u001b[0m Traceback (most recent call last)",
"Cell \u001b[0;32mIn[3], 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[10], 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"
]
}
Expand All @@ -83,22 +97,9 @@
{
"cell_type": "code",
"execution_count": null,
"isExecuted": true,
"lastExecutionResult": "success",
"lastExecutionTime": "2024-06-23 15:45:23",
"metadata": {},
"outputs": [],
"source": [
"import time\n",
"time.sleep(20)"
]
},
{
"cell_type": "code",
"execution_count": null,
"isExecuted": true,
"isExecuted": false,
"lastExecutionResult": "success",
"lastExecutionTime": "2024-06-23 15:45:23",
"lastExecutionTime": "2024-06-24 08:59:47",
"metadata": {},
"outputs": [
{
Expand All @@ -116,9 +117,9 @@
{
"cell_type": "code",
"execution_count": null,
"isExecuted": true,
"isExecuted": false,
"lastExecutionResult": "success",
"lastExecutionTime": "2024-06-23 15:45:23",
"lastExecutionTime": "2024-06-24 08:59:47",
"metadata": {},
"outputs": [
{
Expand Down
102 changes: 42 additions & 60 deletions webapp/src/components/notebook/Notebook.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import React, { useState, useEffect } from 'react';
import { Button, Tooltip } from '@mui/material';
import NotebookHeader from './header/NotebookHeader';
import Cell from './cell/Cell';
import { CellStatus } from './cell/CellStatus';
import { CellType } from './cell/CellType';
import Code from './content/Code';
import { ContentType } from './content/ContentType';
import { CellStatus } from './content/cell/CellStatus';
import { CellType } from './content/cell/CellType';
import NotebookModel from '../../models/NotebookModel';
import SparkModel from '../../models/SparkModel';
import config from '../../config';
import { Box } from '@mui/material';


function Notebook({
Expand All @@ -25,6 +26,9 @@ function Notebook({
const [sparkAppId, setSparkAppId] = useState(null);
const [isNameEditing, setIsNameEditing] = useState(false);
const [currentName, setCurrentName] = useState(notebook.name);

const [contentType, setContentType] = useState(ContentType.CODE)

// Cells
const [cellStatuses, setCellStatuses] = useState(notebookState.content ? notebookState.content.cells.map(() => CellStatus.IDLE) : []);
const [cellExecutedStatuses, setCellExecutedStatuses] = useState(notebookState.content ? notebookState.content.cells.map(cell => cell.cell_type === 'markdown') : []);
Expand Down Expand Up @@ -251,12 +255,19 @@ function Notebook({
};

return (
<div style={{ paddingLeft: 20, paddingRight: 0, marginLeft: 200 }}> {/* Adjust marginLeft based on your sidebar width */}
<div>
{showNotebook && (
<div>
<Box
style={{
display: 'flex',
flexDirection: 'column',
paddingLeft: 20,
paddingRight: 0,
marginLeft: 200 }}>
{notebookState.name &&
<NotebookHeader
notebook={notebook}
setContentType={setContentType}
kernelId={kernelId}
sparkAppId={sparkAppId}
setSparkAppId={setSparkAppId}
Expand All @@ -266,7 +277,27 @@ function Notebook({
handleClickNotebookName={handleClickNotebookName}
handleChangeNotebookName={handleChangeNotebookName}
handleSaveNotebookName={handleSaveNotebookName}
clearOutputs={clearOutputs}
clearOutputs={clearOutputs}/>
}

{
contentType === ContentType.CODE ?
<Code
notebook={notebook}
notebookState={notebookState}
cellStatuses={cellStatuses}
setCellStatus={setCellStatus}
cellExecutedStatuses={cellExecutedStatuses}
setCellExecutedStatus={setCellExecutedStatus}
handleChangeCell={handleChangeCell}
handleDeleteCell={handleDeleteCell}
handleChangeCellType={handleChangeCellType}
handleMoveCell={handleMoveCell}
handleRunCodeCell={handleRunCodeCell}
handleCopyCell={handleCopyCell}
handleCreateCell={handleCreateCell}
kernelId={kernelId}
setKernelId={setKernelId}
runAllCells={
() => NotebookModel.runAllCells(
jupyterBaseUrl,
Expand All @@ -278,60 +309,11 @@ function Notebook({
cellExecutedStatuses,
setCellExecutedStatus)}
saveNotebook={handleUpdateNotebook}
deleteNotebook={handleDeleteNotebook}/>
deleteNotebook={handleDeleteNotebook}
/> : <div>666</div>
}
{notebookState.content &&
notebookState.content.cells &&
notebookState.content.cells.map((cell, index) => (
<div style={{ position: 'relative' }}>
<Cell
cell={cell}
index={index}
key={index}
notebookState={notebookState}
cellStatus={cellStatuses[index]}
setCellStatus={status => setCellStatus(index, status)}
cellExecutedStatus={cellExecutedStatuses[index]}
setCellExecutedStatus={executed => setCellExecutedStatus(index, executed)}
handleChangeCell={handleChangeCell}
handleDeleteCell={handleDeleteCell}
handleChangeCellType={handleChangeCellType}
handleMoveCell={handleMoveCell}
handleRunCodeCell={handleRunCodeCell}
handleCopyCell={handleCopyCell}
handelRunAllAboveCells={
(index) => NotebookModel.runAllAboveCells(
index,
jupyterBaseUrl,
notebookState,
kernelId,
setKernelId,
cellStatuses,
setCellStatus,
cellExecutedStatuses,
setCellExecutedStatus)}/>
<div
style={{
display: 'flex',
justifyContent: 'center'}}>
<Tooltip title="Add Code Cell"
sx={{fontSize: 11,
color: "grey"}}>
<Button onClick={() => handleCreateCell('code', index + 1)}>
+ Code
</Button>
</Tooltip>
<Tooltip title="Add Code Cell"
sx={{fontSize: 11,
color: "grey"}}>
<Button onClick={() => handleCreateCell('markdown', index + 1)}>
+ Markdown
</Button>
</Tooltip>
</div>
</div>
))}
</div>

</Box>
)}
</div>
);
Expand Down
101 changes: 101 additions & 0 deletions webapp/src/components/notebook/content/Code.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
import Cell from './cell/Cell';
import NotebookModel from '../../../models/NotebookModel';
import NotebookToolbar from './NotebookToolbar';
import config from '../../../config';
import { Box, Button, Tooltip, Card } from '@mui/material';

const Code = ({
notebook,
notebookState,
cellStatuses,
setCellStatus,
cellExecutedStatuses,
setCellExecutedStatus,
handleChangeCell,
handleDeleteCell,
handleChangeCellType,
handleMoveCell,
handleRunCodeCell,
handleCopyCell,
handleCreateCell,
kernelId,
setKernelId,
runAllCells,
saveNotebook,
deleteNotebook
}) => {

const jupyterBaseUrl= `${config.jupyterBaseUrl}`
const baseUrl = `${jupyterBaseUrl}/api/contents/`

return (
<Box sx={{ display: 'flex' }}>

<NotebookToolbar
notebook={notebook}
runAllCells={runAllCells}
saveNotebook={saveNotebook}
deleteNotebook={deleteNotebook}/>

<Box sx={{
width: '100%',
display: 'flex',
flexDirection: 'column',
marginTop: '50px',
}}>
{notebookState.content &&
notebookState.content.cells &&
notebookState.content.cells.map((cell, index) => (
<Box style={{ position: 'relative' }}>
<Cell
cell={cell}
index={index}
key={index}
notebookState={notebookState}
cellStatus={cellStatuses[index]}
setCellStatus={status => setCellStatus(index, status)}
cellExecutedStatus={cellExecutedStatuses[index]}
setCellExecutedStatus={executed => setCellExecutedStatus(index, executed)}
handleChangeCell={handleChangeCell}
handleDeleteCell={handleDeleteCell}
handleChangeCellType={handleChangeCellType}
handleMoveCell={handleMoveCell}
handleRunCodeCell={handleRunCodeCell}
handleCopyCell={handleCopyCell}
handelRunAllAboveCells={
(index) => NotebookModel.runAllAboveCells(
index,
jupyterBaseUrl,
notebookState,
kernelId,
setKernelId,
cellStatuses,
setCellStatus,
cellExecutedStatuses,
setCellExecutedStatus)}/>
<div
style={{
display: 'flex',
justifyContent: 'center'}}>
<Tooltip title="Add Code Cell"
sx={{fontSize: 11,
color: "grey"}}>
<Button onClick={() => handleCreateCell('code', index + 1)}>
+ Code
</Button>
</Tooltip>
<Tooltip title="Add Code Cell"
sx={{fontSize: 11,
color: "grey"}}>
<Button onClick={() => handleCreateCell('markdown', index + 1)}>
+ Markdown
</Button>
</Tooltip>
</div>
</Box>
))}</Box>
</Box>
);
}

export default Code;
4 changes: 4 additions & 0 deletions webapp/src/components/notebook/content/ContentType.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export const ContentType = {
CODE: 'code',
Runs: 'runs',
};
Loading

0 comments on commit 48013eb

Please sign in to comment.