@@ -53,11 +55,9 @@ function DraggableBlock({ type, custom_block_name, onRemove }: { type: BlockType
);
}
-// JSX element that represents the block palette.
-// Contains function to load custom blocks.
export function BlockPalette() {
- const { customBlockCount: _customBlockCount, setCustomBlockCount } = useBlockEditor();
- const {rootBlock, setRootBlock: _setRootBlock} = useBlockEditor();
+ const { setCustomBlockCount } = useBlockEditor();
+ const {rootBlock} = useBlockEditor();
function turnRootToCustom() {
if (!rootBlock) {
@@ -65,6 +65,11 @@ export function BlockPalette() {
return;
}
+ if (!canAddCustomBlock()) {
+ alert(`Custom block limit reached. You can load up to ${MAX_CUSTOM_BLOCKS} custom blocks at once.`);
+ return;
+ }
+
const name = prompt("Enter a name for the new custom block:");
if (!name) {
alert("Block creation cancelled.");
@@ -77,8 +82,6 @@ export function BlockPalette() {
num_values: []
};
- // If the root block is a custom block, we want to save its first child as the definition of the new custom block.
- // Otherwise, we save the root block itself as the definition of the new custom block.
newBlock.children[0].child = serializeBlock(rootBlock.type !== "Custom" ? rootBlock : rootBlock.children[0].block!);
customBlocks[name] = newBlock;
@@ -105,6 +108,11 @@ export function BlockPalette() {
return;
}
+ if (!canAddCustomBlock()) {
+ alert(`Custom block limit reached. You can load up to ${MAX_CUSTOM_BLOCKS} custom blocks at once.`);
+ return;
+ }
+
let newBlock: BlockSave;
if (parsed.rootBlock.type == "Custom") {
newBlock = parsed.rootBlock;
@@ -168,4 +176,4 @@ export function BlockPalette() {
);
-}
\ No newline at end of file
+}
diff --git a/recursive_blocks/src/BlockUtil.tsx b/recursive_blocks/src/BlockUtil.tsx
index 3b31a77..71bd79f 100644
--- a/recursive_blocks/src/BlockUtil.tsx
+++ b/recursive_blocks/src/BlockUtil.tsx
@@ -1,4 +1,4 @@
-import { blockConfig, BlockType, BlockEvaluator, BlockSlot } from "./BlockConfig";
+import { blockConfig, BlockType, BlockSlot } from "./BlockConfig";
/* A custom data type that contains all the data for a block placed into the block tree. */
export interface BlockData {
@@ -57,22 +57,15 @@ export async function evaluateBlock(
return ev;
}
-// Step through block evaluation with optional callback for visualization
-export async function stepBlock(
- block: BlockData,
- inputs: number[],
- onStepCallback?: (block: BlockData, result: number) => Promise
-): Promise {
- const evaluateWithCallback: BlockEvaluator = async (b, i, _eval, callback) => {
- return await stepBlock(b, i, callback);
- };
-
- const config = blockConfig[block.type];
- const ev = await config.evaluate(block, inputs, evaluateWithCallback, onStepCallback);
- if (onStepCallback) {
- await onStepCallback(block, ev);
+// Recursively collects all block IDs in a subtree (including the root).
+export function collectDescendantIds(block: BlockData): string[] {
+ const ids = [block.id];
+ for (const slot of block.children) {
+ if (slot.block) {
+ ids.push(...collectDescendantIds(slot.block));
+ }
}
- return ev;
+ return ids;
}
// Takes in a defaultCount, and modifies it using the slot's input modifiers to get the actual input count the slot wants.
diff --git a/recursive_blocks/src/Notation.ts b/recursive_blocks/src/Notation.ts
new file mode 100644
index 0000000..68e0f2c
--- /dev/null
+++ b/recursive_blocks/src/Notation.ts
@@ -0,0 +1,143 @@
+import { BlockData } from "./BlockUtil";
+
+// Use unicode for sub and superscripts. Could be handled with react, but this is simpler
+const SUPERSCRIPT_DIGITS: Record = {
+ "0": "\u2070",
+ "1": "\u00b9",
+ "2": "\u00b2",
+ "3": "\u00b3",
+ "4": "\u2074",
+ "5": "\u2075",
+ "6": "\u2076",
+ "7": "\u2077",
+ "8": "\u2078",
+ "9": "\u2079",
+};
+
+const SUBSCRIPT_DIGITS: Record = {
+ "0": "\u2080",
+ "1": "\u2081",
+ "2": "\u2082",
+ "3": "\u2083",
+ "4": "\u2084",
+ "5": "\u2085",
+ "6": "\u2086",
+ "7": "\u2087",
+ "8": "\u2088",
+ "9": "\u2089",
+};
+
+const toScriptNumber = (value: number, map: Record) =>
+ value.toString().split("").map(ch => map[ch] ?? ch).join("");
+
+const toSuperscript = (value: number) => toScriptNumber(value, SUPERSCRIPT_DIGITS);
+const toSubscript = (value: number) => toScriptNumber(value, SUBSCRIPT_DIGITS);
+
+// Builds generic input arguments like (x1, x2, ..., xN) for a given arity
+const inputArgs = (count: number) => {
+ if (count <= 0) return "()";
+ return `(${Array.from({ length: count }, (_, i) => `x${i + 1}`).join(", ")})`;
+};
+
+// Returns a named child slot's formal notation (or "?" when missing)
+const childFormal = (block: BlockData, slotName: string): string => {
+ const child = block.children.find(s => s.name === slotName)?.block;
+ return child ? getFormalNotation(child) : "?";
+};
+
+// Returns composition's g function child slots (g1..gm) in their stored order
+const compositionGSlots = (block: BlockData) => {
+ return block.children.filter(slot => slot.name.startsWith("g"));
+};
+
+export const getHeaderNotation = (block: BlockData): string => {
+ const n = block.inputCount ?? 0;
+ const args = inputArgs(n);
+
+ switch (block.type) {
+ case "Zero":
+ return `z${args}`;
+ case "Successor":
+ return `s${args}`;
+ case "Projection":
+ return `id[n, m]${args}`;
+ case "Composition": {
+ const gSymbols = compositionGSlots(block).map((_, i) => `g${i + 1}`);
+ return `Cn[${["f", ...gSymbols].join(", ")}]${args}`;
+ }
+ case "Primitive Recursion":
+ return `Pr[f, g]${args}`;
+ case "Minimization":
+ return `Mn[f]${args}`;
+ case "Custom":
+ return `${block.name ?? "Custom"}[h]${args}`;
+ default:
+ return `?${args}`;
+ }
+};
+
+export function getFormalNotation(block: BlockData): string {
+ switch (block.type) {
+ case "Successor":
+ return "s";
+ case "Zero":
+ return "z";
+ case "Projection": {
+ const n = block.inputCount ?? 0;
+ const m = block.num_values?.find(v => v.name === "i")?.value ?? 1;
+ return `id${toSuperscript(n)}${toSubscript(m)}`;
+ }
+ case "Composition": {
+ const fExpr = childFormal(block, "f");
+ const gExprs = compositionGSlots(block).map(slot => (slot.block ? getFormalNotation(slot.block) : "?"));
+ const suffix = gExprs.length > 0 ? `, ${gExprs.join(", ")}` : "";
+ return `Cn[${fExpr}${suffix}]`;
+ }
+ case "Primitive Recursion":
+ return `Pr[${childFormal(block, "Base Case")}, ${childFormal(block, "Recursive Case")}]`;
+ case "Minimization":
+ return `Mn[${childFormal(block, "f")}]`;
+ case "Custom":
+ return childFormal(block, "Custom Function");
+ default:
+ return "?";
+ }
+}
+
+export function getInformalNotation(
+ block: BlockData,
+ valueName?: string,
+ value?: number
+): { label: string; value: string } | null {
+ if (valueName !== undefined && value !== undefined) {
+ if (block.type === "Projection" && valueName === "i") {
+ const inputCount = Math.max(block.inputCount, value, 1);
+ const args = Array.from({ length: inputCount }, (_, i) => `x${i + 1}`).join(", ");
+
+ return {
+ label: `f(${args}) =`,
+ value: `x${value}`,
+ };
+ }
+
+ if (block.type === "Composition" && valueName === "m") {
+ return {
+ label: "arity \u2192",
+ value: `${value} inner block${value === 1 ? "" : "s"}`,
+ };
+ }
+
+ return {
+ label: `${valueName} \u2192`,
+ value: value.toString(),
+ };
+ }
+
+ const n = block.inputCount ?? 0;
+ const args = inputArgs(n);
+
+ if (block.type === "Zero") return { label: `f${args} =`, value: "0" };
+ if (block.type === "Successor") return { label: "f(x) =", value: "x + 1" };
+
+ return null;
+}
diff --git a/recursive_blocks/src/PRTracePanel.tsx b/recursive_blocks/src/PRTracePanel.tsx
new file mode 100644
index 0000000..ddbd8e6
--- /dev/null
+++ b/recursive_blocks/src/PRTracePanel.tsx
@@ -0,0 +1,42 @@
+import { PRTraceFrame } from "./Trace";
+import './Block.css';
+
+interface Props {
+ frame?: PRTraceFrame | null;
+}
+
+export function PRTracePanel({ frame }: Props) {
+ const fmtVals = (v: number[] | null | undefined) => {
+ if (!v || v.length === 0) return '\u2014';
+ return v.join(', ');
+ };
+
+ const fmtResult = (v: number | null | undefined) => {
+ return v !== null && v !== undefined ? String(v) : '\u2014';
+ };
+
+ return (
+
+
+
+ x,y'
+ {fmtVals(frame?.xy_prime)}
+
+
+ h(x,y')
+ {fmtResult(frame?.hxy_prime)}
+
+
+
+
+ x,y
+ {fmtVals(frame?.xy)}
+
+
+ h(x,y)
+ {fmtResult(frame?.hxy)}
+
+
+
+ );
+}
diff --git a/recursive_blocks/src/TEST_HELPER.tsx b/recursive_blocks/src/TEST_HELPER.tsx
deleted file mode 100644
index 951ba3d..0000000
--- a/recursive_blocks/src/TEST_HELPER.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-// TEST_HELPER.tsx
-// This file shows how to add garbage test data to blocks for testing the In/Out display
-import { BlockData } from "./BlockUtil";
-
-// Adds random garbage input/output values to a block and all its children for testing the visualization
-export function addGarbageTestData(block: BlockData): void {
-
- // Generate random garbage data
- const inputCount = block.inputCount || 2;
- const garbageInput = Array.from({ length: inputCount }, () => Math.floor(Math.random() * 10));
- const garbageOutput = Math.floor(Math.random() * 20);
-
- // Add to this block
- block.latestInput = garbageInput;
- block.latestOutput = garbageOutput;
-
- // Recursively add to children
- for (const slot of block.children) {
- if (slot.block) {
- addGarbageTestData(slot.block);
- }
- }
-}
-
-// Clears all input/output data from a block and its children
-export function clearExecutionData(block: BlockData): void {
- block.latestInput = undefined;
- block.latestOutput = undefined;
-
- for (const slot of block.children) {
- if (slot.block) {
- clearExecutionData(slot.block);
- }
- }
-}
\ No newline at end of file
diff --git a/recursive_blocks/src/Toolbar.css b/recursive_blocks/src/Toolbar.css
index d51db82..1808f3c 100644
--- a/recursive_blocks/src/Toolbar.css
+++ b/recursive_blocks/src/Toolbar.css
@@ -115,6 +115,24 @@
box-shadow: none;
}
+/* disabled state for Edit button during execution */
+.toolbar-button-disabled,
+.toolbar-button-disabled:hover {
+ opacity: 0.35;
+ cursor: not-allowed;
+ border-color: transparent !important;
+}
+.toolbar-button-active {
+ border-color: var(--contrast-col) !important;
+ color: var(--contrast-col) !important;
+ border-radius: 4px !important;
+}
+
+.toolbar-button-active:hover {
+ border-color: var(--contrast-col) !important;
+ border-radius: 4px !important;
+}
+
/* Icon Buttons */
.icon-button {
width: 38px;
diff --git a/recursive_blocks/src/Toolbar.tsx b/recursive_blocks/src/Toolbar.tsx
index 4a12983..069067c 100644
--- a/recursive_blocks/src/Toolbar.tsx
+++ b/recursive_blocks/src/Toolbar.tsx
@@ -1,13 +1,18 @@
import React, { } from "react";
import './Toolbar.css';
+import { useBlockEditor } from "./BlockEditorContext";
+import { MAX_INPUT_COUNT } from "./BlockEditor";
interface ToolbarProps {
onSave: () => void;
onLoad: (event: React.ChangeEvent) => void;
+ onShowNotation: () => void;
loadInputRef: React.RefObject;
onRun: () => void;
- onHalt: () => void;
+ onForceRun: () => void;
onStep: () => void;
+ onTrace: () => void;
+ onHalt: () => void;
inputCount: number;
onInputCountChange: (count: number) => void;
inputs: number[];
@@ -16,17 +21,19 @@ interface ToolbarProps {
onEvaluationSpeedChange: (speed: number) => void;
speedToText: (speed: number) => string;
currentResult: number | null;
- onAddTestData?: () => void;
- onClearTestData?: () => void;
+ isEvaluating: boolean;
}
export function Toolbar({
onSave,
onLoad,
+ onShowNotation,
loadInputRef,
onRun,
- onHalt,
+ onForceRun,
onStep,
+ onTrace,
+ onHalt,
inputCount,
onInputCountChange,
inputs,
@@ -35,9 +42,9 @@ export function Toolbar({
onEvaluationSpeedChange,
speedToText,
currentResult,
- onAddTestData,
- onClearTestData
+ isEvaluating
}: ToolbarProps) {
+ const { editMode, setEditMode } = useBlockEditor();
return (
<>
@@ -68,38 +75,47 @@ export function Toolbar({
+ {/* Edit mode toggle button */}
-
-
{/* Program execution controls */}
-
+
+ {/* run buttons lock edit; halt unlocks it - no async race condition */}
-
);
-}
\ No newline at end of file
+}
diff --git a/recursive_blocks/src/Trace.ts b/recursive_blocks/src/Trace.ts
new file mode 100644
index 0000000..abd7d47
--- /dev/null
+++ b/recursive_blocks/src/Trace.ts
@@ -0,0 +1,116 @@
+import { BlockData, collectDescendantIds } from "./BlockUtil";
+import { blockConfig, BlockEvaluator, ExecutionContext } from "./BlockConfig";
+
+export enum TraceEventType {
+ Enter,
+ Exit,
+ ClearSubtree
+}
+
+export type TraceEvent =
+ | { type: TraceEventType.Enter; blockId: string; inputs: number[] }
+ | { type: TraceEventType.Exit; blockId: string; inputs: number[]; output: number }
+ | { type: TraceEventType.ClearSubtree; blockIds: string[] };
+
+export async function generateTrace(
+ block: BlockData,
+ inputs: number[]
+): Promise<{ result: number; events: TraceEvent[] }> {
+ const events: TraceEvent[] = [];
+
+ const context: ExecutionContext = {
+ onClearSubtree: (blockToClear: BlockData) => {
+ events.push({ type: TraceEventType.ClearSubtree, blockIds: collectDescendantIds(blockToClear) });
+ }
+ };
+
+ const tracingEvaluator: BlockEvaluator = async (b, i, _eval, _ctx) => {
+ events.push({ type: TraceEventType.Enter, blockId: b.id, inputs: [...i] });
+ const config = blockConfig[b.type];
+ const result = await config.evaluate(b, i, tracingEvaluator, context);
+ events.push({ type: TraceEventType.Exit, blockId: b.id, inputs: [...i], output: result });
+ return result;
+ };
+
+ const result = await tracingEvaluator(block, inputs, tracingEvaluator, context);
+ return { result, events };
+}
+
+// Primitive Recursion Trace Panel
+export type PRTraceFrame = {
+ xy_prime: number[]; // x,y' inputs at the current recursion level
+ xy: number[] | null; // x,y inputs at the connected level (null at base case)
+ hxy: number | null; // h(x,y) result from the connected level
+ hxy_prime: number | null; // h(x,y') result at the current level
+};
+
+/**
+ * Build the frame sequence for a PR trace panel from a completed trace.
+ * Each Enter/Exit event for the given PR block produces exactly one frame.
+ * Descent frames show inputs flowing down, ascent frames show outputs building up.
+ */
+export function buildPRFrames(events: TraceEvent[], prBlockId: string): PRTraceFrame[] {
+ const frames: PRTraceFrame[] = [];
+ let depth = 0;
+ let prevExitOutput: number | null = null;
+ let lastDescentFrame: PRTraceFrame | null = null;
+
+ for (const e of events) {
+ if (e.type === TraceEventType.ClearSubtree) continue;
+ if (e.blockId !== prBlockId) continue;
+
+ if (e.type === TraceEventType.Enter) {
+ if (depth === 0) {
+ // Reset state on new invocations
+ prevExitOutput = null;
+ lastDescentFrame = null;
+ }
+ depth++;
+
+ const y = e.inputs[e.inputs.length - 1];
+ if (y > 0) {
+ const frame: PRTraceFrame = {
+ xy_prime: e.inputs,
+ xy: [...e.inputs.slice(0, -1), y - 1],
+ hxy: null,
+ hxy_prime: null,
+ };
+ lastDescentFrame = frame;
+ frames.push(frame);
+ } else if (lastDescentFrame) {
+ // Base case enter after descent, hold the last descent view
+ frames.push({ ...lastDescentFrame });
+ } else {
+ // Direct call with y = 0 is an edge case, no descent to hold, so show as own level
+ frames.push({ xy_prime: e.inputs, xy: null, hxy: null, hxy_prime: null });
+ }
+ } else if (e.type === TraceEventType.Exit) {
+ depth--;
+
+ const y = e.inputs[e.inputs.length - 1];
+ if (y === 0 && lastDescentFrame) {
+ // Base case exit after descent, stay at last descent view, fill in h(x,y)
+ frames.push({
+ xy_prime: lastDescentFrame.xy_prime,
+ xy: lastDescentFrame.xy,
+ hxy: e.output,
+ hxy_prime: null,
+ });
+ } else if (y === 0) {
+ // Direct call with y = 0, just show result
+ frames.push({ xy_prime: e.inputs, xy: null, hxy: null, hxy_prime: e.output });
+ } else {
+ // Ascent: show current level with result from the level below
+ frames.push({
+ xy_prime: e.inputs,
+ xy: [...e.inputs.slice(0, -1), y - 1],
+ hxy: prevExitOutput,
+ hxy_prime: e.output,
+ });
+ }
+ prevExitOutput = e.output;
+ }
+ }
+
+ return frames;
+}
diff --git a/recursive_blocks/src/ValueEditor.tsx b/recursive_blocks/src/ValueEditor.tsx
index be6d16d..bb7bbd4 100644
--- a/recursive_blocks/src/ValueEditor.tsx
+++ b/recursive_blocks/src/ValueEditor.tsx
@@ -1,6 +1,8 @@
import { useState, useEffect } from "react";
import { BlockData } from "./BlockUtil";
import { blockConfig } from "./BlockConfig";
+import { useBlockEditor } from "./BlockEditorContext";
+import { getInformalNotation } from "./Notation";
interface ValueEditorProps {
block: BlockData;
@@ -13,6 +15,7 @@ interface ValueEditorProps {
// Block is the block this value editor is on, and onUpdate is called when a value is updated.
export function ValueEditor({ block, onUpdate, isRunning = false }: ValueEditorProps) {
const [values, setValues] = useState(block.num_values ?? []);
+ const { editMode } = useBlockEditor();
useEffect(() => {
if (JSON.stringify(values) !== JSON.stringify(block.num_values)) {
@@ -27,33 +30,49 @@ export function ValueEditor({ block, onUpdate, isRunning = false }: ValueEditorP
};
if (!values || values.length === 0) {
- return;
+ const notation = getInformalNotation(block);
+ if (!notation) return;
+ return (
+