added uids to allow duplicate-named nodes

web/src/components/CaseBuilder/CaseBuilder.tsx

@@ -9,7 +9,7 @@ import Header from "./Header";
 import "tabulator-tables/dist/css/tabulator.min.css";
 import "../Common/Forms/Tables.css";
 import Footer from "./Footer";
-import React, { useState } from "react";
+import React, { useState,useRef } from "react";
 import {CircularData} from "./CircularData";
 import { defaultPlant, defaultProduct, defaultCenter } from "./defaults";
 import PipelineBlock from "./PipelineBlock";
@@ -23,10 +23,12 @@ declare global {
   }
 
 const CaseBuilder = () => {
+  const nextUid= useRef(1);
   const [circularData, setCircularData] = useState<CircularData> ( {
   plants: {},
   products: {},
-  centers: {}
+  centers: {},
+  
 
 });
   const onClear = () => {};
@@ -35,6 +37,7 @@ const CaseBuilder = () => {
   
 
   
+
   const randomPosition = (): [number,number] => {
     if (window.nextX === undefined) window.nextX = 15;
     if (window.nextY === undefined) window.nextY = 15;
@@ -52,24 +55,27 @@ const CaseBuilder = () => {
   const promptName = (prevData:CircularData): string | undefined => {
     const name = prompt("Name");
     if (!name || name.length ===0) return;
-    if (name in prevData.products || name in prevData.plants) return;
     return name;
 
   };
 
   const onAddPlant = () => {
     setCircularData((prevData) => {
-      const id = promptName(prevData);
-      if (id ===undefined) return prevData;
+      const name = promptName(prevData);
+      if (name ===undefined) return prevData;
+
+      const uid = `${name}-${nextUid.current++}`;
       const [x,y] = randomPosition();
       const newData: CircularData = {
          ...prevData,
          plants: {
           ...prevData.plants,
-          [id]: {
+          [uid]: {
             ...defaultPlant,
             x,
             y,
+            name,
+            uid
           }
          }
         };
@@ -79,17 +85,20 @@ const CaseBuilder = () => {
 
   const onAddProduct = () => {
     setCircularData((prevData) => {
-      const id = promptName(prevData);
-      if (id ===undefined) return prevData;
+      const name = promptName(prevData);
+      if (name ===undefined) return prevData;
+      const uid = `${name}-${nextUid.current++}`;
       const [x,y] = randomPosition();
       const newData: CircularData = {
          ...prevData,
          products: {
           ...prevData.products,
-          [id]: {
+          [uid]: {
             ...defaultProduct,
             x,
             y,
+            name,
+            uid
           }
          }
         };
@@ -99,21 +108,25 @@ const CaseBuilder = () => {
   };
 
   const onAddCenter = () => {
-  setCircularData(prev => {
-    const name = prompt("Center name");
-    if (!name || name in prev.centers) return prev;
-
+    setCircularData((prevData) => {
+      const name = promptName(prevData);
+      if (name ===undefined) return prevData;
+      const uid = `${name}-${nextUid.current++}`;
       const [x,y] = randomPosition();
-    const next = {
-      ...prev,
+      const newData: CircularData = {
+         ...prevData,
          centers: {
-        ...prev.centers,
-        [name]: { ...defaultCenter, id:name, x, y, outputs: []}
-
+          ...prevData.centers,
+          [uid]: {
+            ...defaultCenter,
+            x,
+            y,
+            name,
+            uid
+          }
          }
         };
-    return next;
-   
+     return newData;
     });
 };
 

web/src/components/CaseBuilder/CircularData.ts

@@ -1,5 +1,6 @@
 export interface CircularPlant {
-    id: string;
+    uid: string;
+    name: string;
     x: number;
     y: number;
     inputs: string[];
@@ -9,7 +10,8 @@ export interface CircularPlant {
 }
 
 export interface CircularProduct { 
-    id: string;
+    uid: string;
+    name: string;
     x: number;
     y: number;
 }
@@ -23,7 +25,8 @@ export interface CircularData {
 }
 
 export interface CircularCenter {
-    id: string;
+    uid: string;
+    name: string;
     x: number;
     y: number;
 

web/src/components/CaseBuilder/PipelineBlock.tsx

@@ -94,9 +94,9 @@ const onNodeDragStop =(_:any, node: Node) => {
         if(!product.x || !product.y) hasNullPositions = true;
         mapNameToType[productName] = "product";
         nodes.push({
-            id: productName,
+            id: product.uid,
             type: "default",
-            data: {label: productName, type: 'product'},
+            data: {label: product.name, type: 'product'},
             position: { x:product.x, y:product.y},
             className: 'ProductNode'
         });
@@ -105,9 +105,9 @@ const onNodeDragStop =(_:any, node: Node) => {
         if(!plant.x || !plant.y) hasNullPositions = true;
         mapNameToType[plantName] = "plant";
         nodes.push({
-            id: plantName,
+            id: plant.uid,
             type: "default",
-            data: {label: plantName, type: 'plant'},
+            data: {label: plant.name, type: 'plant'},
             position: { x:plant.x, y:plant.y},
             className: 'PlantNode'
         });
@@ -143,9 +143,9 @@ const onNodeDragStop =(_:any, node: Node) => {
   for (const [centerName, center] of Object.entries(props.centers)) {
     mapNameToType[centerName] = "center";
     nodes.push({
-      id: centerName,
+      id: center.uid,
       type: "default",
-      data: { label: centerName, type: "center"},
+      data: { label: center.name, type: "center"},
       position: {x: center.x, y: center.y},
       className: 'CenterNode'
     });

web/src/components/CaseBuilder/defaults.ts

@@ -16,13 +16,15 @@ export interface DefaultCenter extends CircularPlant{
 }
 
 export const defaultProduct: DefaultProduct = {
-  id: "",
+  uid: "",
+  name: "",
   x: 0,
   y: 0,
 };
 
 export const defaultPlant: CircularPlant = {
-  id: "",
+  uid: "",
+  name: "",
   x: 0,
   y: 0,
   inputs : [],
@@ -30,7 +32,8 @@ export const defaultPlant: CircularPlant = {
 };
 
 export const defaultCenter: CircularCenter = {
-  id: "",
+  uid: "",
+  name: "",
   x: 0,
   y: 0,
   output: [],