From b298c5442f137ef7eab80064e35b3f3f69053b9c Mon Sep 17 00:00:00 2001 From: Wojciech Kwiatek Date: Mon, 9 Dec 2024 14:05:15 +0100 Subject: [PATCH] Move program code input to edit mode --- src/App.tsx | 53 +++++++++++++++---- .../ProgramLoader/BinaryFileUpload.tsx | 2 +- src/components/ProgramLoader/Bytecode.tsx | 40 -------------- src/components/ProgramLoader/Examples.tsx | 28 ++++++++++ src/components/ProgramLoader/Loader.tsx | 24 +-------- src/components/ProgramTextLoader/index.tsx | 22 +++++--- src/hooks/useDebuggerActions.ts | 6 +-- src/store/debugger/debuggerSlice.ts | 12 ++--- 8 files changed, 97 insertions(+), 90 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 92d8d66..6ccc1c1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -21,13 +21,19 @@ import { MobileRegisters } from "./components/MobileRegisters"; import { MobileKnowledgeBase } from "./components/KnowledgeBase/Mobile"; import { Assembly } from "./components/ProgramLoader/Assembly"; import { useAppDispatch, useAppSelector } from "@/store/hooks.ts"; -import { setClickedInstruction, setInstructionMode, setIsProgramEditMode } from "@/store/debugger/debuggerSlice.ts"; +import { + setClickedInstruction, + setInstructionMode, + setIsProgramEditMode, + setIsProgramInvalid, +} from "@/store/debugger/debuggerSlice.ts"; import { MemoryPreview } from "@/components/MemoryPreview"; import { DebuggerControlls } from "./components/DebuggerControlls"; import { useDebuggerActions } from "./hooks/useDebuggerActions"; import { Loader } from "./components/ProgramLoader/Loader"; import classNames from "classnames"; import { DebuggerSettings } from "./components/DebuggerSettings"; +import { ProgramTextLoader } from "@/components/ProgramTextLoader"; const DebuggerContent = () => { const dispatch = useAppDispatch(); @@ -36,7 +42,7 @@ const DebuggerContent = () => { program, initialState, isProgramEditMode, - isAsmError, + isProgramInvalid, programPreviewResult, clickedInstruction, instructionMode, @@ -79,11 +85,37 @@ const DebuggerContent = () => { <> {isProgramEditMode && (
- + {instructionMode === InstructionMode.ASM ? ( + + ) : ( + { + if (error) { + dispatch(setIsProgramInvalid(true)); + } + + if (!error && program) { + debuggerActions.handleProgramLoad({ + initial: initialState, + program: program || [], + name: "custom", + }); + } + // onProgramLoad({ initial: initialState, program, name: "custom" }, error); + // if (program) { + // setTempProgram(program); + // onProgramLoad({ initial, program, name: "custom" }, error); + // } else { + // onProgramLoad(undefined, error); + // } + }} + /> + )}
)} @@ -144,7 +176,6 @@ const DebuggerContent = () => {
@@ -158,7 +189,7 @@ const DebuggerContent = () => { variant="link" size="icon" className={!program.length ? "invisible" : "visible"} - disabled={!program.length || isAsmError} + disabled={!program.length || isProgramInvalid} title="Edit the code" onClick={() => { if (isProgramEditMode) { @@ -180,7 +211,7 @@ const DebuggerContent = () => { }; function App() { - const { pvmInitialized, initialState, program } = useAppSelector((state) => state.debugger); + const { pvmInitialized } = useAppSelector((state) => state.debugger); return ( <> @@ -210,7 +241,7 @@ function App() { ) : (
- +
)} diff --git a/src/components/ProgramLoader/BinaryFileUpload.tsx b/src/components/ProgramLoader/BinaryFileUpload.tsx index bc3dab5..be9cf39 100644 --- a/src/components/ProgramLoader/BinaryFileUpload.tsx +++ b/src/components/ProgramLoader/BinaryFileUpload.tsx @@ -44,7 +44,7 @@ export const BinaryFileUpload = ({ return (
-

or upload program as a binary file

+

Upload program as a binary file

void; - program: number[]; }) => { - const [tempProgram, setTempProgram] = useState(program); const handleFileUpload = (val: ProgramUploadFileOutput) => { - setTempProgram(val.program); onProgramLoad(val); }; return (
-

Edit program code bytes

- { - if (program) { - setTempProgram(program); - onProgramLoad({ initial, program, name: "custom" }, error); - } else { - onProgramLoad(undefined, error); - } - }} - />
); diff --git a/src/components/ProgramLoader/Examples.tsx b/src/components/ProgramLoader/Examples.tsx index ad0355d..94f416e 100644 --- a/src/components/ProgramLoader/Examples.tsx +++ b/src/components/ProgramLoader/Examples.tsx @@ -79,6 +79,28 @@ const programs: { memory: [], gas: 10000n, }, + empty: { + program: [0, 0, 0], + regs: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] as [ + number, + number, + number, + number, + number, + number, + number, + number, + number, + number, + number, + number, + number, + ], + pc: 0, + pageMap: [], + memory: [], + gas: 10000n, + }, }; export const Examples = ({ onProgramLoad }: { onProgramLoad: (val: ProgramUploadFileOutput) => void }) => { @@ -131,6 +153,12 @@ export const Examples = ({ onProgramLoad }: { onProgramLoad: (val: ProgramUpload Store U16 instruction
+
+ + +
); diff --git a/src/components/ProgramLoader/Loader.tsx b/src/components/ProgramLoader/Loader.tsx index 6c5ca05..097335c 100644 --- a/src/components/ProgramLoader/Loader.tsx +++ b/src/components/ProgramLoader/Loader.tsx @@ -1,27 +1,17 @@ import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"; import { Button } from "../ui/button"; -import { Assembly } from "./Assembly"; import { Bytecode } from "./Bytecode"; import { Examples } from "./Examples"; import { TextFileUpload } from "./TextFileUpload"; import { useState, useCallback, useEffect } from "react"; import { ProgramUploadFileOutput } from "./types"; -import { InitialState } from "@/types/pvm"; import { useDebuggerActions } from "@/hooks/useDebuggerActions"; import { useAppDispatch, useAppSelector } from "@/store/hooks.ts"; import { setIsProgramEditMode } from "@/store/debugger/debuggerSlice.ts"; import { selectIsAnyWorkerLoading } from "@/store/workers/workersSlice"; import { isSerializedError } from "@/store/utils"; -export const Loader = ({ - initialState, - program, - setIsDialogOpen, -}: { - initialState: InitialState; - program: number[]; - setIsDialogOpen?: (val: boolean) => void; -}) => { +export const Loader = ({ setIsDialogOpen }: { setIsDialogOpen?: (val: boolean) => void }) => { const dispatch = useAppDispatch(); const [programLoad, setProgramLoad] = useState(); const [error, setError] = useState(); @@ -57,7 +47,6 @@ export const Loader = ({ JSON tests Examples RAW bytecode - Assembly
@@ -83,17 +72,6 @@ export const Loader = ({ setIsSubmitted(false); setError(error); }} - program={program} - /> - - - { - setProgramLoad(val); - setIsSubmitted(false); - }} - program={program} - initialState={initialState} /> {error && isSubmitted &&

{error}

} diff --git a/src/components/ProgramTextLoader/index.tsx b/src/components/ProgramTextLoader/index.tsx index f47cf0d..a68bbd0 100644 --- a/src/components/ProgramTextLoader/index.tsx +++ b/src/components/ProgramTextLoader/index.tsx @@ -1,8 +1,10 @@ import { Textarea } from "@/components/ui/textarea.tsx"; -import React, { useEffect, useState } from "react"; +import React, { useMemo, useState } from "react"; import classNames from "classnames"; import { bytes } from "@typeberry/block"; import { logger } from "@/utils/loggerService"; +import { useAppSelector } from "@/store/hooks.ts"; +import { selectIsProgramInvalid } from "@/store/debugger/debuggerSlice.ts"; export const ProgramTextLoader = ({ program, @@ -11,11 +13,13 @@ export const ProgramTextLoader = ({ program?: number[]; setProgram: (val?: number[], error?: string) => void; }) => { - const [programInput, setProgramInput] = useState(program?.length ? JSON.stringify(program) : ""); - useEffect(() => { - setProgramInput(program?.length ? JSON.stringify(program) : ""); + const defaultProgram = useMemo(() => { + return program; }, [program]); + const [programInput, setProgramInput] = useState(defaultProgram?.length ? JSON.stringify(defaultProgram) : ""); + const isProgramInvalid = useAppSelector(selectIsProgramInvalid); + const handleOnChange = (e: React.ChangeEvent) => { const newInput = e.target.value.trim(); setProgramInput(newInput); @@ -41,15 +45,21 @@ export const ProgramTextLoader = ({ return (
-
+
+

+ Edit program code bytes +