fix: fixed the program reduce algorithm to be flexable and correctly use the different phase variables.

ref: N25B-294

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

@@ -6,7 +6,9 @@ import {
 } from '@xyflow/react';
 import { Toolbar } from '../components/NodeComponents';
 import styles from '../../VisProg.module.css';
-import { NodeDefaults, NodeReduces } from '../NodeRegistry';
+import { NodeDefaults, NodeReduces, NodesInPhase, NodeTypes } from '../NodeRegistry';
+import useFlowStore from '../VisProgStores';
+import { TextField } from '../../../../components/TextField';
 
 /**
  * The default data dot a phase node
@@ -32,22 +34,33 @@ export type PhaseNode = Node<PhaseNodeData>
  * @returns React.JSX.Element
  */
 export default function PhaseNode(props: NodeProps<Node>) {
+  const data = props.data as PhaseNodeData;
+  const {updateNodeData} = useFlowStore();
+
+  const updateLabel = (value: string) => updateNodeData(props.id, {...data, label: value});
+
   const label_input_id = `phase_${props.id}_label_input`;
+
   return (
     <>
       <Toolbar nodeId={props.id} allowDelete={true}/>
       <div className={`${styles.defaultNode} ${styles.nodePhase}`}>
         <div className={"flex-row gap-sm"}>
-          <label htmlFor={label_input_id}></label>
-          {props.data.label as string}
+          <label htmlFor={label_input_id}>Name:</label>
+          <TextField
+            id={label_input_id}
+            value={data.label}
+            setValue={updateLabel}
+            placeholder={"Phase ..."}
+          />
         </div>
         <Handle type="target" position={Position.Left} id="target"/>
+        <Handle type="target" position={Position.Bottom} id="norms"/>
         <Handle type="source" position={Position.Right} id="source"/>
-        <Handle type="source" position={Position.Bottom} id="norms"/>
       </div>
     </>
   );
-}
+};
 
 /**
  * Reduces each phase, including its children down into its relevant data.
@@ -86,10 +99,53 @@ export function PhaseReduce(node: Node, nodes: Node[]) {
     }
 }
 
+
+/**
+ * Reduces each phase, including its children down into its relevant data.
+ * @param props: The Node Properties of this node.
+ */
+export function PhaseReduce2(node: Node, nodes: Node[]) {
+    const thisnode = node as PhaseNode;
+    const data = thisnode.data as PhaseNodeData;
+
+    // node typings that are not in phase
+    let nodesNotInPhase: string[] = Object.entries(NodesInPhase)
+        .filter(([, f]) => !f())
+        .map(([t]) => t);
+
+    // node typings that then are in phase
+    let nodesInPhase: string[] = Object.entries(NodeTypes)
+        .filter(([t]) => !nodesNotInPhase.includes(t))
+        .map(([t]) => t);
+
+    // children nodes
+    let childrenNodes = nodes.filter((node) => data.children.includes(node.id));
+
+    // Build the result object
+    let result: Record<string, unknown> = {
+        id: thisnode.id,
+        label: data.label,
+    };
+
+    nodesInPhase.forEach((type) => {
+        let typedChildren = childrenNodes.filter((child) => child.type == type);
+        const reducer = NodeReduces[type as keyof typeof NodeReduces];
+        if (!reducer) {
+            console.warn(`No reducer found for node type ${type}`);
+            result[type + "s"] = [];
+        } else {
+            result[type + "s"] = typedChildren.map((child) => reducer(child, nodes));
+        }
+    });
+
+    return result;
+}
+
+
 export function PhaseConnects(thisNode: Node, otherNode: Node, isThisSource: boolean) {
   console.log("Connect functionality called.")
   const node = thisNode as PhaseNode
   const data = node.data as PhaseNodeData
-  if (isThisSource)
+  if (!isThisSource)
     data.children.push(otherNode.id)
 }