From e1d131e64231b10ef0e2f91348919e0ab58fdbf1 Mon Sep 17 00:00:00 2001
From: JGerla <jgerla61@gmail.com>
Date: Sat, 25 Oct 2025 18:12:57 +0200
Subject: [PATCH] feat: updated the phase node creation to better assign ids to
 new phase and norm nodes.

ref: N25B-114
---
 .../components/DragDropSidebar.tsx            | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/pages/VisProgPage/visualProgrammingUI/components/DragDropSidebar.tsx b/src/pages/VisProgPage/visualProgrammingUI/components/DragDropSidebar.tsx
index 693fb53..ee79037 100644
--- a/src/pages/VisProgPage/visualProgrammingUI/components/DragDropSidebar.tsx
+++ b/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(),