feat: seperation of concerns for gesture value editor, adjusting output of nodes, integration testing, css file changes, and probably much more.

ref: N25B-412

src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx

@@ -40,21 +40,21 @@ function createNode(id: string, type: string, position: XYPosition, data: Record
         ...data,
       },
     }
-  }
+}
 
-//* Initial nodes, created by using createNode. */
-const initialNodes : Node[] = [
-    createNode('start', 'start', {x: 100, y: 100}, {label: "Start"}, false),
-    createNode('end', 'end', {x: 500, y: 100}, {label: "End"}, false),
-    createNode('phase-1', 'phase',  {x:200, y:100}, {label: "Phase 1", children : []}),
-    createNode('norms-1', 'norm',  {x:-200, y:100}, {label: "Initial Norms", normList: ["Be a robot", "get good"], critical:false}),     
-];
+  //* Initial nodes, created by using createNode. */
+  // Start and End don't need to apply the UUID, since they are technically never compiled into a program.
+  const startNode = createNode('start', 'start', {x: 100, y: 100}, {label: "Start"}, false)
+  const endNode = createNode('end', 'end', {x: 500, y: 100}, {label: "End"}, false)
+  const initialPhaseNode = createNode(crypto.randomUUID(), 'phase', {x:200, y:100}, {label: "Phase 1", children : []})
 
-// * Initial edges * /
-const initialEdges: Edge[] = [
-  { id: 'start-phase-1', source: 'start', target: 'phase-1' },
-  { id: 'phase-1-end', source: 'phase-1', target: 'end' },
-];
+  const initialNodes : Node[] = [startNode, endNode, initialPhaseNode,];
+
+  // * Initial edges * /
+  const initialEdges: Edge[] = [
+    { id: 'start-phase-1', source: startNode.id, target: initialPhaseNode.id },
+    { id: 'phase-1-end', source: initialPhaseNode.id, target: endNode.id },
+  ];
 
 
 /**