From b095e4bbbef573d06f7b41afce8eef57497e388f Mon Sep 17 00:00:00 2001 From: Khwaja Date: Mon, 7 Jul 2025 15:06:40 -0500 Subject: [PATCH] added uids to allow duplicate-named nodes --- .../components/CaseBuilder/CaseBuilder.tsx | 63 +++++++++++-------- .../components/CaseBuilder/CircularData.ts | 9 ++- .../components/CaseBuilder/PipelineBlock.tsx | 12 ++-- web/src/components/CaseBuilder/defaults.ts | 9 ++- 4 files changed, 56 insertions(+), 37 deletions(-) diff --git a/web/src/components/CaseBuilder/CaseBuilder.tsx b/web/src/components/CaseBuilder/CaseBuilder.tsx index a6d0afd..ac41a09 100644 --- a/web/src/components/CaseBuilder/CaseBuilder.tsx +++ b/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,15 +23,18 @@ declare global { } const CaseBuilder = () => { + const nextUid= useRef(1); const [circularData, setCircularData] = useState ( { plants: {}, products: {}, - centers: {} + centers: {}, + }); const onClear = () => {}; const onSave = () => {}; const onLoad = () => {}; + @@ -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,22 +108,26 @@ const CaseBuilder = () => { }; const onAddCenter = () => { - setCircularData(prev => { - const name = prompt("Center name"); - if (!name || name in prev.centers) return prev; - - const [x,y] = randomPosition(); - const next = { - ...prev, - centers: { - ...prev.centers, - [name]: { ...defaultCenter, id:name, x, y, outputs: []} - - } - }; - return next; - - }); + setCircularData((prevData) => { + const name = promptName(prevData); + if (name ===undefined) return prevData; + const uid = `${name}-${nextUid.current++}`; + const [x,y] = randomPosition(); + const newData: CircularData = { + ...prevData, + centers: { + ...prevData.centers, + [uid]: { + ...defaultCenter, + x, + y, + name, + uid + } + } + }; + return newData; + }); }; const onSetCenterInput = (centerName: string, productName: string) => { diff --git a/web/src/components/CaseBuilder/CircularData.ts b/web/src/components/CaseBuilder/CircularData.ts index 8100802..4743aee 100644 --- a/web/src/components/CaseBuilder/CircularData.ts +++ b/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; diff --git a/web/src/components/CaseBuilder/PipelineBlock.tsx b/web/src/components/CaseBuilder/PipelineBlock.tsx index 3241728..f9d7683 100644 --- a/web/src/components/CaseBuilder/PipelineBlock.tsx +++ b/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' }); diff --git a/web/src/components/CaseBuilder/defaults.ts b/web/src/components/CaseBuilder/defaults.ts index 86bb3d2..5b38ea1 100644 --- a/web/src/components/CaseBuilder/defaults.ts +++ b/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: [],