From a463b8eb7650b0b75202dcd3c1fcb41bff589631 Mon Sep 17 00:00:00 2001
From: Khwaja <okhwaja@anl.gov>
Date: Tue, 8 Jul 2025 14:46:05 -0500
Subject: [PATCH] meeting code 7/8

---
 .../components/CaseBuilder/CaseBuilder.tsx    | 55 ++++++++++++++++++-
 .../components/CaseBuilder/PipelineBlock.tsx  | 21 ++++++-
 2 files changed, 73 insertions(+), 3 deletions(-)

diff --git a/web/src/components/CaseBuilder/CaseBuilder.tsx b/web/src/components/CaseBuilder/CaseBuilder.tsx
index ac41a09..bc8fe34 100644
--- a/web/src/components/CaseBuilder/CaseBuilder.tsx
+++ b/web/src/components/CaseBuilder/CaseBuilder.tsx
@@ -189,12 +189,10 @@ const onAddPlantOutput = (plantName: string, productName: string) => {
     const plant = prevData.plants[plantName];
     if (!plant) return prevData;
  
-    // Build a new array of outputs, avoiding duplicates
     const newOutputs = plant.outputs.includes(productName)
       ? plant.outputs
       : [...plant.outputs, productName];
  
-    // Return updated state with outputs as an array
     return {
       ...prevData,
       plants: {
@@ -289,6 +287,56 @@ const onAddCenterOutput = (centerName: string, productName: string) => {
     });
   };
 
+  const onRenamePlant = (prevName: string, newName: string) => {
+    setCircularData(prev => {
+      const oldPlant = prev.plants[prevName];
+      if (!oldPlant) return prev;
+
+      const updatedData: CircularData = {
+        ...prev,
+        plants: { 
+          ...prev.plants,
+          [prevName]: {...oldPlant, name: newName}
+        }
+      };
+    
+  });
+};
+
+const onRenameProduct = (prevName: string, newName: string) => {
+    setCircularData(prev => {
+      const oldProduct = prev.products[prevName];
+      if (!oldProduct) return prev;
+
+      const updatedData: CircularData = {
+        ...prev,
+        products: { 
+          ...prev.products,
+          [newName]: oldProduct,
+        }
+      };
+      delete updatedData.products[prevName];
+      return updatedData;
+  });
+};
+
+const onRenameCenter = (prevName: string, newName: string) => {
+    setCircularData(prev => {
+      const oldCenter = prev.centers[prevName];
+      if (!oldCenter) return prev;
+
+      const updatedData: CircularData = {
+        ...prev,
+        centers: { 
+          ...prev.centers,
+          [newName]: oldCenter,
+        }
+      };
+      delete updatedData.centers[prevName];
+      return updatedData;
+  });
+};
+
   return (
     <div>
       <Header onClear={onClear} onSave={onSave} onLoad={onLoad} />
@@ -312,6 +360,9 @@ const onAddCenterOutput = (centerName: string, productName: string) => {
             onRemovePlant={onRemovePlant}
             onRemoveProduct={onRemoveProduct}
             onRemoveCenter={onRemoveCenter}
+            onRenamePlant = {onRenamePlant}
+            onRenameProduct = {onRenameProduct}
+            onRenameCenter = {onRenameCenter}
           />
     </div> 
 </div> 
diff --git a/web/src/components/CaseBuilder/PipelineBlock.tsx b/web/src/components/CaseBuilder/PipelineBlock.tsx
index 348d85c..b156742 100644
--- a/web/src/components/CaseBuilder/PipelineBlock.tsx
+++ b/web/src/components/CaseBuilder/PipelineBlock.tsx
@@ -30,6 +30,9 @@ interface PipelineBlockProps {
   onRemovePlant: (id: string) => void;
   onRemoveProduct: (id: string) => void;
   onRemoveCenter: (id: string) => void;
+  onRenameProduct: (prevName: string, newName: string) => void;
+  onRenamePlant: (prevName: string, newName: string) => void;
+  onRenameCenter: (prevName: string, newName: string) => void;
   products: Record<string, CircularProduct>;
   plants: Record<string, CircularPlant>;
   centers: Record<string, CircularCenter>;
@@ -169,6 +172,21 @@ const PipelineBlock: React.FC<PipelineBlockProps> = props => {
     [props]
   );
 
+  const onNodeDoubleClick = (ev: React.MouseEvent, node: Node<CustomNodeData>) => {
+    const oldName = node.data.label;
+    const newName = window.prompt("Enter new name", oldName);
+    if (!newName|| newName.trim().length === 0) return;
+    if (newName in mapNameToType) return;
+    if (node.data.type === "plant") {
+      props.onRenamePlant(oldName, newName);
+    } else if (node.data.type === "product") {
+      props.onRenameProduct(oldName, newName);
+    }
+    else if (node.data.type === "center") {
+      props.onRenameCenter(oldName, newName);
+    }
+  };
+
   const onLayout = () => {
     const { nodes: ln, edges: le } = getLayoutedNodesAndEdges(nodes, edges);
     ln.forEach(n => {
@@ -182,7 +200,7 @@ const PipelineBlock: React.FC<PipelineBlockProps> = props => {
   useEffect(() => {
     if (hasNullPositions) onLayout();
   }, [hasNullPositions]);
-  
+
   return (
     <>
       <Section title="Pipeline" />
@@ -192,6 +210,7 @@ const PipelineBlock: React.FC<PipelineBlockProps> = props => {
             nodes={nodes}
             edges={edges}
             onConnect={onConnect}
+            onNodeDoubleClick={onNodeDoubleClick}
             onNodeDragStop={onNodeDragStop}
             onNodesDelete={handleNodesDelete}
             deleteKeyCode="delete"