Skip to content

Commit ff25f70

Browse files
krystian50krystian50
authored
Revert "Host calls cleanup (#251)" (#252)
This reverts commit 78fde84.
1 parent 78fde84 commit ff25f70

File tree

18 files changed

+174
-215
lines changed

18 files changed

+174
-215
lines changed

‎src/App.tsx‎

Lines changed: 13 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -21,20 +21,14 @@ import { MobileRegisters } from "./components/MobileRegisters";
2121
import { MobileKnowledgeBase } from "./components/KnowledgeBase/Mobile";
2222
import { Assembly } from "./components/ProgramLoader/Assembly";
2323
import { useAppDispatch, useAppSelector } from "@/store/hooks.ts";
24-
import {
25-
setClickedInstruction,
26-
setInstructionMode,
27-
setIsProgramEditMode,
28-
setIsProgramInvalid,
29-
} from "@/store/debugger/debuggerSlice.ts";
24+
import { setClickedInstruction, setInstructionMode, setIsProgramEditMode } from "@/store/debugger/debuggerSlice.ts";
3025
import { MemoryPreview } from "@/components/MemoryPreview";
3126
import { DebuggerControlls } from "./components/DebuggerControlls";
3227
import { useDebuggerActions } from "./hooks/useDebuggerActions";
3328
import { Loader } from "./components/ProgramLoader/Loader";
3429
import classNames from "classnames";
3530
import { DebuggerSettings } from "./components/DebuggerSettings";
3631
import { HostCalls } from "./components/HostCalls";
37-
import { ProgramTextLoader } from "@/components/ProgramTextLoader";
3832

3933
const DebuggerContent = () => {
4034
const dispatch = useAppDispatch();
@@ -43,7 +37,7 @@ const DebuggerContent = () => {
4337
program,
4438
initialState,
4539
isProgramEditMode,
46-
isProgramInvalid,
40+
isAsmError,
4741
programPreviewResult,
4842
clickedInstruction,
4943
instructionMode,
@@ -80,37 +74,18 @@ const DebuggerContent = () => {
8074

8175
return (
8276
<>
83-
<HostCalls />
77+
<HostCalls currentInstructionEnriched={currentInstructionEnriched} />
8478
<div className="col-span-12 md:col-span-4 max-h-[70vh] max-sm:min-h-[330px]">
8579
{!program.length && <InitialLoadProgramCTA />}
8680
{!!program.length && (
8781
<>
8882
{isProgramEditMode && (
89-
<div className="border-2 rounded-md h-full p-2">
90-
{instructionMode === InstructionMode.ASM ? (
91-
<Assembly
92-
program={program}
93-
onProgramLoad={debuggerActions.handleProgramLoad}
94-
initialState={initialState}
95-
/>
96-
) : (
97-
<ProgramTextLoader
98-
program={program}
99-
setProgram={(program, error) => {
100-
if (error) {
101-
dispatch(setIsProgramInvalid(true));
102-
}
103-
104-
if (!error && program) {
105-
debuggerActions.handleProgramLoad({
106-
initial: initialState,
107-
program: program || [],
108-
name: "custom",
109-
});
110-
}
111-
}}
112-
/>
113-
)}
83+
<div className="border-2 rounded-md h-full p-2 pt-8">
84+
<Assembly
85+
program={program}
86+
onProgramLoad={debuggerActions.handleProgramLoad}
87+
initialState={initialState}
88+
/>
11489
</div>
11590
)}
11691

@@ -171,6 +146,7 @@ const DebuggerContent = () => {
171146
<div className={`flex items-center space-x-2 ${!program.length ? "invisible" : "visible"}`}>
172147
<Label htmlFor="instruction-mode">ASM</Label>
173148
<Switch
149+
disabled={isProgramEditMode}
174150
id="instruction-mode"
175151
checked={instructionMode === InstructionMode.BYTECODE}
176152
onCheckedChange={(checked) =>
@@ -184,7 +160,7 @@ const DebuggerContent = () => {
184160
variant="link"
185161
size="icon"
186162
className={!program.length ? "invisible" : "visible"}
187-
disabled={!program.length || isProgramInvalid}
163+
disabled={!program.length || isAsmError}
188164
title="Edit the code"
189165
onClick={() => {
190166
if (isProgramEditMode) {
@@ -206,7 +182,7 @@ const DebuggerContent = () => {
206182
};
207183

208184
function App() {
209-
const { pvmInitialized } = useAppSelector((state) => state.debugger);
185+
const { pvmInitialized, initialState, program } = useAppSelector((state) => state.debugger);
210186

211187
return (
212188
<>
@@ -236,7 +212,7 @@ function App() {
236212
) : (
237213
<div className="col-span-12 flex justify-center h-[50vh] align-middle">
238214
<div className="min-w-[50vw] max-md:w-[100%] min-h-[500px] h-[75vh] flex flex-col">
239-
<Loader />
215+
<Loader initialState={initialState} program={program} />
240216
</div>
241217
</div>
242218
)}

‎src/components/DebuggerSettings/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export const DebuggerSettings = () => {
3030
<span className="text-xl">Debugger Settings</span>
3131
</DialogTitle>
3232
<DialogDescription asChild>
33-
<div className="py-4">
33+
<p className="py-4 ">
3434
<span className="block text-lg text-black font-bold mb-2">Number of batched steps</span>
3535
<span className="mb-3 block">
3636
To speed up execution PVMs can run multiple steps internally after clicking "Run". This may lead to
@@ -48,7 +48,7 @@ export const DebuggerSettings = () => {
4848
value={debuggerState.stepsToPerform}
4949
/>
5050
<HostCallsForm />
51-
</div>
51+
</p>
5252
</DialogDescription>
5353
</DialogHeader>
5454
</DialogContent>

‎src/components/HostCalls/form.tsx‎

Lines changed: 14 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import { hash, bytes } from "@typeberry/jam-host-calls";
55
import { Storage } from "@/packages/web-worker/types";
66
import { useEffect, useState } from "react";
77
import { logger } from "@/utils/loggerService";
8-
import { setHasHostCallOpen, setStorage } from "@/store/debugger/debuggerSlice";
9-
import { setAllWorkersStorage } from "@/store/workers/workersSlice";
8+
import { setHasHostCallOpen, setIsDebugFinished, setStorage } from "@/store/debugger/debuggerSlice";
9+
import { handleHostCall, setAllWorkersStorage, stepAllWorkers } from "@/store/workers/workersSlice";
1010
import { useAppDispatch, useAppSelector } from "@/store/hooks";
1111

1212
const parseJSONToStorage = (value: { [key: string]: string }) => {
@@ -22,13 +22,13 @@ const parseJSONToStorage = (value: { [key: string]: string }) => {
2222
return parsedValue;
2323
};
2424

25-
export const HostCallsForm = (props: { onAfterSubmit?: () => void }) => {
25+
export const HostCallsForm = () => {
2626
const { storage } = useAppSelector((state) => state.debugger);
2727
const dispatch = useAppDispatch();
2828
const [inputValue, setInputValue] = useState<string>();
2929

3030
useEffect(() => {
31-
setInputValue(storage ? JSON.stringify(Object.fromEntries(storage.entries())) : "");
31+
setInputValue(storage ? JSON.stringify(Object.fromEntries(storage)) : "");
3232
}, [storage]);
3333

3434
const onSubmit = async () => {
@@ -38,7 +38,7 @@ export const HostCallsForm = (props: { onAfterSubmit?: () => void }) => {
3838
dispatch(setStorage(parsedValue));
3939
await dispatch(setAllWorkersStorage()).unwrap();
4040
dispatch(setHasHostCallOpen(false));
41-
props.onAfterSubmit?.();
41+
await dispatch(handleHostCall()).unwrap();
4242

4343
// dispatch(setIsDebugFinished(false));
4444
// await dispatch(stepAllWorkers()).unwrap();
@@ -50,27 +50,22 @@ export const HostCallsForm = (props: { onAfterSubmit?: () => void }) => {
5050
return (
5151
<div className="py-4 ">
5252
<span className="block text-lg text-black font-bold mb-2">Storage Value</span>
53-
<span className="mb-3 block">
54-
Set storage for read & write host calls. Confirm empty, if you want to process. Storage can be modified by
55-
running program.
56-
</span>
53+
<span className="mb-3 block">Lorem ipsum</span>
5754
<Textarea
5855
id="storage"
5956
autoFocus
6057
className="col-span-3"
6158
value={inputValue}
6259
onChange={(e) => setInputValue(e.target.value)}
6360
/>
64-
<div className="flex mt-2">
65-
<Button type="submit" onClick={onSubmit}>
66-
Confirm
67-
</Button>
68-
{storage !== null && (
69-
<span className="flex items-center ml-3">
70-
<CheckCircle color="green" className="mr-2" /> Storage provided
71-
</span>
72-
)}
73-
</div>
61+
{storage !== null && (
62+
<span>
63+
<CheckCircle color="green" /> Storage provided
64+
</span>
65+
)}
66+
<Button type="submit" onClick={onSubmit}>
67+
Save changes
68+
</Button>
7469
</div>
7570
);
7671
};

‎src/components/HostCalls/index.tsx‎

Lines changed: 28 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,24 @@
1-
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
1+
import {
2+
Dialog,
3+
DialogClose,
4+
DialogContent,
5+
DialogDescription, DialogFooter,
6+
DialogHeader,
7+
DialogTitle
8+
} from "@/components/ui/dialog";
29
import { useAppDispatch, useAppSelector } from "@/store/hooks.ts";
10+
import { CurrentInstruction } from "@/types/pvm";
11+
import { isInstructionError, isOneImmediateArgs } from "@/types/type-guards";
312
import { HostCallsForm } from "./form";
4-
import { handleHostCall } from "@/store/workers/workersSlice";
13+
import { setHasHostCallOpen } from "@/store/debugger/debuggerSlice.ts";
14+
import { Button } from "../ui/button";
515

6-
export const HostCalls = () => {
7-
const { hasHostCallOpen } = useAppSelector((state) => state.debugger);
16+
export const HostCalls = ({
17+
currentInstructionEnriched,
18+
}: {
19+
currentInstructionEnriched: CurrentInstruction | undefined;
20+
}) => {
21+
const { storage, hasHostCallOpen } = useAppSelector((state) => state.debugger);
822
const dispatch = useAppDispatch();
923

1024
// if (
@@ -20,15 +34,17 @@ export const HostCalls = () => {
2034
return (
2135
<Dialog open={hasHostCallOpen}>
2236
<DialogContent className="sm:max-w-[425px]">
23-
<div>
24-
<DialogHeader>
25-
<DialogTitle>Storage</DialogTitle>
26-
<DialogDescription>
27-
Debugger encountered ecalli. No storage detected. Please provide JSON storage or confirm empty
28-
</DialogDescription>
29-
</DialogHeader>
30-
<HostCallsForm onAfterSubmit={() => dispatch(handleHostCall())} />
37+
<DialogHeader>
38+
<DialogTitle>Storage</DialogTitle>
39+
<DialogDescription>
40+
Debugger encountered ecalli. No storage detected. Please provide JSON storage or confirm empty
41+
</DialogDescription>
42+
</DialogHeader>
43+
<div className="grid grid-cols-4 items-center gap-4">
44+
<span>Type</span>
45+
{/*<span>Ecalli&nbsp;{ecalliIndex}</span>*/}
3146
</div>
47+
<HostCallsForm />
3248
</DialogContent>
3349
{/*<DialogClose*/}
3450
{/* onClick={() => {*/}

‎src/components/MemoryPreview/index.tsx‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -71,15 +71,7 @@ const MemoryCell = ({
7171
<TooltipProvider>
7272
<Tooltip delayDuration={0}>
7373
<TooltipTrigger asChild>
74-
<span
75-
className="font-mono"
76-
dangerouslySetInnerHTML={{
77-
__html: numeralSystem
78-
? "&quest;&#8288;&quest;&#8288;"
79-
: "&quest;&#8288;&quest;&#8288;&quest;&#8288;",
80-
// This is a fix for ?? : ??? because ? adds a break after which causes the whole line to break into two lines
81-
}}
82-
/>
74+
<span>{numeralSystem ? "??" : "??? "}</span>
8375
</TooltipTrigger>
8476

8577
<TooltipPortal>

‎src/components/ProgramLoader/BinaryFileUpload.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export const BinaryFileUpload = ({
4444

4545
return (
4646
<div className="block">
47-
<p className="mb-3">Upload program as a binary file</p>
47+
<p className="mt-10 mb-3">or upload program as a binary file</p>
4848
<Input
4949
className="my-6 mr-3"
5050
id="test-file"

‎src/components/ProgramLoader/Bytecode.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,57 @@
1+
import { ProgramTextLoader } from "../ProgramTextLoader";
12
import { ProgramUploadFileOutput } from "./types";
23
import { BinaryFileUpload } from "@/components/ProgramLoader/BinaryFileUpload.tsx";
4+
import { useState } from "react";
5+
6+
const initial = {
7+
regs: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] as [
8+
number,
9+
number,
10+
number,
11+
number,
12+
number,
13+
number,
14+
number,
15+
number,
16+
number,
17+
number,
18+
number,
19+
number,
20+
number,
21+
],
22+
pc: 0,
23+
pageMap: [],
24+
memory: [],
25+
gas: 10000n,
26+
};
327

428
export const Bytecode = ({
529
onProgramLoad,
30+
program,
631
}: {
732
onProgramLoad: (val?: ProgramUploadFileOutput, error?: string) => void;
33+
program: number[];
834
}) => {
35+
const [tempProgram, setTempProgram] = useState<number[] | undefined>(program);
936
const handleFileUpload = (val: ProgramUploadFileOutput) => {
37+
setTempProgram(val.program);
1038
onProgramLoad(val);
1139
};
1240

1341
return (
1442
<div className="h-full flex flex-col">
43+
<p className="mb-3">Edit program code bytes</p>
44+
<ProgramTextLoader
45+
program={tempProgram}
46+
setProgram={(program, error) => {
47+
if (program) {
48+
setTempProgram(program);
49+
onProgramLoad({ initial, program, name: "custom" }, error);
50+
} else {
51+
onProgramLoad(undefined, error);
52+
}
53+
}}
54+
/>
1555
<BinaryFileUpload onFileUpload={handleFileUpload} />
1656
</div>
1757
);

‎src/components/ProgramLoader/Examples.tsx‎

Lines changed: 11 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,14 @@ const programs: {
6565
memory: [],
6666
gas: 10000n,
6767
},
68+
readAndWrite: {
69+
program: [0, 0, 6, 8, 135, 9, 17, 78, 2, 25],
70+
regs: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
71+
pc: 0,
72+
pageMap: [],
73+
memory: [],
74+
gas: 10000n,
75+
},
6876
storeU16: {
6977
program: [0, 0, 5, 69, 7, 0, 0, 2, 1],
7078
regs: [0, 0, 0, 0, 0, 0, 0, 305419896, 0, 0, 0, 0, 0],
@@ -79,28 +87,6 @@ const programs: {
7987
memory: [],
8088
gas: 10000n,
8189
},
82-
empty: {
83-
program: [0, 0, 0],
84-
regs: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] as [
85-
number,
86-
number,
87-
number,
88-
number,
89-
number,
90-
number,
91-
number,
92-
number,
93-
number,
94-
number,
95-
number,
96-
number,
97-
number,
98-
],
99-
pc: 0,
100-
pageMap: [],
101-
memory: [],
102-
gas: 10000n,
103-
},
10490
};
10591

10692
export const Examples = ({ onProgramLoad }: { onProgramLoad: (val: ProgramUploadFileOutput) => void }) => {
@@ -154,9 +140,9 @@ export const Examples = ({ onProgramLoad }: { onProgramLoad: (val: ProgramUpload
154140
</Label>
155141
</div>
156142
<div className="flex items-center space-x-2">
157-
<RadioGroupItem value="empty" id="option-empty" />
158-
<Label htmlFor="option-empty" className="cursor-pointer">
159-
Empty
143+
<RadioGroupItem value="readAndWrite" id="option-readAndWrite" />
144+
<Label htmlFor="option-readAndWrite" className="cursor-pointer">
145+
Read and write
160146
</Label>
161147
</div>
162148
</RadioGroup>

0 commit comments

Comments
 (0)