src/pages/VisProgPage/VisProg.tsx

@@ -64,35 +64,34 @@ const VisProgUI = () => {
   } = useFlowStore(useShallow(selector)); // instructs the editor to use the corresponding functions from the FlowStore
 
   return (
-    <div className={styles.outerEditorContainer}>
-      <div className={styles.innerEditorContainer}>
-        <ReactFlow
-          nodes={nodes}
-          edges={edges}
-          defaultEdgeOptions={DEFAULT_EDGE_OPTIONS}
-          nodeTypes={NodeTypes}
-          onNodesChange={onNodesChange}
-          onEdgesChange={onEdgesChange}
-          onReconnect={onReconnect}
-          onReconnectStart={onReconnectStart}
-          onReconnectEnd={onReconnectEnd}
-          onConnect={onConnect}
-          snapToGrid
-          fitView
-          proOptions={{hideAttribution: true}}
-        >
-          <Panel position="top-center" className={styles.dndPanel}>
-            <DndToolbar/> {/* contains the drag and drop panel for nodes */}
-          </Panel>
-          <Controls/>
-          <Background/>
-        </ReactFlow>
-      </div>
+    <div className={`${styles.innerEditorContainer} round-lg border-lg`}>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        defaultEdgeOptions={DEFAULT_EDGE_OPTIONS}
+        nodeTypes={NodeTypes}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onReconnect={onReconnect}
+        onReconnectStart={onReconnectStart}
+        onReconnectEnd={onReconnectEnd}
+        onConnect={onConnect}
+        snapToGrid
+        fitView
+        proOptions={{hideAttribution: true}}
+      >
+        <Panel position="top-center" className={styles.dndPanel}>
+          <DndToolbar/> {/* contains the drag and drop panel for nodes */}
+        </Panel>
+        <Controls/>
+        <Background/>
+      </ReactFlow>
     </div>
   );
 };
 
 
+
 /**
  * Places the VisProgUI component inside a ReactFlowProvider
  *
@@ -112,6 +111,7 @@ function VisualProgrammingUI() {
 function runProgram() {
   const program = graphReducer();
   console.log(program);
+  console.log(JSON.stringify(program, null, 2));
 }
 
 /**

src/pages/VisProgPage/visualProgrammingUI/NodeRegistry.ts

@@ -6,12 +6,18 @@ import { EndNodeDefaults } from "./nodes/EndNode.default";
 import { StartNodeDefaults } from "./nodes/StartNode.default";
 import { PhaseNodeDefaults } from "./nodes/PhaseNode.default";
 import { NormNodeDefaults } from "./nodes/NormNode.default";
+import GoalNode, { GoalConnects, GoalReduce } from "./nodes/GoalNode";
+import { GoalNodeDefaults } from "./nodes/GoalNode.default";
+import TriggerNode, { TriggerConnects, TriggerReduce } from "./nodes/TriggerNode";
+import { TriggerNodeDefaults } from "./nodes/TriggerNode.default";
 
 export const NodeTypes = {
   start: StartNode,
   end: EndNode,
   phase: PhaseNode,
   norm: NormNode,
+  goal: GoalNode,
+  trigger: TriggerNode,
 };
 
 // Default node data for creation 
@@ -20,6 +26,8 @@ export const NodeDefaults = {
   end: EndNodeDefaults,
   phase: PhaseNodeDefaults,
   norm: NormNodeDefaults,
+  goal: GoalNodeDefaults,
+  trigger: TriggerNodeDefaults,
 };
 
 export const NodeReduces = {
@@ -27,6 +35,8 @@ export const NodeReduces = {
   end: EndReduce,
   phase: PhaseReduce,
   norm: NormReduce,
+  goal: GoalReduce,
+  trigger: TriggerReduce,
 }
 
 export const NodeConnects = {
@@ -34,4 +44,13 @@ export const NodeConnects = {
   end: EndConnects,
   phase: PhaseConnects,
   norm: NormConnects,
+  goal: GoalConnects,
+  trigger: TriggerConnects,
+}
+
+// Function to tell the visual program if we're allowed to delete them...
+// Right now it doesn't take in any values, but that could also be done later.
+export const NodeDeletes = {
+  start: () => false,
+  end: () => false,
 }

src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx

@@ -9,7 +9,7 @@ import {
   type XYPosition,
 } from '@xyflow/react';
 import type { FlowState } from './VisProgTypes';
-import { NodeDefaults, NodeConnects } from './NodeRegistry';
+import { NodeDefaults, NodeConnects, NodeDeletes } from './NodeRegistry';
 
 
 /**
@@ -20,21 +20,22 @@ import { NodeDefaults, NodeConnects } from './NodeRegistry';
  * @param data the data in the node to create
  * @constructor
  */
-function createNode(id: string, type: string, position: XYPosition, data: Record<string, unknown>) {
+function createNode(id: string, type: string, position: XYPosition, data: Record<string, unknown>, deletable? : boolean) {
   const defaultData = NodeDefaults[type as keyof typeof NodeDefaults]
   const newData = {
       id: id,
       type: type,
       position: position,
       data: data,
+      deletable: deletable,
   }
   return {...defaultData, ...newData}
 }
 
 //* Initial nodes, created by using createNode. */
 const initialNodes : Node[] = [
-    createNode('start', 'start', {x: 100, y: 100}, {label: "Start"}),
-    createNode('end', 'end', {x: 370, y: 100}, {label: "End"}),
+    createNode('start', 'start', {x: 100, y: 100}, {label: "Start"}, false),
+    createNode('end', 'end', {x: 370, y: 100}, {label: "End"}, false),
     createNode('phase-1', 'phase',  {x:200, y:100}, {label: "Phase 1", children: ['end', 'start']}),
     createNode('norms-1', 'norm',  {x:-200, y:100}, {label: "Initial Norms", normList: ["Be a robot", "get good"]}),     
 ];
@@ -92,12 +93,20 @@ const useFlowStore = create<FlowState>((set, get) => ({
     set({ edgeReconnectSuccessful: true });
   },
 
-  deleteNode: (nodeId) =>
-    set({
+  deleteNode: (nodeId) => {
+    // Let's find our node to check if they have a special deletion function
+    const ourNode = get().nodes.find((n)=>n.id==nodeId);
+    const ourFunction = Object.entries(NodeDeletes).find(([t])=>t==ourNode?.type)?.[1]
+    
+    // If there's no function, OR, our function tells us we can delete it, let's do so...
+    if (ourFunction == undefined || ourFunction()) {
+      set({
       nodes: get().nodes.filter((n) => n.id !== nodeId),
       edges: get().edges.filter((e) => e.source !== nodeId && e.target !== nodeId),
-    }),
+      })}
+    },
 
+  
   setNodes: (nodes) => set({ nodes }),
   setEdges: (edges) => set({ edges }),
 

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

@@ -18,7 +18,7 @@ export type EndNode = Node<EndNodeData>
 export default function EndNode(props: NodeProps<Node>) {
   return (
     <>
-      <Toolbar nodeId={props.id} allowDelete={true}/>
+      <Toolbar nodeId={props.id} allowDelete={false}/>
       <div className={`${styles.defaultNode} ${styles.nodeEnd}`}>
         <div className={"flex-row gap-sm"}>
         End

src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.default.ts

@@ -6,6 +6,7 @@ import type { GoalNodeData } from "./GoalNode";
 export const GoalNodeDefaults: GoalNodeData = {
   label: "Goal Node",
   droppable: true,
-  GoalList: [],
+  description: "The robot will strive towards this goal",
+  achieved: false,
   hasReduce: true,
 };

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

@@ -8,6 +8,8 @@ import {
 } from '@xyflow/react';
 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 Goal node
@@ -17,8 +19,9 @@ import styles from '../../VisProg.module.css';
  */
 export type GoalNodeData = {
   label: string;
+  description: string;
   droppable: boolean;
-  GoalList: string[];
+  achieved: boolean;
   hasReduce: boolean;
 };
 
@@ -37,23 +40,47 @@ export function GoalNodeCanConnect(connection: Connection | Edge): boolean {
  * @returns React.JSX.Element
  */
 export default function GoalNode(props: NodeProps<Node>) {
-  const label_input_id = `Goal_${props.id}_label_input`;
   const data = props.data as GoalNodeData;
-  return (
-    <>
-      <Toolbar nodeId={props.id} allowDelete={true}/>
-      <div className={`${styles.defaultNode} ${styles.nodeGoal}`}>
-        <div className={"flex-row gap-sm"}>
-          <label htmlFor={label_input_id}></label>
-          {props.data.label as string}
-        </div>
-        {data.GoalList.map((Goal) => (<div>{Goal}</div>))}
-        <Handle type="target" position={Position.Right} id="phase"/>
+  const {updateNodeData} = useFlowStore();
+
+  const text_input_id = `goal_${props.id}_text_input`;
+  const checkbox_id = `goal_${props.id}_checkbox`;
+
+  const setDescription = (value: string) => {
+    updateNodeData(props.id, {...data, description: value});
+  }
+
+  const setAchieved = (value: boolean) => {
+    updateNodeData(props.id, {...data, achieved: value});
+  }
+
+  return <>
+    <Toolbar nodeId={props.id} allowDelete={true}/>
+    <div className={`${styles.defaultNode} ${styles.nodeGoal} flex-col gap-sm`}>
+      <div className={"flex-row gap-md"}>
+        <label htmlFor={text_input_id}>Goal:</label>
+        <TextField
+          id={text_input_id}
+          value={data.description}
+          setValue={(val) => setDescription(val)}
+          placeholder={"To ..."}
+        />
       </div>
-    </>
-  );
+      <div className={"flex-row gap-md align-center"}>
+        <label htmlFor={checkbox_id}>Achieved:</label>
+        <input
+          id={checkbox_id}
+          type={"checkbox"}
+          value={data.achieved ? "checked" : ""}
+          onChange={(e) => setAchieved(e.target.checked)}
+        />
+      </div>
+      <Handle type="source" position={Position.Right} id="GoalSource"/>
+    </div>
+  </>;
 }
 
+
 /**
  * Reduces each Goal, including its children down into its relevant data.
  * @param props: The Node Properties of this node.
@@ -66,7 +93,7 @@ export function GoalReduce(node: Node, nodes: Node[]) {
   const data = node.data as GoalNodeData;
     return {
       label: data.label,
-      list: data.GoalList,
+      achieved: data.achieved,
     }
 }
 

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

@@ -20,7 +20,7 @@ export type StartNode = Node<StartNodeData>
 export default function StartNode(props: NodeProps<Node>) {
   return (
     <>
-      <Toolbar nodeId={props.id} allowDelete={true}/>
+      <Toolbar nodeId={props.id} allowDelete={false}/>
       <div className={`${styles.defaultNode} ${styles.nodeStart}`}>
         <div className={"flex-row gap-sm"}>
           Start

src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.default.ts

@@ -6,6 +6,7 @@ import type { TriggerNodeData } from "./TriggerNode";
 export const TriggerNodeDefaults: TriggerNodeData = {
   label: "Trigger Node",
   droppable: true,
-  TriggerList: [],
+  triggers: [{id: "help-trigger", keyword:"help"}],
+  triggerType: "keywords",
   hasReduce: true,
 };

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

@@ -8,6 +8,10 @@ import {
 } from '@xyflow/react';
 import { Toolbar } from '../components/NodeComponents';
 import styles from '../../VisProg.module.css';
+import useFlowStore from '../VisProgStores';
+import { useState } from 'react';
+import { RealtimeTextField, TextField } from '../../../../components/TextField';
+import duplicateIndices from '../../../../utils/duplicateIndices';
 
 /**
  * The default data dot a Trigger node
@@ -18,12 +22,12 @@ import styles from '../../VisProg.module.css';
 export type TriggerNodeData = {
   label: string;
   droppable: boolean;
-  TriggerList: string[];
+  triggerType: unknown;
+  triggers: [unknown];
   hasReduce: boolean;
 };
 
 
-
 export type TriggerNode = Node<TriggerNodeData>
 
 
@@ -37,21 +41,28 @@ export function TriggerNodeCanConnect(connection: Connection | Edge): boolean {
  * @returns React.JSX.Element
  */
 export default function TriggerNode(props: NodeProps<Node>) {
-  const label_input_id = `Trigger_${props.id}_label_input`;
-  const data = props.data as TriggerNodeData;
-  return (
-    <>
-      <Toolbar nodeId={props.id} allowDelete={true}/>
-      <div className={`${styles.defaultNode} ${styles.nodeTrigger}`}>
-        <div className={"flex-row gap-sm"}>
-          <label htmlFor={label_input_id}></label>
-          {props.data.label as string}
-        </div>
-        {data.TriggerList.map((Trigger) => (<div>{Trigger}</div>))}
-        <Handle type="target" position={Position.Right} id="phase"/>
-      </div>
-    </>
-  );
+  const data = props.data as TriggerNodeData
+  const {updateNodeData} = useFlowStore();
+
+  const setKeywords = (keywords: Keyword[]) => {
+    updateNodeData(props.id, {...data, triggers: keywords});
+  }
+
+  return <>
+    <Toolbar nodeId={props.id} allowDelete={true}/>
+    <div className={`${styles.defaultNode} ${styles.nodeTrigger} flex-col gap-sm`}>
+      {data.triggerType === "emotion" && (
+        <div className={"flex-row gap-md"}>Emotion?</div>
+      )}
+      {data.triggerType === "keywords" && (
+        <Keywords
+          keywords={[{id: "test", keyword: " test"}]}
+          setKeywords={setKeywords}
+        />
+      )}
+      <Handle type="source" position={Position.Right} id="TriggerSource"/>
+    </div>
+  </>;
 }
 
 /**
@@ -66,7 +77,7 @@ export function TriggerReduce(node: Node, nodes: Node[]) {
   const data = node.data as TriggerNodeData;
     return {
       label: data.label,
-      list: data.TriggerList,
+      list: data.triggers,
     }
 }
 
@@ -75,4 +86,91 @@ export function TriggerConnects(thisNode: Node, otherNode: Node, isThisSource: b
   if (thisNode == undefined && otherNode == undefined && isThisSource == false) { 
     console.warn("Impossible node connection called in EndConnects")
   }
+}
+
+
+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} />
+  </>;
 }