Added a nodes and edges file to ensure customizability, connected it to pipelineblock

web/src/components/CaseBuilder/NodesAndEdges.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Position, NodeProps, Handle } from '@xyflow/react';
+
+export interface CustomNodeData {
+    label: string;
+    type: 'plant' | 'product';
+}
+
+export default function CustomNode({ data }: NodeProps<any>) {
+  const nodeStyle =
+    data.type === 'plant'
+      ? { background: '#b0e0e6', padding: 10, borderRadius: 5 }
+      : { background: '#ffd700', padding: 10, borderRadius: 5 };
+ 
+  return (
+<div style={nodeStyle}>
+<Handle type="target" position={Position.Left} style={{ background: '#555' }} />
+<div>{data.label}</div>
+<Handle type="source" position={Position.Right} style={{ background: '#555' }} />
+</div>
+  );
+}; 

web/src/components/CaseBuilder/PipelineBlock.tsx

@@ -6,6 +6,7 @@ import Section from '../Common/Section';
 import Card from '../Common/Card';
 import  { useEffect } from "react";
 import { Connection } from '@xyflow/react';
+import  CustomNode, { CustomNodeData }from "./NodesAndEdges";
 
 
 
@@ -90,7 +91,7 @@ const onNodeDragStop =(_:any, node: Node) => {
 
             });
           }  
-          for (const outputProduct of plant.inputs){
+          /**for (const outputProduct of plant.inputs){
             edges.push({
                 id: `${plantName}-${outputProduct}`,
                 source: plantName,
@@ -100,6 +101,7 @@ const onNodeDragStop =(_:any, node: Node) => {
 
             });
           } 
+            */
     }
 
     }
@@ -128,6 +130,7 @@ return (
           minZoom={0.5}
           snapToGrid={true}
           preventScrolling={false}
+          nodeTypes={{default: CustomNode}}
         >
           <Background />
           <Controls showInteractive={false} />