feat: added a behavior program reduction algorithm

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

@@ -11,6 +11,8 @@ import {
 } from 'react';
 import useFlowStore from "../VisProgStores.tsx";
 import styles from "../../VisProg.module.css"
+import type {AppNode, PhaseNode, NormNode} from "../VisProgTypes.tsx";
+
 
 
 /**
@@ -68,28 +70,45 @@ function DraggableNode({className, children, nodeType, onDrop}: DraggableNodePro
 // eslint-disable-next-line react-refresh/only-export-components
 export function addNode(nodeType: string, position: XYPosition) {
   const {setNodes} = useFlowStore.getState();
-  const nds = useFlowStore.getState().nodes;
+  const nds : AppNode[] = useFlowStore.getState().nodes;
   const newNode = () => {
     switch (nodeType) {
       case "phase":
       {
-        const phaseNumber = nds.filter((node) => node.type === 'phase').length;
-        return {
+        const phaseNodes= nds.filter((node) => node.type === 'phase');
+        let phaseNumber;
+        if (phaseNodes.length > 0) {
+          const finalPhaseId : number = +(phaseNodes[phaseNodes.length - 1].id.split('-')[1]);
+          phaseNumber = finalPhaseId + 1;
+        } else {
+          phaseNumber = 1;
+        }
+        const phaseNode : PhaseNode = {
           id: `phase-${phaseNumber}`,
           type: nodeType,
           position,
           data: {label: 'new', number: phaseNumber},
-        };
+        }
+        return phaseNode;
       }
       case "norm":
       {
-        const normNumber = nds.filter((node) => node.type === 'norm').length;
-        return {
+        const normNodes= nds.filter((node) => node.type === 'norm');
+        let normNumber
+        if (normNodes.length > 0) {
+          const finalNormId : number = +(normNodes[normNodes.length - 1].id.split('-')[1]);
+          normNumber = finalNormId + 1;
+        } else {
+          normNumber = 1;
+        }
+
+        const normNode : NormNode = {
           id: `norm-${normNumber}`,
           type: nodeType,
           position,
-          data: {label: `new norm node`},
-        };
+          data: {label: `new norm node`, value: "Pepper should be formal"},
+        }
+        return normNode;
       }
       default: {
         throw new Error(`Node ${nodeType} not found`);

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

@@ -1,32 +1,32 @@
-import {Handle, NodeToolbar, Position} from '@xyflow/react';
+import {Handle, type NodeProps, NodeToolbar, Position} from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import styles from '../../VisProg.module.css';
 import useFlowStore from "../VisProgStores.tsx";
+import type {
+  StartNode,
+  EndNode,
+  PhaseNode,
+  NormNode
+} from "../VisProgTypes.tsx";
 
-// Contains the datatypes for the data inside our NodeTypes
-// this has to be improved or adapted to suit our implementation for computing the graph
-// into a format that is useful for the Control Backend
-
-type defaultNodeData = {
-  label: string;
-};
-
-type startNodeData = defaultNodeData;
-type endNodeData = defaultNodeData;
-type normNodeData = defaultNodeData;
-type phaseNodeData = defaultNodeData & {
-  number: number;
-};
-
-export type nodeData = defaultNodeData | startNodeData | phaseNodeData | endNodeData;
-
-// Node Toolbar definition, contains node delete functionality
+//
 
 type ToolbarProps = {
   nodeId: string;
   allowDelete: boolean;
 };
 
+
+/**
+ * Node Toolbar definition:
+ * handles: node deleting functionality
+ * can be added to any custom node component as a React component
+ *
+ * @param {string} nodeId
+ * @param {boolean} allowDelete
+ * @returns {React.JSX.Element}
+ * @constructor
+ */
 export function Toolbar({nodeId, allowDelete}: ToolbarProps) {
   const {deleteNode} = useFlowStore();
 
@@ -42,14 +42,15 @@ export function Toolbar({nodeId, allowDelete}: ToolbarProps) {
 
 // Definitions of Nodes
 
-// Start Node definition:
-
-type StartNodeProps = {
-  id: string;
-  data: startNodeData;
-};
-
-export const StartNode = ({id, data}: StartNodeProps) => {
+/**
+ * Start Node definition:
+ *
+ * @param {string} id
+ * @param {defaultNodeData} data
+ * @returns {React.JSX.Element}
+ * @constructor
+ */
+export const StartNodeComponent = ({id, data}: NodeProps<StartNode>) => {
   return (
     <>
       <Toolbar nodeId={id} allowDelete={false}/>
@@ -62,14 +63,15 @@ export const StartNode = ({id, data}: StartNodeProps) => {
 };
 
 
-// End node definition:
-
-type EndNodeProps = {
-  id: string;
-  data: endNodeData;
-};
-
-export const EndNode = ({id, data}: EndNodeProps) => {
+/**
+ * End node definition:
+ *
+ * @param {string} id
+ * @param {defaultNodeData} data
+ * @returns {React.JSX.Element}
+ * @constructor
+ */
+export const EndNodeComponent = ({id, data}: NodeProps<EndNode>) => {
   return (
     <>
       <Toolbar nodeId={id} allowDelete={false}/>
@@ -82,14 +84,15 @@ export const EndNode = ({id, data}: EndNodeProps) => {
 };
 
 
-// Phase node definition:
-
-type PhaseNodeProps = {
-  id: string;
-  data: phaseNodeData;
-};
-
-export const PhaseNode = ({id, data}: PhaseNodeProps) => {
+/**
+ * Phase node definition:
+ *
+ * @param {string} id
+ * @param {defaultNodeData & {number: number}} data
+ * @returns {React.JSX.Element}
+ * @constructor
+ */
+export const PhaseNodeComponent = ({id, data}: NodeProps<PhaseNode>) => {
   return (
     <>
       <Toolbar nodeId={id} allowDelete={true}/>
@@ -104,14 +107,15 @@ export const PhaseNode = ({id, data}: PhaseNodeProps) => {
 };
 
 
-// Norm node definition:
-
-type NormNodeProps = {
-  id: string;
-  data: normNodeData;
-};
-
-export const NormNode = ({id, data}: NormNodeProps) => {
+/**
+ * Norm node definition:
+ *
+ * @param {string} id
+ * @param {defaultNodeData & {value: string}} data
+ * @returns {React.JSX.Element}
+ * @constructor
+ */
+export const NormNodeComponent = ({id, data}: NodeProps<NormNode>) => {
   return (
     <>
       <Toolbar nodeId={id} allowDelete={true}/>