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

ref: N25B-294

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

@@ -9,18 +9,19 @@ import {
 import { Toolbar } from '../components/NodeComponents';
 import styles from '../../VisProg.module.css';
 import { TextField } from '../../../../components/TextField';
+import useFlowStore from '../VisProgStores';
 
 /**
  * The default data dot a phase node
  * @param label: the label of this phase
  * @param droppable: whether this node is droppable from the drop bar (initialized as true)
- * @param normList: list of strings of norms for this node
+ * @param norm: list of strings of norms for this node
  * @param hasReduce: whether this node has reducing functionality (true by default)
  */
 export type NormNodeData = {
   label: string;
   droppable: boolean;
-  normList: string[];
+  norm: string;
   hasReduce: boolean;
 };
 
@@ -39,25 +40,32 @@ export function NormNodeCanConnect(connection: Connection | Edge): boolean {
  * @returns React.JSX.Element
  */
 export default function NormNode(props: NodeProps<Node>) {
-  const label_input_id = `Norm_${props.id}_label_input`;
   const data = props.data as NormNodeData;
-  return (
-    <>
-      <Toolbar nodeId={props.id} allowDelete={true}/>
-      <div className={`${styles.defaultNode} ${styles.nodeNorm}`}>
-        <div className={"flex-row gap-sm"}>
-          <label htmlFor={label_input_id}></label>
-          {props.data.label as string}
-        </div>
-        <div>
-          <Norms id={props.id} list={data.normList}/>
-        </div>
-        
-        <Handle type="target" position={Position.Right} id="phase"/>
+  const {updateNodeData} = useFlowStore();
+
+  const text_input_id = `norm_${props.id}_text_input`;
+
+  const setValue = (value: string) => {
+    updateNodeData(props.id, {norm: value});
+  }
+
+  return <>
+    <Toolbar nodeId={props.id} allowDelete={true}/>
+    <div className={`${styles.defaultNode} ${styles.nodeNorm}`}>
+      <div className={"flex-row gap-sm"}>
+        <label htmlFor={text_input_id}>Norm :</label>
+        <TextField
+          id={text_input_id}
+          value={data.norm}
+          setValue={(val) => setValue(val)}
+          placeholder={"Pepper should ..."}
+        />
       </div>
-    </>
-  );
-}
+      <Handle type="source" position={Position.Right} id="norms"/>
+    </div>
+  </>;
+};
+
 
 /**
  * Reduces each Norm, including its children down into its relevant data.
@@ -70,8 +78,9 @@ export function NormReduce(node: Node, nodes: Node[]) {
   } 
   const data = node.data as NormNodeData;
     return {
+      id: node.id,
       label: data.label,
-      list: data.normList,
+      norm: data.norm,
     }
 }
 
@@ -80,25 +89,4 @@ export function NormConnects(thisNode: Node, otherNode: Node, isThisSource: bool
   if (thisNode == undefined && otherNode == undefined && isThisSource == false) { 
     console.warn("Impossible node connection called in EndConnects")
   }
-}
-
-function Norms(props: { id: string; list: string[] }) {
-  const { id, list } = props;
-  return (
-    <>
-      <span> The norms that the robot will uphold:</span>
-      {
-        list.map((norm, idx) => {
-          return (
-            <div key={`${id}_${idx}`} className={"flex-row gap-md"}>
-              <TextField
-                value={norm}
-                setValue={() => { return; }}
-              />
-            </div>
-          );
-        })
-      }
-    </>
-  );
 }