@evenicanpm/admin-integrate 1.2.2 → 1.4.0

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

@@ -1,31 +1,63 @@
 "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 Node,
 	ReactFlow,
 	ReactFlowProvider,
 	useEdgesState,
 	useNodesState,
 	useReactFlow,
 } from "@xyflow/react";
-
-import { nodeTypes, edgeTypes } from "./flow-types";
-
+import type {
+	ConfigExport,
+	ProcessExecutionDetails,
+	ProcessTask,
+	ProcessTaskExecution,
+	ProcessTaskExport,
+} from "../../../../admin-core/src/api/e4/graphqlRequestSdk";
 import { layoutOptions as elkOptions } from "./elk-layout-options";
+import type { ElkExtendedEdgeWithFlow, ElkNodeWithFlow } from "./elk-types";
 
-import { initialNodes, initialEdges } from "./temp-data/initialElements";
-import { ElkExtendedEdgeWithFlow, ElkNodeWithFlow } from "./elk-types";
+import _ from "lodash";
+import { edgeTypes, nodeTypes } from "./flow-types";
+
+import {
+	mapToCamelCase,
+	mapEmptyNodesAndEdges,
+	mapProcessConfigToNodesAndEdges,
+	mapProcessTasksToNodesAndEdges,
+} from "./utils/mapping";
 
 const elk = new ELK();
 
+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 +67,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 +101,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 +132,536 @@ const calcYOffset = () => {
 interface Props {
 	title?: string; // e.g. Executions
 	section?: string; // e.g. e4Integrate
+	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;
+}
+
+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 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 overlapHeight = intersectY2 - intersectY1;
+		return /*overlapWidth **/ overlapHeight;
+	}
 }
 
-const IntegrationView: React.FC<Props> = () => {
+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);
+
+	// Check for overlap and calculate area
+	if (intersectX1 >= intersectX2) {
+		return 0; // No overlap
+	} else {
+		const overlapHeight = intersectX2 - intersectX1;
+		return /*overlapWidth **/ overlapHeight;
+	}
+}
+
+const IntegrationView: React.FC<Props> = ({
+	data: processExecutionInput,
+	variant,
+	onTaskClick,
+	drawerOpen,
+	processTaskId: selectedProcessTaskId,
+	config: configInput,
+	onConfigChange,
+	onAdd,
+	canEdit,
+}: Props) => {
+	const [processExecutionDetails, _setProcess] = useState<
+		ProcessExecutionDetails | undefined
+	>(processExecutionInput);
+
 	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) => {
+			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(
+					tasks as ProcessTask[] | ProcessTaskExecution[],
+				);
+
+				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;
+				const es = mapped.edges;
+
+				getLayoutedElements(ns, es, opts).then(
+					({ nodes: layoutedNodes, edges: layoutedEdges }: any) => {
+						setNodes(layoutedNodes);
+						setEdges(layoutedEdges);
+
+						const 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);
+
+						const 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?.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);
+				else if (variant === "process-execution")
+					onTaskClick(node.data.processTaskExecution);
+			}
+
+			setTimeout(() => {
+				let parentx = 0;
+				let 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(configInput ?? processExecutionInput);
+	}, [configInput, processExecutionInput]);
+
+	useLayoutEffect(() => {
+		let data = globalThis.structuredClone(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 = (_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, 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),
+		);
+
+		let nodesFiltered = nodes.filter(
+			(node: any) => !nodeIds.includes(node?.id),
+		);
+
+		setEdges(edgesFiltered);
+
+		setNodes(nodesFiltered);
+	};
+
+	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;
+		}
+
+		if (!configInput) {
+			throw new Error("configInput is required");
+		}
+
+		const modifiedProcess: ConfigExport =
+			globalThis.structuredClone(configInput);
+
+		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;
+		});
+
+		let prevParallelProcessingGroup: any = null;
+		let index = 0;
+
+		updatedTasks = _.sortBy(updatedTasks, [
+			"ParallelProcessingGroup",
+			"Sort",
+		])?.map((task) => {
+			if (task) {
+				if (task.ParallelProcessingGroup !== prevParallelProcessingGroup) {
+					prevParallelProcessingGroup = task.ParallelProcessingGroup;
+					index++;
+				}
+
+				task.ParallelProcessingGroup = index;
+			}
+
+			return task;
+		});
+
+		const partitionedTasks = _.values(
+			_.groupBy(updatedTasks, "ParallelProcessingGroup"),
+		);
+
+		let processTaskValue: any[] = [];
+
+		partitionedTasks.forEach((partition) => {
+			index = 0;
+			let prevSort: any = null;
+
+			const sortedPartition = _.sortBy(partition, ["Sort", "Name"]).map(
+				(task) => {
+					if (task) {
+						if (task.Sort !== prevSort) {
+							prevSort = task.Sort;
+							index++;
+						}
+
+						task.Sort = index;
+					}
+
+					return task;
+				},
+			);
+
+			processTaskValue = processTaskValue.concat(sortedPartition);
+		});
+
+		if (modifiedProcess?.Processes?.[0])
+			modifiedProcess.Processes[0].ProcessTasks = processTaskValue;
+
+		if (onConfigChange) onConfigChange(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}
+					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={canEdit}
+					minZoom={0.1} // Lock zoom to 1
+					maxZoom={2} // Lock zoom to 1
+					nodesConnectable={canEdit && !drawerOpen}
+					elementsSelectable={canEdit && !drawerOpen}
+					panOnDrag={!drawerOpen}
+					zoomOnScroll={!drawerOpen}
+					zoomOnDoubleClick={!drawerOpen}
+				>
+					<Background />
+					<Controls />
+				</ReactFlow>
+			</Box>
 		</Box>
 	);
 };
 
-export default () => (
+const IntegrationViewWrapper = (props: Props): React.JSX.Element => (
 	<ReactFlowProvider>
-		<IntegrationView />
+		<IntegrationView
+			data={props.data}
+			variant={props.variant}
+			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;

package/src/components/integration-view/nodes/add-node.tsx

@@ -0,0 +1,20 @@
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
+import { IconButton, useTheme } from "@mui/material";
+
+export function AddNode(): JSX.Element {
+	const theme = useTheme();
+
+	return (
+		<IconButton>
+			<AddCircleOutlineIcon
+				sx={{
+					color: "grey.600",
+					marginLeft: theme.spacing(1),
+					"&:hover": {
+						color: "#4E97FD", //Blue not implemented in the theme
+					},
+				}}
+			/>
+		</IconButton>
+	);
+}