feat: added a custom start node

Defined a basic start node; it does not contain any further functionality but does provide a basis for implementing future custom nodes.

ref: N25B-114

src/main.tsx

@@ -2,7 +2,7 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
-import VisualProgrammingUI from "./VisualProgrammingUI/VisProgUI.tsx";
+import VisualProgrammingUI from "./visualProgrammingUI/VisProgUI.tsx";
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>

src/visualProgrammingUI/VisProgUI.tsx

@@ -17,13 +17,33 @@ import {
     type Connection,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
+import StartNode from './components/StartNode.tsx';
 
+const nodeTypes = {
+    startNode: StartNode,
+};
 
 const initialNodes = [
-    {id: 'n1', position: {x: 0, y: 0}, data: {label: 'Start'}},
-    {id: 'n2', position: {x: 0, y: 100}, data: {label: 'End'}},
+    {
+        id: 'start',
+        type: 'startNode',
+        position: {x: 0, y: 0},
+        data: {label: 'Start'},
+    },
+    {
+        id: 'genericPhase',
+        type: 'default',
+        position: {x: 0, y: 150},
+        data: {label: 'Generic Phase'},
+    },
+    {
+        id: 'end',
+        type: 'output',
+        position: {x: 0, y: 300},
+        data: {label: 'End'}
+    }
 ];
-const initialEdges = [{id: 'n1-n2', source: 'n1', target: 'n2'}];
+const initialEdges = [{id: 'start-end', source: 'start', target: 'end'}];
 
 const defaultEdgeOptions = {
     type: 'floating',
@@ -70,6 +90,7 @@ const VisualProgrammingUI = ()=>  {
                 defaultEdgeOptions={defaultEdgeOptions}
                 onNodesChange={onNodesChange}
                 onEdgesChange={onEdgesChange}
+                nodeTypes={nodeTypes}
                 snapToGrid
                 onReconnect={onReconnect}
                 onReconnectStart={onReconnectStart}

src/visualProgrammingUI/components/StartNode.tsx

@@ -0,0 +1,15 @@
+import { Handle, Position } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+
+// @ts-ignore
+export const StartNode = ({ data }) => {
+    return (
+        <>
+            <div>
+                <div style={{ padding: '10px 20px', backgroundColor: 'white', outlineStyle: 'solid', borderRadius: '5pt', outlineWidth: '1pt'}}> data test {data.label} </div>
+                <Handle type="source" position={Position.Right} id="start" />
+            </div>
+        </>
+    );
+};
+export default StartNode;