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>
+        </>
+    );
+};