src/pages/VisProgPage/VisProg.tsx

@@ -109,9 +109,20 @@ function VisualProgrammingUI() {
 
 // currently outputs the prepared program to the console
 function runProgram() {
-  const program = graphReducer();
-  console.log(program);
+  const phases = graphReducer();
+  const program = {phases}
   console.log(JSON.stringify(program, null, 2));
+  fetch(
+    "http://localhost:8000/program",
+    {
+      method: "POST",
+      headers: {"Content-Type": "application/json"},
+      body: JSON.stringify(program),
+    }
+  ).then((res) => {
+    if (!res.ok) throw new Error("Failed communicating with the backend.")
+    console.log("Successfully sent the program to the backend.");
+  }).catch(() => console.log("Failed to send program to the backend."));
 }
 
 /**

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

@@ -15,10 +15,10 @@ import duplicateIndices from '../../../../utils/duplicateIndices';
 
 /**
  * The default data structure for a Trigger node
- * 
+ *
  * Represents configuration for a node that activates when a specific condition is met,
  * such as keywords being spoken or emotions detected.
- * 
+ *
  * @property label: the display label of this Trigger node.
  * @property droppable: Whether this node can be dropped from the toolbar (default: true).
  * @property triggerType - The type of trigger ("keywords" or a custom string).
@@ -50,7 +50,7 @@ export function TriggerNodeCanConnect(connection: Connection | Edge): boolean {
 /**
  * Defines how a Trigger node should be rendered
  * @param props - Node properties provided by React Flow, including `id` and `data`.
- * @returns The rendered TriggerNode React element (React.JSX.Element). 
+ * @returns The rendered TriggerNode React element (React.JSX.Element).
  */
 export default function TriggerNode(props: NodeProps<TriggerNode>) {
   const data = props.data;
@@ -88,11 +88,21 @@ export function TriggerReduce(node: Node, nodes: Node[]) {
   if (nodes.length <= -1) { 
     console.warn("Impossible nodes length in TriggerReduce") 
   } 
-  const data = node.data as TriggerNodeData;
-    return {
-      label: data.label,
-      list: data.triggers,
-    }
+  const data = node.data;
+  switch (data.triggerType) {
+    case "keywords":
+      return {
+        id: node.id,
+        type: "keywords",
+        label: data.label,
+        keywords: data.triggers,
+      };
+    default:
+      return {
+        ...data,
+        id: node.id,
+      };
+  }
 }
 
 /**
@@ -129,7 +139,6 @@ export type KeywordTriggerNodeProps = {
 /** Union type for all possible Trigger node configurations. */
 export type TriggerNodeProps = EmotionTriggerNodeProps | KeywordTriggerNodeProps;
 
-
 /**
  * Renders an input element that allows users to add new keyword triggers.
  *