Merge branch 'dev' of ssh://git.science.uu.nl/ics/sp/2025/n25b/pepperplus-ui into fix/deep-clone-data

src/components/TextField.tsx

@@ -1,4 +1,4 @@
-import {useState} from "react";
+import {useEffect, useState} from "react";
 import styles from "./TextField.module.css";
 
 /**
@@ -105,6 +105,10 @@ export function TextField({
 }) {
   const [inputValue, setInputValue] = useState(value);
 
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+
   const onCommit = () => setValue(inputValue);
 
   return <RealtimeTextField

src/pages/VisProgPage/VisProg.tsx

@@ -7,6 +7,7 @@ import {
   MarkerType,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
+import {useEffect} from "react";
 import {useShallow} from 'zustand/react/shallow';
 import {DndToolbar} from './visualProgrammingUI/components/DragDropSidebar.tsx';
 import useFlowStore from './visualProgrammingUI/VisProgStores.tsx';
@@ -41,7 +42,11 @@ const selector = (state: FlowState) => ({
   onConnect: state.onConnect,
   onReconnectStart: state.onReconnectStart,
   onReconnectEnd: state.onReconnectEnd,
-  onReconnect: state.onReconnect
+  onReconnect: state.onReconnect,
+  undo: state.undo,
+  redo: state.redo,
+  beginBatchAction: state.beginBatchAction,
+  endBatchAction: state.endBatchAction
 });
 
 // --| define ReactFlow editor |--
@@ -60,9 +65,23 @@ const VisProgUI = () => {
     onConnect,
     onReconnect,
     onReconnectStart,
-    onReconnectEnd
+    onReconnectEnd,
+    undo,
+    redo,
+    beginBatchAction,
+    endBatchAction
   } = useFlowStore(useShallow(selector)); // instructs the editor to use the corresponding functions from the FlowStore
 
+  // adds ctrl+z and ctrl+y support to respectively undo and redo actions
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.ctrlKey && e.key === 'z') undo();
+      if (e.ctrlKey && e.key === 'y') redo();
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  });
+
   return (
     <div className={`${styles.innerEditorContainer} round-lg border-lg`}>
       <ReactFlow
@@ -76,6 +95,8 @@ const VisProgUI = () => {
         onReconnectStart={onReconnectStart}
         onReconnectEnd={onReconnectEnd}
         onConnect={onConnect}
+        onNodeDragStart={beginBatchAction}
+        onNodeDragStop={endBatchAction}
         snapToGrid
         fitView
         proOptions={{hideAttribution: true}}
@@ -83,6 +104,10 @@ const VisProgUI = () => {
         <Panel position="top-center" className={styles.dndPanel}>
           <DndToolbar/> {/* contains the drag and drop panel for nodes */}
         </Panel>
+        <Panel position="bottom-center">
+          <button onClick={() => undo()}>undo</button>
+          <button onClick={() => redo()}>Redo</button>
+        </Panel>
         <Controls/>
         <Background/>
       </ReactFlow>
@@ -90,8 +115,6 @@ const VisProgUI = () => {
   );
 };
 
-
-
 /**
  * Places the VisProgUI component inside a ReactFlowProvider
  *

src/pages/VisProgPage/visualProgrammingUI/EditorUndoRedo.ts

@@ -0,0 +1,129 @@
+import type {Edge, Node} from "@xyflow/react";
+import type {StateCreator, StoreApi } from 'zustand/vanilla';
+import type {FlowState} from "./VisProgTypes.tsx";
+
+export type FlowSnapshot = {
+  nodes: Node[];
+  edges: Edge[];
+}
+
+/**
+ * A reduced version of the flowState type,
+ * This removes the functions that are provided by UndoRedo from the expected input type
+ */
+type BaseFlowState = Omit<FlowState, 'undo' | 'redo' | 'pushSnapshot' | 'beginBatchAction' | 'endBatchAction'>;
+
+
+/**
+ * UndoRedo is implemented as a middleware for the FlowState store,
+ * this allows us to keep the undo redo logic separate from the flowState,
+ * and thus from the internal editor logic
+ *
+ * Allows users to undo and redo actions in the visual programming editor
+ *
+ * @param {(set: StoreApi<FlowState>["setState"], get: () => FlowState, api: StoreApi<FlowState>) => BaseFlowState} config
+ * @returns {StateCreator<FlowState>}
+ * @constructor
+ */
+export const UndoRedo = (
+  config: (
+    set: StoreApi<FlowState>['setState'],
+    get: () => FlowState,
+    api: StoreApi<FlowState>
+  ) => BaseFlowState ) : StateCreator<FlowState> => (set, get, api) => {
+  let batchTimeout: number | null = null;
+
+  /**
+   * Captures the current state for
+   *
+   * @param {BaseFlowState} state - the current state of the editor
+   * @returns {FlowSnapshot} - returns a snapshot of the current editor state
+   */
+  const getSnapshot = (state : BaseFlowState) : FlowSnapshot => ({
+    nodes: state.nodes,
+    edges: state.edges
+  });
+
+  const initialState = config(set, get, api);
+
+  return {
+    ...initialState,
+
+    /**
+     *  Adds a snapshot of the current state to the undo history
+     */
+    pushSnapshot: () => {
+      const state = get();
+      // we don't add new snapshots during an ongoing batch action
+      if (!state.isBatchAction) {
+        set({
+          past: [...state.past, getSnapshot(state)],
+          future: []
+        });
+      }
+
+    },
+
+    /**
+     * Undoes the last action from the editor,
+     * The state before undoing is added to the future for potential redoing
+     */
+    undo: () => {
+      const state = get();
+      if (!state.past.length) return;
+
+      const snapshot = state.past.pop()!; // pop last snapshot
+      const currentSnapshot: FlowSnapshot = getSnapshot(state);
+
+      set({
+        nodes: snapshot.nodes,
+        edges: snapshot.edges,
+      });
+
+      state.future.push(currentSnapshot); // push current to redo
+    },
+
+    /**
+     * redoes the last undone action,
+     * The state before redoing is added to the past for potential undoing
+     */
+    redo: () => {
+      const state = get();
+      if (!state.future.length) return;
+
+      const snapshot = state.future.pop()!; // pop last redo
+      const currentSnapshot: FlowSnapshot = getSnapshot(state);
+
+      set({
+        nodes: snapshot.nodes,
+        edges: snapshot.edges,
+      });
+
+      state.past.push(currentSnapshot); // push current to undo
+    },
+
+    /**
+     * Begins a batched action
+     *
+     * An example of a batched action is dragging a node in the editor,
+     * where we want the entire action of moving a node to a different position
+     * to be covered by one undoable snapshot
+     */
+    beginBatchAction: () => {
+      get().pushSnapshot();
+      set({ isBatchAction: true });
+      if (batchTimeout) clearTimeout(batchTimeout);
+    },
+
+    /**
+     * Ends a batched action,
+     * a very short timeout is used to prevent new snapshots from being added
+     * until we are certain that the batch event is finished
+     */
+    endBatchAction: () => {
+      batchTimeout = window.setTimeout(() => {
+        set({ isBatchAction: false });
+      }, 10);
+    }
+  }
+}

src/pages/VisProgPage/visualProgrammingUI/NodeRegistry.ts

@@ -79,6 +79,7 @@ export const NodeConnects = {
 export const NodeDeletes = {
   start: () => false,
   end: () => false,
+  test: () => false, // Used for coverage of universal/ undefined nodes
 }
 
 /**
@@ -91,4 +92,5 @@ export const NodesInPhase = {
   start: () => false,
   end: () => false,
   phase: () => false,
+  test: () => false, // Used for coverage of universal/ undefined nodes
 }

src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx

@@ -10,6 +10,7 @@ import {
 } from '@xyflow/react';
 import type { FlowState } from './VisProgTypes';
 import { NodeDefaults, NodeConnects, NodeDeletes } from './NodeRegistry';
+import { UndoRedo } from "./EditorUndoRedo.ts";
 
 
 /**
@@ -34,7 +35,7 @@ function createNode(id: string, type: string, position: XYPosition, data: Record
   return {...defaultData, ...newData}
 }
 
-//* Initial nodes to populate the flow at startup.
+//* Initial nodes, created by using createNode. */
 const initialNodes : Node[] = [
     createNode('start', 'start', {x: 100, y: 100}, {label: "Start"}, false),
     createNode('end', 'end', {x: 500, y: 100}, {label: "End"}, false),
@@ -42,7 +43,7 @@ const initialNodes : Node[] = [
     createNode('norms-1', 'norm',  {x:-200, y:100}, {label: "Initial Norms", normList: ["Be a robot", "get good"]}),     
 ];
 
-//* Initial edges to connect the startup nodes.
+// * Initial edges * /
 const initialEdges: Edge[] = [
   { id: 'start-phase-1', source: 'start', target: 'phase-1' },
   { id: 'phase-1-end', source: 'phase-1', target: 'end' },
@@ -50,17 +51,17 @@ const initialEdges: Edge[] = [
 
 
 /**
- * How we have defined the functions for our FlowState. 
- * We have the normal functionality of a default FlowState with some exceptions to account for extra functionality.
- * The biggest changes are in onConnect and onDelete, which we have given extra functionality based on the nodes defined functions.
- * 
+ * useFlowStore contains the implementation for all editor functionality
+ * and stores the current state of the visual programming editor
+ *
  *  * Provides:
  * - Node and edge state management
  * - Node creation, deletion, and updates
  * - Custom connection handling via NodeConnects
  * - Edge reconnection handling
+ * - Undo Redo functionality through custom middleware
  */
-const useFlowStore = create<FlowState>((set, get) => ({
+const useFlowStore = create<FlowState>(UndoRedo((set, get) => ({
   nodes: initialNodes,
   edges: initialEdges,
   edgeReconnectSuccessful: true,
@@ -68,8 +69,7 @@ const useFlowStore = create<FlowState>((set, get) => ({
    /**
    * Handles changes to nodes triggered by ReactFlow.
    */
-  onNodesChange: (changes) =>
-  set({nodes: applyNodeChanges(changes, get().nodes)}),
+  onNodesChange: (changes) => set({nodes: applyNodeChanges(changes, get().nodes)}),
 
   /**
    * Handles changes to edges triggered by ReactFlow.
@@ -81,28 +81,34 @@ const useFlowStore = create<FlowState>((set, get) => ({
    * Updates edges and calls the node-specific connection functions.
    */
   onConnect: (connection) => {
-  const edges = addEdge(connection, get().edges);
-  const nodes = get().nodes;
-  // connection has: { source, sourceHandle, target, targetHandle }
-  // Let's find the source and target ID's.
-  const sourceNode = nodes.find((n) => n.id == connection.source);
-  const targetNode = nodes.find((n) => n.id == connection.target);
-  
-  // In case the nodes weren't found, return basic functionality.
-  if (sourceNode == undefined || targetNode == undefined || sourceNode.type == undefined || targetNode.type == undefined) {
-    set({ nodes, edges });
-    return;
-  }
+    get().pushSnapshot();
 
-  // We should find out how their data changes by calling their respective functions.
-  const sourceConnectFunction = NodeConnects[sourceNode.type as keyof typeof NodeConnects]
-  const targetConnectFunction = NodeConnects[targetNode.type as keyof typeof NodeConnects]
-  
-  // We're going to have to update their data based on how they want to update it.
-  sourceConnectFunction(sourceNode, targetNode, true)
-  targetConnectFunction(targetNode, sourceNode, false)
-  set({ nodes, edges });
-},
+    const edges = addEdge(connection, get().edges);
+    const nodes = get().nodes;
+    // connection has: { source, sourceHandle, target, targetHandle }
+    // Let's find the source and target ID's.
+    const sourceNode = nodes.find((n) => n.id == connection.source);
+    const targetNode = nodes.find((n) => n.id == connection.target);
+
+    // In case the nodes weren't found, return basic functionality.
+    if ( sourceNode == undefined
+      || targetNode == undefined
+      || sourceNode.type == undefined
+      || targetNode.type == undefined
+    ){
+      set({ nodes, edges });
+      return;
+    }
+
+    // We should find out how their data changes by calling their respective functions.
+    const sourceConnectFunction = NodeConnects[sourceNode.type as keyof typeof NodeConnects]
+    const targetConnectFunction = NodeConnects[targetNode.type as keyof typeof NodeConnects]
+
+    // We're going to have to update their data based on how they want to update it.
+    sourceConnectFunction(sourceNode, targetNode, true)
+    targetConnectFunction(targetNode, sourceNode, false)
+    set({ nodes, edges });
+  },
 
   /**
    * Handles reconnecting an edge between nodes.
@@ -112,19 +118,32 @@ const useFlowStore = create<FlowState>((set, get) => ({
     set({ edges: reconnectEdge(oldEdge, newConnection, get().edges) });
   },
 
-  onReconnectStart: () => set({ edgeReconnectSuccessful: false }),
+  onReconnectStart: () => {
+    get().pushSnapshot();
+    set({ edgeReconnectSuccessful: false })
+  },
+
+  /**
+   * handles potential dropping (deleting) of an edge
+   * if it is not reconnected to a node after detaching it
+   *
+   * @param _evt - the event
+   * @param {{id: string}} edge - the described edge
+   */
   onReconnectEnd: (_evt, edge) => {
     if (!get().edgeReconnectSuccessful) {
       set({ edges: get().edges.filter((e) => e.id !== edge.id) });
     }
     set({ edgeReconnectSuccessful: true });
   },
-  
+
   /**
    * Deletes a node by ID, respecting NodeDeletes rules.
    * Also removes all edges connected to that node.
    */
   deleteNode: (nodeId) => {
+    get().pushSnapshot();
+
     // Let's find our node to check if they have a special deletion function
     const ourNode = get().nodes.find((n)=>n.id==nodeId);
     const ourFunction = Object.entries(NodeDeletes).find(([t])=>t==ourNode?.type)?.[1]
@@ -135,7 +154,7 @@ const useFlowStore = create<FlowState>((set, get) => ({
       nodes: get().nodes.filter((n) => n.id !== nodeId),
       edges: get().edges.filter((e) => e.source !== nodeId && e.target !== nodeId),
       })}
-    },
+  },
 
   /**
    * Replaces the entire nodes array in the store.
@@ -151,6 +170,7 @@ const useFlowStore = create<FlowState>((set, get) => ({
    * Updates the data of a node by merging new data with existing data.
    */
   updateNodeData: (nodeId, data) => {
+    get().pushSnapshot();
     set({
       nodes: get().nodes.map((node) => {
         if (node.id === nodeId) {
@@ -165,8 +185,15 @@ const useFlowStore = create<FlowState>((set, get) => ({
    * Adds a new node to the flow store.
    */
   addNode: (node: Node) => {
+    get().pushSnapshot();
     set({ nodes: [...get().nodes, node] });
   },
-}));
+
+  // undo redo default values
+  past: [],
+  future: [],
+  isBatchAction: false,
+  }))
+);
 
 export default useFlowStore;

src/pages/VisProgPage/visualProgrammingUI/VisProgTypes.tsx

@@ -1,6 +1,8 @@
 // VisProgTypes.ts
 import type { Edge, OnNodesChange, OnEdgesChange, OnConnect, OnReconnect, Node } from '@xyflow/react';
 import type { NodeTypes } from './NodeRegistry';
+import type {FlowSnapshot} from "./EditorUndoRedo.ts";
+
 
 /**
  * Type representing all registered node types.
@@ -74,4 +76,14 @@ export type FlowState = {
    * @param node - the Node object to add
    */
   addNode: (node: Node) => void;
+
+  // UndoRedo Types
+  past: FlowSnapshot[];
+  future: FlowSnapshot[];
+  pushSnapshot: () => void;
+  isBatchAction: boolean;
+  beginBatchAction: () => void;
+  endBatchAction: () => void;
+  undo: () => void;
+  redo: () => void;
 };

src/pages/VisProgPage/visualProgrammingUI/components/DragDropSidebar.tsx

@@ -68,8 +68,8 @@ function DraggableNode({ className, children, nodeType, onDrop }: DraggableNodeP
  * @param nodeType - The type of node to create (from `NodeTypes`).
  * @param position - The XY position in the flow canvas where the node will appear.
  */
-function addNode(nodeType: keyof typeof NodeTypes, position: XYPosition) {
-  const { nodes, setNodes } = useFlowStore.getState();
+function addNodeToFlow(nodeType: keyof typeof NodeTypes, position: XYPosition) {
+  const { nodes, addNode } = useFlowStore.getState();
 
   // Load any predefined data for this node type.
   const defaultData = NodeDefaults[nodeType] ?? {}
@@ -94,7 +94,7 @@ function addNode(nodeType: keyof typeof NodeTypes, position: XYPosition) {
     position,
     data: JSON.parse(JSON.stringify(defaultData))
   }
-  setNodes([...nodes, newNode]);
+  addNode(newNode);
 }
 
 /**
@@ -129,7 +129,7 @@ export function DndToolbar() {
 
       if (isInFlow) {
         const position = screenToFlowPosition(screenPosition);
-        addNode(nodeType, position);
+        addNodeToFlow(nodeType, position);
       }
     },
     [screenToFlowPosition],

src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.tsx

@@ -32,23 +32,22 @@ export type GoalNode = Node<GoalNodeData>
  * @param props NodeProps, like id, label, children
  * @returns React.JSX.Element
  */
-export default function GoalNode(props: NodeProps<GoalNode>) {
-  const data = props.data
+export default function GoalNode({id, data}: NodeProps<GoalNode>) {
   const {updateNodeData} = useFlowStore();
 
-  const text_input_id = `goal_${props.id}_text_input`;
-  const checkbox_id = `goal_${props.id}_checkbox`;
+  const text_input_id = `goal_${id}_text_input`;
+  const checkbox_id = `goal_${id}_checkbox`;
 
   const setDescription = (value: string) => {
-    updateNodeData(props.id, {...data, description: value});
+    updateNodeData(id, {...data, description: value});
   }
 
   const setAchieved = (value: boolean) => {
-    updateNodeData(props.id, {...data, achieved: value});
+    updateNodeData(id, {...data, achieved: value});
   }
 
   return <>
-    <Toolbar nodeId={props.id} allowDelete={true}/>
+    <Toolbar nodeId={id} allowDelete={true}/>
     <div className={`${styles.defaultNode} ${styles.nodeGoal} flex-col gap-sm`}>
       <div className={"flex-row gap-md"}>
         <label htmlFor={text_input_id}>Goal:</label>
@@ -64,7 +63,7 @@ export default function GoalNode(props: NodeProps<GoalNode>) {
         <input
           id={checkbox_id}
           type={"checkbox"}
-          value={data.achieved ? "checked" : ""}
+          checked={data.achieved || false}
           onChange={(e) => setAchieved(e.target.checked)}
         />
       </div>
@@ -89,6 +88,12 @@ export function GoalReduce(node: Node, _nodes: Node[]) {
     }
 }
 
+/**
+ * This function is called whenever a connection is made with this node type (Goal)
+ * @param _thisNode the node of this node type which function is called
+ * @param _otherNode the other node which was part of the connection
+ * @param _isThisSource whether this instance of the node was the source in the connection, true = yes.
+ */
 export function GoalConnects(_thisNode: Node, _otherNode: Node, _isThisSource: boolean) {
   // Replace this for connection logic
 }

src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.tsx

@@ -78,16 +78,12 @@ export default function TriggerNode(props: NodeProps<TriggerNode>) {
 }
 
 /**
- * Reduces each Trigger, including its children down into its relevant data.
- * @param node: The Node Properties of this node.
- * @param _nodes: all the nodes in the graph.
- *  @returns A simplified object containing the node label and its list of triggers.
+ * Reduces each Trigger, including its children down into its core data.
+ * @param node - The Trigger node to reduce.
+ * @param _nodes - The list of all nodes in the current flow graph.
+ * @returns A simplified object containing the node label and its list of triggers.
  */
-export function TriggerReduce(node: Node, nodes: Node[]) {
-  // Replace this for nodes functionality
-  if (nodes.length <= -1) { 
-    console.warn("Impossible nodes length in TriggerReduce") 
-  } 
+export function TriggerReduce(node: Node, _nodes: Node[]) {
   const data = node.data;
   switch (data.triggerType) {
     case "keywords":