Update frontend to togle and display different notebooks

risenW · risenW · commit 86139b3ad7e9 · 2022-02-06T14:18:46.000+01:00
diff --git a/src/frontend/components/Cell/index.tsx b/src/frontend/components/Cell/index.tsx
@@ -13,7 +13,10 @@ import { cleanErrorMessage } from "../../lib/helpers/utils"
 
 const NoteBookCell = ({ cell }: { cell: NbCell }) => {
     const dispatch = useDispatch();
-    const { cells, interpreterMode } = useSelector((state: { app: AppState }) => state.app)
+    const { notebooks, activeNotebookName, interpreterMode } = useSelector((state: { app: AppState }) => state.app)
+    const notebook = notebooks[activeNotebookName]
+    const { cells } = notebook
+
 
     const [cellIsRunning, setCellIsRunning] = useState(false)
     const [output, setOutput] = useState("")
@@ -30,15 +33,15 @@ const NoteBookCell = ({ cell }: { cell: NbCell }) => {
 
             const newCurrCell = { ...cell, output: "", outputError: fullErrorMessage }
             const newCells = { ...cells, [cell.id]: newCurrCell }
-            dispatch(updateCells(newCells))
+            dispatch(updateCells({ newCells, activeNotebookName }))
 
         } else {
             setHasError(false)
             setOutput(accumulatedResult as string)
 
             const newCurrCell = { ...cell, output: accumulatedResult as string, outputError: "" }
             const newCells = { ...cells, [cell.id]: newCurrCell }
-            dispatch(updateCells(newCells))
+            dispatch(updateCells({ newCells, activeNotebookName }))
 
         }
 
@@ -58,7 +61,7 @@ const NoteBookCell = ({ cell }: { cell: NbCell }) => {
         setOutputError("")
 
         if (interpreterMode === 'node') {
-            NodejsInterpreter.exec(content, language, cellRunCallback)
+            NodejsInterpreter.exec({ content, language, callback: cellRunCallback, activeNotebookName })
                 .catch((error) => {
                     setOutputError({
                         ...error,
@@ -103,14 +106,10 @@ const NoteBookCell = ({ cell }: { cell: NbCell }) => {
                 </div>
 
                 <div className="col-span-11"
-                 onKeyPress={handleKeyPress}
+                    onKeyPress={handleKeyPress}
                 >
                     <CellEditor cell={cell} />
-                    <CellOutputRenderer
-                        hasError={hasError}
-                        output={output}
-                        outputError={outputError}
-                    />
+                    <CellOutputRenderer cell={cell} />
                 </div>
 
             </section>
diff --git a/src/frontend/components/CellEditor/index.tsx b/src/frontend/components/CellEditor/index.tsx
@@ -23,17 +23,20 @@ const AceEditor = dynamic(
 
 
 const Editor = ({ cell }: { cell: NbCell }) => {
-    const { config, cells } = useSelector((state: { app: AppState }) => state.app)
-
     const dispatch = useDispatch();
+
+    const { notebooks, activeNotebookName, config } = useSelector((state: { app: AppState }) => state.app)
+    const notebook = notebooks[activeNotebookName]
+    const { cells } = notebook
+
     const [code, updateCode] = useState(cell?.content);
 
     const handleCodeChange = (newCode: any) => {
         updateCode(newCode);
         const newCurrCell = { ...cell, content: newCode }
 
         const newCells = { ...cells, [cell.id]: newCurrCell }
-        dispatch(updateCells(newCells))
+        dispatch(updateCells({ newCells, activeNotebookName }))
     }
     
     return (
diff --git a/src/frontend/components/CellOutputRenderer/index.tsx b/src/frontend/components/CellOutputRenderer/index.tsx
@@ -1,13 +1,14 @@
+import { NbCell } from "../../lib/typings/types";
 
 
-const cellOutputRenderer = ({ output, hasError, outputError }: { output: string, hasError: boolean, outputError: string }) => {
+const cellOutputRenderer = ({ cell }: { cell: NbCell }) => {
     return (
         <div>
-            {hasError ? (
-                <div className="text-red-400 p-3" dangerouslySetInnerHTML={{ __html: outputError }}></div>
+            {cell.outputError !== "" ? (
+                <div className="text-red-400 p-3" dangerouslySetInnerHTML={{ __html: cell.outputError }}></div>
             ) : (
                 <div>
-                    <div className="p-3" dangerouslySetInnerHTML={{ __html: output }}></div>
+                    <div className="p-3" dangerouslySetInnerHTML={{ __html: cell.output }}></div>
                 </div>
             )}
         </div>
diff --git a/src/frontend/components/MenuBar/cellOptions.tsx b/src/frontend/components/MenuBar/cellOptions.tsx
@@ -19,7 +19,10 @@ import { useState } from "react";
 
 export default function CellOptions({ cell }: { cell: NbCell }) {
     const dispatch = useDispatch();
-    const { cells, cellIds } = useSelector((state: { app: AppState }) => state.app)
+    const { notebooks, activeNotebookName } = useSelector((state: { app: AppState }) => state.app)
+    const notebook = notebooks[activeNotebookName]
+    const { cellIds, cells } = notebook
+
     const languages = Object.keys(cellLanguages) as LangaugeOption[];
 
     const [copied, setCopied] = useState(false);
@@ -30,7 +33,7 @@ export default function CellOptions({ cell }: { cell: NbCell }) {
         const language = e.target.value as LangaugeOption
         const newCurrCell = { ...cell, mode: language }
         const newCells = { ...cells, [cell.id]: newCurrCell }
-        dispatch(updateCells(newCells))
+        dispatch(updateCells({ newCells, activeNotebookName }))
     }
 
     const handleAddNewCellBelowCurrentCell = () => {
@@ -47,8 +50,8 @@ export default function CellOptions({ cell }: { cell: NbCell }) {
         newCellIds.splice(topCellIdIndex + 1, 0, newId)
 
         const newCells = { ...cells, [newId]: newCell }
-        dispatch(updateCells(newCells))
-        dispatch(updateCellIds(newCellIds))
+        dispatch(updateCells({ newCells, activeNotebookName }))
+        dispatch(updateCellIds({ newCellIds, activeNotebookName }))
     }
 
     const handleMoveCurrentCellUp = () => {
@@ -58,7 +61,7 @@ export default function CellOptions({ cell }: { cell: NbCell }) {
         newCellIds.splice(currentCellIdIndex - 1, 0, cell.id)
         newCellIds.splice(currentCellIdIndex + 1, 1)
 
-        dispatch(updateCellIds(newCellIds))
+        dispatch(updateCellIds({ newCellIds, activeNotebookName }))
     }
 
     const handleMoveCurrentCellDown = () => {
@@ -71,15 +74,15 @@ export default function CellOptions({ cell }: { cell: NbCell }) {
         newCellIds.splice(currentCellIdIndex, 1, downCellId)
         newCellIds.splice(downCellIdIndex, 1, cell.id)
 
-        dispatch(updateCellIds(newCellIds))
+        dispatch(updateCellIds({ newCellIds, activeNotebookName }))
     }
 
     const handleDeleteCurrentCell = () => {
         const newCellIds = [...cellIds]
         const currentCellIdIndex = cellIds.indexOf(cell.id)
         newCellIds.splice(currentCellIdIndex, 1)
 
-        dispatch(updateCellIds(newCellIds))
+        dispatch(updateCellIds({ newCellIds, activeNotebookName }))
     }
 
     const handleCopyCurrentCellContentToClipBoard = async () => {
@@ -134,6 +137,7 @@ export default function CellOptions({ cell }: { cell: NbCell }) {
                 <IconButton
                     aria-label="delete"
                     color="warning"
+                    disabled={currentCellIdIndex === 0}
                     onClick={handleDeleteCurrentCell}
                 >
                     <DeleteIcon />
diff --git a/src/frontend/components/Notebook/index.tsx b/src/frontend/components/Notebook/index.tsx
@@ -0,0 +1,22 @@
+import NoteBookCell from '../Cell';
+import { useSelector } from "react-redux";
+import { AppState, NbCell } from '../../lib/typings/types';
+
+const NotebookTab = () => {
+    const { notebooks, activeNotebookName } = useSelector((state: { app: AppState }) => state.app)
+    const notebook = notebooks[activeNotebookName]
+    const { cellIds, cells } = notebook
+
+    return (
+        <div className='col-span-12 border-l-2 ml-52'>
+            {
+                cellIds.map((cellId: string, i: number) => {
+                    const cell: NbCell = cells[cellId]
+                    return <div key={cellId}><NoteBookCell cell={cell} /></div>
+                })
+            }
+        </div>
+    )
+}
+
+export default NotebookTab
diff --git a/src/frontend/components/NotebookTabPanel/index.tsx b/src/frontend/components/NotebookTabPanel/index.tsx
@@ -0,0 +1,34 @@
+import { useState } from 'react';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import Box from '@mui/material/Box';
+import { AppState } from '../../lib/typings/types';
+import { useSelector, useDispatch } from 'react-redux';
+import { updateActiveNotebookName } from '../../lib/state/reducer';
+
+export default function NotebookTabPanel() {
+    const dispatch = useDispatch();
+    const { notebooks } = useSelector((state: { app: AppState }) => state.app)
+    const tabNames = Object.keys(notebooks)
+    const [value, setValue] = useState(0);
+
+    const handleChange = (event: any, newValue: number) => {
+        const currentNotebookTab = notebooks[event.target.innerText]
+        dispatch(updateActiveNotebookName(currentNotebookTab.name));
+        setValue(newValue);
+    };
+
+    return (
+        <div className='col-span-12 border-l-2 ml-52'>
+            <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+                <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
+                    {
+                        tabNames.map((name, i) => {
+                            return <Tab style={{ textTransform: "none" }} key={i} label={name} />
+                        })
+                    }
+                </Tabs>
+            </Box>
+        </div>
+    );
+}
diff --git a/src/frontend/lib/interpreter/server.ts b/src/frontend/lib/interpreter/server.ts
@@ -3,6 +3,13 @@ import { marked } from "marked"
 import { formatErrorMessage } from "../helpers/utils"
 
 const SERVER_URL = process.env.NEXT_PUBLIC_CODE_SERVER_URL
+
+type ExecProps = {
+    content: string,
+    language: string,
+    activeNotebookName: string,
+    callback: (accumulatedResult: string | outputError, hasErrors: boolean) => void
+}
 class ServerAPI {
     /**
      * Executes the code in the given language via the server. Intermediary results like those in
@@ -13,9 +20,9 @@ class ServerAPI {
      * @returns A promise that resolves when the execution is finished.
      * @throws Error if the language is not supported.
      */
-    async exec(content: string, language: string, callback: (accumulatedResult: string | outputError, hasErrors: boolean) => void) {
+    async exec({ content, language, callback, activeNotebookName }: ExecProps) {
         if (["typescript", "javascript", "bash", "sh", "powershell", "process"].includes(language)) {
-            return this.executeInNodeJs(content, language, callback);
+            return this.executeInNodeJs({ content, language, callback, activeNotebookName });
 
         } else if (language === "markdown") {
             try {
@@ -61,19 +68,17 @@ class ServerAPI {
      * @param callback A callback that is called with the result/intermediate result of the execution.
      * @returns A promise that resolves when the execution is finished.
      * */
-    async executeInNodeJs(
-        code: string,
-        language: string,
-        callback: (accumulatedResult: string | outputError, hasErrors: boolean) => void) {
+    async executeInNodeJs({ content, language, callback, activeNotebookName }: ExecProps) {
 
         fetch(`${SERVER_URL}/nodejs/run`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
             },
             body: JSON.stringify({
-                code,
-                language
+                content,
+                language,
+                activeNotebookName
             }),
         })
             .then(response => response.body)
diff --git a/src/frontend/lib/state/reducer.ts b/src/frontend/lib/state/reducer.ts
@@ -2,17 +2,40 @@ import { createSlice } from "@reduxjs/toolkit";
 import { AppState } from "../typings/types";
 import { v4 as uuid_v4 } from "uuid";
 
-const initialId = uuid_v4()
+const initialNotebookId = uuid_v4()
+const initialCellId1 = uuid_v4()
+const initialCellId2 = uuid_v4()
+
 
 const initialState: AppState = {
     interpreterMode: "node",
-    cellIds: [initialId],
-    cells: {
-        [initialId]: {
-            id: initialId,
-            content: "",
-            mode: "javascript",
-            output: ""
+    activeNotebookName: "note1.dnb",
+    notebooks: {
+        "note1.dnb": {
+            notebookId: initialNotebookId,
+            name: "note1.dnb",
+            cellIds: [initialCellId1],
+            cells: {
+                [initialCellId1]: {
+                    id: initialCellId1,
+                    content: "",
+                    mode: "javascript",
+                    output: ""
+                },
+            },
+        },
+        "note2.dnb": {
+            notebookId: uuid_v4(),
+            name: "note2.dnb",
+            cellIds: [initialCellId2],
+            cells: {
+                [initialCellId2]: {
+                    id: initialCellId2,
+                    content: "",
+                    mode: "markdown",
+                    output: ""
+                },
+            },
         },
     },
     config: {
@@ -37,14 +60,19 @@ const appReducer = createSlice({
             state.interpreterMode = action.payload;
         },
         updateCellIds: (state, action) => {
-            state.cellIds = action.payload;
+            const { newCellIds, activeNotebookName } = action.payload;
+            state.notebooks[activeNotebookName].cellIds = newCellIds;
         },
         updateCells: (state, action) => {
-            state.cells = action.payload;
+            const { newCells, activeNotebookName } = action.payload;
+            state.notebooks[activeNotebookName].cells = newCells;
         },
         updateConfig: (state, action) => {
             state.config = action.payload;
         },
+        updateActiveNotebookName: (state, action) => {
+            state.activeNotebookName = action.payload;
+        },
     }
 });
 
@@ -53,6 +81,7 @@ export const {
     updateCellIds,
     updateCells,
     updateConfig,
+    updateActiveNotebookName,
 } = appReducer.actions;
 
 export default appReducer.reducer;
diff --git a/src/frontend/lib/typings/types.tsx b/src/frontend/lib/typings/types.tsx
@@ -19,11 +19,12 @@ export type NbCell = {
 }
 
 export type Notebook = {
+    notebookId: string;
+    name: string;
     cellIds: string[];
     cells: {
         [key: string]: NbCell
     }
-    config: Partial<NotebookConfig>;
 }
 
 export type NotebookConfig = {
@@ -50,11 +51,12 @@ export type CellLanguages = {
     }
 }
 
+
 export type AppState = {
     interpreterMode: string;
-    cellIds: string[];
-    cells: {
-        [key: string]: NbCell
+    activeNotebookName: string;
+    notebooks:  {
+        [key: string]: Notebook
     }
     config: Partial<NotebookConfig>;
 }
diff --git a/src/frontend/pages/index.tsx b/src/frontend/pages/index.tsx

Original file line number	Diff line number	Diff line change
`@@ -19,11 +19,12 @@ export type NbCell = {`
`19`	`19`	`}`
`20`	`20`
`21`	`21`	`export type Notebook = {`
	`22`	`+ notebookId: string;`
	`23`	`+ name: string;`
`22`	`24`	`cellIds: string[];`
`23`	`25`	`cells: {`
`24`	`26`	`[key: string]: NbCell`
`25`	`27`	`}`
`26`		`- config: Partial<NotebookConfig>;`
`27`	`28`	`}`
`28`	`29`
`29`	`30`	`export type NotebookConfig = {`
`@@ -50,11 +51,12 @@ export type CellLanguages = {`
`50`	`51`	`}`
`51`	`52`	`}`
`52`	`53`
	`54`	`+`
`53`	`55`	`export type AppState = {`
`54`	`56`	`interpreterMode: string;`
`55`		`- cellIds: string[];`
`56`		`- cells: {`
`57`		`- [key: string]: NbCell`
	`57`	`+ activeNotebookName: string;`
	`58`	`+ notebooks: {`
	`59`	`+ [key: string]: Notebook`
`58`	`60`	`}`
`59`	`61`	`config: Partial<NotebookConfig>;`
`60`	`62`	`}`