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/VisProg.tsx

@@ -8,30 +8,16 @@ import {
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import {useShallow} from 'zustand/react/shallow';
-
-import {
-  StartNodeComponent,
-  EndNodeComponent,
-  PhaseNodeComponent,
-  NormNodeComponent
-} from './visualProgrammingUI/components/NodeDefinitions.tsx';
 import {DndToolbar} from './visualProgrammingUI/components/DragDropSidebar.tsx';
-import graphReducer from "./visualProgrammingUI/GraphReducer.ts";
 import useFlowStore from './visualProgrammingUI/VisProgStores.tsx';
 import type {FlowState} from './visualProgrammingUI/VisProgTypes.tsx';
 import styles from './VisProg.module.css'
+import type { JSX } from 'react';
+import { NodeTypes } from './visualProgrammingUI/NodeRegistry.ts';
+import { graphReducer } from './visualProgrammingUI/GraphReducer.ts';
 
 // --| config starting params for flow |--
 
-/**
- * contains the types of all nodes that are available in the editor
- */
-const NODE_TYPES = {
-  start: StartNodeComponent,
-  end: EndNodeComponent,
-  phase: PhaseNodeComponent,
-  norm: NormNodeComponent
-};
 
 /**
  * defines how the default edge looks inside the editor
@@ -86,7 +72,7 @@ const VisProgUI = () => {
           nodes={nodes}
           edges={edges}
           defaultEdgeOptions={DEFAULT_EDGE_OPTIONS}
-          nodeTypes={NODE_TYPES}
+          nodeTypes={NodeTypes}
           onNodesChange={onNodesChange}
           onEdgesChange={onEdgesChange}
           onReconnect={onReconnect}