Skip to content

Commit

Permalink
Help popups: improve readability and explain new functionalities
Browse files Browse the repository at this point in the history
  • Loading branch information
@MrTipson
MrTipson committed Jul 10, 2024
1 parent 46a5f65 commit 676107a
Show file tree
Hide file tree
Showing 4 changed files with 60 additions and 32 deletions.
19 changes: 16 additions & 3 deletions src/components/Controls.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,11 +132,24 @@ export default function Controls({ className, machine, step, setStep, breakpoint
<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>
<span className="font-semibold">Timeline:</span>
<p className="text-muted-foreground">As the execution progresses, the timeline grows. Use it to
jump back to previous steps. Markers can be added using the flag
icon, and allow you to jump to the marked step.
</p><br />
<span className="font-semibold">Next rule:</span>
<p className="text-muted-foreground">
Displays the next rule which will be applied, both as a short
description, but also as a more formal operational semantics rule.
</p><br />
<span className="font-semibold">Controls:</span>
<p className="text-muted-foreground">
Arrows step the simulation by one, while the continue goes forward for
<span className="italic"> step_limit</span> steps and stops at breakpoints.
</p><br />
</HelpPopover>
</div>
</div>
</div >
);
}

Expand Down
25 changes: 17 additions & 8 deletions src/components/HeapView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,23 +147,32 @@ export default function HeapView({ className, machine, settings }: {
<div className='flex flex-wrap gap-2 m-1 items-center'>
<h2 className="font-semibold text-xl m-3">Heap view</h2>
<HelpPopover>
<p>Heap view displays all allocated objects on the heap.</p><br />
<p>If garbage collection is enabled, objects with no references are deleted.</p><br />
<p>Some objects may be additionally marked, such as:</p>
<ul className='list-disc list-inside'>
<p className='text-muted-foreground'>Heap view displays all allocated objects on the heap.</p><br />
<span className='font-semibold'>Garbage collection:</span>
<p className='text-muted-foreground'>If garbage collection is enabled, objects with no references are deleted.</p><br />

<span className='font-semibold'>Marked objects:</span>
<p className='text-muted-foreground'>Some objects may be additionally marked, such as:</p>
<ul className='list-disc list-inside text-muted-foreground'>
<li className='my-1'>
to-be updated object:
<span className={"relative inline-block mx-2 px-1 rounded" + heapNodeVariants["updating"]}>TEST</span>
<span className={"relative inline-block mx-2 px-1 rounded text-foreground" + heapNodeVariants["updating"]}>TEST</span>
</li>
<li className='my-1'>
updated object:
<span className={"relative inline-block mx-2 px-1 rounded" + heapNodeVariants["updated"]}>TEST</span>
<span className={"relative inline-block mx-2 px-1 rounded text-foreground" + heapNodeVariants["updated"]}>TEST</span>
</li>
<li className='my-1'>
newly allocated object:
<span className={"relative inline-block px-3 rounded" + heapNodeVariants["allocated"] + " after:text-xs after:-bottom-0.5"}>TEST</span>
<span className={"relative inline-block px-3 rounded text-foreground" + heapNodeVariants["allocated"] + " after:text-xs after:-bottom-0.5"}>TEST</span>
</li>
</ul>
</ul><br />

<span className='font-semibold'>Indrections:</span>
<p className='text-muted-foreground'>When thunks are updated, they are replaced by an indirection,
which points to the new value (i.e. <span className='italic'>big value</span> model). For
better clarity, indirections are collapsed by default and replaced with a tag above the connection.
</p>
</HelpPopover>
</div>
<Separator />
Expand Down
32 changes: 19 additions & 13 deletions src/components/ProgramView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -336,6 +336,25 @@ export default function ProgramView({ className, machine, setMachine, step, setS
<div className={className + " relative flex flex-col"}>
<div className="flex flex-wrap gap-2 m-1 items-center">
<h2 className="font-semibold text-xl m-3">Program view</h2>
<HelpPopover>
<p className="text-muted-foreground">Program view allows you to import examples, edit programs and change settings.
Basic syntax highlighting and error handling is also available.</p><br />

<span className="font-semibold">Runtime:</span>
<p className="text-muted-foreground">During runtime, additional info is displayed in the program code:</p>
<ul className="list-disc list-inside text-muted-foreground">
<li className='my-1'>
values of bindings in the enviroment:
<span className="tok-variableName with-value px-1 py-0.5 mx-1 rounded font-semibold" data-value="0xb">TEST</span>
</li>
<li className='my-1'>current expression: <span className="current-expression px-1 py-0.5 rounded text-foreground">1 +# 2</span></li>
<li className='my-1'>expression result: <span className="current-expression with-value px-1 py-0.5 rounded text-foreground" data-value="3">1 +# 2</span></li>
</ul><br />

<span className="font-semibold">Breakpoints:</span>
<p className="text-muted-foreground">When a program is loaded,
you can set breakpoints on the left side of the program code.</p>
</HelpPopover>
<Select onValueChange={selectExample} value={selected}>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Custom program" />
Expand All @@ -348,19 +367,6 @@ export default function ProgramView({ className, machine, setMachine, step, setS
</Select>
<Button onClick={toggleEditable}>{loaded ? "Edit" : "Load"}</Button>
<SettingsMenu settings={settings} setSettings={setSettings} setLoaded={setLoaded} />
<HelpPopover>
<p>Program view allows you to import examples, edit programs and change settings.</p><br />
<p>Basic syntax highlighting and error handling is also available.</p><br />
<p>During runtime, additional info is displayed in the program code:</p>
<ul className="list-disc list-inside">
<li className='my-1'>
values of bindings in the enviroment:
<span className="tok-variableName with-value px-1 py-0.5 mx-1 rounded font-semibold" data-value="0xb">TEST</span>
</li>
<li className='my-1'>current expression: <span className="current-expression px-1 py-0.5 rounded">1 +# 2</span></li>
<li className='my-1'>expression result: <span className="current-expression with-value px-1 py-0.5 rounded" data-value="3">1 +# 2</span></li>
</ul>
</HelpPopover>
</div>
<Separator />
<div className="relative grow m-2 overflow-y-auto p-2 flex flex-col">
Expand Down
16 changes: 8 additions & 8 deletions src/components/StackView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,27 +10,27 @@ export default function StackView({ className, machine }: { className?: string,
<div className="flex flex-wrap gap-2 m-1 items-center">
<h2 className="font-semibold text-xl m-3">Stack view</h2>
<HelpPopover>
<p>Stack view displays the current state of the stack.</p><br />
<p>
<p className="text-muted-foreground">Stack view displays the current state of the stack.</p><br />
<p className="text-muted-foreground">
Most of the time it's populated with update frames (
<span className="text-green-500">Update</span>
<span className="px-1 m-1 rounded-sm bg-muted font-mono">0x5</span>
<span className="px-1 m-1 rounded-sm bg-muted font-mono text-foreground">0x5</span>
) and case continuations
<span className="text-sm flex gap-2 items-center">
(<span className="text-orange-500">Case continuation</span>
<span className='flex flex-wrap items-center'>
<span className='flex flex-wrap items-center text-foreground'>
<span className="text-xs">Saved locals:</span>
<span className="px-1 m-1 rounded-sm bg-muted text-nowrap font-mono">x 5</span>
</span>),
</span>
while arguments for the push-enter (
<span className="text-blue-500">Argument</span>
<span className="px-1 m-1 rounded-sm bg-muted font-mono">0x10</span>
<span className="px-1 m-1 rounded-sm bg-muted font-mono text-foreground">0x10</span>
) and eval-apply (
<span className="text-blue-500">Arguments</span>
<span className="px-1 m-1 rounded-sm bg-muted text-nowrap font-mono">3</span>
<span className="px-1 m-1 rounded-sm bg-muted text-nowrap font-mono">2</span>
<span className="px-1 m-1 rounded-sm bg-muted text-nowrap font-mono">0x10</span>
<span className="px-1 m-1 rounded-sm bg-muted text-nowrap font-mono text-foreground">3</span>
<span className="px-1 m-1 rounded-sm bg-muted text-nowrap font-mono text-foreground">2</span>
<span className="px-1 m-1 rounded-sm bg-muted text-nowrap font-mono text-foreground">0x10</span>
) also appear for short periods of time.
</p>
</HelpPopover>
Expand Down

0 comments on commit 676107a

Please sign in to comment.