src/pages/VisProgPage/VisProg.module.css

@@ -7,31 +7,6 @@
     height: 100%;
 }
 
-
-
-.node-text-input {
-    border: 1px solid transparent;
-    border-radius: 5pt;
-    padding: 4px 8px;
-    outline: none;
-    background-color: white;
-    transition: border-color 0.2s, box-shadow 0.2s;
-    cursor: text;
-}
-
-.node-text-input:focus {
-    border-color: gainsboro;
-}
-
-.node-text-input:read-only {
-    cursor: pointer;
-    background-color: whitesmoke;
-}
-
-.node-text-input:read-only:hover {
-    border-color: gainsboro;
-}
-
 .dnd-panel {
     margin-inline-start: auto;
     margin-inline-end: auto;

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

@@ -1,5 +1,4 @@
-import {
+import { NodeToolbar } from '@xyflow/react';
-  NodeToolbar} from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import useFlowStore from "../VisProgStores.tsx";
 

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

@@ -23,7 +23,7 @@ export type EndNode = Node<EndNodeData>
  * @param props the node's properties
  * @returns React.JSX.Element
  */
-export default function EndNode(props: NodeProps<Node>) {
+export default function EndNode(props: NodeProps<EndNode>) {
   return (
     <>
       <Toolbar nodeId={props.id} allowDelete={false}/>

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

@@ -32,8 +32,8 @@ export type GoalNode = Node<GoalNodeData>
  * @param props NodeProps, like id, label, children
  * @returns React.JSX.Element
  */
-export default function GoalNode(props: NodeProps<Node>) {
+export default function GoalNode(props: NodeProps<GoalNode>) {
-  const data = props.data as GoalNodeData;
+  const data = props.data
   const {updateNodeData} = useFlowStore();
 
   const text_input_id = `goal_${props.id}_text_input`;
@@ -76,7 +76,8 @@ export default function GoalNode(props: NodeProps<Node>) {
 
 /**
  * Reduces each Goal, including its children down into its relevant data.
- * @param props: The Node Properties of this node.
+ * @param node: The Node Properties of this node.
+ * @param nodes: all the nodes in the graph
  */
 export function GoalReduce(node: Node, nodes: Node[]) {
   // Replace this for nodes functionality

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

@@ -30,8 +30,8 @@ export type NormNode = Node<NormNodeData>
  * @param props NodeProps, like id, label, children
  * @returns React.JSX.Element
  */
-export default function NormNode(props: NodeProps<Node>) {
+export default function NormNode(props: NodeProps<NormNode>) {
-  const data = props.data as NormNodeData;
+  const data = props.data;
   const {updateNodeData} = useFlowStore();
 
   const text_input_id = `norm_${props.id}_text_input`;
@@ -60,7 +60,8 @@ export default function NormNode(props: NodeProps<Node>) {
 
 /**
  * Reduces each Norm, including its children down into its relevant data.
- * @param props: The Node Properties of this node.
+ * @param node: The Node Properties of this node.
+ * @param nodes: all the nodes in the graph
  */
 export function NormReduce(node: Node, nodes: Node[]) {
   // Replace this for nodes functionality

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

@@ -31,8 +31,8 @@ export type PhaseNode = Node<PhaseNodeData>
  * @param props NodeProps, like id, label, children
  * @returns React.JSX.Element
  */
-export default function PhaseNode(props: NodeProps<Node>) {
+export default function PhaseNode(props: NodeProps<PhaseNode>) {
-  const data = props.data as PhaseNodeData;
+  const data = props.data;
   const {updateNodeData} = useFlowStore();
   const updateLabel = (value: string) => updateNodeData(props.id, {...data, label: value});
   const label_input_id = `phase_${props.id}_label_input`;

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

@@ -17,7 +17,13 @@ export type StartNodeData = {
 
 export type StartNode = Node<StartNodeData>
 
-export default function StartNode(props: NodeProps<Node>) {
+
+/**
+ * Defines how a Norm node should be rendered
+ * @param props NodeProps, like id, label, children
+ * @returns React.JSX.Element
+ */
+export default function StartNode(props: NodeProps<StartNode>) {
   return (
     <>
       <Toolbar nodeId={props.id} allowDelete={false}/>
@@ -31,6 +37,12 @@ export default function StartNode(props: NodeProps<Node>) {
   );
 }
 
+/**
+ * The reduce function for this node type.
+ * @param node this node
+ * @param nodes all the nodes in the graph
+ * @returns a reduced structure of this node
+ */
 export function StartReduce(node: Node, nodes: Node[]) {
   // Replace this for nodes functionality
   if (nodes.length <= -1) { 

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

@@ -40,8 +40,8 @@ export function TriggerNodeCanConnect(connection: Connection | Edge): boolean {
  * @param props NodeProps, like id, label, children
  * @returns React.JSX.Element
  */
-export default function TriggerNode(props: NodeProps<Node>) {
+export default function TriggerNode(props: NodeProps<TriggerNode>) {
-  const data = props.data as TriggerNodeData
+  const data = props.data;
   const {updateNodeData} = useFlowStore();
 
   const setKeywords = (keywords: Keyword[]) => {
@@ -67,7 +67,8 @@ export default function TriggerNode(props: NodeProps<Node>) {
 
 /**
  * Reduces each Trigger, including its children down into its relevant data.
- * @param props: The Node Properties of this node.
+ * @param node: The Node Properties of this node.
+ * @param nodes: all the nodes in the graph.
  */
 export function TriggerReduce(node: Node, nodes: Node[]) {
   // Replace this for nodes functionality