@evenicanpm/admin-integrate 1.2.2 → 1.3.0

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

@@ -1,31 +1,79 @@
 "use client";
 
-import React, { useCallback, useLayoutEffect } from "react";
 import { Box } from "@mui/material";
-
 import ELK from "elkjs/lib/elk.bundled.js";
+import type React from "react";
+import {
+	type MouseEvent as ReactMouseEvent,
+	useCallback,
+	useLayoutEffect,
+	useState,
+} from "react";
 
 import "@xyflow/react/dist/style.css";
 
 import {
 	Background,
 	Controls,
+	type InternalNode,
+	type Node,
 	ReactFlow,
 	ReactFlowProvider,
 	useEdgesState,
 	useNodesState,
 	useReactFlow,
+	useStoreApi,
 } from "@xyflow/react";
-
-import { nodeTypes, edgeTypes } from "./flow-types";
-
+import type {
+	Process,
+	ProcessExecutionDetails,
+	ProcessTask,
+	ProcessTaskExecution,
+} 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 { initialNodes, initialEdges } from "./temp-data/initialElements";
-import { ElkExtendedEdgeWithFlow, ElkNodeWithFlow } from "./elk-types";
+// import {
+// 	exportIcon,
+// 	inputIcon,
+// 	markerEnd,
+// 	pullIcon,
+// 	pushIcon,
+// 	storageIcon,
+// } from "./icons";
+
+import { MarkerType } from "@xyflow/react";
+import _ from "lodash";
+import { edgeTypes, nodeTypes } from "./flow-types";
 
 const elk = new ELK();
 
+const markerEnd = {
+	type: MarkerType.ArrowClosed,
+	width: 20,
+	height: 20,
+};
+
+const calculateMaxWidth = (
+	processTasks: ProcessTask[] | ProcessTaskExecution[],
+) => {
+	let maxCharCount = 0;
+
+	processTasks.forEach((task) => {
+		if (task.name && task.name.length > maxCharCount) {
+			maxCharCount = task.name.length;
+		}
+	});
+
+	return Math.ceil(maxCharCount * 14 + 28 + 8 + 24); // Approximate width calculation
+};
+
 const getLayoutedElements = (nodes: any, edges: any, options: any = {}) => {
 	const graph: ElkNodeWithFlow = {
 		id: "root",
@@ -35,22 +83,30 @@ const getLayoutedElements = (nodes: any, edges: any, options: any = {}) => {
 			sourcePosition: "bottom",
 			// Hardcoded until width and height calculation is implemented
 		})),
+		layoutOptions: {
+			"org.eclipse.elk.algorithm": "org.eclipse.elk.layered",
+			"org.eclipse.elk.layered.spacing.nodeNodeBetweenLayers": "120", // bigger vertical gap
+		},
 		edges: edges,
 	};
 
 	return elk
 		.layout(graph, { layoutOptions: options })
 		.then((layoutedGraph: any) => {
-			let nodeItems: any = [];
+			const nodeItems: any = [];
 
 			layoutedGraph.children.forEach((node: any) => {
 				nodeItems.push({
 					...node,
 					// React Flow expects a position property on the node instead of `x`
 					// and `y` fields.
-					height: node.height,
+					height:
+						node.height +
+						(node.children && node.children.length > 0 ? calcYOffset() : null),
 					width: node.width,
-					position: { x: node.x, y: node.y + calcYOffset() },
+					x: node.x,
+					y: node.y,
+					position: { x: node.x, y: node.y },
 				});
 
 				if (node.children) {
@@ -61,6 +117,8 @@ const getLayoutedElements = (nodes: any, edges: any, options: any = {}) => {
 							// and `y` fields.
 							targetPosition: "top",
 							sourcePosition: "bottom",
+							x: node2.x,
+							y: node2.y + calcYOffset(),
 							position: { x: node2.x, y: node2.y + calcYOffset() },
 							parentId: node.id,
 						});
@@ -90,72 +148,949 @@ const calcYOffset = () => {
 interface Props {
 	title?: string; // e.g. Executions
 	section?: string; // e.g. e4Integrate
+	data?: Process | ProcessExecutionDetails;
+	variant?: "process" | "process-execution";
+	onTaskClick?:
+		| ((id: string) => void)
+		| ((processTaskExecution: ProcessTaskExecution) => void);
+	drawerOpen?: boolean;
+	processTaskId?: string;
+}
+
+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;
+	}
+}
+
+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> = () => {
+const IntegrationView: React.FC<Props> = ({
+	data: processInput,
+	variant,
+	onTaskClick,
+	drawerOpen,
+	processTaskId: selectedProcessTaskId,
+}: Props) => {
+	const [process, setProcess] = useState<
+		Process | ProcessExecutionDetails | undefined
+	>(processInput);
 	const [nodes, setNodes, onNodesChange] = useNodesState<any>([]);
 	const [edges, setEdges, onEdgesChange] = useEdgesState<any>([]);
-	const { fitView } = useReactFlow();
+	const [zonesY, setZonesY] = useEdgesState<any>([]);
+	const [zonesX, setZonesX] = useEdgesState<any>([]);
+
+	const { setCenter, fitView } = useReactFlow();
 
 	const onConnect = useCallback(() => {}, []);
 	const onLayout = useCallback(
-		({ useInitialNodes = false }: any) => {
-			const opts = { ...elkOptions };
-			const ns = useInitialNodes ? initialNodes : nodes;
-			const es = useInitialNodes ? initialEdges : edges;
-
-			getLayoutedElements(ns, es, opts).then(
-				({ nodes: layoutedNodes, edges: layoutedEdges }: any) => {
-					setNodes(layoutedNodes);
-					setEdges(layoutedEdges);
-					fitView();
-				},
-			);
+		(processInput: any) => {
+			const tasks = (process as Process)?.processTasks;
+			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[]),
+				);
+
+				const mapped = mapProcessTasksToNodesAndEdges(
+					processInput ?? process,
+					width,
+					variant as "process" | "process-execution",
+				);
+
+				const opts = { ...elkOptions };
+				const ns = mapped.nodes;
+				const es = mapped.edges;
+
+				getLayoutedElements(ns, es, opts).then(
+					({ nodes: layoutedNodes, edges: layoutedEdges }: any) => {
+						setNodes(layoutedNodes);
+						setEdges(layoutedEdges);
+
+						var zonesY = _.uniqBy(
+							layoutedNodes.filter((n: any) => n.type === "task-node"),
+							"data.processTask.sort",
+						).map((n: any) => ({
+							sort: n?.data?.processTask?.sort,
+							y: n.position.y,
+							height: n.height,
+						}));
+
+						setZonesY(zonesY);
+
+						var zonesX = _.uniqBy(
+							layoutedNodes.filter((n: any) => n.type === "group-node"),
+							"data.parallelProcessingGroup",
+						).map((n: any) => ({
+							parallelProcessingGroup: n?.data?.parallelProcessingGroup,
+							x: n.position.x,
+							width: n.width,
+						}));
+
+						setZonesX(zonesX);
+
+						fitView();
+					},
+				);
+			} else if (
+				(tasks && tasks.length === 0) ||
+				(processInput && processInput?.processTasks?.length === 0)
+			) {
+				const mapped = mapEmptyNodesAndEdges(processInput ?? process, 400);
+
+				const opts = { ...elkOptions };
+				const ns = mapped.nodes;
+				const es = mapped.edges;
+
+				getLayoutedElements(ns, es, opts).then(
+					({ nodes: layoutedNodes, edges: layoutedEdges }: any) => {
+						setNodes(layoutedNodes);
+						setEdges(layoutedEdges);
+						fitView();
+					},
+				);
+			}
 		},
 		[nodes, edges],
 	);
 
+	const handleNodeClick = (
+		_event: any,
+		node: {
+			id: React.SetStateAction<string>;
+			position: { x: number; y: number };
+			width: number;
+			height: number;
+			data: any;
+			parentId?: string;
+		},
+	) => {
+		if (!drawerOpen) {
+			if (onTaskClick) {
+				if (variant === "process") onTaskClick(node.data.processTask.id);
+				else if (variant === "process-execution")
+					onTaskClick(node.data.processTaskExecution);
+			}
+
+			setTimeout(() => {
+				var parentx = 0;
+				var parenty = 0;
+
+				if (node.parentId) {
+					const parentNode = nodes.find((n) => n.id === node.parentId);
+					if (parentNode) {
+						parentx = parentNode.position.x;
+						parenty = parentNode.position.y;
+					}
+				}
+
+				const centerX = parentx + node.position.x + node.width / 2;
+				const centerY = parenty + node.position.y + node.height / 2;
+
+				setCenter(centerX, centerY, { zoom: 1.2, duration: 800 });
+			}, 300);
+		}
+	};
+
 	// Calculate the initial layout on mount.
 	useLayoutEffect(() => {
-		onLayout({ useInitialNodes: true });
+		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 -----
+
+	useLayoutEffect(() => {
+		let data = JSON.parse(JSON.stringify(nodes));
+
+		data = data.map((node: any) => {
+			return {
+				...node,
+				data: {
+					...node.data,
+					disabled: drawerOpen,
+					selected:
+						selectedProcessTaskId === node.data?.processTask?.id ||
+						selectedProcessTaskId === node.data?.processTaskExecution?.id,
+				},
+			};
+		});
+
+		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[] = [];
+
+		edges.forEach((edge: any) => {
+			if (edge.source === node.id || edge.target === node.id) {
+				edgeList.push(edge);
+			}
+		});
+
+		let edgeIds: any[] = [];
+
+		edgeList.forEach((edge: any) => {
+			edgeIds.push(edge.source);
+			edgeIds.push(edge.target);
+		});
+
+		edgeIds = _.uniq(edgeIds);
+
+		edgesFiltered = edges.filter((edge: any) => {
+			return (
+				edgeIds.includes(edge.source) === false &&
+				edgeIds.includes(edge.target) === false
+			);
+		});
+
+		edgesFiltered = edgesFiltered.filter(
+			(edge: any) =>
+				edge.id.includes((node?.data?.processTask as ProcessTask)?.id) ===
+				false,
+		);
+
+		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,
+			});
+		}
+
+		setEdges(edgesFiltered);
+	};
+
+	const handleNodeDragEnd = (_e: ReactMouseEvent, node: Node): any => {
+		let zoneY = zonesY.find(
+			(z: any) =>
+				getOverlapY(
+					{ y: z.y, height: z.height },
+					{ y: node?.position?.y, height: node.height },
+				) > 0,
+		);
+
+		if (!zoneY) {
+			const maxZone = _.maxBy(zonesY, "y");
+			const minZone = _.minBy(zonesY, "y");
+
+			if (node?.height && node?.position?.y + node?.height < minZone.y) {
+				zoneY = {
+					...minZone,
+					sort: minZone.sort - 1,
+				};
+			} else if (node?.position?.y > maxZone.y + maxZone.height) {
+				zoneY = {
+					...maxZone,
+					sort: maxZone.sort + 1,
+				};
+			} else {
+				const localZones = _.sortBy(zonesY, "y");
+
+				for (let i = 0; i < localZones.length - 1; i++) {
+					const currentZone = localZones[i];
+					const nextZone = localZones[i + 1];
+
+					if (
+						node?.position?.y > currentZone.y + currentZone.height &&
+						node?.position?.y < nextZone.y
+					) {
+						zoneY = {
+							...currentZone,
+							sort: currentZone.sort + 0.5,
+						};
+						break;
+					}
+				}
+			}
+		}
+
+		const currentGroup = node?.parentId
+			? nodes.find((n) => n.id === node?.parentId)
+			: null;
+
+		let zoneX: any;
+		let overlapX = 0;
+
+		for (let i = 0; i < zonesX.length; i++) {
+			const zone = zonesX[i];
+
+			const overlap = getOverlapX(
+				{ x: zone.x, width: zone.width },
+				{ x: currentGroup.x + node?.position?.x, width: node.width },
+			);
+
+			if (overlap > overlapX) {
+				overlapX = overlap;
+				zoneX = zone;
+			}
+		}
+
+		if (!zoneX) {
+			const maxZone = _.maxBy(zonesX, "x");
+			const minZone = _.minBy(zonesX, "x");
+
+			if (currentGroup.x + node?.position?.x + node?.width < minZone.x) {
+				zoneX = {
+					...minZone,
+					parallelProcessingGroup: minZone.parallelProcessingGroup - 1,
+				};
+			} else if (
+				currentGroup.x + node?.position?.x >
+				maxZone.x + maxZone.width
+			) {
+				zoneX = {
+					...maxZone,
+					parallelProcessingGroup: maxZone.parallelProcessingGroup + 1,
+				};
+			} else {
+				const localZones = _.sortBy(zonesY, "y");
+
+				for (let i = 0; i < localZones.length - 1; i++) {
+					const currentZone = localZones[i];
+					const nextZone = localZones[i + 1];
+
+					if (
+						currentGroup.x + node?.position?.x > currentZone.x &&
+						currentGroup.x + node?.position?.x < nextZone.x + nextZone.width
+					) {
+						zoneX = {
+							...currentZone,
+							parallelProcessingGroup:
+								currentZone.parallelProcessingGroup + 0.5,
+						};
+						break;
+					}
+				}
+			}
+		}
+
+		if (!zoneY && !zoneX) {
+			onLayout(process);
+			return;
+		}
+
+		const modifiedProcess = JSON.parse(JSON.stringify(process));
+
+		let updatedTasks = modifiedProcess?.processTasks?.map((task: any) => {
+			if (zoneX && task.id === (node?.data?.processTask as ProcessTask)?.id) {
+				return {
+					...task,
+					parallelProcessingGroup: zoneX.parallelProcessingGroup,
+				};
+			}
+			return task;
+		});
+
+		updatedTasks = updatedTasks.map((task: any) => {
+			if (zoneX && task.id === (node?.data?.processTask as ProcessTask)?.id) {
+				return {
+					...task,
+					sort: zoneY.sort,
+				};
+			}
+			return task;
+		});
+
+		let prevParallelProcessingGroup: any = null;
+		let index = 0;
+
+		updatedTasks = _.sortBy(updatedTasks, [
+			"parallelProcessingGroup",
+			"sort",
+		]).map((task: any) => {
+			if (task.parallelProcessingGroup !== prevParallelProcessingGroup) {
+				prevParallelProcessingGroup = task.parallelProcessingGroup;
+				index++;
+			}
+
+			task.parallelProcessingGroup = index;
+
+			return task;
+		});
+
+		var partitionedTasks = _.values(
+			_.groupBy(updatedTasks, "parallelProcessingGroup"),
+		);
+
+		let processTaskValue: any[] = [];
+
+		partitionedTasks.forEach((partition: any) => {
+			index = 0;
+			let prevSort: any = null;
+
+			const sortedPartition = _.sortBy(partition, ["sort", "name"]).map(
+				(task: any) => {
+					if (task.sort !== prevSort) {
+						prevSort = task.sort;
+						index++;
+					}
+
+					task.sort = index;
+
+					return task;
+				},
+			);
+
+			processTaskValue = processTaskValue.concat(sortedPartition);
+		});
+
+		modifiedProcess.processTasks = processTaskValue;
+
+		setProcess(modifiedProcess);
+
+		onLayout(modifiedProcess);
+	};
+
 	return (
 		<Box sx={{ flexGrow: 1 }}>
-			<ReactFlowProvider>
-				<Box sx={{ width: "750px", height: "600px" }}>
-					<ReactFlow
-						nodes={nodes}
-						edges={edges}
-						nodeTypes={nodeTypes}
-						edgeTypes={edgeTypes}
-						onConnect={onConnect}
-						onNodesChange={onNodesChange}
-						onEdgesChange={onEdgesChange}
-						fitView={true} // Fits the view on initial load
-						fitViewOptions={{
-							padding: 0.1,
-							includeHiddenNodes: false,
-							minZoom: 0.1,
-							maxZoom: 2,
-							duration: 200,
-							nodes: [{ id: "1" }, { id: "2" }], // nodes to fit
-						}} // Optional options for initial fit
-						nodesDraggable={false}
-						minZoom={0.1} // Lock zoom to 1
-						maxZoom={2} // Lock zoom to 1
-					>
-						<Background />
-						<Controls />
-					</ReactFlow>
-				</Box>
-			</ReactFlowProvider>
+			<Box sx={{ width: "100%", height: "100%" }}>
+				{/* <Box sx={{ width: "750px", height: "750px" }}> */}
+
+				<ReactFlow
+					nodes={nodes}
+					edges={edges}
+					nodeTypes={nodeTypes}
+					edgeTypes={edgeTypes}
+					onConnect={onConnect}
+					onNodesChange={onNodesChange}
+					onEdgesChange={onEdgesChange}
+					onNodeClick={handleNodeClick}
+					onNodeDragStart={handleNodeDragStart}
+					onNodeDragStop={handleNodeDragEnd}
+					onNodeDrag={onNodeDrag}
+					//onNodeDragStop={onNodeDragStop}
+					fitView={true} // Fits the view on initial load
+					fitViewOptions={{
+						padding: 0.1,
+						includeHiddenNodes: false,
+						minZoom: 0.1,
+						maxZoom: 2,
+						duration: 200,
+						nodes: nodes, // nodes to fit
+					}} // Optional options for initial fit
+					nodesDraggable={true}
+					minZoom={0.1} // Lock zoom to 1
+					maxZoom={2} // Lock zoom to 1
+					nodesConnectable={!drawerOpen}
+					elementsSelectable={!drawerOpen}
+					panOnDrag={!drawerOpen}
+					zoomOnScroll={!drawerOpen}
+					zoomOnDoubleClick={!drawerOpen}
+				>
+					<Background />
+					<Controls />
+				</ReactFlow>
+			</Box>
 		</Box>
 	);
 };
 
-export default () => (
+export default (props: Props) => (
 	<ReactFlowProvider>
-		<IntegrationView />
+		<IntegrationView
+			data={props.data}
+			variant={props.variant}
+			onTaskClick={props.onTaskClick}
+			drawerOpen={props.drawerOpen}
+			processTaskId={props.processTaskId}
+		/>
 	</ReactFlowProvider>
 );