refactor: Initial working framework of node encapsulation works- polymorphic implementation of nodes in creating and connecting calls correct functions

ref: N25B-294

src/pages/VisProgPage/visualProgrammingUI/nodes/EndNode.tsx

@@ -0,0 +1,73 @@
+import {
+  Handle,
+  type NodeProps,
+  Position,
+  type Connection,
+  type Edge,
+  useReactFlow,
+  type Node,
+} from '@xyflow/react';
+import { Toolbar } from './NodeDefinitions';
+import styles from '../../VisProg.module.css'; 
+
+export type EndNodeData = {
+  label: string;
+  droppable: Boolean;
+  hasReduce: Boolean;
+};
+
+
+export const EndNodeDefaults: EndNodeData = {
+  label: "End Node",
+  droppable: false,
+  hasReduce: true
+};
+
+export type EndNode = Node<EndNodeData>
+
+export function EndNodeCanConnect(connection: Connection | Edge): boolean {
+  // connection has: { source, sourceHandle, target, targetHandle }
+
+  // Example rules:
+  if (connection.source === connection.target) return false;
+
+
+  if (connection.targetHandle && !["a", "b"].includes(connection.targetHandle)) {
+    return false;
+  }
+
+  if (connection.sourceHandle && connection.sourceHandle !== "result") {
+    return false;
+  }
+
+  // If all rules pass
+  return true;
+}
+
+export default function EndNode(props: NodeProps<Node>) {
+  const reactFlow = useReactFlow();
+  const label_input_id = `phase_${props.id}_label_input`;
+  return (
+    <>
+      <Toolbar nodeId={props.id} allowDelete={true}/>
+      <div className={`${styles.defaultNode} ${styles.nodeEnd}`}>
+        <div className={"flex-row gap-sm"}>
+        End
+        </div>
+        <Handle type="target" position={Position.Left} id="target"/>
+        <Handle type="target" position={Position.Bottom} id="norms"/>
+        <Handle type="source" position={Position.Right} id="source"/>
+      </div>
+    </>
+  );
+}
+
+export function EndReduce(node: Node, nodes: Node[]) {
+    return {
+    id: node.id
+    }
+}
+
+export function EndConnects(thisNode: Node, otherNode: Node, isThisSource: boolean) {
+  
+}