@evenicanpm/admin-integrate 1.8.1 → 2.0.1

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

@@ -15,6 +15,7 @@ import "@xyflow/react/dist/style.css";
 import {
 	Background,
 	Controls,
+	type Edge,
 	type Node,
 	ReactFlow,
 	ReactFlowProvider,
@@ -22,8 +23,10 @@ import {
 	useNodesState,
 	useReactFlow,
 } from "@xyflow/react";
+import _ from "lodash";
 import type {
 	ConfigExport,
+	Maybe,
 	ProcessExecutionDetails,
 	ProcessTask,
 	ProcessTaskExecution,
@@ -31,18 +34,27 @@ import type {
 } from "../../../../admin-core/src/api/e4/graphqlRequestSdk";
 import { layoutOptions as elkOptions } from "./elk-layout-options";
 import type { ElkExtendedEdgeWithFlow, ElkNodeWithFlow } from "./elk-types";
-
-import _ from "lodash";
 import { edgeTypes, nodeTypes } from "./flow-types";
 
 import {
-	mapToCamelCase,
+	type AddHandler,
 	mapEmptyNodesAndEdges,
 	mapProcessConfigToNodesAndEdges,
 	mapProcessTasksToNodesAndEdges,
+	mapToCamelCase,
 } from "./utils/mapping";
 
 const elk = new ELK();
+type VerticalOverlapRect = { y: number; height: number };
+type HorizontalOverlapRect = { x: number; width: number };
+type ZoneY = { sort: number; y: number; height: number };
+type ZoneX = { parallelProcessingGroup: number; x: number; width: number };
+type FlowNode = Node<Record<string, unknown>>;
+type FlowEdge = Edge<Record<string, unknown>>;
+type FlowDirectionProps = {
+	targetPosition?: "top" | "bottom" | "left" | "right";
+	sourcePosition?: "top" | "bottom" | "left" | "right";
+};
 
 const calculateMaxWidth = (
 	processTasks: ProcessTask[] | ProcessTaskExecution[],
@@ -58,15 +70,19 @@ const calculateMaxWidth = (
 	return Math.ceil(maxCharCount * 14 + 28 + 8 + 24); // Approximate width calculation
 };
 
-const getLayoutedElements = (nodes: any, edges: any, options: any = {}) => {
+const getLayoutedElements = (
+	nodes: ElkNodeWithFlow[],
+	edges: ElkExtendedEdgeWithFlow[],
+	options: Record<string, string> = {},
+) => {
 	const graph: ElkNodeWithFlow = {
 		id: "root",
-		children: nodes.map((node: any) => ({
+		children: nodes.map((node: ElkNodeWithFlow) => ({
 			...node,
 			targetPosition: "top",
 			sourcePosition: "bottom",
 			// Hardcoded until width and height calculation is implemented
-		})),
+		})) as ElkNodeWithFlow[],
 		layoutOptions: {
 			"org.eclipse.elk.algorithm": "org.eclipse.elk.layered",
 			"org.eclipse.elk.layered.spacing.nodeNodeBetweenLayers": "120", // bigger vertical gap
@@ -76,53 +92,64 @@ const getLayoutedElements = (nodes: any, edges: any, options: any = {}) => {
 
 	return elk
 		.layout(graph, { layoutOptions: options })
-		.then((layoutedGraph: any) => {
-			const nodeItems: any = [];
+		.then((layoutedGraph: ElkNodeWithFlow) => {
+			const nodeItems: ElkNodeWithFlow[] = [];
 
-			layoutedGraph.children.forEach((node: any) => {
+			layoutedGraph.children?.forEach((node: ElkNodeWithFlow) => {
+				const nx = node.x ?? 0;
+				const ny = node.y ?? 0;
 				nodeItems.push({
 					...node,
 					// React Flow expects a position property on the node instead of `x`
 					// and `y` fields.
 					height:
-						node.height +
-						(node.children && node.children.length > 0 ? calcYOffset() : null),
+						(node.height ?? 0) +
+						(node.children && node.children.length > 0 ? calcYOffset() : 0),
 					width: node.width,
-					x: node.x,
-					y: node.y,
-					position: { x: node.x, y: node.y },
+					x: nx,
+					y: ny,
+					position: { x: nx, y: ny },
 				});
 
 				if (node.children) {
-					node.children.forEach((node2: any) => {
+					node.children.forEach((node2: ElkNodeWithFlow) => {
+						const n2x = node2.x ?? 0;
+						const n2y = (node2.y ?? 0) + calcYOffset();
 						nodeItems.push({
 							...node2,
 							// React Flow expects a position property on the node instead of `x`
 							// and `y` fields.
 							targetPosition: "top",
 							sourcePosition: "bottom",
-							x: node2.x,
-							y: node2.y + calcYOffset(),
-							position: { x: node2.x, y: node2.y + calcYOffset() },
+							x: n2x,
+							y: n2y,
+							position: { x: n2x, y: n2y },
 							parentId: node.id,
-						});
+						} as ElkNodeWithFlow & FlowDirectionProps);
 					});
 				}
 			});
 
-			layoutedGraph.edges.forEach((edge: ElkExtendedEdgeWithFlow) => {
+			const layoutEdges = layoutedGraph.edges ?? [];
+			layoutEdges.forEach((edge: ElkExtendedEdgeWithFlow) => {
 				edge.source = edge.sources[0];
 				edge.target = edge.targets[0];
 			});
 
 			return {
 				nodes: nodeItems,
-				edges: layoutedGraph.edges.map((edge: ElkExtendedEdgeWithFlow) => ({
+				edges: layoutEdges.map((edge: ElkExtendedEdgeWithFlow) => ({
 					...edge,
 				})),
 			};
 		})
-		.catch(console.error);
+		.catch((err: unknown) => {
+			console.error(err);
+			return {
+				nodes: [] as ElkNodeWithFlow[],
+				edges: [] as ElkExtendedEdgeWithFlow[],
+			};
+		});
 };
 
 const calcYOffset = () => {
@@ -137,15 +164,16 @@ interface Props {
 	variant?: "process" | "process-execution";
 	onTaskClick?:
 		| ((id: string) => void)
+		| ((processTask: ProcessTask) => void)
 		| ((processTaskExecution: ProcessTaskExecution) => void);
 	drawerOpen?: boolean;
 	processTaskId?: string;
 	onConfigChange?: (processConfig: ConfigExport) => void;
-	onAdd?: Function;
+	onAdd?: AddHandler;
 	canEdit?: boolean;
 }
 
-function getOverlapY(rect1: any, rect2: any) {
+function getOverlapY(rect1: VerticalOverlapRect, rect2: VerticalOverlapRect) {
 	// Calculate intersection coordinates
 	//const intersectX1 = Math.max(rect1.x, rect2.x);
 	const intersectY1 = Math.max(rect1.y, rect2.y);
@@ -160,7 +188,10 @@ function getOverlapY(rect1: any, rect2: any) {
 	}
 }
 
-function getOverlapX(rect1: any, rect2: any) {
+function getOverlapX(
+	rect1: HorizontalOverlapRect,
+	rect2: HorizontalOverlapRect,
+) {
 	// Calculate intersection coordinates
 	//const intersectX1 = Math.max(rect1.x, rect2.x);
 	const intersectX1 = Math.max(rect1.x, rect2.x);
@@ -190,45 +221,60 @@ const IntegrationView: React.FC<Props> = ({
 		ProcessExecutionDetails | undefined
 	>(processExecutionInput);
 
-	const [nodes, setNodes, onNodesChange] = useNodesState<any>([]);
-	const [edges, setEdges, onEdgesChange] = useEdgesState<any>([]);
-	const [zonesY, setZonesY] = useEdgesState<any>([]);
-	const [zonesX, setZonesX] = useEdgesState<any>([]);
+	const [nodes, setNodes, onNodesChange] = useNodesState<FlowNode>([]);
+	const [edges, setEdges, onEdgesChange] = useEdgesState<FlowEdge>([]);
+	const [zonesY, setZonesY] = useState<ZoneY[]>([]);
+	const [zonesX, setZonesX] = useState<ZoneX[]>([]);
 
 	const { setCenter, fitView } = useReactFlow();
 
 	const onConnect = useCallback(() => {}, []);
 	const onLayout = useCallback(
-		(processInput: any) => {
-			let tasks;
-
-			if (variant == "process") {
-				tasks = processInput?.Processes[0]?.ProcessTasks?.map(
-					(processTask: ProcessTaskExport) => mapToCamelCase(processTask),
-				);
+		(processInput: unknown) => {
+			let tasks: (ProcessTask | ProcessTaskExecution)[] | undefined;
+
+			if (variant === "process") {
+				tasks = (
+					processInput as ConfigExport | undefined
+				)?.Processes?.[0]?.ProcessTasks?.filter(
+					(t): t is ProcessTaskExport => t != null,
+				).map((processTask) => mapToCamelCase(processTask));
 			} else {
-				tasks = (processInput ?? processExecutionDetails)
-					?.processTaskExecutions;
+				const executionInput =
+					(processInput as ProcessExecutionDetails | undefined) ??
+					processExecutionDetails;
+				tasks = executionInput?.processTaskExecutions?.filter(
+					(t): t is ProcessTaskExecution => t != null,
+				);
 			}
 
 			if (
 				(tasks && tasks.length > 0) ||
-				(processInput && processInput?.processTasks?.length > 0)
+				(processInput &&
+					((processInput as { processTasks?: unknown[] })?.processTasks
+						?.length ?? 0) > 0)
 			) {
 				const width = calculateMaxWidth(
 					tasks as ProcessTask[] | ProcessTaskExecution[],
 				);
 
+				const executionDetails =
+					(processInput as ProcessExecutionDetails | undefined) ??
+					processExecutionDetails;
+				if (variant !== "process" && !executionDetails) {
+					return;
+				}
+
 				const mapped =
-					variant == "process"
+					variant === "process"
 						? mapProcessConfigToNodesAndEdges(
-								processInput,
+								processInput as ConfigExport,
 								width,
 								variant,
 								onAdd,
 							)
 						: mapProcessTasksToNodesAndEdges(
-								processInput ?? process,
+								executionDetails as ProcessExecutionDetails,
 								width,
 								variant as "process" | "process-execution",
 							);
@@ -238,28 +284,42 @@ const IntegrationView: React.FC<Props> = ({
 				const es = mapped.edges;
 
 				getLayoutedElements(ns, es, opts).then(
-					({ nodes: layoutedNodes, edges: layoutedEdges }: any) => {
-						setNodes(layoutedNodes);
-						setEdges(layoutedEdges);
+					({
+						nodes: layoutedNodes,
+						edges: layoutedEdges,
+					}: {
+						nodes: ElkNodeWithFlow[];
+						edges: ElkExtendedEdgeWithFlow[];
+					}) => {
+						setNodes(layoutedNodes as FlowNode[]);
+						setEdges(layoutedEdges as FlowEdge[]);
 
 						const zonesY = _.uniqBy(
-							layoutedNodes.filter((n: any) => n.type === "task-node"),
+							layoutedNodes.filter(
+								(n: ElkNodeWithFlow) => n.type === "task-node",
+							),
 							"data.processTask.sort",
-						).map((n: any) => ({
-							sort: n?.data?.processTask?.sort,
-							y: n.position.y,
-							height: n.height,
+						).map((n: ElkNodeWithFlow) => ({
+							sort:
+								(n?.data as { processTask?: ProcessTask })?.processTask?.sort ??
+								0,
+							y: n.position?.y ?? 0,
+							height: n.height ?? 0,
 						}));
 
 						setZonesY(zonesY);
 
 						const zonesX = _.uniqBy(
-							layoutedNodes.filter((n: any) => n.type === "group-node"),
+							layoutedNodes.filter(
+								(n: ElkNodeWithFlow) => n.type === "group-node",
+							),
 							"data.parallelProcessingGroup",
-						).map((n: any) => ({
-							parallelProcessingGroup: n?.data?.parallelProcessingGroup,
-							x: n.position.x,
-							width: n.width,
+						).map((n: ElkNodeWithFlow) => ({
+							parallelProcessingGroup:
+								(n?.data as { parallelProcessingGroup?: number })
+									?.parallelProcessingGroup ?? 0,
+							x: n.position?.x ?? 0,
+							width: n.width ?? 0,
 						}));
 
 						setZonesX(zonesX);
@@ -269,18 +329,32 @@ const IntegrationView: React.FC<Props> = ({
 				);
 			} else if (
 				tasks?.length === 0 ||
-				(processInput && processInput?.processTasks?.length === 0)
+				(processInput &&
+					((processInput as { processTasks?: unknown[] })?.processTasks
+						?.length ?? 0) === 0)
 			) {
-				const mapped = mapEmptyNodesAndEdges(processInput ?? process, 400);
+				const emptyLayoutData =
+					(processInput as ProcessExecutionDetails | undefined) ??
+					processExecutionDetails;
+				if (!emptyLayoutData) {
+					return;
+				}
+				const mapped = mapEmptyNodesAndEdges(emptyLayoutData, 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);
+					({
+						nodes: layoutedNodes,
+						edges: layoutedEdges,
+					}: {
+						nodes: ElkNodeWithFlow[];
+						edges: ElkExtendedEdgeWithFlow[];
+					}) => {
+						setNodes(layoutedNodes as FlowNode[]);
+						setEdges(layoutedEdges as FlowEdge[]);
 						fitView();
 					},
 				);
@@ -289,22 +363,30 @@ const IntegrationView: React.FC<Props> = ({
 		[nodes, edges],
 	);
 
-	const handleNodeClick = (
-		_event: any,
-		node: {
-			id: React.SetStateAction<string>;
-			position: { x: number; y: number };
-			width: number;
-			height: number;
-			data: any;
-			parentId?: string;
-		},
-	) => {
+	const handleNodeClick = (_event: ReactMouseEvent, node: FlowNode) => {
 		if (!drawerOpen) {
+			const nodeData = node.data as {
+				processTask?: ProcessTask;
+				processTaskExecution?: ProcessTaskExecution;
+			};
 			if (onTaskClick) {
-				if (variant === "process") onTaskClick(node.data.processTask);
-				else if (variant === "process-execution")
-					onTaskClick(node.data.processTaskExecution);
+				if (variant === "process") {
+					const processTask = nodeData.processTask;
+					if (processTask) {
+						(onTaskClick as unknown as (processTask: ProcessTask) => void)(
+							processTask,
+						);
+					}
+				} else if (variant === "process-execution") {
+					const processTaskExecution = nodeData.processTaskExecution;
+					if (processTaskExecution) {
+						(
+							onTaskClick as unknown as (
+								processTaskExecution: ProcessTaskExecution,
+							) => void
+						)(processTaskExecution);
+					}
+				}
 			}
 
 			setTimeout(() => {
@@ -319,8 +401,8 @@ const IntegrationView: React.FC<Props> = ({
 					}
 				}
 
-				const centerX = parentx + node.position.x + node.width / 2;
-				const centerY = parenty + node.position.y + node.height / 2;
+				const centerX = parentx + node.position.x + (node.width ?? 0) / 2;
+				const centerY = parenty + node.position.y + (node.height ?? 0) / 2;
 
 				setCenter(centerX, centerY, { zoom: 1.2, duration: 800 });
 			}, 300);
@@ -333,32 +415,31 @@ const IntegrationView: React.FC<Props> = ({
 	}, [configInput, processExecutionInput]);
 
 	useLayoutEffect(() => {
-		let data = globalThis.structuredClone(nodes);
-
-		data = data.map((node: any) => {
-			return {
+		setNodes((prevNodes) =>
+			prevNodes.map((node) => ({
 				...node,
 				data: {
 					...node.data,
 					disabled: drawerOpen,
 					selected:
-						selectedProcessTaskId === node.data?.processTask?.id ||
-						selectedProcessTaskId === node.data?.processTaskExecution?.id,
+						selectedProcessTaskId ===
+							(node.data as { processTask?: ProcessTask })?.processTask?.id ||
+						selectedProcessTaskId ===
+							(node.data as { processTaskExecution?: ProcessTaskExecution })
+								?.processTaskExecution?.id,
 				},
-			};
-		});
-
-		setNodes(data);
+			})),
+		);
 	}, [drawerOpen, selectedProcessTaskId]);
 
-	const handleNodeDragStart = (_e: ReactMouseEvent, node: Node): any => {
+	const handleNodeDragStart = (_e: ReactMouseEvent, node: Node) => {
 		let edgesFiltered = [];
 
-		const edgeList: any[] = [];
+		const edgeList: FlowEdge[] = [];
 
-		let nodeIds: any[] = [];
+		let nodeIds: string[] = [];
 
-		edges.forEach((edge: any) => {
+		edges.forEach((edge) => {
 			if (edge.source === node.id) {
 				nodeIds.push(edge.target);
 			}
@@ -372,15 +453,15 @@ const IntegrationView: React.FC<Props> = ({
 
 		nodeIds = _.uniq(nodeIds);
 
-		let edgeIds: any[] = [];
+		let edgeIds: string[] = [];
 
-		edgeList.forEach((edge: any) => {
+		edgeList.forEach((edge) => {
 			edgeIds.push(edge.source, edge.target);
 		});
 
 		edgeIds = _.uniq(edgeIds);
 
-		edgesFiltered = edges.filter((edge: any) => {
+		edgesFiltered = edges.filter((edge) => {
 			return (
 				edgeIds.includes(edge.source) === false &&
 				edgeIds.includes(edge.target) === false
@@ -388,58 +469,58 @@ const IntegrationView: React.FC<Props> = ({
 		});
 
 		edgesFiltered = edgesFiltered.filter(
-			(edge: any) =>
-				!edge.id.includes((node?.data?.processTask as ProcessTask)?.id),
+			(edge) => !edge.id.includes((node?.data?.processTask as ProcessTask)?.id),
 		);
 
-		let nodesFiltered = nodes.filter(
-			(node: any) => !nodeIds.includes(node?.id),
-		);
+		const nodesFiltered = nodes.filter((node) => !nodeIds.includes(node?.id));
 
 		setEdges(edgesFiltered);
 
 		setNodes(nodesFiltered);
 	};
 
-	const handleNodeDragEnd = (_e: ReactMouseEvent, node: Node): any => {
+	const handleNodeDragEnd = (_e: ReactMouseEvent, node: Node) => {
+		const nodeY = node?.position?.y ?? 0;
+		const nodeH = node?.height ?? 0;
+
 		let zoneY = zonesY.find(
-			(z: any) =>
-				getOverlapY(
-					{ y: z.y, height: z.height },
-					{ y: node?.position?.y, height: node.height },
-				) > 0,
+			(z) =>
+				getOverlapY({ y: z.y, height: z.height }, { y: nodeY, height: nodeH }) >
+				0,
 		);
 
-		if (!zoneY) {
+		if (!zoneY && zonesY.length > 0) {
 			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;
+			if (minZone && maxZone) {
+				if (nodeH && nodeY + nodeH < minZone.y) {
+					zoneY = {
+						...minZone,
+						sort: minZone.sort - 1,
+					};
+				} else if (nodeY > 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 (
+							nodeY > currentZone.y + currentZone.height &&
+							nodeY < nextZone.y
+						) {
+							zoneY = {
+								...currentZone,
+								sort: currentZone.sort + 0.5,
+							};
+							break;
+						}
 					}
 				}
 			}
@@ -449,13 +530,16 @@ const IntegrationView: React.FC<Props> = ({
 			? nodes.find((n) => n.id === node?.parentId)
 			: null;
 
-		let zoneX: any;
+		let zoneX: ZoneX | undefined;
 		let overlapX = 0;
 
 		for (const zone of zonesX) {
 			const overlap = getOverlapX(
 				{ x: zone.x, width: zone.width },
-				{ x: currentGroup.x + node?.position?.x, width: node.width },
+				{
+					x: (currentGroup?.position?.x ?? 0) + node.position.x,
+					width: node.width ?? 0,
+				},
 			);
 
 			if (overlap > overlapX) {
@@ -464,47 +548,48 @@ const IntegrationView: React.FC<Props> = ({
 			}
 		}
 
-		if (!zoneX) {
+		if (!zoneX && zonesX.length > 0) {
 			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 (minZone && maxZone) {
+				const groupX = (currentGroup?.position?.x ?? 0) + node.position.x;
+
+				if (groupX + (node.width ?? 0) < minZone.x) {
+					zoneX = {
+						...minZone,
+						parallelProcessingGroup: minZone.parallelProcessingGroup - 1,
+					};
+				} else if (groupX > maxZone.x + maxZone.width) {
+					zoneX = {
+						...maxZone,
+						parallelProcessingGroup: maxZone.parallelProcessingGroup + 1,
+					};
+				} else {
+					const localZones = _.sortBy(zonesX, "x");
+
+					for (let i = 0; i < localZones.length - 1; i++) {
+						const currentZone = localZones[i];
+						const nextZone = localZones[i + 1];
+
+						if (
+							groupX > currentZone.x &&
+							groupX < nextZone.x + nextZone.width
+						) {
+							zoneX = {
+								...currentZone,
+								parallelProcessingGroup:
+									currentZone.parallelProcessingGroup + 0.5,
+							};
+							break;
+						}
 					}
 				}
 			}
 		}
 
 		if (!zoneY && !zoneX) {
-			onLayout(process);
+			onLayout(processExecutionDetails);
 			return;
 		}
 
@@ -517,13 +602,12 @@ const IntegrationView: React.FC<Props> = ({
 
 		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
-					) {
+				if (task && zoneX) {
+					const pt = (node?.data as { processTask?: ProcessTask })?.processTask;
+					const matches = pt?.id
+						? task.ProcessTaskId === pt.id
+						: task.Name === pt?.name;
+					if (matches) {
 						return {
 							...task,
 							ParallelProcessingGroup: zoneX.parallelProcessingGroup,
@@ -535,13 +619,12 @@ const IntegrationView: React.FC<Props> = ({
 		);
 
 		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
-				) {
+			if (task && zoneY) {
+				const pt = (node?.data as { processTask?: ProcessTask })?.processTask;
+				const matches = pt?.id
+					? task.ProcessTaskId === pt.id
+					: task.Name === pt?.name;
+				if (matches) {
 					return {
 						...task,
 						Sort: zoneY.sort,
@@ -551,7 +634,7 @@ const IntegrationView: React.FC<Props> = ({
 			return task;
 		});
 
-		let prevParallelProcessingGroup: any = null;
+		let prevParallelProcessingGroup: number | null = null;
 		let index = 0;
 
 		updatedTasks = _.sortBy(updatedTasks, [
@@ -559,8 +642,9 @@ const IntegrationView: React.FC<Props> = ({
 			"Sort",
 		])?.map((task) => {
 			if (task) {
-				if (task.ParallelProcessingGroup !== prevParallelProcessingGroup) {
-					prevParallelProcessingGroup = task.ParallelProcessingGroup;
+				const ppg = task.ParallelProcessingGroup ?? null;
+				if (ppg !== prevParallelProcessingGroup) {
+					prevParallelProcessingGroup = ppg;
 					index++;
 				}
 
@@ -574,17 +658,18 @@ const IntegrationView: React.FC<Props> = ({
 			_.groupBy(updatedTasks, "ParallelProcessingGroup"),
 		);
 
-		let processTaskValue: any[] = [];
+		let processTaskValue: Maybe<ProcessTaskExport>[] = [];
 
 		partitionedTasks.forEach((partition) => {
 			index = 0;
-			let prevSort: any = null;
+			let prevSort: number | null = null;
 
 			const sortedPartition = _.sortBy(partition, ["Sort", "Name"]).map(
 				(task) => {
 					if (task) {
-						if (task.Sort !== prevSort) {
-							prevSort = task.Sort;
+						const sortVal = task.Sort ?? null;
+						if (sortVal !== prevSort) {
+							prevSort = sortVal;
 							index++;
 						}
 
@@ -595,7 +680,9 @@ const IntegrationView: React.FC<Props> = ({
 				},
 			);
 
-			processTaskValue = processTaskValue.concat(sortedPartition);
+			processTaskValue = processTaskValue.concat(
+				sortedPartition as Maybe<ProcessTaskExport>[],
+			);
 		});
 
 		if (modifiedProcess?.Processes?.[0])