Merge branch 'feat/gesture-ui-cb' of git.science.uu.nl:ics/sp/2025/n25b/pepperplus-ui into feat/gesture-ui-cb

ref: N25B-345

src/App.tsx

@@ -7,7 +7,7 @@ import ConnectedRobots from './pages/ConnectedRobots/ConnectedRobots.tsx'
 import VisProg from "./pages/VisProgPage/VisProg.tsx";
 import {useState} from "react";
 import Logging from "./components/Logging/Logging.tsx";
-import MonitoringPage from './pages/MonitoringPage/MonitoringPage.tsx'
+import GesturePage from './pages/GesturePage/GesturePage.tsx';
 
 function App(){
   const [showLogs, setShowLogs] = useState(false);
@@ -26,7 +26,7 @@ function App(){
             <Route path="/editor" element={<VisProg />} />
             <Route path="/robot" element={<Robot />} />
             <Route path="/ConnectedRobots" element={<ConnectedRobots />} />
-            <Route path="/MonitoringPage" element={<MonitoringPage />} />
+            <Route path="/GesturePage" element={<GesturePage />} />
         </Routes>
         </main>
         {showLogs && <Logging />}

src/components/Logging/Filters.tsx

@@ -15,7 +15,6 @@ type Setter<T> = (value: T | ((prev: T) => T)) => void;
  */
 const optionMapping = new Map([
   ["ALL", 0],
-  ["LLM", 9],
   ["DEBUG", 10],
   ["INFO", 20],
   ["WARNING", 30],

src/components/Logging/useLogs.ts

@@ -19,7 +19,7 @@ import {cell, type Cell} from "../../utils/cellStore.ts";
 export type LogRecord = {
   name: string;
   message: string;
-  levelname: 'LLM' | 'DEBUG' | 'INFO' | 'WARNING' | 'ERROR' | 'CRITICAL' | string;
+  levelname: 'DEBUG' | 'INFO' | 'WARNING' | 'ERROR' | 'CRITICAL' | string;
   levelno: number;
   created: number;
   relativeCreated: number;

src/index.css

@@ -26,6 +26,7 @@ html, body, #root {
 }
 
 a {
+  font-weight: 500;
   color: canvastext;
 }
 

src/pages/GesturePage/GesturePage.tsx

@@ -0,0 +1,68 @@
+import { useState } from 'react'
+
+/**
+ * 
+ * @returns A JSX element representing the app’s gesture page.
+ */
+export default function GesturePage() {
+
+  const [tags, setTags] = useState(["hello","happy","meditate","winner","crazy", "affirmative", "once upon a time"])
+  const [selectedTag, setSelectedTag] = useState("");
+
+  async function getTags() {
+    try {
+      // You can optionally use a query parameter: `commands/gesture/tags/?count=<number>`.
+      // This will yield a list of tags with that count.
+      const res = await fetch("http://localhost:8000/robot/commands/gesture/tags/"); 
+      if (!res.ok) throw new Error("Failed communicating with the backend.");
+      const jsonRes = await res.json();
+      setTags(jsonRes["available_gesture_tags"]);
+    } catch (err) {
+      console.error("Failed to fetch tags:", err);
+    }
+  }
+
+  async function doGesture() {
+    if (!selectedTag) {
+      alert("Please select a gesture first.");
+      return;
+    }
+
+    const gesture = { endpoint: "actuate/gesture/tag", data: selectedTag };
+
+    try {
+      const res = await fetch("http://localhost:8000/robot/command/gesture", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(gesture),
+      });
+      if (!res.ok) throw new Error("Failed communicating with the backend.");
+      console.log(`Successfully sent gesture '${selectedTag}' to the backend.`);
+    } catch (err) {
+      console.error("Failed to send gesture command:", err);
+    }
+  }
+
+  return (
+    <div className="card p-4 space-y-4">
+      <button onClick={getTags}>Get Tags</button>
+
+      <select
+        value={selectedTag}
+        onChange={(e) => setSelectedTag(e.target.value)}
+        disabled={tags.length === 0}
+      >
+        <option value="">
+          {tags.length === 0 ? "No tags loaded yet" : "-- Select a gesture --"}
+        </option>
+        {tags.map((tag) => (
+          <option key={tag} value={tag}>
+            {tag}
+          </option>
+        ))}
+      </select>
+
+      <button onClick={doGesture}>Do Gesture</button>
+    </div>
+  );
+}

src/pages/Home/Home.tsx

@@ -23,7 +23,7 @@ function Home() {
         <Link to={"/editor"}>Editor →</Link>
         <Link to={"/template"}>Template →</Link>
         <Link to={"/ConnectedRobots"}>Connected Robots →</Link>
-        <Link to={"/MonitoringPage"}>MonitoringPage →</Link>
+        <Link to={"/GesturePage"}>Gesture Robot →</Link>
       </div>
     </div>
   )

src/pages/MonitoringPage/MonitoringPage.module.css

@@ -1,175 +0,0 @@
-.dashboardContainer {
-  display: grid;
-  grid-template-columns: 2fr 1fr; /* Left = content, Right = logs */
-  grid-template-rows: auto 1fr auto; /* Header, Main, Footer */
-  grid-template-areas:
-    "header logs"
-    "main logs"
-    "footer footer";
-  gap: 1rem;
-  padding: 1rem;
-  background-color: #f5f5f5;
-  font-family: Arial, sans-serif;
-}
-
-/* HEADER */
-.experimentOverview {
-  grid-area: header;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  background: #fff;
-  padding: 1rem;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-  position: static; /* ensures it scrolls away */
-}
-
-.phaseProgress {
-  margin-top: 0.5rem;
-}
-
-.phase {
-  display: inline-block;
-  width: 25px;
-  height: 25px;
-  margin: 0 3px;
-  text-align: center;
-  line-height: 25px;
-  background: #ccc;
-}
-
-.completed {
-  background-color: #5cb85c;
-  color: white;
-}
-
-.current {
-  background-color: #f0ad4e;
-  color: white;
-}
-
-.connected {
-  color: green;
-  font-weight: bold;
-}
-
-.pause{
-  background-color: green;
-}
-
-.next {
-  background-color: #ccc;
-}
-
-.restartPhase{
-  background-color: rgb(255, 123, 0);
-}
-
-.restartExperiment{
-  background-color: red;
-}
-
-/* MAIN GRID */
-.phaseOverview {
-  grid-area: main;
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: repeat(2, auto);
-  gap: 1rem;
-  background: #fff;
-  padding: 1rem;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-}
-
-.phaseBox {
-  background: #f9f9f9;
-  border: 1px solid #ddd;
-  padding: 1rem;
-  display: flex;
-  flex-direction: column;
-  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.05);
-}
-
-.phaseOverviewText {
-  grid-column: 1 / -1; /* make the title span across both columns */
-  font-size: 1.4rem;
-  font-weight: 600;
-  margin: 0;            /* remove default section margin */
-  padding: 0.25rem 0;   /* smaller internal space */
-}
-
-.phaseOverviewText h3{
-  margin: 0;            /* removes top/bottom whitespace */
-  padding: 0;           /* keeps spacing tight */
-}
-
-.phaseBox h3 {
-  margin-top: 0;
-  border-bottom: 1px solid #ddd;
-  padding-bottom: 0.4rem;
-}
-
-.checked::before {
-  content: '✔️ ';
-}
-
-/* LOGS */
-.logs {
-  grid-area: logs;
-  background: #fff;
-  padding: 1rem;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-}
-
-.logs textarea {
-  width: 100%;
-  height: 200px;
-  margin-top: 0.5rem;
-}
-
-/* FOOTER */
-.controlsSection {
-  grid-area: footer;
-  display: flex;
-  justify-content: space-between;
-  gap: 1rem;
-  background: #fff;
-  padding: 1rem;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-}
-
-.gestures,
-.speech,
-.directSpeech {
-  flex: 1;
-}
-
-.speechInput {
-  display: flex;
-  margin-top: 0.5rem;
-}
-
-.speechInput input {
-  flex: 1;
-  padding: 0.5rem;
-  border: 1px solid #ccc;
-}
-
-.speechInput button {
-  background: #007bff;
-  color: white;
-  border: none;
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-}
-
-/* RESPONSIVE */
-@media (max-width: 900px) {
-  .phaseOverview {
-    grid-template-columns: 1fr;
-  }
-
-  .controlsSection {
-    flex-direction: column;
-  }
-}

src/pages/MonitoringPage/MonitoringPage.tsx

@@ -1,127 +0,0 @@
-import React from 'react';
-import styles from './MonitoringPage.module.css';
-
-export default function MonitoringPage() {
-  return (
-    <div className={styles.dashboardContainer}>
-      {/* HEADER */}
-      <header className={styles.experimentOverview}>
-        <div className={styles.phaseName}>
-          <h2>Experiment Overview</h2>
-          <p><strong>Phase name:</strong> Rhyming fish</p>
-          <div className={styles.phaseProgress}>
-            <span className={`${styles.phase} ${styles.completed}`}>1</span>
-            <span className={`${styles.phase} ${styles.completed}`}>2</span>
-            <span className={`${styles.phase} ${styles.current}`}>3</span>
-            <span className={styles.phase}>4</span>
-            <span className={styles.phase}>5</span>
-          </div>
-        </div>
-
-        <div className={styles.experimentControls}>
-          <h3>Experiment Controls</h3>
-          <div className={styles.controlsButtons}>
-            <button className={styles.pause}>▶</button>
-            <button className={styles.next}>⏭</button>
-            <button className={styles.restartPhase}>↩</button>
-            <button className={styles.restartExperiment}>⟲</button>
-          </div>
-        </div>
-
-        <div className={styles.connectionStatus}>
-          <h3>Connection:</h3>
-          <p className={styles.connected}>● Robot is connected</p>
-        </div>
-      </header>
-
-      {/* MAIN GRID */}
-      
-      <main className={styles.phaseOverview}>
-        <section className={styles.phaseOverviewText}>
-          <h3>Phase Overview</h3>
-        </section>
-
-        <section className={styles.phaseBox}>
-          <h3>Goals</h3>
-          <ul>
-            <li className={styles.checked}>Convince the RP that you are a fish</li>
-            <li>Reference Shakespeare</li>
-            <li>Give a compliment</li>
-          </ul>
-        </section>
-
-        <section className={styles.phaseBox}>
-          <h3>Triggers</h3>
-          <ul>
-            <li className={styles.checked}>Convince the RP that you are a fish</li>
-            <li>Reference Shakespeare</li>
-            <li>Give a compliment</li>
-          </ul>
-        </section>
-
-        <section className={styles.phaseBox}>
-          <h3>Norms</h3>
-          <ul>
-            <li>Rhyme when talking</li>
-            <li>Talk like a fish</li>
-          </ul>
-        </section>
-
-        <section className={styles.phaseBox}>
-          <h3>Conditional Norms</h3>
-          <ul>
-            <li>“RP is sad” - Be nice</li>
-          </ul>
-        </section>
-      </main>
-
-      {/* LOGS */}
-      <aside className={styles.logs}>
-        <h3>Logs</h3>
-        <div className={styles.logHeader}>
-          <span>Global:</span>
-          <button>ALL</button>
-          <button>Add</button>
-          <button className={styles.live}>Live</button>
-        </div>
-        <textarea defaultValue="Example Log: much log"></textarea>
-      </aside>
-
-      {/* FOOTER */}
-      <footer className={styles.controlsSection}>
-        <div className={styles.gestures}>
-          <h4>Controls</h4>
-          <ul>
-            <li>Gesture: Wave Left Hand</li>
-            <li>Gesture: Wave Right Hand</li>
-            <li>Gesture: Left Thumbs Up</li>
-            <li>Gesture: Right Thumbs Up</li>
-          </ul>
-        </div>
-
-        <div className={styles.speech}>
-          <h4>Speech Options</h4>
-          <ul>
-            <li>\"Hello, my name is pepper.\"</li>
-            <li>\"How is the weather today?\"</li>
-            <li>\"I like your outfit, very pretty.\"</li>
-            <li>\"How is your day going?\"</li>
-          </ul>
-        </div>
-
-        <div className={styles.directSpeech}>
-          <h4>Direct Pepper Speech</h4>
-          <ul>
-            <li>[time] Send: *Previous message*</li>
-            <li>[time] Send: *Previous message*</li>
-            <li>[time] Send: *Previous message*</li>
-          </ul>
-          <div className={styles.speechInput}>
-            <input type="text" placeholder="Type message..." />
-            <button>Send</button>
-          </div>
-        </div>
-      </footer>
-    </div>
-  );
-}

src/pages/VisProgPage/VisProg.module.css

@@ -126,3 +126,4 @@
     outline: red solid 2pt;
     filter: drop-shadow(0 0 0.25rem red);
 }
+

src/pages/VisProgPage/VisProg.tsx

@@ -14,7 +14,6 @@ import useFlowStore from './visualProgrammingUI/VisProgStores.tsx';
 import type {FlowState} from './visualProgrammingUI/VisProgTypes.tsx';
 import styles from './VisProg.module.css'
 import { NodeReduces, NodeTypes } from './visualProgrammingUI/NodeRegistry.ts';
-import SaveLoadPanel from './visualProgrammingUI/components/SaveLoadPanel.tsx';
 
 // --| config starting params for flow |--
 
@@ -39,7 +38,6 @@ const selector = (state: FlowState) => ({
   nodes: state.nodes,
   edges: state.edges,
   onNodesChange: state.onNodesChange,
-  onEdgesDelete: state.onEdgesDelete,
   onEdgesChange: state.onEdgesChange,
   onConnect: state.onConnect,
   onReconnectStart: state.onReconnectStart,
@@ -63,7 +61,6 @@ const VisProgUI = () => {
   const {
     nodes, edges,
     onNodesChange,
-    onEdgesDelete,
     onEdgesChange,
     onConnect,
     onReconnect,
@@ -93,7 +90,6 @@ const VisProgUI = () => {
         defaultEdgeOptions={DEFAULT_EDGE_OPTIONS}
         nodeTypes={NodeTypes}
         onNodesChange={onNodesChange}
-        onEdgesDelete={onEdgesDelete}
         onEdgesChange={onEdgesChange}
         onReconnect={onReconnect}
         onReconnectStart={onReconnectStart}
@@ -108,9 +104,6 @@ const VisProgUI = () => {
         <Panel position="top-center" className={styles.dndPanel}>
           <DndToolbar/> {/* contains the drag and drop panel for nodes */}
         </Panel>
-          <Panel position = "bottom-left" className={styles.saveLoadPanel}>
-            <SaveLoadPanel></SaveLoadPanel>
-          </Panel>
         <Panel position="bottom-center">
           <button onClick={() => undo()}>undo</button>
           <button onClick={() => redo()}>Redo</button>

src/pages/VisProgPage/visualProgrammingUI/NodeRegistry.ts

@@ -1,50 +1,14 @@
-import EndNode, {
+import StartNode, { StartConnects, StartReduce } from "./nodes/StartNode";
-  EndConnectionTarget,
+import EndNode, { EndConnects, EndReduce } from "./nodes/EndNode";
-  EndConnectionSource,
+import PhaseNode, { PhaseConnects, PhaseReduce } from "./nodes/PhaseNode";
-  EndDisconnectionTarget,
+import NormNode, { NormConnects, NormReduce } from "./nodes/NormNode";
-  EndDisconnectionSource,
-  EndReduce
-} from "./nodes/EndNode";
 import { EndNodeDefaults } from "./nodes/EndNode.default";
-import StartNode, {
-  StartConnectionTarget,
-  StartConnectionSource,
-  StartDisconnectionTarget,
-  StartDisconnectionSource,
-  StartReduce
-} from "./nodes/StartNode";
 import { StartNodeDefaults } from "./nodes/StartNode.default";
-import PhaseNode, {
-  PhaseConnectionTarget,
-  PhaseConnectionSource,
-  PhaseDisconnectionTarget,
-  PhaseDisconnectionSource,
-  PhaseReduce
-} from "./nodes/PhaseNode";
 import { PhaseNodeDefaults } from "./nodes/PhaseNode.default";
-import NormNode, {
-  NormConnectionTarget,
-  NormConnectionSource,
-  NormDisconnectionTarget,
-  NormDisconnectionSource,
-  NormReduce
-} from "./nodes/NormNode";
 import { NormNodeDefaults } from "./nodes/NormNode.default";
-import GoalNode, {
+import GoalNode, { GoalConnects, GoalReduce } from "./nodes/GoalNode";
-  GoalConnectionTarget,
-  GoalConnectionSource,
-  GoalDisconnectionTarget,
-  GoalDisconnectionSource,
-  GoalReduce
-} from "./nodes/GoalNode";
 import { GoalNodeDefaults } from "./nodes/GoalNode.default";
-import TriggerNode, {
+import TriggerNode, { TriggerConnects, TriggerReduce } from "./nodes/TriggerNode";
-  TriggerConnectionTarget,
-  TriggerConnectionSource,
-  TriggerDisconnectionTarget,
-  TriggerDisconnectionSource,
-  TriggerReduce
-} from "./nodes/TriggerNode";
 import { TriggerNodeDefaults } from "./nodes/TriggerNode.default";
 
 /**
@@ -96,51 +60,15 @@ export const NodeReduces = {
 /**
  * Connection functions for each node type.
  * 
- * These functions define any additional actions a node may perform
+ * These functions define how nodes of a particular type can connect to other nodes.
- * when a new connection is made
  */
-export const NodeConnections = {
+export const NodeConnects = {
-  Targets: {
+  start: StartConnects,
-    start: StartConnectionTarget,
+  end: EndConnects,
-    end: EndConnectionTarget,
+  phase: PhaseConnects,
-    phase: PhaseConnectionTarget,
+  norm: NormConnects,
-    norm: NormConnectionTarget,
+  goal: GoalConnects,
-    goal: GoalConnectionTarget,
+  trigger: TriggerConnects, 
-    trigger: TriggerConnectionTarget,
-  },
-  Sources: {
-    start: StartConnectionSource,
-    end: EndConnectionSource,
-    phase: PhaseConnectionSource,
-    norm: NormConnectionSource,
-    goal: GoalConnectionSource,
-    trigger: TriggerConnectionSource,
-  }
-}
-
-/**
- * Disconnection functions for each node type.
- *
- * These functions define any additional actions a node may perform
- * when a connection is disconnected
- */
-export const NodeDisconnections = {
-  Targets: {
-    start: StartDisconnectionTarget,
-    end: EndDisconnectionTarget,
-    phase: PhaseDisconnectionTarget,
-    norm: NormDisconnectionTarget,
-    goal: GoalDisconnectionTarget,
-    trigger: TriggerDisconnectionTarget,
-  },
-  Sources: {
-    start: StartDisconnectionSource,
-    end: EndDisconnectionSource,
-    phase: PhaseDisconnectionSource,
-    norm: NormDisconnectionSource,
-    goal: GoalDisconnectionSource,
-    trigger: TriggerDisconnectionSource,
-  },
 }
 
 /**

src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx

@@ -9,12 +9,7 @@ import {
   type XYPosition,
 } from '@xyflow/react';
 import type { FlowState } from './VisProgTypes';
-import {
+import { NodeDefaults, NodeConnects, NodeDeletes } from './NodeRegistry';
-  NodeDefaults,
-  NodeConnections as NodeCs,
-  NodeDisconnections as NodeDs,
-  NodeDeletes
-} from './NodeRegistry';
 import { UndoRedo } from "./EditorUndoRedo.ts";
 
 
@@ -76,25 +71,10 @@ const useFlowStore = create<FlowState>(UndoRedo((set, get) => ({
    */
   onNodesChange: (changes) => set({nodes: applyNodeChanges(changes, get().nodes)}),
 
-  onEdgesDelete: (edges) => {
-
-    // we make sure any affected nodes get updated to reflect removal of edges
-    edges.forEach((edge) => {
-        const nodes = get().nodes;
-
-        const sourceNode = nodes.find((n) => n.id == edge.source);
-        const targetNode = nodes.find((n) => n.id == edge.target);
-
-        if (sourceNode) { NodeDs.Sources[sourceNode.type as keyof typeof NodeDs.Sources](sourceNode, edge.target); }
-        if (targetNode) { NodeDs.Targets[targetNode.type as keyof typeof NodeDs.Targets](targetNode, edge.source); }
-      });
-  },
   /**
    * Handles changes to edges triggered by ReactFlow.
    */
-  onEdgesChange: (changes) => {
+  onEdgesChange: (changes) => set({ edges: applyEdgeChanges(changes, get().edges) }),
-    set({ edges: applyEdgeChanges(changes, get().edges) })
-  },
 
   /**
    * Handles creating a new connection between nodes.
@@ -102,16 +82,32 @@ const useFlowStore = create<FlowState>(UndoRedo((set, get) => ({
    */
   onConnect: (connection) => {
     get().pushSnapshot();
-    set({edges: addEdge(connection, get().edges)});
 
-    // We make sure to perform any required data updates on the newly connected nodes
+    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);
 
-    if (sourceNode) { NodeCs.Sources[sourceNode.type as keyof typeof NodeCs.Sources](sourceNode, connection.target); }
+    // In case the nodes weren't found, return basic functionality.
-    if (targetNode) { NodeCs.Targets[targetNode.type as keyof typeof NodeCs.Targets](targetNode, connection.source); }
+    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 });
   },
 
   /**
@@ -120,22 +116,6 @@ const useFlowStore = create<FlowState>(UndoRedo((set, get) => ({
   onReconnect: (oldEdge, newConnection) => {
     get().edgeReconnectSuccessful = true;
     set({ edges: reconnectEdge(oldEdge, newConnection, get().edges) });
-
-    // We make sure to perform any required data updates on the newly reconnected nodes
-    const nodes = get().nodes;
-
-    const oldSourceNode = nodes.find((n) => n.id == oldEdge.source)!;
-    const oldTargetNode = nodes.find((n) => n.id == oldEdge.target)!;
-    const newSourceNode = nodes.find((n) => n.id == newConnection.source)!;
-    const newTargetNode = nodes.find((n) => n.id == newConnection.target)!;
-
-    if (oldSourceNode === newSourceNode && oldTargetNode === newTargetNode) return;
-
-    NodeCs.Sources[newSourceNode.type as keyof typeof NodeCs.Sources](newSourceNode, newConnection.target);
-    NodeCs.Targets[newTargetNode.type as keyof typeof NodeCs.Targets](newTargetNode, newConnection.source);
-
-    NodeDs.Sources[oldSourceNode.type as keyof typeof NodeDs.Sources](oldSourceNode, oldEdge.target);
-    NodeDs.Targets[oldTargetNode.type as keyof typeof NodeDs.Targets](oldTargetNode, oldEdge.source);
   },
 
   onReconnectStart: () => {
@@ -148,21 +128,11 @@ const useFlowStore = create<FlowState>(UndoRedo((set, get) => ({
    * if it is not reconnected to a node after detaching it
    *
    * @param _evt - the event
-   * @param edge - the described edge
+   * @param {{id: string}} edge - the described edge
    */
   onReconnectEnd: (_evt, edge) => {
     if (!get().edgeReconnectSuccessful) {
-      // delete the edge from the flowState
       set({ edges: get().edges.filter((e) => e.id !== edge.id) });
-
-      // update node data to reflect the dropped edge
-      const nodes = get().nodes;
-
-      const sourceNode = nodes.find((n) => n.id == edge.source)!;
-      const targetNode = nodes.find((n) => n.id == edge.target)!;
-
-      NodeDs.Sources[sourceNode.type as keyof typeof NodeDs.Sources](sourceNode, edge.target);
-      NodeDs.Targets[targetNode.type as keyof typeof NodeDs.Targets](targetNode, edge.source);
     }
     set({ edgeReconnectSuccessful: true });
   },

src/pages/VisProgPage/visualProgrammingUI/VisProgTypes.tsx

@@ -1,5 +1,5 @@
 // VisProgTypes.ts
-import type {Edge, OnNodesChange, OnEdgesChange, OnConnect, OnReconnect, Node, OnEdgesDelete} from '@xyflow/react';
+import type { Edge, OnNodesChange, OnEdgesChange, OnConnect, OnReconnect, Node } from '@xyflow/react';
 import type { NodeTypes } from './NodeRegistry';
 import type {FlowSnapshot} from "./EditorUndoRedo.ts";
 
@@ -27,8 +27,6 @@ export type FlowState = {
   /** Handler for changes to nodes triggered by ReactFlow */
   onNodesChange: OnNodesChange;
 
-  onEdgesDelete: OnEdgesDelete;
-
   /** Handler for changes to edges triggered by ReactFlow */
   onEdgesChange: OnEdgesChange;
 
@@ -46,7 +44,7 @@ export type FlowState = {
    * @param _ - event or unused parameter
    * @param edge - the edge that finished reconnecting
    */
-  onReconnectEnd: (_: unknown, edge: Edge) => void;
+  onReconnectEnd: (_: unknown, edge: { id: string }) => void;
 
   /**
    * Deletes a node and any connected edges.

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

@@ -92,7 +92,7 @@ function addNodeToFlow(nodeType: keyof typeof NodeTypes, position: XYPosition) {
     id: id,
     type: nodeType,
     position,
-    data: JSON.parse(JSON.stringify(defaultData))
+    data: {...defaultData}
   }
   addNode(newNode);
 }

src/pages/VisProgPage/visualProgrammingUI/components/SaveLoadPanel.module.css

@@ -1,30 +0,0 @@
-.save-load-panel {
-  border-radius: 0 0 5pt 5pt;
-  background-color: canvas;
-}
-
-label.file-input-button {
-  cursor: pointer;
-  outline: forestgreen solid 2pt;
-  filter: drop-shadow(0 0 0.25rem forestgreen);
-  transition: filter 200ms;
-
-  input[type="file"] {
-    display: none;
-  }
-
-  &:hover {
-    filter: drop-shadow(0 0 0.5rem forestgreen);
-  }
-}
-
-.save-button {
-  text-decoration: none;
-  outline: dodgerblue solid 2pt;
-  filter: drop-shadow(0 0 0.25rem dodgerblue);
-  transition: filter 200ms;
-
-  &:hover {
-    filter: drop-shadow(0 0 0.5rem dodgerblue);
-  }
-}

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

@@ -1,69 +0,0 @@
-import {type ChangeEvent, useRef, useState} from "react";
-import useFlowStore from "../VisProgStores";
-import visProgStyles from "../../VisProg.module.css";
-import styles from "./SaveLoadPanel.module.css";
-import { makeProjectBlob, type SavedProject } from "../../../../utils/SaveLoad";
-
-export default function SaveLoadPanel() {
-  const nodes = useFlowStore((s) => s.nodes);
-  const edges = useFlowStore((s) => s.edges);
-  const setNodes = useFlowStore((s) => s.setNodes);
-  const setEdges = useFlowStore((s) => s.setEdges);
-
-  const [saveUrl, setSaveUrl] = useState<string | null>(null);
-
-  // ref to the file input
-  const inputRef = useRef<HTMLInputElement | null>(null);
-
-  const onSave = async (nameGuess = "visual-program") => {
-    const blob = makeProjectBlob(nameGuess, nodes, edges);
-    const url = URL.createObjectURL(blob);
-    setSaveUrl(url);
-  };
-
-  // input change handler updates the graph with a parsed JSON file
-  const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
-    try {
-      const text = await file.text();
-      const parsed = JSON.parse(text) as SavedProject;
-      if (!parsed.nodes || !parsed.edges) throw new Error("Invalid file format");
-      setNodes(parsed.nodes);
-      setEdges(parsed.edges);
-    } catch (e) {
-      console.error(e);
-      alert("Loading failed. See console.");
-    } finally {
-      // allow re-selecting same file next time
-      if (inputRef.current) inputRef.current.value = "";
-    }
-  };
-
-  const defaultName = "visual-program";
-  return (
-    <div className={`flex-col gap-lg padding-md border-lg ${styles.saveLoadPanel}`}>
-      <div className="description">You can save and load your graph here.</div>
-      <div className={`flex-row gap-lg justify-center`}>
-        <a
-          href={saveUrl ?? "#"}
-          onClick={() => onSave(defaultName)}
-          download={`${defaultName}.json`}
-          className={`${visProgStyles.draggableNode} ${styles.saveButton}`}
-        >
-          Save Graph
-        </a>
-
-        <label className={`${visProgStyles.draggableNode} ${styles.fileInputButton}`}>
-          <input
-            ref={inputRef}
-            type="file"
-            accept=".visprog.json,.json,.txt,application/json,text/plain"
-            onChange={handleFileChange}
-          />
-          Load Graph
-        </label>
-      </div>
-    </div>
-  );
-}

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

@@ -7,7 +7,6 @@ import {
 import { Toolbar } from '../components/NodeComponents';
 import styles from '../../VisProg.module.css'; 
 
-
 /**
  * The typing of this node's data
  */
@@ -52,37 +51,10 @@ export function EndReduce(node: Node, _nodes: Node[]) {
 }
 
 /**
- * This function is called whenever a connection is made with this node type as the target
+ * Any connection functionality that should get called when a connection is made to this node type (end)
- * @param _thisNode the node of this node type which function is called
+ * @param _thisNode the node of which the functionality gets called
- * @param _sourceNodeId the source of the received connection
+ * @param _otherNode the other node which has connected
+ * @param _isThisSource whether this node is the one that is the source of the connection
  */
-export function EndConnectionTarget(_thisNode: Node, _sourceNodeId: string) {
+export function EndConnects(_thisNode: Node, _otherNode: Node, _isThisSource: boolean) {
-  // no additional connection logic exists yet
-}
-
-/**
- * This function is called whenever a connection is made with this node type as the source
- * @param _thisNode the node of this node type which function is called
- * @param _targetNodeId the target of the created connection
- */
-export function EndConnectionSource(_thisNode: Node, _targetNodeId: string) {
-  // no additional connection logic exists yet
-}
-
-/**
- * This function is called whenever a connection is disconnected with this node type as the target
- * @param _thisNode the node of this node type which function is called
- * @param _sourceNodeId the source of the disconnected connection
- */
-export function EndDisconnectionTarget(_thisNode: Node, _sourceNodeId: string) {
-  // no additional connection logic exists yet
-}
-
-/**
- * This function is called whenever a connection is disconnected with this node type as the source
- * @param _thisNode the node of this node type which function is called
- * @param _targetNodeId the target of the diconnected connection
- */
-export function EndDisconnectionSource(_thisNode: Node, _targetNodeId: string) {
-  // no additional connection logic exists yet
 }

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

@@ -75,8 +75,8 @@ export default function GoalNode({id, data}: NodeProps<GoalNode>) {
 
 /**
  * Reduces each Goal, including its children down into its relevant data.
- * @param node The Node Properties of this node.
+ * @param node: The Node Properties of this node.
- * @param _nodes all the nodes in the graph
+ * @param _nodes: all the nodes in the graph
  */
 export function GoalReduce(node: Node, _nodes: Node[]) {
   const data = node.data as GoalNodeData;
@@ -89,37 +89,11 @@ export function GoalReduce(node: Node, _nodes: Node[]) {
 }
 
 /**
- * This function is called whenever a connection is made with this node type as the target
+ * 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 _sourceNodeId the source of the received connection
+ * @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 GoalConnectionTarget(_thisNode: Node, _sourceNodeId: string) {
+export function GoalConnects(_thisNode: Node, _otherNode: Node, _isThisSource: boolean) {
-  // no additional connection logic exists yet
+  // Replace this for connection logic
-}
-
-/**
- * This function is called whenever a connection is made with this node type as the source
- * @param _thisNode the node of this node type which function is called
- * @param _targetNodeId the target of the created connection
- */
-export function GoalConnectionSource(_thisNode: Node, _targetNodeId: string) {
-  // no additional connection logic exists yet
-}
-
-/**
- * This function is called whenever a connection is disconnected with this node type as the target
- * @param _thisNode the node of this node type which function is called
- * @param _sourceNodeId the source of the disconnected connection
- */
-export function GoalDisconnectionTarget(_thisNode: Node, _sourceNodeId: string) {
-  // no additional connection logic exists yet
-}
-
-/**
- * This function is called whenever a connection is disconnected with this node type as the source
- * @param _thisNode the node of this node type which function is called
- * @param _targetNodeId the target of the diconnected connection
- */
-export function GoalDisconnectionSource(_thisNode: Node, _targetNodeId: string) {
-  // no additional connection logic exists yet
 }

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

@@ -60,8 +60,8 @@ export default function NormNode(props: NodeProps<NormNode>) {
 
 /**
  * Reduces each Norm, including its children down into its relevant data.
- * @param node The Node Properties of this node.
+ * @param node: The Node Properties of this node.
- * @param _nodes all the nodes in the graph
+ * @param _nodes: all the nodes in the graph
  */
 export function NormReduce(node: Node, _nodes: Node[]) {
   const data = node.data as NormNodeData;
@@ -73,37 +73,10 @@ export function NormReduce(node: Node, _nodes: Node[]) {
 }
 
 /**
- * This function is called whenever a connection is made with this node type as the target
+ * This function is called whenever a connection is made with this node type (Norm)
  * @param _thisNode the node of this node type which function is called
- * @param _sourceNodeId the source of the received connection
+ * @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 NormConnectionTarget(_thisNode: Node, _sourceNodeId: string) {
+export function NormConnects(_thisNode: Node, _otherNode: Node, _isThisSource: boolean) {
-  // no additional connection logic exists yet
-}
-
-/**
- * This function is called whenever a connection is made with this node type as the source
- * @param _thisNode the node of this node type which function is called
- * @param _targetNodeId the target of the created connection
- */
-export function NormConnectionSource(_thisNode: Node, _targetNodeId: string) {
-  // no additional connection logic exists yet
-}
-
-/**
- * This function is called whenever a connection is disconnected with this node type as the target
- * @param _thisNode the node of this node type which function is called
- * @param _sourceNodeId the source of the disconnected connection
- */
-export function NormDisconnectionTarget(_thisNode: Node, _sourceNodeId: string) {
-  // no additional connection logic exists yet
-}
-
-/**
- * This function is called whenever a connection is disconnected with this node type as the source
- * @param _thisNode the node of this node type which function is called
- * @param _targetNodeId the target of the diconnected connection
- */
-export function NormDisconnectionSource(_thisNode: Node, _targetNodeId: string) {
-  // no additional connection logic exists yet
 }

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

@@ -2,7 +2,7 @@ import {
   Handle,
   type NodeProps,
   Position,
-  type Node
+  type Node,
 } from '@xyflow/react';
 import { Toolbar } from '../components/NodeComponents';
 import styles from '../../VisProg.module.css';
@@ -104,45 +104,15 @@ export function PhaseReduce(node: Node, nodes: Node[]) {
 }
 
 /**
- * This function is called whenever a connection is made with this node type as the target (phase)
+ * This function is called whenever a connection is made with this node type (phase)
- * @param _thisNode the node of this node type which function is called
+ * @param thisNode the node of this node type which function is called
- * @param _sourceNodeId the source of the received connection
+ * @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 PhaseConnectionTarget(_thisNode: Node, _sourceNodeId: string) {
+export function PhaseConnects(thisNode: Node, otherNode: Node, isThisSource: boolean) {
-  const node = _thisNode as PhaseNode
+  console.log("Connect functionality called.")
+  const node = thisNode as PhaseNode
   const data = node.data as PhaseNodeData
-  // we only add none phase nodes to the children
+  if (!isThisSource)
-  if (!(useFlowStore.getState().nodes.find((node) => node.id === _sourceNodeId && node.type === 'phase'))) {
+    data.children.push(otherNode.id)
-    data.children.push(_sourceNodeId)
-  }
-
-}
-
-/**
- * This function is called whenever a connection is made with this node type as the source (phase)
- * @param _thisNode the node of this node type which function is called
- * @param _targetNodeId the target of the created connection
- */
-export function PhaseConnectionSource(_thisNode: Node, _targetNodeId: string) {
-  // no additional connection logic exists yet
-}
-
-/**
- * This function is called whenever a connection is disconnected with this node type as the target (phase)
- * @param _thisNode the node of this node type which function is called
- * @param _sourceNodeId the source of the disconnected connection
- */
-export function PhaseDisconnectionTarget(_thisNode: Node, _sourceNodeId: string) {
-  const node = _thisNode as PhaseNode
-  const data = node.data as PhaseNodeData
-  data.children = data.children.filter((child) => { if (child != _sourceNodeId) return child; });
-}
-
-/**
- * This function is called whenever a connection is disconnected with this node type as the source (phase)
- * @param _thisNode the node of this node type which function is called
- * @param _targetNodeId the target of the diconnected connection
- */
-export function PhaseDisconnectionSource(_thisNode: Node, _targetNodeId: string) {
-  // no additional connection logic exists yet
 }

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

@@ -51,37 +51,10 @@ export function StartReduce(node: Node, _nodes: Node[]) {
 }
 
 /**
- * This function is called whenever a connection is made with this node type as the target
+ * This function is called whenever a connection is made with this node type (start)
  * @param _thisNode the node of this node type which function is called
- * @param _sourceNodeId the source of the received connection
+ * @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 StartConnectionTarget(_thisNode: Node, _sourceNodeId: string) {
+export function StartConnects(_thisNode: Node, _otherNode: Node, _isThisSource: boolean) {
-  // no additional connection logic exists yet
-}
-
-/**
- * This function is called whenever a connection is made with this node type as the source
- * @param _thisNode the node of this node type which function is called
- * @param _targetNodeId the target of the created connection
- */
-export function StartConnectionSource(_thisNode: Node, _targetNodeId: string) {
-  // no additional connection logic exists yet
-}
-
-/**
- * This function is called whenever a connection is disconnected with this node type as the target
- * @param _thisNode the node of this node type which function is called
- * @param _sourceNodeId the source of the disconnected connection
- */
-export function StartDisconnectionTarget(_thisNode: Node, _sourceNodeId: string) {
-  // no additional connection logic exists yet
-}
-
-/**
- * This function is called whenever a connection is disconnected with this node type as the source
- * @param _thisNode the node of this node type which function is called
- * @param _targetNodeId the target of the diconnected connection
- */
-export function StartDisconnectionSource(_thisNode: Node, _targetNodeId: string) {
-  // no additional connection logic exists yet
 }

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

@@ -102,39 +102,13 @@ export function TriggerReduce(node: Node, _nodes: Node[]) {
 }
 
 /**
- * This function is called whenever a connection is made with this node type as the target
+ * This function is called whenever a connection is made with this node type (trigger)
  * @param _thisNode the node of this node type which function is called
- * @param _sourceNodeId the source of the received connection
+ * @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 TriggerConnectionTarget(_thisNode: Node, _sourceNodeId: string) {
+export function TriggerConnects(_thisNode: Node, _otherNode: Node, _isThisSource: boolean) {
-  // no additional connection logic exists yet
-}
   
-/**
- * This function is called whenever a connection is made with this node type as the source
- * @param _thisNode the node of this node type which function is called
- * @param _targetNodeId the target of the created connection
- */
-export function TriggerConnectionSource(_thisNode: Node, _targetNodeId: string) {
-  // no additional connection logic exists yet
-}
-
-/**
- * This function is called whenever a connection is disconnected with this node type as the target
- * @param _thisNode the node of this node type which function is called
- * @param _sourceNodeId the source of the disconnected connection
- */
-export function TriggerDisconnectionTarget(_thisNode: Node, _sourceNodeId: string) {
-  // no additional connection logic exists yet
-}
-
-/**
- * This function is called whenever a connection is disconnected with this node type as the source
- * @param _thisNode the node of this node type which function is called
- * @param _targetNodeId the target of the diconnected connection
- */
-export function TriggerDisconnectionSource(_thisNode: Node, _targetNodeId: string) {
-  // no additional connection logic exists yet
 }
 
 // Definitions for the possible triggers, being keywords and emotions

src/utils/SaveLoad.ts

@@ -1,19 +0,0 @@
-import {type Edge, type Node } from "@xyflow/react";
-
-export type SavedProject = {
-  name: string;
-  savedASavedProject: string; // ISO timestamp
-  nodes: Node[];
-  edges: Edge[];
-};
-
-// Creates a JSON Blob containing the current visual program (nodes + edges)
-export function makeProjectBlob(name: string, nodes: Node[], edges: Edge[]): Blob {
-  const payload = {
-    name,
-    savedAt: new Date().toISOString(),
-    nodes,
-    edges,
-  };
-  return new Blob([JSON.stringify(payload, null, 2)], { type: "application/json" });
-}

test/pages/GesturePage/GesturePage.test.tsx

@@ -0,0 +1 @@
+// maybe later idk

test/pages/visProgPage/visualProgrammingUI/VisProgStores.test.tsx

@@ -1,7 +1,4 @@
 import {act} from '@testing-library/react';
-import type {Connection, Edge, Node} from "@xyflow/react";
-import { NodeDisconnections } from "../../../../src/pages/VisProgPage/visualProgrammingUI/NodeRegistry.ts";
-import type {PhaseNodeData} from "../../../../src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx";
 import useFlowStore from '../../../../src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx';
 import { mockReactFlow } from '../../../setupFlowTests.ts';
 
@@ -9,187 +6,18 @@ beforeAll(() => {
   mockReactFlow();
 });
 
-// default state values for testing,
-const normNode: Node = {
-  id: 'norm-1',
-  type: 'norm',
-  position: { x: 0, y: 0 },
-  data: {
-    label: 'Test Norm',
-    droppable: true,
-    norm: 'Test',
-    hasReduce: true,
-  },
-};
-
-const phaseNode: Node = {
-  id: 'phase-1',
-  type: 'phase',
-  position: { x: 100, y: 0 },
-  data: {
-    label: 'Phase 1',
-    droppable: true,
-    children: ["norm-1"],
-    hasReduce: true,
-  },
-};
-
-const testEdge: Edge = {
-  id: 'xy-edge__1-2',
-  source: 'norm-1',
-  target: 'phase-1',
-  sourceHandle: null,
-  targetHandle: null,
-}
-
-const testStateReconnectEnd = {
-  nodes: [phaseNode, normNode],
-  edges: [testEdge],
-}
-
-const phaseNodeUnconnected = {
-  id: 'phase-2',
-  type: 'phase',
-  position: { x: 100, y: 0 },
-  data: {
-    label: 'Phase 2',
-    droppable: true,
-    children: [],
-    hasReduce: true,
-  },
-};
-
-const testConnection: Connection = {
-  source: 'norm-1',
-  target: 'phase-2',
-  sourceHandle: null,
-  targetHandle: null,
-}
-const testStateOnConnect = {
-  nodes: [phaseNodeUnconnected, normNode],
-  edges: [],
-}
-
 describe('FlowStore Functionality', () => {
   describe('Node changes', () => {
     // currently just using a single function from the ReactFlow library,
     // so testing would mean we are testing already tested behavior.
     // if implementation gets modified tests should be added for custom behavior
   });
-  describe('ReactFlow onEdgesDelete', () => {
-    test('Deleted edge is reflected in removed phaseNode child', () => {
-      const {onEdgesDelete} = useFlowStore.getState();
-
-      useFlowStore.setState({
-        nodes: [{
-          id: 'phase-1',
-          type: 'phase',
-          position: { x: 100, y: 0 },
-          data: {
-            label: 'Phase 1',
-            droppable: true,
-            children: ["norm-1"],
-            hasReduce: true,
-          },
-        },{
-          id: 'norm-1',
-          type: 'norm',
-          position: { x: 0, y: 0 },
-          data: {
-            label: 'Test Norm',
-            droppable: true,
-            norm: 'Test',
-            hasReduce: true,
-          },
-        }],
-        edges: [], // edges is empty as onEdgesDelete is triggered after the edges are deleted
-      })
-
-      act(() => {
-        onEdgesDelete([testEdge])
-      });
-
-      const outcome = useFlowStore.getState();
-      expect((outcome.nodes[0].data as PhaseNodeData).children.length).toBe(0);
-    })
-    test('Deleted edge is reflected in phaseNode,even if normNode was already deleted and caused edge removal', () => {
-      const { onEdgesDelete } = useFlowStore.getState();
-      useFlowStore.setState({
-        nodes: [{
-          id: 'phase-1',
-          type: 'phase',
-          position: { x: 100, y: 0 },
-          data: {
-            label: 'Phase 1',
-            droppable: true,
-            children: ["norm-1"],
-            hasReduce: true,
-          },
-        }],
-        edges: [], // edges is empty as onEdgesDelete is triggered after the edges are deleted
-      })
-
-      act(() => {
-        onEdgesDelete([testEdge]);
-      })
-
-      const outcome = useFlowStore.getState();
-      expect((outcome.nodes[0].data as PhaseNodeData).children.length).toBe(0);
-    })
-    test('edge removal resulting from deletion of targetNode calls only the connection function for the sourceNode', () => {
-      const { onEdgesDelete } = useFlowStore.getState();
-      useFlowStore.setState({
-        nodes: [{
-          id: 'norm-1',
-          type: 'norm',
-          position: { x: 0, y: 0 },
-          data: {
-            label: 'Test Norm',
-            droppable: true,
-            norm: 'Test',
-            hasReduce: true,
-          },
-        }],
-        edges: [], // edges is empty as onEdgesDelete is triggered after the edges are deleted
-      })
-
-      const targetDisconnectSpy = jest.spyOn(NodeDisconnections.Targets, 'phase');
-      const sourceDisconnectSpy = jest.spyOn(NodeDisconnections.Sources, 'norm');
-
-      act(() => {
-        onEdgesDelete([testEdge]);
-      })
-
-      expect(sourceDisconnectSpy).toHaveBeenCalledWith(normNode, 'phase-1');
-      expect(targetDisconnectSpy).not.toHaveBeenCalled();
-
-      sourceDisconnectSpy.mockRestore();
-      targetDisconnectSpy.mockRestore();
-    })
-  })
   describe('Edge changes', () => {
     // currently just using a single function from the ReactFlow library,
     // so testing would mean we are testing already tested behavior.
     // if implementation gets modified tests should be added for custom behavior
   })
   describe('ReactFlow onConnect', () => {
-    test('Adds connecting node to children of phaseNode', () => {
-      const {onConnect} = useFlowStore.getState();
-      useFlowStore.setState({
-        nodes: testStateOnConnect.nodes,
-        edges: testStateOnConnect.edges
-      })
-
-      act(() => {
-        onConnect(testConnection);
-      })
-
-      const outcome = useFlowStore.getState();
-
-      // phaseNode adds the normNode to its children
-      expect((outcome.nodes[0].data as PhaseNodeData).children).toEqual(['norm-1']);
-
-    })
     test('adds an edge when onConnect is triggered', () => {
       const {onConnect} = useFlowStore.getState();
 
@@ -211,53 +39,6 @@ describe('FlowStore Functionality', () => {
     });
   });
   describe('ReactFlow onReconnect', () => {
-    test('PhaseNodes correctly change their children', () => {
-      const {onReconnect} = useFlowStore.getState();
-      useFlowStore.setState({
-        nodes: [{
-          id: 'phase-1',
-          type: 'phase',
-          position: { x: 100, y: 0 },
-          data: {
-            label: 'Phase 1',
-            droppable: true,
-            children: ["norm-1"],
-            hasReduce: true,
-          },
-        },{
-          id: 'phase-2',
-          type: 'phase',
-          position: { x: 100, y: 0 },
-          data: {
-            label: 'Phase 2',
-            droppable: true,
-            children: [],
-            hasReduce: true,
-          },
-        },{
-          id: 'norm-1',
-          type: 'norm',
-          position: { x: 0, y: 0 },
-          data: {
-            label: 'Test Norm',
-            droppable: true,
-            norm: 'Test',
-            hasReduce: true,
-          },
-        }],
-        edges: [testEdge],
-      })
-
-      act(() => {
-        onReconnect(testEdge, testConnection);
-      })
-
-      const outcome = useFlowStore.getState();
-
-      // phaseNodes lose and gain children when norm node's connection is changed from phaseNode to PhaseNodeUnconnected
-      expect((outcome.nodes[1].data as PhaseNodeData).children).toEqual(['norm-1']);
-      expect((outcome.nodes[0].data as PhaseNodeData).children).toEqual([]);
-    })
     test('reconnects an existing edge when onReconnect is triggered', () => {
       const {onReconnect} = useFlowStore.getState();
       const oldEdge = {
@@ -312,63 +93,36 @@ describe('FlowStore Functionality', () => {
       );
     });
 
-
-
     test('successfully removes edge if no successful reconnect occurred', () => {
       const {onReconnectEnd} = useFlowStore.getState();
-      useFlowStore.setState({
+      useFlowStore.setState({edgeReconnectSuccessful: false});
-        edgeReconnectSuccessful: false,
-        edges: testStateReconnectEnd.edges,
-        nodes: testStateReconnectEnd.nodes
-      });
 
       act(() => {
-        onReconnectEnd(null, testEdge);
+        onReconnectEnd(null, {id: 'xy-edge__A-B'});
       });
 
       const updatedState = useFlowStore.getState();
       expect(updatedState.edgeReconnectSuccessful).toBe(true);
       expect(updatedState.edges).toHaveLength(0);
-      expect(updatedState.nodes[0].data.children).toEqual([]);
     });
 
     test('does not remove reconnecting edge if successful reconnect occurred', () => {
       const {onReconnectEnd} = useFlowStore.getState();
-      useFlowStore.setState({
-        edgeReconnectSuccessful: true,
-        edges: [testEdge],
-        nodes: [{
-          id: 'phase-1',
-          type: 'phase',
-          position: { x: 100, y: 0 },
-          data: {
-            label: 'Phase 1',
-            droppable: true,
-            children: ["norm-1"],
-            hasReduce: true,
-          },
-        },{
-          id: 'norm-1',
-          type: 'norm',
-          position: { x: 0, y: 0 },
-          data: {
-            label: 'Test Norm',
-            droppable: true,
-            norm: 'Test',
-            hasReduce: true,
-          },
-        }]
-      });
 
       act(() => {
-        onReconnectEnd(null, testEdge);
+        onReconnectEnd(null, {id: 'xy-edge__A-B'});
       });
 
       const updatedState = useFlowStore.getState();
       expect(updatedState.edgeReconnectSuccessful).toBe(true);
       expect(updatedState.edges).toHaveLength(1);
-      expect(updatedState.edges).toMatchObject([testEdge]);
+      expect(updatedState.edges).toMatchObject([
-      expect(updatedState.nodes[0].data.children).toEqual(["norm-1"]);
+        {
+          id: 'xy-edge__A-B',
+          source: 'A',
+          target: 'B'
+        }]
+      );
     });
   });
   describe('ReactFlow deleteNode', () => {

test/pages/visProgPage/visualProgrammingUI/components/SaveLoadPanel.test.tsx

@@ -1,154 +0,0 @@
-// SaveLoadPanel.all.test.tsx
-import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
-import useFlowStore from '../../../../../src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx';
-import SaveLoadPanel from '../../../../../src/pages/VisProgPage/visualProgrammingUI/components/SaveLoadPanel.tsx';
-import { makeProjectBlob } from '../../../../../src/utils/SaveLoad.ts';
-import { mockReactFlow } from "../../../../setupFlowTests.ts"; // optional helper if present
-
-// helper to read Blob contents in tests (works in Node/Jest env)
-async function blobToText(blob: Blob): Promise<string> {
-  if (typeof (blob as any).text === "function") return await (blob as any).text();
-  if (typeof (blob as any).arrayBuffer === "function") {
-    const buf = await (blob as any).arrayBuffer();
-    return new TextDecoder().decode(buf);
-  }
-  return await new Promise<string>((resolve, reject) => {
-    const fr = new FileReader();
-    fr.onload = () => resolve(String(fr.result));
-    fr.onerror = () => reject(fr.error);
-    fr.readAsText(blob);
-  });
-}
-
-beforeAll(() => {
-  // if you have a mockReactFlow helper used in other tests, call it
-  if (typeof mockReactFlow === "function") mockReactFlow();
-});
-
-beforeEach(() => {
-  // clear and seed the zustand store to a known empty state
-  act(() => {
-    const { setNodes, setEdges } = useFlowStore.getState();
-    setNodes([]);
-    setEdges([]);
-  });
-
-  // Ensure URL.createObjectURL exists so jest.spyOn works
-  if (!URL.createObjectURL) URL.createObjectURL = jest.fn();
-});
-
-afterEach(() => {
-  jest.restoreAllMocks();
-});
-
-describe("SaveLoadPanel - combined tests", () => {
-  test("makeProjectBlob creates a valid JSON blob", async () => {
-    const nodes = [
-      {
-        id: "n1",
-        type: "start",
-        position: { x: 0, y: 0 },
-        data: { label: "Start" },
-      } as any,
-    ];
-    const edges: any[] = [];
-
-    const blob = makeProjectBlob("my-project", nodes, edges);
-    expect(blob).toBeInstanceOf(Blob);
-
-    const text = await blobToText(blob);
-    const parsed = JSON.parse(text);
-
-    expect(parsed.name).toBe("my-project");
-    expect(typeof parsed.savedAt).toBe("string");
-    expect(Array.isArray(parsed.nodes)).toBe(true);
-    expect(Array.isArray(parsed.edges)).toBe(true);
-    expect(parsed.nodes).toEqual(nodes);
-    expect(parsed.edges).toEqual(edges);
-  });
-
-  test("onSave creates a blob URL and sets anchor href", async () => {
-    // Seed the store so onSave has nodes to save
-    act(() => {
-      useFlowStore.getState().setNodes([
-        { id: "start", type: "start", position: { x: 0, y: 0 }, data: { label: "start" } } as any,
-      ]);
-      useFlowStore.getState().setEdges([]);
-    });
-
-    // Ensure createObjectURL exists and spy it
-    if (!URL.createObjectURL) URL.createObjectURL = jest.fn();
-    const createObjectURLSpy = jest.spyOn(URL, "createObjectURL").mockReturnValue("blob:fake-url");
-
-    render(<SaveLoadPanel />);
-
-    const saveAnchor = screen.getByText(/Save Graph/i) as HTMLAnchorElement;
-
-    await act(async () => {
-      fireEvent.click(saveAnchor);
-    });
-
-    expect(createObjectURLSpy).toHaveBeenCalledTimes(1);
-    const blobArg = createObjectURLSpy.mock.calls[0][0];
-    expect(blobArg).toBeInstanceOf(Blob);
-
-    expect(saveAnchor.getAttribute("href")).toBe("blob:fake-url");
-
-    const text = await blobToText(blobArg as Blob);
-    const parsed = JSON.parse(text);
-
-    expect(parsed.name).toBeDefined();
-    expect(parsed.nodes).toBeDefined();
-    expect(parsed.edges).toBeDefined();
-
-    createObjectURLSpy.mockRestore();
-  });
-
-  test("onLoad with invalid JSON does not update store", async () => {
-    const file = new File(["not json"], "bad.json", { type: "application/json" });
-    file.text = jest.fn(() => Promise.resolve(`{"bad json`));
-
-    window.alert = jest.fn();
-
-    render(<SaveLoadPanel />);
-    const input = document.querySelector('input[type="file"]') as HTMLInputElement;
-    expect(input).toBeTruthy();
-
-    // Give some input
-    act(() => {
-      fireEvent.change(input, { target: { files: [file] } });
-    });
-
-    await waitFor(() => {
-      expect(window.alert).toHaveBeenCalledTimes(1);
-
-      const nodesAfter = useFlowStore.getState().nodes;
-      expect(nodesAfter).toHaveLength(0);
-      expect(input.value).toBe("");
-    });
-  });
-
-  test("onLoad resolves to null when no file is chosen (user cancels) and does not update store", async () => {
-    render(<SaveLoadPanel />);
-    const input = document.querySelector('input[type="file"]') as HTMLInputElement;
-    expect(input).toBeTruthy();
-
-    // Click Load to set resolver
-    const loadButton = screen.getByLabelText(/load graph/i);
-
-    await act(async () => {
-      fireEvent.click(loadButton);
-      // simulate user cancelling: change with empty files
-      fireEvent.change(input, { target: { files: [] } });
-      await Promise.resolve();
-    });
-
-    await waitFor(() => {
-      const nodesAfter = useFlowStore.getState().nodes;
-      const edgesAfter = useFlowStore.getState().edges;
-      expect(nodesAfter).toHaveLength(0);
-      expect(edgesAfter).toHaveLength(0);
-      expect(input.value).toBe("");
-    });
-  });
-});

test/pages/visProgPage/visualProgrammingUI/nodes/NormNode.test.tsx

@@ -1,12 +1,8 @@
 import { describe, it, beforeEach } from '@jest/globals';
 import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { renderWithProviders } from '../../../../test-utils/test-utils.tsx';
+import { renderWithProviders } from '../.././/./../../test-utils/test-utils';
-import NormNode, {
+import NormNode, { NormReduce, NormConnects, type NormNodeData } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode'
-  NormReduce,
-  type NormNodeData,
-  NormConnectionSource, NormConnectionTarget
-} from '../../../../../src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode';
 import useFlowStore from '../../../../../src/pages/VisProgPage/visualProgrammingUI/VisProgStores';
 import type { Node } from '@xyflow/react';
 import '@testing-library/jest-dom'
@@ -521,7 +517,7 @@ describe('NormNode', () => {
       };
 
       expect(() => {
-        NormConnectionSource(normNode, phaseNode.id);
+        NormConnects(normNode, phaseNode, true);
       }).not.toThrow();
     });
 
@@ -551,7 +547,7 @@ describe('NormNode', () => {
       };
 
       expect(() => {
-        NormConnectionTarget(normNode, phaseNode.id);
+        NormConnects(normNode, phaseNode, false);
       }).not.toThrow();
     });
 
@@ -569,8 +565,7 @@ describe('NormNode', () => {
       };
 
       expect(() => {
-        NormConnectionTarget(normNode, normNode.id);
+        NormConnects(normNode, normNode, true);
-        NormConnectionSource(normNode, normNode.id);
       }).not.toThrow();
     });
   });

test/pages/visProgPage/visualProgrammingUI/nodes/PhaseNode.test.tsx

@@ -1,101 +0,0 @@
-import useFlowStore from '../../../../../src/pages/VisProgPage/visualProgrammingUI/VisProgStores';
-import type { PhaseNodeData } from "../../../../../src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode";
-import { getByTestId, render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import VisProgPage from '../../../../../src/pages/VisProgPage/VisProg';
-
-
-class ResizeObserver {
-  observe() {}
-  unobserve() {}
-  disconnect() {}
-}
-window.ResizeObserver = ResizeObserver;
-
-jest.mock('@neodrag/react', () => ({
-  useDraggable: (ref: React.RefObject<HTMLElement>, options: any) => {
-    // We access the real useEffect from React to attach a listener
-    // This bridges the gap between the test's userEvent and the component's logic
-    const { useEffect } = jest.requireActual('react');
-    
-    useEffect(() => {
-      const element = ref.current;
-      if (!element) return;
-
-      // When the test fires a "pointerup" (end of click/drag), 
-      // we manually trigger the library's onDragEnd callback.
-      const handlePointerUp = (e: PointerEvent) => {
-        if (options.onDragEnd) {
-          options.onDragEnd({ event: e });
-        }
-      };
-
-      element.addEventListener('pointerup', handlePointerUp as EventListener);
-      return () => {
-        element.removeEventListener('pointerup', handlePointerUp as EventListener);
-      };
-    }, [ref, options]);
-  },
-}));
-
-describe('PhaseNode', () => {
-  it('each created phase gets its own children array, not the same reference ', async () => {
-    const user = userEvent.setup();
-
-    const { container } = render(<VisProgPage />);
-
-    // --- Mock ReactFlow bounding box ---
-    // Your DndToolbar checks these values:
-    const flowEl = container.querySelector('.react-flow');
-    jest.spyOn(flowEl!, 'getBoundingClientRect').mockReturnValue({
-      left: 0,
-      right: 800,
-      top: 0,
-      bottom: 600,
-      width: 800,
-      height: 600,
-      x: 0,
-      y: 0,
-      toJSON: () => {},
-    });
-    
-    // Find the draggable norm node in the toolbar
-    const phaseButton = getByTestId(container, 'draggable-phase')
-    
-    // Simulate dropping phase down in graph (twice)
-    for (let i = 0; i < 2; i++) {
-    await user.pointer([
-      // touch the screen at element1
-      {keys: '[TouchA>]', target: phaseButton},
-      // move the touch pointer to element2
-      {pointerName: 'TouchA', coords: {x: 300, y: 250}},
-      // release the touch pointer at the last position (element2)
-      {keys: '[/TouchA]'},
-    ]);
-    }
-
-    // Find nodes
-    const nodes = useFlowStore.getState().nodes;
-    const p1 = nodes.find((x) => x.id === 'phase-1')!;
-    const p2 = nodes.find((x) => x.id === 'phase-2')!;
-
-    // expect same value, not same reference
-    expect(p1.data.children).not.toBe(p2.data.children);
-    expect(p1.data.children).toEqual(p2.data.children);
-
-    // Add nodes to children
-    const p1_data = p1.data as PhaseNodeData;
-    const p2_data = p2.data as PhaseNodeData;
-    p1_data.children.push("norm-1");
-    p2_data.children.push("norm-2");
-    p2_data.children.push("goal-1");
-
-    // check that after adding, its not the same reference, and its not the same children
-    expect(p1.data.children).not.toBe(p2.data.children);
-    expect(p1.data.children).not.toEqual(p2.data.children);
-    
-    // expect them to have the correct length.
-    expect(p1_data.children.length == 1);
-    expect(p2_data.children.length == 2);
-  });
-});

test/pages/visProgPage/visualProgrammingUI/nodes/StartNode.test.tsx

@@ -2,11 +2,8 @@ import { describe, it } from '@jest/globals';
 import '@testing-library/jest-dom';
 import { screen } from '@testing-library/react';
 import type { Node } from '@xyflow/react';
-import { renderWithProviders } from '../../../../test-utils/test-utils.tsx';
+import { renderWithProviders } from '../.././/./../../test-utils/test-utils';
-import StartNode, {
+import StartNode, { StartReduce, StartConnects } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/nodes/StartNode';
-  StartConnectionSource, StartConnectionTarget,
-  StartReduce
-} from '../../../../../src/pages/VisProgPage/visualProgrammingUI/nodes/StartNode';
 
 
 describe('StartNode', () => {
@@ -94,8 +91,8 @@ describe('StartNode', () => {
         },
       };
 
-      expect(() => StartConnectionSource(startNode, otherNode.id)).not.toThrow();
+      expect(() => StartConnects(startNode, otherNode, true)).not.toThrow();
-      expect(() => StartConnectionTarget(startNode, otherNode.id)).not.toThrow();
+      expect(() => StartConnects(startNode, otherNode, false)).not.toThrow();
     });
   });
 });

test/pages/visProgPage/visualProgrammingUI/nodes/TriggerNode.test.tsx

@@ -1,13 +1,8 @@
 import { describe, it, beforeEach } from '@jest/globals';
 import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { renderWithProviders } from '../../../../test-utils/test-utils.tsx';
+import { renderWithProviders } from '../.././/./../../test-utils/test-utils';
-import TriggerNode, {
+import TriggerNode, { TriggerReduce, TriggerConnects, TriggerNodeCanConnect, type TriggerNodeData } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode';
-  TriggerReduce,
-  TriggerNodeCanConnect,
-  type TriggerNodeData,
-  TriggerConnectionSource, TriggerConnectionTarget
-} from '../../../../../src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode';
 import useFlowStore from '../../../../../src/pages/VisProgPage/visualProgrammingUI/VisProgStores';
 import type { Node } from '@xyflow/react';
 import '@testing-library/jest-dom';
@@ -238,8 +233,8 @@ describe('TriggerNode', () => {
       };
 
       expect(() => {
-        TriggerConnectionSource(node1, node2.id);
+        TriggerConnects(node1, node2, true);
-        TriggerConnectionTarget(node1, node2.id);
+        TriggerConnects(node1, node2, false);
       }).not.toThrow();
     });
 

test/pages/visProgPage/visualProgrammingUI/nodes/UniversalNodes.test.tsx

@@ -1,8 +1,8 @@
 import { describe, beforeEach } from '@jest/globals';
 import { screen } from '@testing-library/react';
-import { renderWithProviders } from '../../../../test-utils/test-utils.tsx';
+import { renderWithProviders } from '../.././/./../../test-utils/test-utils';
 import type { XYPosition } from '@xyflow/react';
-import { NodeTypes, NodeDefaults, NodeConnections, NodeReduces, NodesInPhase } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/NodeRegistry';
+import { NodeTypes, NodeDefaults, NodeConnects, NodeReduces, NodesInPhase } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/NodeRegistry';
 import '@testing-library/jest-dom'
 import { createElement } from 'react';
 import useFlowStore from '../../../../../src/pages/VisProgPage/visualProgrammingUI/VisProgStores';
@@ -87,8 +87,8 @@ describe('NormNode', () => {
       useFlowStore.setState({ nodes: [sourceNode, targetNode] });
 
       // Spy on the connect functions
-      const sourceConnectSpy = jest.spyOn(NodeConnections.Sources, nodeType as keyof typeof NodeConnections.Sources);
+      const sourceConnectSpy = jest.spyOn(NodeConnects, nodeType as keyof typeof NodeConnects);
-      const targetConnectSpy = jest.spyOn(NodeConnections.Targets, 'end');
+      const targetConnectSpy = jest.spyOn(NodeConnects, 'end');
 
       // Simulate connection
       useFlowStore.getState().onConnect({
@@ -99,8 +99,8 @@ describe('NormNode', () => {
       });
 
       // Verify the connect functions were called
-      expect(sourceConnectSpy).toHaveBeenCalledWith(sourceNode, targetNode.id);
+      expect(sourceConnectSpy).toHaveBeenCalledWith(sourceNode, targetNode, true);
-      expect(targetConnectSpy).toHaveBeenCalledWith(targetNode, sourceNode.id);
+      expect(targetConnectSpy).toHaveBeenCalledWith(targetNode, sourceNode, false);
 
       sourceConnectSpy.mockRestore();
       targetConnectSpy.mockRestore();
@@ -130,7 +130,7 @@ describe('NormNode', () => {
       expect(phaseReduceSpy).toHaveBeenCalledWith(phaseNode, [phaseNode, testNode]);
       // Check if this node type is in NodesInPhase and returns false
       const nodesInPhaseFunc = NodesInPhase[nodeType as keyof typeof NodesInPhase];
-      if (nodesInPhaseFunc && !nodesInPhaseFunc() && nodeType !== 'phase') {
+      if (nodesInPhaseFunc && nodesInPhaseFunc() === false && nodeType !== 'phase') {
         // Node is NOT in phase, so it should NOT be called
         expect(nodeReduceSpy).not.toHaveBeenCalled();
       } else {