feat: updated the phase node creation to better assign ids to new phase and norm nodes.

ref: N25B-114

src/pages/VisProgPage/visualProgrammingUI/components/DragDropSidebar.tsx

@@ -10,6 +10,7 @@ import {
   useState
 } from 'react';
 import styles from "../../VisProg.module.css"
+import useFlowStore from "../VisProgStores.tsx";
 
 // Is used to make sure each subsequent node gets a unique id, so the ReactFlow implementation
 // can distinguish between different nodes.
@@ -73,7 +74,8 @@ function DraggableNode({className, children, nodeType, onDrop}: DraggableNodePro
  * @constructor
  */
 export function DndToolbar() {
-  const {setNodes, screenToFlowPosition} = useReactFlow();
+  const {screenToFlowPosition} = useReactFlow();
+  const {setNodes} = useReactFlow();
 
   /**
    * handleNodeDrop implements the default onDrop behavior
@@ -96,12 +98,17 @@ export function DndToolbar() {
         const newNode = () => {
           switch (nodeType) {
             case "phase":
+            {
+              const nds = useFlowStore.getState().nodes;
+              const phaseNumber = nds.filter((node) => node.type === 'phase').length;
               return {
-                id: getId(),
+                id: `phase-${phaseNumber}`,
                 type: nodeType,
                 position,
-                data: {label: `"new"`, number: (-1)},
+                data: {label: `"new"`, number: phaseNumber},
               };
+            }
+
             case "start":
               return {
                 id: getId(),
@@ -117,12 +124,16 @@ export function DndToolbar() {
                 data: {label: `new end node`},
               };
             case "norm":
+            {
+              const nds = useFlowStore.getState().nodes;
+              const normNumber = nds.filter((node) => node.type === 'norm').length;
               return {
-                id: getId(),
+                id: `norm-${normNumber}`,
                 type: nodeType,
                 position,
                 data: {label: `new norm node`},
               };
+            }
             default: {
               return {
                 id: getId(),