From 052cd374c0f900fbf12f3b86a5e2470389458453 Mon Sep 17 00:00:00 2001
From: Khwaja <okhwaja@anl.gov>
Date: Mon, 21 Jul 2025 15:16:30 -0500
Subject: [PATCH] consolidated add, move, remove functions

---
 .../components/CaseBuilder/CaseBuilder.tsx    | 412 +++++++-----------
 1 file changed, 158 insertions(+), 254 deletions(-)

diff --git a/web/src/components/CaseBuilder/CaseBuilder.tsx b/web/src/components/CaseBuilder/CaseBuilder.tsx
index f2756ca..9c22818 100644
--- a/web/src/components/CaseBuilder/CaseBuilder.tsx
+++ b/web/src/components/CaseBuilder/CaseBuilder.tsx
@@ -9,362 +9,266 @@ import Header from "./Header";
 import "tabulator-tables/dist/css/tabulator.min.css";
 import "../Common/Forms/Tables.css";
 import Footer from "./Footer";
-import React, { useState,useRef } from "react";
+import React, { useState, useRef } from "react";
 import { defaultPlant, defaultProduct, defaultCenter } from "./defaults";
 import PipelineBlock from "./PipelineBlock";
-import '@xyflow/react/dist/style.css';
-import { PlantNode, CenterNode, ProductNode, RELOGScenario} from "./CircularData";
+import "@xyflow/react/dist/style.css";
+import {
+  PlantNode,
+  CenterNode,
+  ProductNode,
+  RELOGScenario,
+} from "./CircularData";
+import { idText } from "typescript";
 
 declare global {
-    interface Window {
-      nextX: number;
-      nextY: number;
-    }
+  interface Window {
+    nextX: number;
+    nextY: number;
   }
+}
 
-  const Default_Scenario: RELOGScenario = {
-    Parameters: { version: "1.0"},
-    Plants: {},
-    Products: {},
-    Centers: {},
-  };
+const Default_Scenario: RELOGScenario = {
+  Parameters: { version: "1.0" },
+  Plants: {},
+  Products: {},
+  Centers: {},
+};
 
 const CaseBuilder = () => {
-  const nextUid= useRef(1);
+  const nextUid = useRef(1);
   const [scenario, setScenario] = useState<RELOGScenario>(Default_Scenario);
 
   const onClear = () => {};
   const onSave = () => {};
   const onLoad = () => {};
-  
 
-  
-
-  const randomPosition = (): [number,number] => {
+  const nextNodePosition = (): [number, number] => {
     if (window.nextX === undefined) window.nextX = 15;
     if (window.nextY === undefined) window.nextY = 15;
 
-    window.nextY +=60;
-    if (window.nextY >=500) {
+    window.nextY += 60;
+    if (window.nextY >= 500) {
       window.nextY = 15;
       window.nextX += 150;
-
     }
     return [window.nextX, window.nextY];
-
   };
 
-  const promptName = (prevData:RELOGScenario): string | undefined => {
+  const promptName = (): string | undefined => {
     const name = prompt("Name");
-    if (!name || name.length ===0) return;
+    if (!name || name.length === 0) return;
     return name;
-
   };
 
-  const onAddPlant = () => {
-    setScenario((prevData) => {
-      const name = promptName(prevData);
-      if (name ===undefined) return prevData;
-
-      const uid = `${name}-${nextUid.current++}`;
-      const [x,y] = randomPosition();
-      const newData: RELOGScenario = {
-         ...prevData,
-         Plants: {
-          ...prevData.Plants,
-          [uid]: {
-            ...defaultPlant,
-            x,
-            y,
-            name,
-            uid
-          }
-         }
-        };
-     return newData;
-    });
-  };
+  type EntityKey = "Plants" | "Products" | "Centers";
 
-  const onAddProduct = () => {
+  const onAddNode = (type: EntityKey) => {
     setScenario((prevData) => {
-      const name = promptName(prevData);
-      if (name ===undefined) return prevData;
-      const uid = `${name}-${nextUid.current++}`;
-      const [x,y] = randomPosition();
-      const newData: RELOGScenario = {
-         ...prevData,
-         Products: {
-          ...prevData.Products,
-          [uid]: {
-            ...defaultProduct,
-            x,
-            y,
-            name,
-            uid
-          }
-         }
-        };
-     return newData;
+      const name = promptName();
+      if (!name) return prevData;
+
+      const uid = `${name}-$${nextUid.current++}`;
+      const [x, y] = nextNodePosition();
+
+      let newNode;
+      if (type === "Plants") {
+        newNode = { ...defaultPlant, uid, name, x, y };
+      } else if (type === "Products") {
+        newNode = { ...defaultProduct, uid, name, x, y };
+      } else {
+        newNode = { ...defaultCenter, uid, name, x, y };
+      }
+      return {
+        ...prevData,
+        [type]: {
+          ...prevData[type],
+          [uid]: newNode,
+        },
+      } as RELOGScenario;
     });
-
   };
 
-  const onAddCenter = () => {
-    setScenario((prevData) => {
-      const name = promptName(prevData);
-      if (name ===undefined) return prevData;
-      const uid = `${name}-${nextUid.current++}`;
-      const [x,y] = randomPosition();
-      const newData: RELOGScenario = {
-         ...prevData,
-         Centers: {
-          ...prevData.Centers,
-          [uid]: {
-            ...defaultCenter,
-            x,
-            y,
-            name,
-            uid
-          }
-         }
-        };
-     return newData;
+  const onSetCenterInput = (centerName: string, productName: string) => {
+    setScenario((prev) => {
+      const center = prev.Centers[centerName];
+      if (!center) return prev;
+      return {
+        ...prev,
+        centers: {
+          ...prev.Centers,
+          [centerName]: { ...center, input: productName },
+        },
+      };
     });
-};
-
-const onSetCenterInput = (centerName: string, productName: string) => {
-  setScenario((prev) => {
-    const center = prev.Centers[centerName];
-    if (!center) return prev;
-    return {
-      ...prev,
-      centers: {
-        ...prev.Centers,
-        [centerName]: { ...center, input: productName},
-      },
-    };
-  });
-};
-
- const onSetPlantInput = (plantName: string, productName: string) => {
-
-  setScenario((prevData: RELOGScenario) => {
-
-    const plant = prevData.Plants[plantName];
-
-    if (!plant) return prevData; 
- 
-    const updatedPlant: PlantNode = {
-
-      ...plant,
-
-      inputs: plant.inputs.includes(productName)
-
-        ? plant.inputs
-
-        : [...plant.inputs, productName],
-
-    };
- 
-    return {
-
-      ...prevData,
-
-      plants: {
-
-        ...prevData.Plants,
-
-        [plantName]: updatedPlant,
+  };
 
-      },
+  const onSetPlantInput = (plantName: string, productName: string) => {
+    setScenario((prevData: RELOGScenario) => {
+      const plant = prevData.Plants[plantName];
 
-    };
+      if (!plant) return prevData;
 
-  });
+      const updatedPlant: PlantNode = {
+        ...plant,
 
-};
+        inputs: plant.inputs.includes(productName)
+          ? plant.inputs
+          : [...plant.inputs, productName],
+      };
 
+      return {
+        ...prevData,
 
+        plants: {
+          ...prevData.Plants,
 
-const onAddPlantOutput = (plantName: string, productName: string) => {
-  setScenario(prevData => {
-    const plant = prevData.Plants[plantName];
-    if (!plant) return prevData;
- 
-    const newOutputs = plant.outputs.includes(productName)
-      ? plant.outputs
-      : [...plant.outputs, productName];
- 
-    return {
-      ...prevData,
-      plants: {
-        ...prevData.Plants,
-        [plantName]: {
-          ...plant,
-          outputs: newOutputs,
+          [plantName]: updatedPlant,
         },
-      },
-    };
-  });
-};
-
-const onAddCenterOutput = (centerName: string, productName: string) => {
-  setScenario((prev) => {
-    const center = prev.Centers[centerName];
-    if (!center) return prev;
-  
-    const updatedOutputs = [...center.output, productName];
-  return {
-    ...prev,
-    centers: {
-      ...prev.Centers,
-      [centerName]: { ...center, output: updatedOutputs},
-    },
+      };
+    });
   };
-});
-};
-
- 
 
-  const onMovePlant = (plantName: string, x: number, y: number) => {
-    setScenario((prevData: RELOGScenario): RELOGScenario => {
-      const newData: RELOGScenario ={ ...prevData};
-      if (!newData.Plants[plantName]) return prevData;
-      newData.Plants[plantName].x =x;
-      newData.Plants[plantName].y =y;
-      return newData;
-    });
+  const onAddPlantOutput = (plantName: string, productName: string) => {
+    setScenario((prevData) => {
+      const plant = prevData.Plants[plantName];
+      if (!plant) return prevData;
 
-  };
+      const newOutputs = plant.outputs.includes(productName)
+        ? plant.outputs
+        : [...plant.outputs, productName];
 
-  const onMoveProduct = (productName: string, x: number, y: number) => {
-     setScenario((prevData: RELOGScenario): RELOGScenario => {
-      const newData: RELOGScenario ={ ...prevData};
-      const product = newData.Products[productName];
-      if (!product) return prevData;
-      product.x = x;
-      product.y =y;
-      return newData;
+      return {
+        ...prevData,
+        plants: {
+          ...prevData.Plants,
+          [plantName]: {
+            ...plant,
+            outputs: newOutputs,
+          },
+        },
+      };
     });
-
   };
 
-  const onMoveCenter = (centerName: string, x: number, y: number) => {
+  const onAddCenterOutput = (centerName: string, productName: string) => {
     setScenario((prev) => {
       const center = prev.Centers[centerName];
       if (!center) return prev;
+
+      const updatedOutputs = [...center.output, productName];
       return {
         ...prev,
         centers: {
           ...prev.Centers,
-          [centerName]: { ...center,x,y},
+          [centerName]: { ...center, output: updatedOutputs },
         },
       };
     });
   };
 
-  const onRemovePlant = (plantName: string) => {
-    setScenario(prev => {
-      const next = { ...prev };
-      delete next.Plants[plantName];
-
-      return next;
-    });
-  };
-   const onRemoveProduct = (productName: string) => {
-    setScenario(prev => {
-      const next = { ...prev };
-      delete next.Products[productName];
+  const onMoveNode = (type: EntityKey, id: string, x: number, y: number) => {
+    setScenario((prevData) => {
+      const nodesMap = prevData[type];
+      const node = nodesMap[id];
+      if (!node) return prevData;
 
-      return next;
+      return {
+        ...prevData,
+        [type]: {
+          ...nodesMap,
+          [id]: { ...node, x, y },
+        },
+      } as RELOGScenario;
     });
   };
 
-   const onRemoveCenter = (centerName: string) => {
-    setScenario(prev => {
-      const next = { ...prev };
-      delete next.Centers[centerName];
+  const onRemoveNode = (type: EntityKey, id: string) => {
+    setScenario((prevData) => {
+      const nodesMap = { ...prevData[type] };
+      delete nodesMap[id];
 
-      return next;
+      return {
+        ...prevData,
+        [type]: nodesMap,
+      };
     });
   };
 
   const onRenamePlant = (uniqueId: string, newName: string) => {
-    setScenario(prev => {
+    setScenario((prev) => {
       const plant = prev.Plants[uniqueId];
       if (!plant) return prev;
       const next = {
         ...prev,
         plants: {
           ...prev.Plants,
-          [uniqueId]: { ...plant, name: newName},
+          [uniqueId]: { ...plant, name: newName },
         },
       };
       return next;
-    
-
-  });
- };
+    });
+  };
 
-const onRenameProduct = (uniqueId: string, newName: string) => {
-    setScenario(prev => {
+  const onRenameProduct = (uniqueId: string, newName: string) => {
+    setScenario((prev) => {
       const product = prev.Products[uniqueId];
       if (!product) return prev;
       const next = {
         ...prev,
         products: {
           ...prev.Products,
-          [uniqueId]: { ...product, name: newName},
+          [uniqueId]: { ...product, name: newName },
         },
       };
       return next;
-  });
-};
+    });
+  };
 
-const onRenameCenter = (uniqueId: string, newName: string) => {
-    setScenario(prev => {
+  const onRenameCenter = (uniqueId: string, newName: string) => {
+    setScenario((prev) => {
       const center = prev.Centers[uniqueId];
       if (!center) return prev;
       const next = {
         ...prev,
         centers: {
           ...prev.Centers,
-          [uniqueId]: { ...center, name: newName},
+          [uniqueId]: { ...center, name: newName },
         },
       };
-      return next; 
-  });
-};
+      return next;
+    });
+  };
 
   return (
     <div>
       <Header onClear={onClear} onSave={onSave} onLoad={onLoad} />
       <div className="content">
-        <div id="contentBackground"> 
-  <div id="content"> 
-    <PipelineBlock
-            onAddPlant={onAddPlant}
-            onAddProduct={onAddProduct}
-            onMovePlant={onMovePlant}
-            onMoveProduct={onMoveProduct}
-            plants={scenario.Plants}
-            products={scenario.Products}
-            onSetPlantInput={onSetPlantInput}
-            onAddPlantOutput={onAddPlantOutput}
-            onAddCenter= {onAddCenter}
-            onAddCenterInput={onSetCenterInput}
-            onAddCenterOutput={onAddCenterOutput}
-            onMoveCenter={onMoveCenter}
-            centers={scenario.Centers}
-            onRemovePlant={onRemovePlant}
-            onRemoveProduct={onRemoveProduct}
-            onRemoveCenter={onRemoveCenter}
-            onRenamePlant = {onRenamePlant}
-            onRenameProduct = {onRenameProduct}
-            onRenameCenter = {onRenameCenter}
-          />
-    </div> 
-</div> 
+        <div id="contentBackground">
+          <div id="content">
+            <PipelineBlock
+              onAddPlant={() => onAddNode("Plants")}
+              onAddProduct={() => onAddNode("Products")}
+              onMovePlant={(id, x, y) => onMoveNode("Plants", id, x, y)}
+              onMoveProduct={(id, x, y) => onMoveNode("Products", id, x, y)}
+              plants={scenario.Plants}
+              products={scenario.Products}
+              onSetPlantInput={onSetPlantInput}
+              onAddPlantOutput={onAddPlantOutput}
+              onAddCenter={() => onAddNode("Centers")}
+              onAddCenterInput={onSetCenterInput}
+              onAddCenterOutput={onAddCenterOutput}
+              onMoveCenter={(id, x, y) => onMoveNode("Centers", id, x, y)}
+              centers={scenario.Centers}
+              onRemovePlant={(id) => onRemoveNode("Plants", id)}
+              onRemoveProduct={(id) => onRemoveNode("Products", id)}
+              onRemoveCenter={(id) => onRemoveNode("Centers", id)}
+              onRenamePlant={onRenamePlant}
+              onRenameProduct={onRenameProduct}
+              onRenameCenter={onRenameCenter}
+            />
+          </div>
+        </div>
       </div>
       <Footer />
     </div>