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

ref: N25B-294

src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx

@@ -114,7 +114,7 @@ const useFlowStore = create<FlowState>((set, get) => ({
     set({
       nodes: get().nodes.map((node) => {
         if (node.id === nodeId) {
-          node.data = { ...node.data, ...data };
+          node = { ...node, data: { ...node.data, ...data }};
         }
         return node;
       }),

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

@@ -124,7 +124,7 @@ export function DndToolbar() {
         }
         {droppableNodes.map(({type, data}) => (
           <DraggableNode
-            className={styles.nodeType}
+            className={styles[`draggable-node-${type}`]}
             nodeType={type}
             onDrop={handleNodeDrop}
           >

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

@@ -1,121 +0,0 @@
-import {Handle, type NodeProps, Position} from "@xyflow/react";
-import useFlowStore from "../VisProgStores.tsx";
-import styles from "../../VisProg.module.css";
-import {RealtimeTextField, TextField} from "../../../../components/TextField.tsx";
-import {Toolbar} from "./NodeComponents.tsx";
-import {useState} from "react";
-import duplicateIndices from "../../../../utils/duplicateIndices.ts";
-import type { TriggerNode } from "../nodes/TriggerNode.tsx";
-
-export type EmotionTriggerNodeProps = {
-  type: "emotion";
-  value: string;
-}
-
-type Keyword = { id: string, keyword: string };
-
-export type KeywordTriggerNodeProps = {
-  type: "keywords";
-  value: Keyword[];
-}
-
-export type TriggerNodeProps = EmotionTriggerNodeProps | KeywordTriggerNodeProps;
-
-function KeywordAdder({ addKeyword }: { addKeyword: (keyword: string) => void }) {
-  const [input, setInput] = useState("");
-
-  const text_input_id = "keyword_adder_input";
-
-  return <div className={"flex-row gap-md"}>
-    <label htmlFor={text_input_id}>New Keyword:</label>
-    <RealtimeTextField
-      id={text_input_id}
-      value={input}
-      setValue={setInput}
-      onCommit={() => {
-        if (!input) return;
-        addKeyword(input);
-        setInput("");
-      }}
-      placeholder={"..."}
-      className={"flex-1"}
-    />
-  </div>;
-}
-
-function Keywords({
-  keywords,
-  setKeywords,
-}: {
-  keywords: Keyword[];
-  setKeywords: (keywords: Keyword[]) => void;
-}) {
-  type Interpolatable = string | number | boolean | bigint | null | undefined;
-
-  const inputElementId = (id: Interpolatable) => `keyword_${id}_input`;
-
-  /** Indices of duplicates in the keyword array. */
-  const [duplicates, setDuplicates] = useState<number[]>([]);
-
-  function replace(id: string, value: string) {
-    value = value.trim();
-    const newKeywords = value === ""
-      ? keywords.filter((kw) => kw.id != id)
-      : keywords.map((kw) => kw.id === id ? {...kw, keyword: value} : kw);
-    setKeywords(newKeywords);
-    setDuplicates(duplicateIndices(newKeywords.map((kw) => kw.keyword)));
-  }
-
-  function add(value: string) {
-    value = value.trim();
-    if (value === "") return;
-    const newKeywords = [...keywords, {id: crypto.randomUUID(), keyword: value}];
-    setKeywords(newKeywords);
-    setDuplicates(duplicateIndices(newKeywords.map((kw) => kw.keyword)));
-  }
-
-  return <>
-    <span>Triggers when {keywords.length <= 1 ? "the keyword is" : "all keywords are"} spoken.</span>
-    {[...keywords].map(({id, keyword}, index) => {
-      return <div key={id} className={"flex-row gap-md"}>
-        <label htmlFor={inputElementId(id)}>Keyword:</label>
-        <TextField
-          id={inputElementId(id)}
-          value={keyword}
-          setValue={(val) => replace(id, val)}
-          placeholder={"..."}
-          className={"flex-1"}
-          invalid={duplicates.includes(index)}
-        />
-      </div>;
-    })}
-    <KeywordAdder addKeyword={add} />
-  </>;
-}
-
-// export default function TriggerNodeComponent({
-//   id,
-//   data,
-// }: NodeProps<TriggerNode>) {
-//   const {updateNodeData} = useFlowStore();
-
-//   const setKeywords = (keywords: Keyword[]) => {
-//     updateNodeData(id, {...data, value: keywords});
-//   }
-
-//   return <>
-//     <Toolbar nodeId={id} allowDelete={true}/>
-//     <div className={`${styles.defaultNode} ${styles.nodeTrigger} flex-col gap-sm`}>
-//       {data.type === "emotion" && (
-//         <div className={"flex-row gap-md"}>Emotion?</div>
-//       )}
-//       {data.type === "keywords" && (
-//         <Keywords
-//           keywords={data.value}
-//           setKeywords={setKeywords}
-//         />
-//       )}
-//       <Handle type="source" position={Position.Right} id="TriggerSource"/>
-//     </div>
-//   </>;
-// }

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="target" position={Position.Left} id="target"/>
-        <Handle type="source" position={Position.Right} id="source"/>
       </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
+ * The default data dot a phase node
- * @param label: the label of this Goal
+ * @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
+ * The default data dot a phase node
- * @param label: the label of this Norm
+ * @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>
     </>
@@ -76,3 +81,24 @@ export function NormConnects(thisNode: Node, otherNode: Node, isThisSource: bool
     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;
+  triggerType: "keywords" | string;
-  triggers: [unknown];
+  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}
         />
       )}