Changes made to css and in process of adding delete feature

web/src/components/CaseBuilder/CaseBuilder.tsx

@@ -250,6 +250,32 @@ const onAddCenterOutput = (centerName: string, productName: string) => {
     });
   };
 
+  const onRemovePlant = (plantName: string) => {
+    setCircularData(prev => {
+      const next = { ...prev };
+      delete next.plants[plantName];
+
+      return next;
+    });
+  };
+   const onRemoveProduct = (productName: string) => {
+    setCircularData(prev => {
+      const next = { ...prev };
+      delete next.products[productName];
+
+      return next;
+    });
+  };
+
+   const onRemoveCenter = (centerName: string) => {
+    setCircularData(prev => {
+      const next = { ...prev };
+      delete next.centers[centerName];
+
+      return next;
+    });
+  };
+
   return (
     <div>
       <Header onClear={onClear} onSave={onSave} onLoad={onLoad} />
@@ -270,6 +296,9 @@ const onAddCenterOutput = (centerName: string, productName: string) => {
             onAddCenterOutput={onAddCenterOutput}
             onMoveCenter={onMoveCenter}
             centers={circularData.centers}
+            onRemovePlant={onRemovePlant}
+            onRemoveProduct={onRemoveProduct}
+            onRemoveCenter={onRemoveCenter}
           />
     </div> 
 </div> 

web/src/components/CaseBuilder/PipelineBlock.module.css

@@ -5,33 +5,30 @@
   margin-bottom: 12px !important;
 }
 
-.PlantNode,
+:global(.react-flow__node.PlantNode),
-.ProductNode,
+:global(.react-flow__node.ProductNode),
-.CenterNode {
+:global(.react-flow__node.CenterNode) {
   border-color: rgba(0, 0, 0, 0.8) !important;
   color: black !important;
   font-size: 13px !important;
   border-width: 1px !important;
   border-radius: 6px !important;
   box-shadow: 0px 2px 4px -3px black !important;
-  width: 100%;
+  width: 140px !important;
-  height: 100%;
+  height: 40px !important;
-}
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  display: flex;
 
-.PlantNode {
-  background-color: #8d8 !important;
 }
 
-.ProductNode {
+:global(.react-flow__node.PlantNode) {
-  background-color: #e6e6e6 !important;
+  --xy-node-background-color: #8d8 !important;
 }
-
+:global(.react-flow__node.ProductNode) {
-.CenterNode {
+  --xy-node-background-color: #e6e6e6 !important;
-  background-color: #d3a610;
 }
-
+:global(.react-flow__node.CenterNode) {
-:global(.react-flow__node-default),
+  --xy-node-background-color: #d3a610 !important;
-:global(.react-flow__node-custom)  {
-  width: 150px !important;
-  height: 60px !important;
 }

web/src/components/CaseBuilder/PipelineBlock.tsx

@@ -1,10 +1,10 @@
 import  { CircularPlant, CircularProduct, CircularCenter } from "./CircularData";
 import { Node, Edge } from "@xyflow/react";
 import styles from "./PipelineBlock.module.css";
-import { ReactFlow, Background, Controls,MarkerType } from '@xyflow/react';
+import { ReactFlow, Background, Controls, MarkerType } from '@xyflow/react';
 import Section from '../Common/Section';
 import Card from '../Common/Card';
-import  { useEffect } from "react";
+import  { useEffect, useCallback } from "react";
 import { Connection } from '@xyflow/react';
 import  CustomNode, { CustomNodeData }from "./NodesAndEdges";
 
@@ -21,6 +21,9 @@ interface PipelineBlockProps {
     onAddPlantOutput: (plantName: string, productName: string) => void;
     onAddCenterInput: (plantName: string, productName: string) => void;
     onAddCenterOutput: (plantName: string, productName: string) => void;
+    onRemovePlant: (id:string) => void;
+    onRemoveProduct: (id: string) => void;
+    onRemoveCenter: (id: string) => void;
 
     products: Record<string, CircularProduct>;
     plants: Record<string, CircularPlant>;
@@ -74,6 +77,19 @@ const onNodeDragStop =(_:any, node: Node) => {
   }
 
 };
+ const handleNodesDelete = useCallback((deleted: Node[]) => {
+    deleted.forEach((n) => {
+      const type = mapNameToType[n.id];
+      if (type === "plant") {
+        props.onRemovePlant(n.id);
+      } else if (type === "product") {
+        props.onRemoveProduct(n.id);
+      } else if (type === "center") {
+        props.onRemoveCenter!(n.id);
+      }
+    });
+  }, [props, mapNameToType]);
+
     for (const [productName, product] of Object.entries(props.products) as [string, CircularProduct][]) {
         if(!product.x || !product.y) hasNullPositions = true;
         mapNameToType[productName] = "product";
@@ -81,10 +97,10 @@ const onNodeDragStop =(_:any, node: Node) => {
             id: productName,
             type: "default",
             data: {label: productName, type: 'product'},
-            position: { x:product.x, y:product.y}
+            position: { x:product.x, y:product.y},
+            className: 'ProductNode'
         });
     }
-    console.log("ALL PLANTS:", props.plants);
     for (const [plantName, plant] of Object.entries(props.plants) as [string, CircularPlant][]) {
         if(!plant.x || !plant.y) hasNullPositions = true;
         mapNameToType[plantName] = "plant";
@@ -92,7 +108,8 @@ const onNodeDragStop =(_:any, node: Node) => {
             id: plantName,
             type: "default",
             data: {label: plantName, type: 'plant'},
-            position: { x:plant.x, y:plant.y}
+            position: { x:plant.x, y:plant.y},
+            className: 'PlantNode'
         });
 
          if (plant) {
@@ -130,12 +147,14 @@ const onNodeDragStop =(_:any, node: Node) => {
       type: "default",
       data: { label: centerName, type: "center"},
       position: {x: center.x, y: center.y},
+      className: 'CenterNode'
     });
     if (center.input) {
       edges.push({ 
         id: `${center.input}-${centerName}`,
         source: center.input,
         target:centerName,
+        animated: true,
         style: { stroke: "black"},
         markerEnd: { type: MarkerType.ArrowClosed},
       });
@@ -145,6 +164,7 @@ const onNodeDragStop =(_:any, node: Node) => {
         id: `${centerName}-${out}`,
         source: centerName,
         target:out,
+        animated: true,
         style: { stroke: "black"},
         markerEnd: { type: MarkerType.ArrowClosed},
       });
@@ -165,14 +185,14 @@ return (
 <Card>
 <div className={styles.PipelineBlock}>
 <ReactFlow
+
           nodes={nodes}
           edges={edges}
           onNodeDoubleClick={onNodeDoubleClick}
           onNodeDragStop={onNodeDragStop}
           onConnect={onConnect}
           onNodesDelete={handleNodesDelete}
-          onEdgesDelete={handleEdgesDelete}
+          deleteKeyCode="Delete"
-          deleteKeyCode={"Delete"}
           maxZoom={1.25}
           minZoom={0.5}
           snapToGrid={true}