Settings: merge stepsToPerform and useBlockStepping into UI refresh rate option

src/components/DebuggerSettings/Content.tsx

@@ -1,7 +1,7 @@
 import { DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { useAppDispatch, useAppSelector } from "@/store/hooks";
-import { setServiceId, setSpiArgs, setStepsToPerform, setUseBlockStepping } from "@/store/debugger/debuggerSlice";
+import { setServiceId, setSpiArgs, setUiRefreshRate, UiRefreshMode } from "@/store/debugger/debuggerSlice";
 import { NumeralSystemContext } from "@/context/NumeralSystemContext";
 import { valueToNumeralSystem } from "../Instructions/utils";
 import { useContext, useState } from "react";
@@ -11,7 +11,7 @@ import { logger } from "@/utils/loggerService";
 import { ToggleDarkMode } from "@/packages/ui-kit/DarkMode/ToggleDarkMode";
 import { Separator } from "../ui/separator";
 import { WithHelp } from "../WithHelp/WithHelp";
-import { Switch } from "@/components/ui/switch";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 
 function stringToNumber<T>(value: string, cb: (x: string) => T): T {
   try {
@@ -72,40 +72,48 @@ export const DebuggerSettingsContent = () => {
 
           <div className="p-4 flex justify-between items-center mb-4">
             <span className="block text-xs font-bold">
-              <WithHelp
-                help={`To speed up execution PVMs can run multiple steps internally
-                 after clicking "Run". This may lead to inaccurate stops in case
-                 the execution diverges between them.
-                `}
-              >
-                <span className="max-sm:hidden">Number of batched steps</span>
-                <span className="sm:hidden">Batched steps</span>
-              </WithHelp>
-            </span>
-            <Input
-              className={commonClass}
-              type="number"
-              step={1}
-              min={1}
-              max={1000}
-              placeholder="Batched steps"
-              onChange={(ev) => {
-                dispatch(setStepsToPerform(parseInt(ev.target.value)));
-              }}
-              value={debuggerState.stepsToPerform}
-            />
-          </div>
-          <div className="p-4 flex justify-between items-center mb-4">
-            <span className="block text-xs font-bold">
-              <WithHelp help="When enabled, Run and Continue commands will step block-by-block instead of instruction-by-instruction. Only available when Batched Steps is not enabled.">
-                Block Stepping
-              </WithHelp>
+              <WithHelp help="How frequently the UI should be refreshed.">UI refresh rate</WithHelp>
             </span>
-            <Switch
-              disabled={debuggerState.stepsToPerform > 1}
-              checked={debuggerState.useBlockStepping}
-              onCheckedChange={(checked) => dispatch(setUseBlockStepping(checked))}
-            />
+            <div className="flex flex-col gap-2">
+              <Select
+                value={debuggerState.uiRefreshRate.mode}
+                onValueChange={(mode: UiRefreshMode) => {
+                  dispatch(
+                    setUiRefreshRate({
+                      ...debuggerState.uiRefreshRate,
+                      mode,
+                    }),
+                  );
+                }}
+              >
+                <SelectTrigger className={commonClass}>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="instructions">After N instructions</SelectItem>
+                  <SelectItem value="block">After block</SelectItem>
+                </SelectContent>
+              </Select>
+              {debuggerState.uiRefreshRate.mode === "instructions" && (
+                <Input
+                  className={commonClass}
+                  type="number"
+                  step={1}
+                  min={1}
+                  max={1000}
+                  placeholder="Number of instructions"
+                  onChange={(ev) => {
+                    dispatch(
+                      setUiRefreshRate({
+                        ...debuggerState.uiRefreshRate,
+                        instructionCount: parseInt(ev.target.value) || 1,
+                      }),
+                    );
+                  }}
+                  value={debuggerState.uiRefreshRate.instructionCount}
+                />
+              )}
+            </div>
           </div>
           <div className="p-4 flex justify-between items-center mb-2">
             <span className="block text-xs font-bold">

src/store/debugger/debuggerSlice.ts

@@ -6,6 +6,13 @@ import { SelectedPvmWithPayload } from "@/components/PvmSelect";
 import { PvmTypes } from "@/packages/web-worker/types.ts";
 import { logger } from "@/utils/loggerService.tsx";
 
+export type UiRefreshMode = "instructions" | "block";
+
+export interface UiRefreshRate {
+  mode: UiRefreshMode;
+  instructionCount: number;
+}
+
 export interface DebuggerState {
   pvmOptions: {
     allAvailablePvms: SelectedPvmWithPayload[];
@@ -29,6 +36,7 @@ export interface DebuggerState {
   pvmLoaded: boolean;
   stepsToPerform: number;
   useBlockStepping: boolean;
+  uiRefreshRate: UiRefreshRate;
   serviceId: number | null;
   hostCallsTrace: null;
   spiArgs: string | null;
@@ -86,6 +94,10 @@ const initialState: DebuggerState = {
   pvmLoaded: false,
   stepsToPerform: 1,
   useBlockStepping: true,
+  uiRefreshRate: {
+    mode: "block" as UiRefreshMode,
+    instructionCount: 1,
+  },
   spiArgs: null,
   hostCallsTrace: null,
   serviceId: parseInt("0x30303030", 16),
@@ -144,6 +156,11 @@ const debuggerSlice = createSlice({
     setUseBlockStepping(state, action) {
       state.useBlockStepping = action.payload;
     },
+    setUiRefreshRate(state, action) {
+      state.uiRefreshRate = action.payload;
+      state.stepsToPerform = action.payload.instructionCount;
+      state.useBlockStepping = action.payload.mode === "block";
+    },
     setHasHostCallOpen(state, action) {
       state.hasHostCallOpen = action.payload;
     },
@@ -182,6 +199,7 @@ export const {
   setPvmLoaded,
   setStepsToPerform,
   setUseBlockStepping,
+  setUiRefreshRate,
   setServiceId,
   setSpiArgs,
   setPvmOptions,

src/store/workers/workersSlice.ts

@@ -298,11 +298,11 @@ export const handleHostCall = createAsyncThunk(
 
 // Calculate steps based on whether we're using block stepping or not
 function getStepsToPerform(state: RootState) {
-  const { stepsToPerform, useBlockStepping } = state.debugger;
-  if (stepsToPerform === 1 && useBlockStepping) {
+  const { uiRefreshRate } = state.debugger;
+  if (uiRefreshRate.mode === "block") {
     return calculateStepsToExitBlockForAllWorkers(state);
   }
-  return stepsToPerform;
+  return uiRefreshRate.instructionCount;
 }
 
 export const continueAllWorkers = createAsyncThunk("workers/continueAllWorkers", async (_, { getState, dispatch }) => {