From cedd4c4c226e63664e2060efc9032be39e88804e Mon Sep 17 00:00:00 2001 From: maejimafumika Date: Tue, 11 Feb 2025 12:01:32 +0900 Subject: [PATCH 1/2] Fix the part that displays the compilation error. --- notebook/src/hooks/repl-context.tsx | 30 +++++++++--------- notebook/src/utils/type.ts | 36 ++++++++++++++++------ notebook/src/view/components/code-area.tsx | 36 ++++++++++++---------- 3 files changed, 61 insertions(+), 41 deletions(-) diff --git a/notebook/src/hooks/repl-context.tsx b/notebook/src/hooks/repl-context.tsx index c718b66..ba44303 100644 --- 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({ // 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({ export default function ReplProvider({children}: {children: ReactNode}) { const [replState, setReplState] = useState('initial') const [useJIT, setUseJIT] = useState(true) - const [latestCell, setLatestCell] = useState({id: 0, code:'', state: 'user-writing'}) + const [latestCell, setLatestCell] = useState({id: 0, code:'', state: CellStateT.UserWriting, time:undefined}) const [postExecutionCells, setPostExecutionCells] = useState([]) const [output, setOutput] = useState([]) const [runtimeError, setRuntimeError] = useState([]) @@ -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 index c25fc29..7cb0825 100644 --- a/notebook/src/utils/type.ts +++ b/notebook/src/utils/type.ts @@ -8,19 +8,35 @@ 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 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 + send?: number, + execute?: number } -export type CellT = { - id: number, - code: string, - state: CellStateT, - compileError?: string, - time?: CellTimeT -} +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} + + +// export type CellT = { +// id: number, +// code: string, +// state: CellStateT, +// compileError?: string, +// time?: CellTimeT +// } diff --git a/notebook/src/view/components/code-area.tsx b/notebook/src/view/components/code-area.tsx index 3285b75..13f20ca 100644 --- 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