Skip to content

Commit

Permalink
Controls: add continue button
Browse files Browse the repository at this point in the history
  • Loading branch information
@MrTipson
MrTipson committed Jul 10, 2024
1 parent 15632f3 commit 46a5f65
Show file tree
Hide file tree
Showing 3 changed files with 43 additions and 35 deletions.
25 changes: 14 additions & 11 deletions src/components/Controls.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,15 @@ import { ArrowLeft, ArrowRight, Flag, Play } from "lucide-react";
import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import type { STGSettings } from "@/components/Machine";

export default function Controls({ className, machine, step, setStep, breakpoints }: {
export default function Controls({ className, machine, step, setStep, breakpoints, settings }: {
className?: string,
machine: stg_machine,
step: number,
setStep: Function,
breakpoints: Map<number, number>
breakpoints: Map<number, number>,
settings: STGSettings
}) {
const { toast } = useToast();
const [markers, setMarkers] = useState<Map<number, string>>(() => {
Expand Down Expand Up @@ -50,7 +52,8 @@ export default function Controls({ className, machine, step, setStep, breakpoint

function run() {
try {
while (machine.step()) {
let stepLimit = settings.run_limit;
while (machine.step() && --stepLimit > 0) {
const { from, to } = machine.expr;
if (breakpoints.get(from) === to) {
break;
Expand Down Expand Up @@ -112,14 +115,6 @@ export default function Controls({ className, machine, step, setStep, breakpoint
<div className="font-semibold text-lg text-center p-2">No matching rule</div>
}
<div className={"flex gap-x-1 justify-center"}>
<Button onClick={() => moveTo(step - 1)}><ArrowLeft /></Button>
<Button onClick={() => run()} size={'icon'}><Play /></Button>
<Button onClick={() => moveTo(step + 1)} ><ArrowRight /></Button>
<HelpPopover>
<p>The control panel contains controls for stepping the simulation.</p><br />
<p>It also displays the next rule which will be applied, both as a short
description, but also as a more formal operational semantics rule.</p>
</HelpPopover>
<MarkerPopover>
<p>Set marker name or leave empty to remove marker.</p>
<div className="grid grid-cols-3 items-center mt-2">
Expand All @@ -132,6 +127,14 @@ export default function Controls({ className, machine, step, setStep, breakpoint
/>
</div>
</MarkerPopover>
<Button onClick={() => moveTo(step - 1)}><ArrowLeft /></Button>
<Button onClick={() => run()} size={'icon'}><Play /></Button>
<Button onClick={() => moveTo(step + 1)} ><ArrowRight /></Button>
<HelpPopover>
<p>The control panel contains controls for stepping the simulation.</p><br />
<p>It also displays the next rule which will be applied, both as a short
description, but also as a more formal operational semantics rule.</p>
</HelpPopover>
</div>
</div>
);
Expand Down
10 changes: 6 additions & 4 deletions src/components/Machine.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ import { useMediaQuery } from "@/hooks/use-media-query";
export type STGSettings = {
garbage_collection: boolean,
eval_apply: boolean,
collapse_indirections: boolean
collapse_indirections: boolean,
run_limit: number
}

export const default_program = sum_prg;
Expand All @@ -37,7 +38,8 @@ export default function Machine() {
const [settings, setSettings] = useState<STGSettings>({
garbage_collection: true,
eval_apply: false,
collapse_indirections: true
collapse_indirections: true,
run_limit: 1000
});
const isDesktop = useMediaQuery("(min-width: 768px)");

Expand Down Expand Up @@ -72,7 +74,7 @@ export default function Machine() {
</Panel>
</PanelGroup>
{loaded &&
<Controls className="bg-background p-2 border" machine={machine} step={step} setStep={setStep} breakpoints={breakpoints} />
<Controls className="bg-background p-2 border" machine={machine} step={step} setStep={setStep} breakpoints={breakpoints} settings={settings} />
}
<Toaster />
</div>
Expand All @@ -96,7 +98,7 @@ export default function Machine() {
<Panel defaultSize={55}><HeapView machine={machine} className="h-full" step={step} settings={settings} /></Panel>
<Handle withHandle />
<Panel defaultSize={15}><StackView machine={machine} className="h-full" /></Panel>
<Controls className="absolute left-0 right-0 m-auto bottom-0 bg-background z-10 p-2 w-fit rounded-t border" machine={machine} step={step} setStep={setStep} breakpoints={breakpoints} />
<Controls className="absolute left-0 right-0 m-auto bottom-0 bg-background z-10 p-2 w-fit rounded-t border" machine={machine} step={step} setStep={setStep} breakpoints={breakpoints} settings={settings} />
</>
|| // not loaded
<>
Expand Down
43 changes: 23 additions & 20 deletions src/components/SettingsMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Button } from "@/components/ui/button";
import type { STGSettings } from "@/components/Machine";
import { Input } from "@/components/ui/input";

export default function SettingsMenu({ settings, setSettings, setLoaded }: { settings: STGSettings, setSettings: Function, setLoaded: Function }) {
function onChange(change: Partial<STGSettings>) {
Expand All @@ -26,26 +27,28 @@ export default function SettingsMenu({ settings, setSettings, setLoaded }: { set
</Button>
</PopoverTrigger>
<PopoverContent>
<div className="flex items-center justify-between pb-2">
<Label htmlFor="garbage-collection" className="text-lg font-semibold">Garbage collection</Label>
<Switch id="garbage-collection" checked={settings.garbage_collection} onCheckedChange={(val) => onChange({ garbage_collection: val })} />
</div>
<div>
<h3 className="text-lg font-semibold">Evaluation model</h3>
<RadioGroup defaultValue={current_model} className="ml-3 my-2" onValueChange={(val) => onChange({ eval_apply: val === "eval-apply" })}>
<div className="flex items-center space-x-2">
<RadioGroupItem value="push-enter" id="r-push-enter" />
<Label htmlFor="r-push-enter">push-enter</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="eval-apply" id="r-eval-apply" />
<Label htmlFor="r-eval-apply">eval-apply</Label>
</div>
</RadioGroup>
</div>
<div className="flex items-center justify-between pb-2">
<Label htmlFor="collapse-indirections" className="text-lg font-semibold">Collapse indirections</Label>
<Switch id="collapse-indirections" checked={settings.collapse_indirections} onCheckedChange={(val) => onChange({ collapse_indirections: val })} />
<div className="grid grid-cols-[auto,75px] items-center gap-x-2 gap-y-1">
<div className="col-span-2">
<h3 className="text-lg font-thin">Evaluation model</h3>
<RadioGroup defaultValue={current_model} className="ml-3 my-2" onValueChange={(val) => onChange({ eval_apply: val === "eval-apply" })}>
<div className="flex items-center space-x-2">
<RadioGroupItem value="push-enter" id="r-push-enter" />
<Label htmlFor="r-push-enter">push-enter</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="eval-apply" id="r-eval-apply" />
<Label htmlFor="r-eval-apply">eval-apply</Label>
</div>
</RadioGroup>
</div>
<Label htmlFor="garbage-collection" className="text-lg font-thin">Garbage collection</Label>
<Switch id="garbage-collection" className="justify-self-end" checked={settings.garbage_collection} onCheckedChange={(val) => onChange({ garbage_collection: val })} />

<Label htmlFor="collapse-indirections" className="text-lg font-thin">Collapse indirections</Label>
<Switch id="collapse-indirections" className="justify-self-end" checked={settings.collapse_indirections} onCheckedChange={(val) => onChange({ collapse_indirections: val })} />

<Label htmlFor="run-limit" className="text-lg font-thin">Continue step limit</Label>
<Input id="run-limit" className="justify-self-end" defaultValue={settings.run_limit} onChange={({ target }) => Number(target.value) && onChange({ run_limit: Number(target.value) })} />
</div>
</PopoverContent>
</Popover>
Expand Down

0 comments on commit 46a5f65

Please sign in to comment.