Changed css and added customized edge to include an arrow to point from products to plants

web/src/components/CaseBuilder/NodesAndEdges.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Position, NodeProps, Handle } from '@xyflow/react';
+import styles from './PipelineBlock.module.css';
 
 export interface CustomNodeData {
     label: string;
@@ -9,12 +10,13 @@ export interface CustomNodeData {
 export default function CustomNode({ data }: NodeProps<any>) {
   const nodeStyle =
     data.type === 'plant'
-      ? { background: '#b0e0e6', padding: 10, borderRadius: 5 }
-      : { background: '#ffd700', padding: 10, borderRadius: 5 };
+      ? styles.PlantNode: styles.ProductNode;
  
   return (
-<div style={nodeStyle}>
+<div className={`${styles.node} ${nodeStyle}`}>
+      {data.type === 'plant' && (
 <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

@@ -1,7 +1,7 @@
 import  { CircularPlant, CircularProduct } from "./CircularData";
 import { Node, Edge } from "@xyflow/react";
 import styles from "./PipelineBlock.module.css";
-import { ReactFlow, Background, Controls } 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";
@@ -88,6 +88,9 @@ const onNodeDragStop =(_:any, node: Node) => {
                 target: plantName,
                 animated: true,
                 style: { stroke: "black" },
+                markerEnd: {
+                  type: MarkerType.ArrowClosed,
+                },
 
             });
           }