From 5a3c3564b5a2f016a4222a8bbb11d07358db7354 Mon Sep 17 00:00:00 2001
From: Khwaja <okhwaja@anl.gov>
Date: Wed, 25 Jun 2025 15:19:46 -0500
Subject: [PATCH] Added a nodes and edges file to ensure customizability,
 connected it to pipelineblock

---
 .../components/CaseBuilder/NodesAndEdges.tsx  | 22 +++++++++++++++++++
 .../components/CaseBuilder/PipelineBlock.tsx  |  5 ++++-
 2 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 web/src/components/CaseBuilder/NodesAndEdges.tsx

diff --git a/web/src/components/CaseBuilder/NodesAndEdges.tsx b/web/src/components/CaseBuilder/NodesAndEdges.tsx
new file mode 100644
index 0000000..6779241
--- /dev/null
+++ b/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>
+  );
+}; 
\ No newline at end of file
diff --git a/web/src/components/CaseBuilder/PipelineBlock.tsx b/web/src/components/CaseBuilder/PipelineBlock.tsx
index 8934ca1..1151c8c 100644
--- a/web/src/components/CaseBuilder/PipelineBlock.tsx
+++ b/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} />