feat: created new nodes and a default nodeType

added a type for defaultNodeData, this can house common data that all nodes should have. the other types can build on this defaultData. Also added an endNode and phaseNode to NodeDefinitions.tsx, together with a nodeData type for each new node type.

ref: N25B-114

src/visualProgrammingUI/VisProgUI.tsx

@@ -17,28 +17,34 @@ import {
     type Connection,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
-import StartNode from "./components/NodeDefinitions.tsx";
+import {
+    StartNode,
+    EndNode,
+    PhaseNode
+} from "./components/NodeDefinitions.tsx";
 
 const nodeTypes = {
-    startNode: StartNode,
+    start: StartNode,
+    end: EndNode,
+    phase: PhaseNode,
 };
 
 const initialNodes = [
     {
         id: 'start',
-        type: 'startNode',
+        type: 'start',
         position: {x: 0, y: 0},
         data: {label: 'start'}
     },
     {
         id: 'genericPhase',
-        type: 'default',
+        type: 'phase',
         position: {x: 0, y: 150},
-        data: {label: 'Generic Phase'},
+        data: {label: 'Generic Phase', number: 1},
     },
     {
         id: 'end',
-        type: 'output',
+        type: 'end',
         position: {x: 0, y: 300},
         data: {label: 'End'}
     }

src/visualProgrammingUI/components/NodeDefinitions.tsx

@@ -4,7 +4,17 @@ import '../VisProgUI.css';
 
 // Datatypes for NodeTypes
 
-type startNodeData = { label: string; };
+type defaultNodeData = {
+    label: string;
+};
+
+type startNodeData = defaultNodeData;
+type endNodeData = defaultNodeData;
+type phaseNodeData = defaultNodeData & {
+    number: number;
+};
+
+export type nodeData = defaultNodeData | startNodeData | phaseNodeData | endNodeData;
 
 // Definitions of Nodes
 
@@ -19,4 +29,27 @@ export const StartNode= ({ data } : {data : startNodeData}) => {
         </>
     );
 };
-export default StartNode;
+
+
+export const EndNode= ({ data } : {data : endNodeData}) => {
+    return (
+        <>
+            <div>
+                <div className="default-node"> {data.label} </div>
+                <Handle type="target" position={Position.Left} id="end" />
+            </div>
+        </>
+    );
+};
+
+export const PhaseNode= ({ data } : {data : phaseNodeData}) => {
+    return (
+        <>
+            <div>
+                <div className="default-node"> phase {data.number} {data.label} </div>
+                <Handle type="target" position={Position.Left} id="target" />
+                <Handle type="source" position={Position.Right} id="source" />
+            </div>
+        </>
+    );
+};