@evenicanpm/admin-integrate 1.3.0 → 1.6.0

package/src/components/integration-view/integration-view.tsx

@@ -15,50 +15,34 @@ import "@xyflow/react/dist/style.css";
 import {
 	Background,
 	Controls,
-	type InternalNode,
 	type Node,
 	ReactFlow,
 	ReactFlowProvider,
 	useEdgesState,
 	useNodesState,
 	useReactFlow,
-	useStoreApi,
 } from "@xyflow/react";
 import type {
-	Process,
+	ConfigExport,
 	ProcessExecutionDetails,
 	ProcessTask,
 	ProcessTaskExecution,
+	ProcessTaskExport,
 } from "../../../../admin-core/src/api/e4/graphqlRequestSdk";
 import { layoutOptions as elkOptions } from "./elk-layout-options";
-import type {
-	ElkExtendedEdgeWithFlow,
-	ElkNodeWithFlow,
-	GroupNode,
-	ProcessTaskExecutionNode,
-	ProcessTaskNode,
-} from "./elk-types";
-
-// import {
-// 	exportIcon,
-// 	inputIcon,
-// 	markerEnd,
-// 	pullIcon,
-// 	pushIcon,
-// 	storageIcon,
-// } from "./icons";
-
-import { MarkerType } from "@xyflow/react";
+import type { ElkExtendedEdgeWithFlow, ElkNodeWithFlow } from "./elk-types";
+
 import _ from "lodash";
 import { edgeTypes, nodeTypes } from "./flow-types";
 
-const elk = new ELK();
+import {
+	mapToCamelCase,
+	mapEmptyNodesAndEdges,
+	mapProcessConfigToNodesAndEdges,
+	mapProcessTasksToNodesAndEdges,
+} from "./utils/mapping";
 
-const markerEnd = {
-	type: MarkerType.ArrowClosed,
-	width: 20,
-	height: 20,
-};
+const elk = new ELK();
 
 const calculateMaxWidth = (
 	processTasks: ProcessTask[] | ProcessTaskExecution[],
@@ -148,305 +132,29 @@ const calcYOffset = () => {
 interface Props {
 	title?: string; // e.g. Executions
 	section?: string; // e.g. e4Integrate
-	data?: Process | ProcessExecutionDetails;
+	data?: ProcessExecutionDetails;
+	config?: ConfigExport;
 	variant?: "process" | "process-execution";
 	onTaskClick?:
 		| ((id: string) => void)
 		| ((processTaskExecution: ProcessTaskExecution) => void);
 	drawerOpen?: boolean;
 	processTaskId?: string;
+	onConfigChange?: (processConfig: ConfigExport) => void;
+	onAdd?: Function;
+	canEdit?: boolean;
 }
 
-const mapEmptyNodesAndEdges = (
-	data: Process | ProcessExecutionDetails,
-	nodeWidth: number,
-) => {
-	const nodes: ElkNodeWithFlow[] = [];
-	const edges: ElkExtendedEdgeWithFlow[] = [];
-
-	const entryPoint: ElkNodeWithFlow = {
-		id: "entry-point",
-		type: "entry-node",
-		data: {
-			isScheduled: false,
-			isTriggered: false,
-		},
-		width: nodeWidth,
-		height:
-			(data as Process)?.isScheduled && (data as Process)?.isTriggered
-				? 104
-				: 70,
-		position: { x: 0, y: 0 },
-		layoutOptions: {
-			"org.eclipse.elk.priority": "1",
-		},
-	};
-
-	nodes.push(entryPoint);
-
-	const entryPointConnector: ElkNodeWithFlow = {
-		id: "entry-point-connector",
-		position: { x: 0, y: 0 },
-		type: "connection-node",
-		width: 1,
-		height: 1,
-		//extent: "parent",
-	};
-
-	nodes.push(entryPointConnector);
-
-	const groupId = `group-1`;
-
-	const emptyNode = {
-		id: groupId,
-		data: {
-			label: `Group 1`,
-		},
-		position: { x: 0, y: 0 },
-		type: "empty-node",
-		children: [],
-		layoutOptions: {
-			"org.eclipse.elk.priority": groupId,
-		},
-		draggable: false,
-		width: nodeWidth,
-		height: 100,
-	};
-
-	nodes.push(emptyNode);
-
-	edges.push({
-		id: `entry-point-entry-point-connector`,
-		sources: ["entry-point"],
-		targets: ["entry-point-connector"],
-		type: "default-edge",
-	});
-
-	edges.push({
-		id: `entry-point-connector-${groupId}`,
-		sources: ["entry-point-connector"],
-		targets: [groupId],
-		type: "default-edge",
-		markerEnd: markerEnd,
-	});
-
-	return {
-		nodes,
-		edges,
-	};
-};
-
-const mapProcessTasksToNodesAndEdges = (
-	data: Process | ProcessExecutionDetails,
-	nodeWidth: number,
-	variant: "process" | "process-execution",
-) => {
-	const entryPoint: ElkNodeWithFlow = {
-		id: "entry-point",
-		type: "entry-node",
-		data: {
-			isScheduled:
-				variant === "process" ? !!(data as Process)?.isScheduled : false,
-			isTriggered:
-				variant === "process" ? !!(data as Process)?.isTriggered : false,
-		},
-		width: nodeWidth,
-		height:
-			(data as Process)?.isScheduled && (data as Process)?.isTriggered
-				? 104
-				: 70,
-		position: { x: 0, y: 0 },
-		layoutOptions: {
-			"org.eclipse.elk.priority": "1",
-		},
-	};
-
-	const entryPointConnector: ElkNodeWithFlow = {
-		id: "entry-point-connector",
-		position: { x: 0, y: 0 },
-		type: "connection-node",
-		width: 1,
-		height: 1,
-		//extent: "parent",
-	};
-
-	let groupLabels: number[];
-
-	if (variant === "process") {
-		groupLabels = _.uniq(
-			_.map((data as Process)?.processTasks, "parallelProcessingGroup"),
-		);
-	} else {
-		groupLabels = _.uniq(
-			_.map(
-				(data as ProcessExecutionDetails)?.processTaskExecutions,
-				"parallelProcessingGroup",
-			),
-		);
-	}
-
-	groupLabels = _.sortBy(groupLabels);
-
-	const groups: GroupNode[] = groupLabels.map((groupLabel) => ({
-		id: `group-${groupLabel}`,
-		data: {
-			label: `Group ${groupLabel}`,
-			variant: variant,
-			parallelProcessingGroup: groupLabel,
-		},
-		position: { x: 0, y: 0 },
-		type: "group-node",
-		children: [],
-		layoutOptions: {
-			"org.eclipse.elk.priority": `${groupLabel}`,
-		},
-		draggable: false,
-	}));
-
-	const edges = [];
-
-	edges.push({
-		id: `entry-point-entry-point-connector`,
-		sources: ["entry-point"],
-		targets: ["entry-point-connector"],
-		type: "default-edge",
-	});
-
-	groups.forEach((group) => {
-		edges.push({
-			id: `entry-point-connector-${group.id}`,
-			sources: ["entry-point-connector"],
-			targets: [group.id],
-			type: "default-edge",
-			markerEnd: markerEnd,
-		});
-
-		const groupTasks = _.sortBy(
-			(variant === "process"
-				? (data as Process)?.processTasks
-				: (data as ProcessExecutionDetails)?.processTaskExecutions
-			)?.filter(
-				(task) =>
-					task?.parallelProcessingGroup?.toString() === group.id.split("-")[1],
-			),
-			["sort", "name"],
-		);
-
-		var tasksPartitioned = _.values(_.groupBy(groupTasks, "sort"));
-
-		const groupNodes: (
-			| ProcessTaskNode
-			| ProcessTaskExecutionNode
-			| ElkNodeWithFlow
-		)[] = [];
-
-		tasksPartitioned.forEach((partition) => {
-			partition.forEach((task, index) => {
-				groupNodes.push({
-					id: `task-${task?.id}`,
-					data: {
-						processTask:
-							variant === "process" ? (task as ProcessTask) : undefined,
-						processTaskExecution:
-							variant === "process-execution"
-								? (task as ProcessTaskExecution)
-								: undefined,
-						//label: task?.name as string,
-						/*icon: mapIntegrationIconByCode(
-							task?.orchestrationType?.code as string,
-						),*/
-						isLast: index === partition.length - 1,
-						//executionStatus: variant === 'process' ? undefined : (task as ProcessTaskExecution)?.executionStatus.id,
-					},
-					position: { x: 0, y: 0 },
-					type: variant === "process" ? "task-node" : "execution-task-node",
-					width: nodeWidth + (index === partition.length - 1 ? 32 : 0), //hard coded for now
-					height: 70, // hard coded for now
-					//extent: "parent",
-					parentId: group.id,
-					//sort: task?.sort as number | undefined,
-				});
-			});
-		});
-
-		let prevConnectorId: string | null = null;
-
-		tasksPartitioned.forEach((partition, tpIndex) => {
-			_.sortBy(partition, [(task) => task?.name]);
-
-			if (prevConnectorId) {
-				partition.forEach((task) => {
-					edges.push({
-						id: `${prevConnectorId}-${task?.id}`,
-						sources: [prevConnectorId],
-						targets: [`task-${task?.id}`],
-						type: "default-edge",
-						markerEnd: markerEnd,
-					});
-				});
-			}
-
-			const connectorId = `group-${group.id}-connect-${tpIndex}`;
-
-			prevConnectorId = connectorId;
-
-			if (tpIndex !== tasksPartitioned.length - 1) {
-				partition.forEach((task) => {
-					edges.push({
-						id: `task-${task?.id}-${connectorId}`,
-						sources: [`task-${task?.id}`],
-						targets: [connectorId],
-						type: "default-edge",
-					});
-				});
-			}
-			if (prevConnectorId && tpIndex !== tasksPartitioned.length - 1) {
-				groupNodes.push({
-					id: prevConnectorId,
-					position: { x: 0, y: 0 },
-					type: "connection-node",
-					width: 1,
-					height: 1,
-					extent: "parent",
-					parentId: group.id,
-				});
-			}
-		});
-
-		// groupTasks.map((task) => ({
-		//   id: `task-${task.id}`,
-		//   data: {
-		//     label: task.name,
-		//     //icon: pullIcon(),
-		//     isLast: true,
-		//   },
-		//   position: { x: 0, y: 0 },
-		//   type: "task-node",
-		//   width: 450, //hard coded for now
-		//   height: 70, //hard coded for now
-		//   extent: "parent",
-		//   parentId: group.id,
-		//   sort: task.sort,
-		// }));
-
-		group.children = groupNodes;
-	});
-
-	return { nodes: [entryPoint, entryPointConnector, ...groups], edges };
-};
-
 function getOverlapY(rect1: any, rect2: any) {
 	// Calculate intersection coordinates
 	//const intersectX1 = Math.max(rect1.x, rect2.x);
 	const intersectY1 = Math.max(rect1.y, rect2.y);
-	//const intersectX2 = Math.min(rect1.x + rect1.width, rect2.x + rect2.width);
 	const intersectY2 = Math.min(rect1.y + rect1.height, rect2.y + rect2.height);
 
 	// Check for overlap and calculate area
 	if (/*intersectX1 >= intersectX2 ||*/ intersectY1 >= intersectY2) {
 		return 0; // No overlap
 	} else {
-		//const overlapWidth = intersectX2 - intersectX1;
 		const overlapHeight = intersectY2 - intersectY1;
 		return /*overlapWidth **/ overlapHeight;
 	}
@@ -456,29 +164,32 @@ function getOverlapX(rect1: any, rect2: any) {
 	// Calculate intersection coordinates
 	//const intersectX1 = Math.max(rect1.x, rect2.x);
 	const intersectX1 = Math.max(rect1.x, rect2.x);
-	//const intersectX2 = Math.min(rect1.x + rect1.width, rect2.x + rect2.width);
 	const intersectX2 = Math.min(rect1.x + rect1.width, rect2.x + rect2.width);
 
 	// Check for overlap and calculate area
 	if (intersectX1 >= intersectX2) {
 		return 0; // No overlap
 	} else {
-		//const overlapWidth = intersectX2 - intersectX1;
 		const overlapHeight = intersectX2 - intersectX1;
 		return /*overlapWidth **/ overlapHeight;
 	}
 }
 
 const IntegrationView: React.FC<Props> = ({
-	data: processInput,
+	data: processExecutionInput,
 	variant,
 	onTaskClick,
 	drawerOpen,
 	processTaskId: selectedProcessTaskId,
+	config: configInput,
+	onConfigChange,
+	onAdd,
+	canEdit,
 }: Props) => {
-	const [process, setProcess] = useState<
-		Process | ProcessExecutionDetails | undefined
-	>(processInput);
+	const [processExecutionDetails, _setProcess] = useState<
+		ProcessExecutionDetails | undefined
+	>(processExecutionInput);
+
 	const [nodes, setNodes, onNodesChange] = useNodesState<any>([]);
 	const [edges, setEdges, onEdgesChange] = useEdgesState<any>([]);
 	const [zonesY, setZonesY] = useEdgesState<any>([]);
@@ -489,24 +200,38 @@ const IntegrationView: React.FC<Props> = ({
 	const onConnect = useCallback(() => {}, []);
 	const onLayout = useCallback(
 		(processInput: any) => {
-			const tasks = (process as Process)?.processTasks;
+			let tasks;
+
+			if (variant == "process") {
+				tasks = processInput?.Processes[0]?.ProcessTasks?.map(
+					(processTask: ProcessTaskExport) => mapToCamelCase(processTask),
+				);
+			} else {
+				tasks = (processInput ?? processExecutionDetails)
+					?.processTaskExecutions;
+			}
+
 			if (
 				(tasks && tasks.length > 0) ||
 				(processInput && processInput?.processTasks?.length > 0)
 			) {
 				const width = calculateMaxWidth(
-					variant === "process"
-						? ((processInput ?? (process as Process))
-								?.processTasks as ProcessTask[])
-						: ((processInput ?? (process as ProcessExecutionDetails))
-								?.processTaskExecutions as ProcessTaskExecution[]),
+					tasks as ProcessTask[] | ProcessTaskExecution[],
 				);
 
-				const mapped = mapProcessTasksToNodesAndEdges(
-					processInput ?? process,
-					width,
-					variant as "process" | "process-execution",
-				);
+				const mapped =
+					variant == "process"
+						? mapProcessConfigToNodesAndEdges(
+								processInput,
+								width,
+								variant,
+								onAdd,
+							)
+						: mapProcessTasksToNodesAndEdges(
+								processInput ?? process,
+								width,
+								variant as "process" | "process-execution",
+							);
 
 				const opts = { ...elkOptions };
 				const ns = mapped.nodes;
@@ -517,7 +242,7 @@ const IntegrationView: React.FC<Props> = ({
 						setNodes(layoutedNodes);
 						setEdges(layoutedEdges);
 
-						var zonesY = _.uniqBy(
+						const zonesY = _.uniqBy(
 							layoutedNodes.filter((n: any) => n.type === "task-node"),
 							"data.processTask.sort",
 						).map((n: any) => ({
@@ -528,7 +253,7 @@ const IntegrationView: React.FC<Props> = ({
 
 						setZonesY(zonesY);
 
-						var zonesX = _.uniqBy(
+						const zonesX = _.uniqBy(
 							layoutedNodes.filter((n: any) => n.type === "group-node"),
 							"data.parallelProcessingGroup",
 						).map((n: any) => ({
@@ -543,7 +268,7 @@ const IntegrationView: React.FC<Props> = ({
 					},
 				);
 			} else if (
-				(tasks && tasks.length === 0) ||
+				tasks?.length === 0 ||
 				(processInput && processInput?.processTasks?.length === 0)
 			) {
 				const mapped = mapEmptyNodesAndEdges(processInput ?? process, 400);
@@ -577,14 +302,14 @@ const IntegrationView: React.FC<Props> = ({
 	) => {
 		if (!drawerOpen) {
 			if (onTaskClick) {
-				if (variant === "process") onTaskClick(node.data.processTask.id);
+				if (variant === "process") onTaskClick(node.data.processTask);
 				else if (variant === "process-execution")
 					onTaskClick(node.data.processTaskExecution);
 			}
 
 			setTimeout(() => {
-				var parentx = 0;
-				var parenty = 0;
+				let parentx = 0;
+				let parenty = 0;
 
 				if (node.parentId) {
 					const parentNode = nodes.find((n) => n.id === node.parentId);
@@ -604,162 +329,11 @@ const IntegrationView: React.FC<Props> = ({
 
 	// Calculate the initial layout on mount.
 	useLayoutEffect(() => {
-		onLayout(process);
-	}, []);
-
-	// ----- Proximity Connect Logic -----
-	const store = useStoreApi();
-	const { getInternalNode } = useReactFlow();
-	const MIN_DISTANCE_LOCAL = 150;
-
-	const getClosestEdge = useCallback(
-		(node: Node, isTemp = true) => {
-			const { nodeLookup } = store.getState();
-			const internalNode = getInternalNode(node.id);
-			if (!internalNode) return null;
-
-			// drag vector
-			const dragDx =
-				(node.position?.x ?? internalNode.internals.positionAbsolute.x) -
-				internalNode.internals.positionAbsolute.x;
-			const dragDy =
-				(node.position?.y ?? internalNode.internals.positionAbsolute.y) -
-				internalNode.internals.positionAbsolute.y;
-
-			const isVerticalDrag = Math.abs(dragDy) > Math.abs(dragDx);
-			const dragSignX = Math.sign(dragDx);
-			const dragSignY = Math.sign(dragDy);
-
-			type Candidate = {
-				distance: number;
-				node: InternalNode<Node> | null;
-				dx: number;
-				dy: number;
-			};
-
-			const absolutePosWithParent = (n: InternalNode<Node>) => {
-				const abs = n.internals.positionAbsolute;
-
-				const parentNode = n.parentId ? getInternalNode(n.parentId) : null;
-				const parentAbs = parentNode?.internals.positionAbsolute ?? {
-					x: 0,
-					y: 0,
-				};
-
-				return { x: abs.x + parentAbs.x, y: abs.y + parentAbs.y };
-			};
-
-			const myPos = absolutePosWithParent(internalNode);
-
-			// Only siblings
-			const siblings = Array.from(nodeLookup.values()).filter(
-				(n) => n.parentId === internalNode.parentId,
-			);
-
-			const directionalCandidate = siblings.reduce<Candidate>(
-				(res, n) => {
-					if (n.id === internalNode.id) return res;
-					const np = absolutePosWithParent(n);
-					const dx = np.x - myPos.x;
-					const dy = np.y - myPos.y;
-					const d = Math.sqrt(dx * dx + dy * dy);
-					if (d >= MIN_DISTANCE_LOCAL) return res;
-
-					let directionMatches = true;
-					if (isVerticalDrag) {
-						if (dragSignY !== 0) directionMatches = Math.sign(dy) === dragSignY;
-					} else {
-						if (dragSignX !== 0) directionMatches = Math.sign(dx) === dragSignX;
-					}
-
-					if (!directionMatches) return res;
-					if (d < res.distance) return { distance: d, node: n, dx, dy };
-					return res;
-				},
-				{ distance: Number.MAX_VALUE, node: null, dx: 0, dy: 0 },
-			);
-
-			let chosen = directionalCandidate;
-			if (!chosen.node) {
-				chosen = siblings.reduce(
-					(res, n) => {
-						if (n.id === internalNode.id) return res;
-						const np = absolutePosWithParent(n);
-						const dx = np.x - myPos.x;
-						const dy = np.y - myPos.y;
-						const d = Math.sqrt(dx * dx + dy * dy);
-						if (d < res.distance && d < MIN_DISTANCE_LOCAL)
-							return { distance: d, node: n, dx, dy };
-						return res;
-					},
-					{ distance: Number.MAX_VALUE, node: null, dx: 0, dy: 0 } as Candidate,
-				);
-			}
-
-			if (!chosen.node) return null;
-
-			const chosenPos = absolutePosWithParent(chosen.node);
-			const chosenAbove = chosenPos.y < myPos.y;
-
-			// Default handle selection by ReactFlow:
-			// chosenAbove => chosen -> dragged
-			// chosenBelow => dragged -> chosen
-			const sourceId = chosenAbove ? chosen.node.id : internalNode.id;
-			const targetId = chosenAbove ? internalNode.id : chosen.node.id;
-
-			return {
-				id: `${sourceId}-${targetId}${isTemp ? "-temp" : "-final"}`,
-				source: sourceId,
-				target: targetId,
-				className: isTemp ? "temp" : "final",
-			};
-		},
-		[store, getInternalNode],
-	);
-
-	const onNodeDrag = useCallback(
-		(_: any, node: Node) => {
-			const closeEdge = getClosestEdge(node, true);
-			setEdges((es) => {
-				const nextEdges = es.filter((e) => e.className !== "temp");
-				if (
-					closeEdge &&
-					!nextEdges.some(
-						(ne) =>
-							ne.source === closeEdge.source && ne.target === closeEdge.target,
-					)
-				) {
-					nextEdges.push(closeEdge);
-				}
-				return nextEdges;
-			});
-		},
-		[getClosestEdge, setEdges],
-	);
-
-	// const onNodeDragStop = useCallback(
-	// 	(_: any, node: Node) => {
-	// 		const closeEdge = getClosestEdge(node, false);
-	// 		setEdges((es) => {
-	// 			const nextEdges = es.filter((e) => e.className !== "temp");
-	// 			if (
-	// 				closeEdge &&
-	// 				!nextEdges.some(
-	// 					(ne) =>
-	// 						ne.source === closeEdge.source && ne.target === closeEdge.target,
-	// 				)
-	// 			) {
-	// 				nextEdges.push(closeEdge);
-	// 			}
-	// 			return nextEdges;
-	// 		});
-	// 	},
-	// 	[getClosestEdge],
-	// );
-	// ----- End Proximity Connect Logic -----
+		onLayout(configInput ?? processExecutionInput);
+	}, [configInput, processExecutionInput]);
 
 	useLayoutEffect(() => {
-		let data = JSON.parse(JSON.stringify(nodes));
+		let data = globalThis.structuredClone(nodes);
 
 		data = data.map((node: any) => {
 			return {
@@ -777,53 +351,31 @@ const IntegrationView: React.FC<Props> = ({
 		setNodes(data);
 	}, [drawerOpen, selectedProcessTaskId]);
 
-	// const handleNodeDragStart = (_: MouseEvent, node: Node): any => {
-	// 	let edgesFiltered = edges.filter((edge: any) => !(edge.source === node.id || edge.target === node.id));
-
-	// 	let edgesRemoved = edges.filter((edge: any) => (edge.source === node.id || edge.target === node.id));
-
-	// 	let source;
-
-	// 	let target;
-
-	// 	edgesRemoved.forEach((edge: any) => {
-	// 		if(edge.source === node.id) {
-	// 			target = edge.target;
-	// 		}
-	// 		if(edge.target === node.id) {
-	// 			source = edge.source;
-	// 		}
-	// 	});
-
-	// 	edgesFiltered.push({
-	// 		id: `${source}-${target}-temp`,
-	// 		sources: [source],
-	// 		targets: [target],
-	// 		source,
-	// 		target,
-	// 		type: "default-edge",
-	// 		//markerEnd: markerEnd,
-	// 	})
-
-	// 	setEdges(edgesFiltered);
-	// };
-
 	const handleNodeDragStart = (_e: ReactMouseEvent, node: Node): any => {
 		let edgesFiltered = [];
 
 		const edgeList: any[] = [];
 
+		let nodeIds: any[] = [];
+
 		edges.forEach((edge: any) => {
+			if (edge.source === node.id) {
+				nodeIds.push(edge.target);
+			}
+			if (edge.target === node.id) {
+				nodeIds.push(edge.source);
+			}
 			if (edge.source === node.id || edge.target === node.id) {
 				edgeList.push(edge);
 			}
 		});
 
+		nodeIds = _.uniq(nodeIds);
+
 		let edgeIds: any[] = [];
 
 		edgeList.forEach((edge: any) => {
-			edgeIds.push(edge.source);
-			edgeIds.push(edge.target);
+			edgeIds.push(edge.source, edge.target);
 		});
 
 		edgeIds = _.uniq(edgeIds);
@@ -837,25 +389,16 @@ const IntegrationView: React.FC<Props> = ({
 
 		edgesFiltered = edgesFiltered.filter(
 			(edge: any) =>
-				edge.id.includes((node?.data?.processTask as ProcessTask)?.id) ===
-				false,
+				!edge.id.includes((node?.data?.processTask as ProcessTask)?.id),
 		);
 
-		edgeIds = edgeIds.filter((id: any) => id !== node.id);
-
-		if (edgeIds.length === 2) {
-			edgesFiltered.push({
-				id: `${edgeIds[0]}-${edgeIds[1]}-temp`,
-				sources: [edgeIds[0]],
-				targets: [edgeIds[1]],
-				source: edgeIds[0],
-				target: edgeIds[1],
-				type: "default-edge",
-				markerEnd: markerEnd,
-			});
-		}
+		let nodesFiltered = nodes.filter(
+			(node: any) => !nodeIds.includes(node?.id),
+		);
 
 		setEdges(edgesFiltered);
+
+		setNodes(nodesFiltered);
 	};
 
 	const handleNodeDragEnd = (_e: ReactMouseEvent, node: Node): any => {
@@ -967,24 +510,45 @@ const IntegrationView: React.FC<Props> = ({
 			return;
 		}
 
-		const modifiedProcess = JSON.parse(JSON.stringify(process));
+		if (!configInput) {
+			throw new Error("configInput is required");
+		}
 
-		let updatedTasks = modifiedProcess?.processTasks?.map((task: any) => {
-			if (zoneX && task.id === (node?.data?.processTask as ProcessTask)?.id) {
-				return {
-					...task,
-					parallelProcessingGroup: zoneX.parallelProcessingGroup,
-				};
-			}
-			return task;
-		});
+		const modifiedProcess: ConfigExport =
+			globalThis.structuredClone(configInput);
 
-		updatedTasks = updatedTasks.map((task: any) => {
-			if (zoneX && task.id === (node?.data?.processTask as ProcessTask)?.id) {
-				return {
-					...task,
-					sort: zoneY.sort,
-				};
+		let updatedTasks = modifiedProcess.Processes?.[0]?.ProcessTasks?.map(
+			(task) => {
+				if (task) {
+					if (
+						zoneX && (node?.data?.processTask as ProcessTask)?.id
+							? task.ProcessTaskId ===
+								(node?.data?.processTask as ProcessTask)?.id
+							: task.Name === (node?.data?.processTask as ProcessTask)?.name
+					) {
+						return {
+							...task,
+							ParallelProcessingGroup: zoneX.parallelProcessingGroup,
+						};
+					}
+				}
+				return task;
+			},
+		);
+
+		updatedTasks = updatedTasks?.map((task) => {
+			if (task) {
+				if (
+					zoneY && (node?.data?.processTask as ProcessTask)?.id
+						? task.ProcessTaskId ===
+							(node?.data?.processTask as ProcessTask)?.id
+						: task.Name === (node?.data?.processTask as ProcessTask)?.name
+				) {
+					return {
+						...task,
+						Sort: zoneY.sort,
+					};
+				}
 			}
 			return task;
 		});
@@ -993,37 +557,41 @@ const IntegrationView: React.FC<Props> = ({
 		let index = 0;
 
 		updatedTasks = _.sortBy(updatedTasks, [
-			"parallelProcessingGroup",
-			"sort",
-		]).map((task: any) => {
-			if (task.parallelProcessingGroup !== prevParallelProcessingGroup) {
-				prevParallelProcessingGroup = task.parallelProcessingGroup;
-				index++;
-			}
+			"ParallelProcessingGroup",
+			"Sort",
+		])?.map((task) => {
+			if (task) {
+				if (task.ParallelProcessingGroup !== prevParallelProcessingGroup) {
+					prevParallelProcessingGroup = task.ParallelProcessingGroup;
+					index++;
+				}
 
-			task.parallelProcessingGroup = index;
+				task.ParallelProcessingGroup = index;
+			}
 
 			return task;
 		});
 
-		var partitionedTasks = _.values(
-			_.groupBy(updatedTasks, "parallelProcessingGroup"),
+		const partitionedTasks = _.values(
+			_.groupBy(updatedTasks, "ParallelProcessingGroup"),
 		);
 
 		let processTaskValue: any[] = [];
 
-		partitionedTasks.forEach((partition: any) => {
+		partitionedTasks.forEach((partition) => {
 			index = 0;
 			let prevSort: any = null;
 
-			const sortedPartition = _.sortBy(partition, ["sort", "name"]).map(
-				(task: any) => {
-					if (task.sort !== prevSort) {
-						prevSort = task.sort;
-						index++;
-					}
+			const sortedPartition = _.sortBy(partition, ["Sort", "Name"]).map(
+				(task) => {
+					if (task) {
+						if (task.Sort !== prevSort) {
+							prevSort = task.Sort;
+							index++;
+						}
 
-					task.sort = index;
+						task.Sort = index;
+					}
 
 					return task;
 				},
@@ -1032,11 +600,10 @@ const IntegrationView: React.FC<Props> = ({
 			processTaskValue = processTaskValue.concat(sortedPartition);
 		});
 
-		modifiedProcess.processTasks = processTaskValue;
+		if (modifiedProcess?.Processes?.[0])
+			modifiedProcess.Processes[0].ProcessTasks = processTaskValue;
 
-		setProcess(modifiedProcess);
-
-		onLayout(modifiedProcess);
+		if (onConfigChange) onConfigChange(modifiedProcess);
 	};
 
 	return (
@@ -1055,8 +622,6 @@ const IntegrationView: React.FC<Props> = ({
 					onNodeClick={handleNodeClick}
 					onNodeDragStart={handleNodeDragStart}
 					onNodeDragStop={handleNodeDragEnd}
-					onNodeDrag={onNodeDrag}
-					//onNodeDragStop={onNodeDragStop}
 					fitView={true} // Fits the view on initial load
 					fitViewOptions={{
 						padding: 0.1,
@@ -1066,11 +631,11 @@ const IntegrationView: React.FC<Props> = ({
 						duration: 200,
 						nodes: nodes, // nodes to fit
 					}} // Optional options for initial fit
-					nodesDraggable={true}
+					nodesDraggable={canEdit}
 					minZoom={0.1} // Lock zoom to 1
 					maxZoom={2} // Lock zoom to 1
-					nodesConnectable={!drawerOpen}
-					elementsSelectable={!drawerOpen}
+					nodesConnectable={canEdit && !drawerOpen}
+					elementsSelectable={canEdit && !drawerOpen}
 					panOnDrag={!drawerOpen}
 					zoomOnScroll={!drawerOpen}
 					zoomOnDoubleClick={!drawerOpen}
@@ -1083,7 +648,7 @@ const IntegrationView: React.FC<Props> = ({
 	);
 };
 
-export default (props: Props) => (
+const IntegrationViewWrapper = (props: Props): React.JSX.Element => (
 	<ReactFlowProvider>
 		<IntegrationView
 			data={props.data}
@@ -1091,6 +656,12 @@ export default (props: Props) => (
 			onTaskClick={props.onTaskClick}
 			drawerOpen={props.drawerOpen}
 			processTaskId={props.processTaskId}
+			config={props.config}
+			onConfigChange={props.onConfigChange}
+			onAdd={props.onAdd}
+			canEdit={props.canEdit}
 		/>
 	</ReactFlowProvider>
 );
+
+export default IntegrationViewWrapper;