feat: added ReactFlow-based node graph

Added ReactFlow to dependencies (@xyflow/react).
Added a basic reactflow template to test functionality of reactFlow and to build the visual programming UI on top of.

ref: N25B-114

src/VisualProgrammingUI/VisProgUI.tsx

@@ -0,0 +1,56 @@
+import './VisProgUI.css'
+
+import { useState, useCallback } from 'react';
+import {
+    ReactFlow,
+    applyNodeChanges,
+    applyEdgeChanges,
+    addEdge,
+    type NodeChange,
+    type EdgeChange,
+    type Edge, type Connection
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+
+const initialNodes = [
+    {id: 'n1', position: {x: 0, y: 0}, data: {label: 'Node 1'}},
+    {id: 'n2', position: {x: 0, y: 100}, data: {label: 'Node 2'}},
+];
+const initialEdges = [{id: 'n1-n2', source: 'n1', target: 'n2'}];
+
+export default function App() {
+    const [nodes, setNodes] = useState(initialNodes);
+    const [edges, setEdges] = useState(initialEdges);
+
+    const onNodesChange = useCallback(
+        (changes: NodeChange<{
+            id: string;
+            position: { x: number; y: number; };
+            data: { label: string; };
+        }>[]) => setNodes((nodesSnapshot) => applyNodeChanges(changes, nodesSnapshot)),
+        [],
+    );
+    const onEdgesChange = useCallback(
+        (changes: EdgeChange<{ id: string; source: string; target: string; }>[]) => setEdges((edgesSnapshot) => applyEdgeChanges(changes, edgesSnapshot)),
+        [],
+    );
+    
+
+    const onConnect = useCallback(
+        (params: Edge | Connection) => setEdges((edgesSnapshot) => addEdge(params, edgesSnapshot)),
+        [],
+    );
+
+    return (
+        <div style={{ width: '100vw', height: '100vh' }}>
+            <ReactFlow
+                nodes={nodes}
+                edges={edges}
+                onNodesChange={onNodesChange}
+                onEdgesChange={onEdgesChange}
+                onConnect={onConnect}
+                fitView
+            />
+        </div>
+    );
+}

src/main.tsx

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