refactor: make sure that the droppable styles are kept, update some nodes to reflect their used functionality.

ref: N25B-294

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

@@ -7,6 +7,9 @@ import {
 import { Toolbar } from '../components/NodeComponents';
 import styles from '../../VisProg.module.css'; 
 
+/**
+ * The typing of this node's data
+ */
 export type EndNodeData = {
   label: string;
   droppable: boolean;
@@ -15,6 +18,11 @@ export type EndNodeData = {
 
 export type EndNode = Node<EndNodeData>
 
+/**
+ * Default function to render an end node given its properties
+ * @param props the node's properties
+ * @returns React.JSX.Element
+ */
 export default function EndNode(props: NodeProps<Node>) {
   return (
     <>
@@ -23,13 +31,18 @@ export default function EndNode(props: NodeProps<Node>) {
         <div className={"flex-row gap-sm"}>
         End
         </div>
-        <Handle type="target" position={Position.Bottom} id="norms"/>
-        <Handle type="source" position={Position.Right} id="source"/>
+        <Handle type="target" position={Position.Left} id="target"/>
       </div>
     </>
   );
 }
 
+/**
+ * Functionality for reducing this node into its more compact json program
+ * @param node the node to reduce
+ * @param nodes all nodes present
+ * @returns Dictionary, {id: node.id}
+ */
 export function EndReduce(node: Node, nodes: Node[]) {
   // Replace this for nodes functionality
   if (nodes.length <= -1) { 
@@ -40,6 +53,12 @@ export function EndReduce(node: Node, nodes: Node[]) {
   }
 }
 
+/**
+ * Any connection functionality that should get called when a connection is made to this node
+ * @param thisNode the node of which the functionality gets called
+ * @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 EndConnects(thisNode: Node, otherNode: Node, isThisSource: boolean) {
   // Replace this for connection logic
   if (thisNode == undefined && otherNode == undefined && isThisSource == false) { 

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

@@ -12,10 +12,11 @@ import { TextField } from '../../../../components/TextField';
 import useFlowStore from '../VisProgStores';
 
 /**
- * The default data dot a Goal node
- * @param label: the label of this Goal
+ * 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 children: ID's of children of this node
+ * @param desciption: description of the goal
+ * @param hasReduce: whether this node has reducing functionality (true by default)
  */
 export type GoalNodeData = {
   label: string;

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

@@ -8,12 +8,14 @@ import {
 } from '@xyflow/react';
 import { Toolbar } from '../components/NodeComponents';
 import styles from '../../VisProg.module.css';
+import { TextField } from '../../../../components/TextField';
 
 /**
- * The default data dot a Norm node
- * @param label: the label of this Norm
+ * 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 children: ID's of children of this node
+ * @param normList: list of strings of norms for this node
+ * @param hasReduce: whether this node has reducing functionality (true by default)
  */
 export type NormNodeData = {
   label: string;
@@ -47,7 +49,10 @@ export default function NormNode(props: NodeProps<Node>) {
           <label htmlFor={label_input_id}></label>
           {props.data.label as string}
         </div>
-        {data.normList.map((norm) => (<div>{norm}</div>))}
+        <div>
+          <Norms id={props.id} list={data.normList}/>
+        </div>
+        
         <Handle type="target" position={Position.Right} id="phase"/>
       </div>
     </>
@@ -75,4 +80,25 @@ 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>
+          );
+        })
+      }
+    </>
+  );
 }

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

@@ -13,6 +13,7 @@ import { NodeDefaults, NodeReduces } from '../NodeRegistry';
  * @param label: the label of this phase
  * @param droppable: whether this node is droppable from the drop bar (initialized as true)
  * @param children: ID's of children of this node
+ * @param hasReduce: whether this node has reducing functionality (true by default)
  */
 export type PhaseNodeData = {
   label: string;
@@ -43,7 +44,6 @@ export default function PhaseNode(props: NodeProps<Node>) {
         <Handle type="target" position={Position.Left} id="target"/>
         <Handle type="source" position={Position.Right} id="source"/>
         <Handle type="source" position={Position.Bottom} id="norms"/>
-        <Handle type="source" position={Position.Top} id="norms"/>
       </div>
     </>
   );

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

@@ -25,8 +25,6 @@ export default function StartNode(props: NodeProps<Node>) {
         <div className={"flex-row gap-sm"}>
           Start
         </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"/>
       </div>
     </>

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

@@ -22,8 +22,8 @@ import duplicateIndices from '../../../../utils/duplicateIndices';
 export type TriggerNodeData = {
   label: string;
   droppable: boolean;
-  triggerType: unknown;
-  triggers: [unknown];
+  triggerType: "keywords" | string;
+  triggers: Keyword[] | never;
   hasReduce: boolean;
 };
 
@@ -56,7 +56,7 @@ export default function TriggerNode(props: NodeProps<Node>) {
       )}
       {data.triggerType === "keywords" && (
         <Keywords
-          keywords={[{id: "test", keyword: " test"}]}
+          keywords={data.triggers}
           setKeywords={setKeywords}
         />
       )}