Merge pull request #37 from maejima-fumika/fix-compile-error

Fix the part that displays the compilation error.
csg-tokyo · Feb 13, 2025 · f2aa0f1 · f2aa0f1
2 parents 5a420c0 + 1e09f8b
commit f2aa0f1
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 42 deletions.
diff --git a/notebook/src/hooks/repl-context.tsx b/notebook/src/hooks/repl-context.tsx
@@ -2,7 +2,7 @@ import Bluetooth, {MAX_MTU} from '../services/bluetooth';
 import {useState, useEffect, useRef, createContext, ReactNode} from 'react';
 import * as network from "../services/network"
 import { CompileError } from '../utils/error';
-import { CellT, MemInfo, ReplStateT } from '../utils/type';
+import { CellStateT, CellT, MemInfo, ReplStateT } from '../utils/type';
 import { BYTECODE, BytecodeBufferBuilder, bytecodeParser } from '../utils/bytecode';
 import {Buffer} from "buffer";
 import { MemoryDummry, MemoryT, useMemory } from './use-memory';
@@ -28,7 +28,7 @@ export type ReplContextT = {
 export const ReplContext = createContext<ReplContextT>({
     // These are used if there is no provider.
     state: 'initial',
-    latestCell: {id:0, code:'', state: 'user-writing'},
+    latestCell: {id:0, code:'', state: CellStateT.UserWriting, time:undefined},
     postExecutionCells: [],
     output: [],
     runtimeError: [],
@@ -47,7 +47,7 @@ export const ReplContext = createContext<ReplContextT>({
 export default function ReplProvider({children}: {children: ReactNode}) {
     const [replState, setReplState] = useState<ReplStateT>('initial')
     const [useJIT, setUseJIT] = useState(true)
-    const [latestCell, setLatestCell] = useState<CellT>({id: 0, code:'', state: 'user-writing'})
+    const [latestCell, setLatestCell] = useState<CellT>({id: 0, code:'', state: CellStateT.UserWriting, time:undefined})
     const [postExecutionCells, setPostExecutionCells] = useState<CellT[]>([])
     const [output, setOutput] = useState<string[]>([])
     const [runtimeError, setRuntimeError] = useState<string[]>([])
@@ -83,7 +83,7 @@ export default function ReplProvider({children}: {children: ReactNode}) {
             setPostExecutionCells([])
             setOutput([])
             setRuntimeError([])
-            setLatestCell({id: 0, code:'', state: 'user-writing'})
+            setLatestCell({id: 0, code:'', state: CellStateT.UserWriting, time:undefined})
             setReplState("activated")
             iram.actions.reset(meminfo.iram.address, meminfo.iram.size)
             dram.actions.reset(meminfo.dram.address, meminfo.dram.size)
@@ -120,17 +120,18 @@ export default function ReplProvider({children}: {children: ReactNode}) {
     }
 
     const executeLatestCell = async () => {
-        setLatestCell({...latestCell, compileError: '', state: 'compiling'})
+        setLatestCell({...latestCell, state: CellStateT.Compiling, time:undefined})
         try {
             const compileResult = useJIT ? await network.compileWithProfiling(latestCell.id, latestCell.code) : await network.compile(latestCell.id, latestCell.code)
-            setLatestCell({...latestCell, compileError: '', state: 'sending'})
-            const bluetoothTime = await sendCompileResult(compileResult)
             const compileTime = compileResult.compileTime
+            setLatestCell({...latestCell, state: CellStateT.Sending, time: {compile: compileTime}})
+            const bluetoothTime = await sendCompileResult(compileResult)
             setMemoryUpdates(compileResult)
-            setLatestCell({...latestCell, state: 'executing', time: {compile: compileTime, bluetooth: bluetoothTime}})
+            setLatestCell({...latestCell, state: CellStateT.Executing, time: {compile: compileTime, send: bluetoothTime}})
         } catch (error: any) {
             if (error instanceof CompileError) {
-                setLatestCell({...latestCell, state: 'user-writing', compileError: error.toString()})
+                const errorStrings = error.messages.map(e => e.message)
+                setLatestCell({...latestCell, state: CellStateT.UserWriting, compileError: errorStrings, time:undefined})
             } else {
                 // TODO: 要修正
                 console.log(error)
@@ -148,20 +149,21 @@ export default function ReplProvider({children}: {children: ReactNode}) {
             return;    
 
         const updateCells = () => {
+            console.log('update cells is called')
             const current = latestCellRef.current;
-            const latestCellTime = {compile: current.time?.compile, bluetooth: current.time?.bluetooth, execution: exectime};
-            setPostExecutionCells((cells) => [...cells, {...current, state: 'done', time: latestCellTime}]);
-            setLatestCell((cell) => ({id: cell.id + 1, code: '', state: 'user-writing'}));
+            const latestCellTime = {compile: current.time?.compile, send: current.time?.send, execute: exectime};
+            setPostExecutionCells((cells) => [...cells, {...current, state: CellStateT.Done, time: latestCellTime}]);
+            setLatestCell((cell) => ({state: CellStateT.UserWriting, id: cell.id + 1, code: '', time: undefined}));
         }
 
         console.log('complete execution', latestCellRef.current);
-        if (latestCellRef.current.state === 'executing') {
+        if (latestCellRef.current.state === CellStateT.Executing) {
             updateCells();
         } else {
             // Sometimes execution overtake screen drawing.
             setTimeout(() => {
                 console.log('complete execution', latestCellRef.current);
-                if (latestCellRef.current.state !== 'executing') {
+                if (latestCellRef.current.state !== CellStateT.Executing) {
                     window.alert(`Something wrong happend.`)
                 } else {
                     updateCells();

diff --git a/notebook/src/utils/type.ts b/notebook/src/utils/type.ts
@@ -8,19 +8,23 @@ export type MemInfo = {
 
 export type ReplStateT = 'initial' | 'loading' | 'activated' | 'installing' | 'successfully installed' | 'failed to install'
 
-export type CellStateT = 'user-writing' | 'compiling' | 'sending' | 'executing' | 'done'
+export enum CellStateT {
+    UserWriting,
+    Compiling,
+    Sending,
+    Executing,
+    Done
+}
 
 export type CellTimeT = {
     compile?: number, 
-    bluetooth?: number, 
-    execution?: number
-}
-
-export type CellT = {
-    id: number,
-    code: string,
-    state: CellStateT,
-    compileError?: string,
-    time?: CellTimeT
+    send?: number, 
+    execute?: number
 }
 
+export type CellT = 
+    {state: CellStateT.UserWriting, id: number, code: string, compileError?: string[], time: undefined} |
+    {state: CellStateT.Compiling, id: number, code: string, time: undefined} |
+    {state: CellStateT.Sending, id: number, code: string, time: CellTimeT} | 
+    {state: CellStateT.Executing, id: number, code: string, time: CellTimeT} | 
+    {state: CellStateT.Done, id: number, code: string, time: CellTimeT} 
diff --git a/notebook/src/view/components/code-area.tsx b/notebook/src/view/components/code-area.tsx
@@ -1,7 +1,7 @@
 import { Flex, Button, Checkbox, Row, Typography, Spin, Result} from 'antd';
 import { ReloadOutlined, CaretRightOutlined, LoadingOutlined, CopyOutlined, DownloadOutlined } from '@ant-design/icons';
 import CodeEditor from '@uiw/react-textarea-code-editor';
-import type { CellT } from '../../utils/type';
+import { CellStateT, type CellT } from '../../utils/type';
 import { useContext } from 'react';
 import { ReplContext } from '../../hooks/repl-context';
 import { ThemeContext } from '../../hooks/theme-context';
@@ -107,31 +107,31 @@ function Cell(props: {
     const theme = useContext(ThemeContext)
 
     const state = props.cell.state
-    let border = state === 'user-writing' ? `solid ${theme.primary} 1px` : `solid ${theme.boarder.gray} 1px`
+    let border = state === CellStateT.UserWriting ? `solid ${theme.primary} 1px` : `solid ${theme.boarder.gray} 1px`
 
     const onCopyClick = async () => {
         await global.navigator.clipboard.writeText(props.cell.code);
     }
 
     let CellButton = () => {
-        if (state === 'user-writing')
+        if (state === CellStateT.UserWriting)
             return <Button shape='circle' type='text' onClick={() => {props.onExecuteClick && props.onExecuteClick()}} style={{marginRight:5}} icon={<CaretRightOutlined style={{fontSize:20}} />}/>
-        else if (state === 'compiling' || state === 'sending' || state === 'executing')
+        else if (state === CellStateT.Compiling || state === CellStateT.Sending || state === CellStateT.Executing)
             return <Button shape='circle' type='text' style={{marginRight:5}} disabled icon={<LoadingOutlined style={{fontSize:20}} />}/>
         else 
             return <Button shape='circle' type='text' onClick={onCopyClick} style={{marginRight:5, color: theme.text.gray1}} icon={<CopyOutlined style={{fontSize:20}} />}/>
     }
 
     let statusText = () => {
-        if (state === 'compiling') { return 'Compiling ...' }
-        if (state === 'sending') { return 'Sending ...' }
-        if (state === 'executing') { return 'Executing ...' }
-        if (state === 'done') {
+        if (state === CellStateT.Compiling) { return 'Compiling ...' }
+        if (state === CellStateT.Sending) { return 'Sending ...' }
+        if (state === CellStateT.Executing) { return 'Executing ...' }
+        if (state === CellStateT.Done) {
             const t = props.cell.time;
-            const compile = t?.compile ? Math.round(t?.compile * 100) / 100 : '??'
-            const bluetooth = t?.bluetooth ? Math.round(t?.bluetooth * 100) / 100 : '??'
-            const execution = t?.execution ? Math.round(t?.execution * 100) / 100 : '??'
-            return `| compile: ${compile ?? '??'} ms | bluetooth: ${bluetooth ?? '??'} ms | execution: ${execution ?? '??'} ms |`
+            const compile = t.compile ? Math.round(t.compile * 100) / 100 : '??'
+            const bluetooth = t.send ? Math.round(t.send * 100) / 100 : '??'
+            const execution = t.execute ? Math.round(t.execute * 100) / 100 : '??'
+            return `| compile: ${compile} ms | bluetooth: ${bluetooth} ms | execution: ${execution} ms |`
         }
     }
 
@@ -152,16 +152,18 @@ function Cell(props: {
                         border,
                         fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace'
                     }}
-                    disabled = {props.cell.state !== 'user-writing'}
+                    disabled = {props.cell.state !== CellStateT.UserWriting}
                     onKeyDown={(e) => {if (e.key === 'Enter' && e.shiftKey && props.onExecuteClick) props.onExecuteClick()}}
                     onChange={(e) => props.setCellCode ? props.setCellCode(e.target.value) : 0 }
                 />
             </Flex>
             </Row>
-            { props.cell.compileError !== '' &&
-                <Row justify='start' style={{ marginLeft: 50}}>
-                    <Typography.Text style={{color: theme.red, fontSize: 16}}>{props.cell.compileError}</Typography.Text>
-                </Row>
+            { props.cell.state === CellStateT.UserWriting && props.cell.compileError !== undefined &&
+                <div style={{ marginLeft: 50, justifyContent:'start'}}>
+                    { props.cell.compileError.map( (message, id) => 
+                        <div style={{color: theme.red, fontSize: 16}} key={id}>{message}</div>
+                    )}
+                </div>
             }
             <Row justify='end'>
                 <Typography.Text style={{color: theme.text.gray1}}>{statusText()}</Typography.Text>