feat: updated styles of visProgUI

Added a rounded outline to the editor and changed the edge to be an arrow so program-flow can be interpreted more easily from the UI.

ref: N25B-114

src/VisualProgrammingUI/VisProgUI.tsx

@@ -11,16 +11,28 @@ import {
     useNodesState,
     useEdgesState,
     reconnectEdge,
-    addEdge, type Edge, type Connection,
+    addEdge,
+    MarkerType,
+    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: 'n1', position: {x: 0, y: 0}, data: {label: 'Start'}},
-    {id: 'n2', position: {x: 0, y: 100}, data: {label: 'Node 2'}},
+    {id: 'n2', position: {x: 0, y: 100}, data: {label: 'End'}},
 ];
 const initialEdges = [{id: 'n1-n2', source: 'n1', target: 'n2'}];
 
+const defaultEdgeOptions = {
+    type: 'floating',
+    markerEnd: {
+        type: MarkerType.ArrowClosed,
+        color: '#505050',
+    },
+};
+
 const VisualProgrammingUI = ()=>  {
     const edgeReconnectSuccessful = useRef(true);
     const [nodes, , onNodesChange] = useNodesState(initialNodes);
@@ -51,10 +63,11 @@ const VisualProgrammingUI = ()=>  {
     }, [setEdges]);
 
     return (
-        <div style={{ width: '90vw', height: '90vh' }}>
+        <div style={{outlineStyle: 'solid', borderRadius: '10pt' ,marginInline: 'auto',width: '60vw', height: '60vh' }}>
             <ReactFlow
                 nodes={nodes}
                 edges={edges}
+                defaultEdgeOptions={defaultEdgeOptions}
                 onNodesChange={onNodesChange}
                 onEdgesChange={onEdgesChange}
                 snapToGrid
@@ -63,7 +76,7 @@ const VisualProgrammingUI = ()=>  {
                 onReconnectEnd={onReconnectEnd}
                 onConnect={onConnect}
                 fitView
-                attributionPosition="top-right"
+                proOptions={{hideAttribution: true }}
             >
                 <Controls />
                 <Background />