diff --git a/web/src/components/CaseBuilder/NodesAndEdges.tsx b/web/src/components/CaseBuilder/NodesAndEdges.tsx index 6779241..f8dd4c8 100644 --- a/web/src/components/CaseBuilder/NodesAndEdges.tsx +++ b/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) { const nodeStyle = data.type === 'plant' - ? { background: '#b0e0e6', padding: 10, borderRadius: 5 } - : { background: '#ffd700', padding: 10, borderRadius: 5 }; + ? styles.PlantNode: styles.ProductNode; return ( -
+
+ {data.type === 'plant' && ( + )}
{data.label}
diff --git a/web/src/components/CaseBuilder/PipelineBlock.tsx b/web/src/components/CaseBuilder/PipelineBlock.tsx index 1151c8c..bf89b4a 100644 --- a/web/src/components/CaseBuilder/PipelineBlock.tsx +++ b/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, + }, }); }