@evenicanpm/admin-integrate 1.1.0 → 1.2.0

package/src/components/icons/up-down.tsx

@@ -1,21 +1,21 @@
 import createSvgIcon from "@mui/material/utils/createSvgIcon";
 
 const UpDown = createSvgIcon(
-  <svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M8.64847 6.88354H3.35158C3.04454 6.88354 2.86173 7.2269 3.03517 7.4812L5.68362 11.3824C5.83596 11.6062 6.16526 11.6062 6.3176 11.3824L8.96605 7.4812C9.13714 7.2269 8.9555 6.88354 8.64847 6.88354Z"
-      fill="currentColor"
-    />
-    <path
-      d="M8.64852 6.76641C8.54188 6.76641 8.43524 6.76641 8.32743 6.76641C8.05204 6.76641 7.77782 6.76641 7.50243 6.76641C7.13329 6.76641 6.76532 6.76641 6.39618 6.76641C6.0036 6.76641 5.61102 6.76641 5.21845 6.76641C4.87274 6.76641 4.52821 6.76641 4.18251 6.76641C3.95517 6.76641 3.72783 6.76641 3.49931 6.76641C3.45361 6.76641 3.40673 6.76641 3.36103 6.76641C3.17705 6.76758 3.00478 6.85898 2.91455 7.02187C2.82197 7.18828 2.83251 7.39102 2.93916 7.54922C2.96728 7.59141 2.9954 7.63242 3.02353 7.67344C3.16064 7.87617 3.29892 8.07891 3.43603 8.28164C3.64111 8.58281 3.84618 8.88516 4.05009 9.18633C4.26923 9.50977 4.48954 9.8332 4.70868 10.1566C4.89384 10.4285 5.07782 10.7016 5.26298 10.9734C5.36259 11.1211 5.46337 11.2687 5.56298 11.4164C5.63798 11.5277 5.73642 11.6168 5.87001 11.6508C6.08446 11.7059 6.2954 11.6145 6.41962 11.4363C6.50282 11.3168 6.58368 11.1949 6.66571 11.0742C6.84032 10.8164 7.01493 10.5598 7.18954 10.302C7.40751 9.97969 7.62665 9.65859 7.84461 9.33633C8.05438 9.02812 8.26415 8.71875 8.47274 8.41055C8.62391 8.18789 8.77508 7.96406 8.92625 7.74141C9.02703 7.59375 9.14891 7.44961 9.14539 7.26094C9.14422 6.98672 8.91922 6.77109 8.64852 6.76641C8.49735 6.76406 8.49735 6.99844 8.64852 7.00078C8.85125 7.0043 8.98133 7.22109 8.88055 7.39687C8.8618 7.42969 8.83836 7.46133 8.81727 7.49297C8.70125 7.66289 8.58641 7.83398 8.47039 8.00391C8.06493 8.60156 7.65946 9.19922 7.25282 9.79687C6.93173 10.2703 6.61063 10.7437 6.28954 11.216C6.2661 11.2512 6.24266 11.2863 6.21805 11.3203C6.12313 11.4504 5.94149 11.4715 5.82548 11.3684C5.79149 11.3379 5.76806 11.2992 5.74227 11.2617C5.69774 11.1961 5.65321 11.1305 5.60868 11.0648C5.2454 10.5305 4.88212 9.99492 4.52001 9.46055C4.13915 8.89922 3.75712 8.33672 3.37626 7.77539C3.29775 7.65937 3.21806 7.54453 3.14072 7.42852C3.05634 7.30195 3.07392 7.14726 3.18642 7.0582C3.2497 7.00898 3.31298 7.00078 3.3915 7.00078C3.86025 7.00078 4.33017 7.00078 4.79892 7.00078C5.55009 7.00078 6.30126 7.00078 7.05243 7.00078C7.55985 7.00078 8.0661 7.00078 8.57352 7.00078C8.5993 7.00078 8.62391 7.00078 8.64969 7.00078C8.79852 7.00078 8.79969 6.76641 8.64852 6.76641ZM8.64852 5.11641H3.35165C3.04462 5.11641 2.86181 4.77305 3.03525 4.51875L5.68368 0.617578C5.83602 0.39375 6.16532 0.39375 6.31766 0.617578L8.9661 4.51875C9.13719 4.77305 8.95555 5.11641 8.64852 5.11641Z"
-      fill="currentColor"
-    />
-    <path
-      d="M8.64832 4.99922C8.28153 4.99922 7.91473 4.99922 7.54676 4.99922C6.80262 4.99922 6.05849 4.99922 5.31552 4.99922C4.73193 4.99922 4.14834 4.99922 3.56592 4.99922C3.50615 4.99922 3.44639 4.99922 3.38662 4.99922C3.30459 4.99922 3.23428 4.98515 3.17803 4.93476C3.07022 4.83633 3.05733 4.6957 3.1417 4.57031C3.16865 4.53047 3.19561 4.49062 3.22256 4.45195C3.55068 3.96914 3.87881 3.48633 4.20576 3.00234C4.60888 2.4082 5.01201 1.81524 5.41513 1.2211C5.52529 1.05821 5.63661 0.895317 5.74677 0.732426C5.77372 0.692583 5.7995 0.650395 5.83583 0.62227C5.95536 0.52852 6.12763 0.55313 6.21903 0.680864C6.30106 0.794536 6.37724 0.912895 6.45575 1.02891C6.62333 1.27618 6.79208 1.52461 6.95966 1.77188C7.37801 2.38828 7.79637 3.00469 8.21473 3.61992C8.37293 3.85312 8.53113 4.08515 8.68816 4.31836C8.7327 4.38281 8.77605 4.44844 8.82059 4.51289C8.8452 4.55039 8.87566 4.58789 8.89441 4.6289C8.96824 4.8 8.84051 4.9957 8.64832 4.99922C8.49715 5.00156 8.49715 5.23593 8.64832 5.23359C8.92371 5.2289 9.15926 5.00039 9.14871 4.71914C9.14519 4.60898 9.10301 4.51289 9.04324 4.425C8.93777 4.26914 8.8323 4.11445 8.72684 3.95859C8.53934 3.68203 8.35184 3.40547 8.16317 3.12891C7.94285 2.80547 7.72371 2.48086 7.5034 2.15742C7.30184 1.85977 7.10028 1.56211 6.89755 1.26563C6.76395 1.06875 6.62919 0.870707 6.49559 0.673833C6.47098 0.637505 6.44638 0.600005 6.42059 0.563677C6.29403 0.382036 6.06903 0.287115 5.85224 0.356255C5.65419 0.418364 5.56044 0.591802 5.45146 0.751176C5.30146 0.971488 5.15263 1.1918 5.00263 1.41328C4.79287 1.72266 4.5831 2.03203 4.37216 2.34141C4.1542 2.6625 3.93623 2.98242 3.71943 3.30352C3.54365 3.5625 3.3667 3.82266 3.19092 4.08164C3.10654 4.20586 3.021 4.3289 2.93779 4.45429C2.82998 4.61601 2.82178 4.82929 2.9249 4.99687C3.01983 5.15039 3.18389 5.23476 3.36318 5.23593C3.50615 5.23711 3.65029 5.23593 3.79326 5.23593C4.08974 5.23593 4.38623 5.23593 4.68271 5.23593C5.06357 5.23593 5.44325 5.23593 5.82411 5.23593C6.21317 5.23593 6.60223 5.23593 6.9913 5.23593C7.31942 5.23593 7.64872 5.23593 7.97684 5.23593C8.17371 5.23593 8.37059 5.23593 8.56746 5.23593C8.59441 5.23593 8.62137 5.23593 8.64832 5.23593C8.79832 5.23359 8.79949 4.99922 8.64832 4.99922Z"
-      fill="currentColor"
-    />
-  </svg>,
-  "UpDown",
+	<svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M8.64847 6.88354H3.35158C3.04454 6.88354 2.86173 7.2269 3.03517 7.4812L5.68362 11.3824C5.83596 11.6062 6.16526 11.6062 6.3176 11.3824L8.96605 7.4812C9.13714 7.2269 8.9555 6.88354 8.64847 6.88354Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M8.64852 6.76641C8.54188 6.76641 8.43524 6.76641 8.32743 6.76641C8.05204 6.76641 7.77782 6.76641 7.50243 6.76641C7.13329 6.76641 6.76532 6.76641 6.39618 6.76641C6.0036 6.76641 5.61102 6.76641 5.21845 6.76641C4.87274 6.76641 4.52821 6.76641 4.18251 6.76641C3.95517 6.76641 3.72783 6.76641 3.49931 6.76641C3.45361 6.76641 3.40673 6.76641 3.36103 6.76641C3.17705 6.76758 3.00478 6.85898 2.91455 7.02187C2.82197 7.18828 2.83251 7.39102 2.93916 7.54922C2.96728 7.59141 2.9954 7.63242 3.02353 7.67344C3.16064 7.87617 3.29892 8.07891 3.43603 8.28164C3.64111 8.58281 3.84618 8.88516 4.05009 9.18633C4.26923 9.50977 4.48954 9.8332 4.70868 10.1566C4.89384 10.4285 5.07782 10.7016 5.26298 10.9734C5.36259 11.1211 5.46337 11.2687 5.56298 11.4164C5.63798 11.5277 5.73642 11.6168 5.87001 11.6508C6.08446 11.7059 6.2954 11.6145 6.41962 11.4363C6.50282 11.3168 6.58368 11.1949 6.66571 11.0742C6.84032 10.8164 7.01493 10.5598 7.18954 10.302C7.40751 9.97969 7.62665 9.65859 7.84461 9.33633C8.05438 9.02812 8.26415 8.71875 8.47274 8.41055C8.62391 8.18789 8.77508 7.96406 8.92625 7.74141C9.02703 7.59375 9.14891 7.44961 9.14539 7.26094C9.14422 6.98672 8.91922 6.77109 8.64852 6.76641C8.49735 6.76406 8.49735 6.99844 8.64852 7.00078C8.85125 7.0043 8.98133 7.22109 8.88055 7.39687C8.8618 7.42969 8.83836 7.46133 8.81727 7.49297C8.70125 7.66289 8.58641 7.83398 8.47039 8.00391C8.06493 8.60156 7.65946 9.19922 7.25282 9.79687C6.93173 10.2703 6.61063 10.7437 6.28954 11.216C6.2661 11.2512 6.24266 11.2863 6.21805 11.3203C6.12313 11.4504 5.94149 11.4715 5.82548 11.3684C5.79149 11.3379 5.76806 11.2992 5.74227 11.2617C5.69774 11.1961 5.65321 11.1305 5.60868 11.0648C5.2454 10.5305 4.88212 9.99492 4.52001 9.46055C4.13915 8.89922 3.75712 8.33672 3.37626 7.77539C3.29775 7.65937 3.21806 7.54453 3.14072 7.42852C3.05634 7.30195 3.07392 7.14726 3.18642 7.0582C3.2497 7.00898 3.31298 7.00078 3.3915 7.00078C3.86025 7.00078 4.33017 7.00078 4.79892 7.00078C5.55009 7.00078 6.30126 7.00078 7.05243 7.00078C7.55985 7.00078 8.0661 7.00078 8.57352 7.00078C8.5993 7.00078 8.62391 7.00078 8.64969 7.00078C8.79852 7.00078 8.79969 6.76641 8.64852 6.76641ZM8.64852 5.11641H3.35165C3.04462 5.11641 2.86181 4.77305 3.03525 4.51875L5.68368 0.617578C5.83602 0.39375 6.16532 0.39375 6.31766 0.617578L8.9661 4.51875C9.13719 4.77305 8.95555 5.11641 8.64852 5.11641Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M8.64832 4.99922C8.28153 4.99922 7.91473 4.99922 7.54676 4.99922C6.80262 4.99922 6.05849 4.99922 5.31552 4.99922C4.73193 4.99922 4.14834 4.99922 3.56592 4.99922C3.50615 4.99922 3.44639 4.99922 3.38662 4.99922C3.30459 4.99922 3.23428 4.98515 3.17803 4.93476C3.07022 4.83633 3.05733 4.6957 3.1417 4.57031C3.16865 4.53047 3.19561 4.49062 3.22256 4.45195C3.55068 3.96914 3.87881 3.48633 4.20576 3.00234C4.60888 2.4082 5.01201 1.81524 5.41513 1.2211C5.52529 1.05821 5.63661 0.895317 5.74677 0.732426C5.77372 0.692583 5.7995 0.650395 5.83583 0.62227C5.95536 0.52852 6.12763 0.55313 6.21903 0.680864C6.30106 0.794536 6.37724 0.912895 6.45575 1.02891C6.62333 1.27618 6.79208 1.52461 6.95966 1.77188C7.37801 2.38828 7.79637 3.00469 8.21473 3.61992C8.37293 3.85312 8.53113 4.08515 8.68816 4.31836C8.7327 4.38281 8.77605 4.44844 8.82059 4.51289C8.8452 4.55039 8.87566 4.58789 8.89441 4.6289C8.96824 4.8 8.84051 4.9957 8.64832 4.99922C8.49715 5.00156 8.49715 5.23593 8.64832 5.23359C8.92371 5.2289 9.15926 5.00039 9.14871 4.71914C9.14519 4.60898 9.10301 4.51289 9.04324 4.425C8.93777 4.26914 8.8323 4.11445 8.72684 3.95859C8.53934 3.68203 8.35184 3.40547 8.16317 3.12891C7.94285 2.80547 7.72371 2.48086 7.5034 2.15742C7.30184 1.85977 7.10028 1.56211 6.89755 1.26563C6.76395 1.06875 6.62919 0.870707 6.49559 0.673833C6.47098 0.637505 6.44638 0.600005 6.42059 0.563677C6.29403 0.382036 6.06903 0.287115 5.85224 0.356255C5.65419 0.418364 5.56044 0.591802 5.45146 0.751176C5.30146 0.971488 5.15263 1.1918 5.00263 1.41328C4.79287 1.72266 4.5831 2.03203 4.37216 2.34141C4.1542 2.6625 3.93623 2.98242 3.71943 3.30352C3.54365 3.5625 3.3667 3.82266 3.19092 4.08164C3.10654 4.20586 3.021 4.3289 2.93779 4.45429C2.82998 4.61601 2.82178 4.82929 2.9249 4.99687C3.01983 5.15039 3.18389 5.23476 3.36318 5.23593C3.50615 5.23711 3.65029 5.23593 3.79326 5.23593C4.08974 5.23593 4.38623 5.23593 4.68271 5.23593C5.06357 5.23593 5.44325 5.23593 5.82411 5.23593C6.21317 5.23593 6.60223 5.23593 6.9913 5.23593C7.31942 5.23593 7.64872 5.23593 7.97684 5.23593C8.17371 5.23593 8.37059 5.23593 8.56746 5.23593C8.59441 5.23593 8.62137 5.23593 8.64832 5.23593C8.79832 5.23359 8.79949 4.99922 8.64832 4.99922Z"
+			fill="currentColor"
+		/>
+	</svg>,
+	"UpDown",
 );
 
 export default UpDown;

package/src/components/integration-view/edges/default-edge.tsx

@@ -1,23 +1,24 @@
 import { BaseEdge, EdgeProps, getSmoothStepPath } from "@xyflow/react";
 
 export function DefaultEdge({
-  id,
-  sourceX,
-  sourceY,
-  targetX,
-  targetY,
+	id,
+	sourceX,
+	sourceY,
+	targetX,
+	targetY,
+	markerEnd,
 }: EdgeProps): JSX.Element {
-  const [edgePath] = getSmoothStepPath({
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
-    borderRadius: 0,
-  });
+	const [edgePath] = getSmoothStepPath({
+		sourceX,
+		sourceY,
+		targetX,
+		targetY,
+		borderRadius: 0,
+	});
 
-  return (
-    <>
-      <BaseEdge id={id} path={edgePath} />
-    </>
-  );
+	return (
+		<>
+			<BaseEdge id={id} path={edgePath} markerEnd={markerEnd} />
+		</>
+	);
 }

package/src/components/integration-view/elk-layout-options.ts

@@ -1,39 +1,39 @@
 import { LayoutOptions } from "elkjs";
 
 export const layoutOptions: LayoutOptions = {
-  "elk.algorithm": "layered",
-  "elk.direction": "DOWN",
+	"elk.algorithm": "layered",
+	"elk.direction": "DOWN",
 
-  // Arrange parent and child nodes in clear layers
-  "org.eclipse.elk.hierarchyHandling": "INCLUDE_CHILDREN",
+	// Arrange parent and child nodes in clear layers
+	"org.eclipse.elk.hierarchyHandling": "INCLUDE_CHILDREN",
 
-  // Center parent nodes among their children, children immediately below
-  "org.eclipse.elk.layered.contentAlignment": "H_CENTER,V_TOP",
+	// Center parent nodes among their children, children immediately below
+	"org.eclipse.elk.layered.contentAlignment": "H_CENTER,V_TOP",
 
-  // Reduce edge crossings
-  "org.eclipse.elk.layered.crossingMinimization.strategy": "LAYER_SWEEP",
+	// Reduce edge crossings
+	"org.eclipse.elk.layered.crossingMinimization.strategy": "LAYER_SWEEP",
 
-  // Minimize bends and keep edges as short as possible
-  "org.eclipse.elk.layered.nodePlacement.edgeRouting": "ORTHOGONAL",
-  "org.eclipse.elk.layered.nodePlacement.edgeAvoidance": "true",
-  "org.eclipse.elk.layered.nodePlacement.edgeNodeOverlapAvoided": "true",
-  "org.eclipse.elk.layered.nodePlacement.edgeStraightening": "true",
+	// Minimize bends and keep edges as short as possible
+	"org.eclipse.elk.layered.nodePlacement.edgeRouting": "ORTHOGONAL",
+	"org.eclipse.elk.layered.nodePlacement.edgeAvoidance": "true",
+	"org.eclipse.elk.layered.nodePlacement.edgeNodeOverlapAvoided": "true",
+	"org.eclipse.elk.layered.nodePlacement.edgeStraightening": "true",
 
-  // Layout spacing options
-  "org.eclipse.elk.layered.spacing.nodeNodeBetweenLayers": "75",
-  "org.eclipse.elk.spacing.nodeNode": "80",
-  "org.eclipse.elk.spacing.portPort": "10",
+	// Layout spacing options
+	"org.eclipse.elk.layered.spacing.nodeNodeBetweenLayers": "75",
+	"org.eclipse.elk.spacing.nodeNode": "80",
+	"org.eclipse.elk.spacing.portPort": "10",
 
-  // Add spacing between edges that do not share a connection point
-  "org.eclipse.elk.spacing.edgeEdge": "30",
+	// Add spacing between edges that do not share a connection point
+	"org.eclipse.elk.spacing.edgeEdge": "30",
 
-  // Node placement strategy for centered alignment
-  "org.eclipse.elk.layered.nodePlacement.strategy": "SIMPLE",
+	// Node placement strategy for centered alignment
+	"org.eclipse.elk.layered.nodePlacement.strategy": "SIMPLE",
 
-  // Layering strategy to optimize horizontal alignment
-  "org.eclipse.elk.layered.layering.strategy": "NETWORK_SIMPLEX",
+	// Layering strategy to optimize horizontal alignment
+	"org.eclipse.elk.layered.layering.strategy": "NETWORK_SIMPLEX",
 
-  // Merge edges to have them originate from the same point
-  "org.eclipse.elk.layered.mergeEdges": "true",
-  "org.eclipse.elk.layered.considerModelOrder.strategy": "PREFER_NODES",
+	// Merge edges to have them originate from the same point
+	"org.eclipse.elk.layered.mergeEdges": "true",
+	"org.eclipse.elk.layered.considerModelOrder.strategy": "PREFER_NODES",
 };

package/src/components/integration-view/elk-types.ts

@@ -1,19 +1,23 @@
 import { ElkExtendedEdge, ElkNode } from "elkjs";
-import { extend } from "lodash";
 
 export interface ElkNodeWithFlow extends ElkNode {
-  type?: string;
-  data?: {
-    label: string;
-  };
-  position?: {
-    x: number;
-    y: number;
-  };
-  children?: ElkNodeWithFlow[];
-  extent?: string;
+	type?: string;
+	data?: {
+		label: string;
+		icon?: any;
+		isLast?: boolean;
+	};
+	position?: {
+		x: number;
+		y: number;
+	};
+	children?: ElkNodeWithFlow[];
+	extent?: string;
 }
 
 export interface ElkExtendedEdgeWithFlow extends ElkExtendedEdge {
-  type?: string;
+	type?: string;
+	target?: string;
+	source?: string;
+	markerEnd?: { type: string };
 }

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

@@ -5,12 +5,12 @@ import { GroupNode } from "./nodes/group-node";
 import { TaskNode } from "./nodes/task-node";
 
 export const edgeTypes = {
-  "default-edge": DefaultEdge,
+	"default-edge": DefaultEdge,
 };
 
 export const nodeTypes = {
-  "connection-node": ConnectionNode,
-  "entry-node": EntryNode,
-  "group-node": GroupNode,
-  "task-node": TaskNode, // Assuming you have a custom connection node
+	"connection-node": ConnectionNode,
+	"entry-node": EntryNode,
+	"group-node": GroupNode,
+	"task-node": TaskNode, // Assuming you have a custom connection node
 };

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

@@ -1,20 +1,20 @@
 "use client";
 
 import React, { useCallback, useLayoutEffect } from "react";
-import { Box, Typography, AppBar, Toolbar, Stack } from "@mui/material";
-import { Theme, useTheme } from "@mui/material";
+import { Box } from "@mui/material";
 
 import ELK from "elkjs/lib/elk.bundled.js";
 
 import "@xyflow/react/dist/style.css";
 
 import {
-  Background,
-  ReactFlow,
-  ReactFlowProvider,
-  useEdgesState,
-  useNodesState,
-  useReactFlow,
+	Background,
+	Controls,
+	ReactFlow,
+	ReactFlowProvider,
+	useEdgesState,
+	useNodesState,
+	useReactFlow,
 } from "@xyflow/react";
 
 import { nodeTypes, edgeTypes } from "./flow-types";
@@ -22,138 +22,140 @@ import { nodeTypes, edgeTypes } from "./flow-types";
 import { layoutOptions as elkOptions } from "./elk-layout-options";
 
 import { initialNodes, initialEdges } from "./temp-data/initialElements";
-import { ElkNodeWithFlow } from "./elk-types";
+import { ElkExtendedEdgeWithFlow, ElkNodeWithFlow } from "./elk-types";
 
 const elk = new ELK();
 
 const getLayoutedElements = (nodes: any, edges: any, options: any = {}) => {
-  const graph: ElkNodeWithFlow = {
-    id: "root",
-    children: nodes.map((node: any) => ({
-      ...node,
-      targetPosition: "top",
-      sourcePosition: "bottom",
-      // Hardcoded until width and height calculation is implemented
-      width: 150,
-      height: 50,
-    })),
-    edges: edges,
-  };
-
-  return elk
-    .layout(graph, { layoutOptions: options })
-    .then((layoutedGraph: any) => {
-      let 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,
-          position: { x: node.x, y: node.y },
-        });
-
-        if (node.children) {
-          node.children.forEach((node2: any) => {
-            nodeItems.push({
-              ...node2,
-              // React Flow expects a position property on the node instead of `x`
-              // and `y` fields.
-              targetPosition: "top",
-              sourcePosition: "bottom",
-              position: { x: node2.x, y: node2.y },
-              parentId: node.id,
-            });
-          });
-        }
-      });
-
-      layoutedGraph.edges.forEach((edge: any) => {
-        edge.source = edge.sources[0];
-        edge.target = edge.targets[0];
-      });
-
-      return {
-        nodes: nodeItems,
-        edges: layoutedGraph.edges,
-      };
-    })
-    .catch(console.error);
+	const graph: ElkNodeWithFlow = {
+		id: "root",
+		children: nodes.map((node: any) => ({
+			...node,
+			targetPosition: "top",
+			sourcePosition: "bottom",
+			// Hardcoded until width and height calculation is implemented
+		})),
+		edges: edges,
+	};
+
+	return elk
+		.layout(graph, { layoutOptions: options })
+		.then((layoutedGraph: any) => {
+			let 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,
+					width: node.width,
+					position: { x: node.x, y: node.y + calcYOffset() },
+				});
+
+				if (node.children) {
+					node.children.forEach((node2: any) => {
+						nodeItems.push({
+							...node2,
+							// React Flow expects a position property on the node instead of `x`
+							// and `y` fields.
+							targetPosition: "top",
+							sourcePosition: "bottom",
+							position: { x: node2.x, y: node2.y + calcYOffset() },
+							parentId: node.id,
+						});
+					});
+				}
+			});
+
+			layoutedGraph.edges.forEach((edge: ElkExtendedEdgeWithFlow) => {
+				edge.source = edge.sources[0];
+				edge.target = edge.targets[0];
+			});
+
+			return {
+				nodes: nodeItems,
+				edges: layoutedGraph.edges.map((edge: ElkExtendedEdgeWithFlow) => ({
+					...edge,
+				})),
+			};
+		})
+		.catch(console.error);
+};
+
+const calcYOffset = () => {
+	return 60;
 };
 
 interface Props {
-  title?: string; // e.g. Executions
-  section?: string; // e.g. e4Integrate
+	title?: string; // e.g. Executions
+	section?: string; // e.g. e4Integrate
 }
 
-const IntegrationView: React.FC<Props> = (props: Props) => {
-  const theme = useTheme();
-  const styles = getStyles(theme);
-
-  const [nodes, setNodes, onNodesChange] = useNodesState<any>([]);
-  const [edges, setEdges, onEdgesChange] = useEdgesState<any>([]);
-  const { fitView } = useReactFlow();
-
-  const onConnect = useCallback((params: any) => {}, []);
-  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();
-        }
-      );
-    },
-    [nodes, edges]
-  );
-
-  // Calculate the initial layout on mount.
-  useLayoutEffect(() => {
-    onLayout({ useInitialNodes: true });
-  }, []);
-
-  return (
-    <Box sx={{ flexGrow: 1 }}>
-      <ReactFlowProvider>
-        <Box sx={{ width: "750px", height: "750px" }}>
-          <ReactFlow
-            nodes={nodes}
-            edges={edges}
-            nodeTypes={nodeTypes}
-            edgeTypes={edgeTypes}
-            onConnect={onConnect}
-            onNodesChange={onNodesChange}
-            onEdgesChange={onEdgesChange}
-            fitView
-          >
-            <Background />
-          </ReactFlow>
-        </Box>
-      </ReactFlowProvider>
-    </Box>
-  );
-};
-
-const getStyles = (theme: Theme) => {
-  return {
-    appbar: {
-      color: "#000",
-    },
-    toolbar: {
-      backgroundColor: "#fff",
-      padding: theme.spacing(2, 0),
-    },
-  };
+const IntegrationView: React.FC<Props> = () => {
+	const [nodes, setNodes, onNodesChange] = useNodesState<any>([]);
+	const [edges, setEdges, onEdgesChange] = useEdgesState<any>([]);
+	const { 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();
+				},
+			);
+		},
+		[nodes, edges],
+	);
+
+	// Calculate the initial layout on mount.
+	useLayoutEffect(() => {
+		onLayout({ useInitialNodes: true });
+	}, []);
+
+	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>
+	);
 };
 
 export default () => (
-  <ReactFlowProvider>
-    <IntegrationView />
-  </ReactFlowProvider>
+	<ReactFlowProvider>
+		<IntegrationView />
+	</ReactFlowProvider>
 );

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

@@ -0,0 +1,50 @@
+import { Card, CardContent, CardHeader } from "@mui/material";
+import { forwardRef, type HTMLAttributes } from "react";
+
+export const BaseNode = forwardRef<
+	HTMLDivElement,
+	HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+	<Card tabIndex={0}>
+		<CardContent ref={ref} {...props} />
+	</Card>
+));
+BaseNode.displayName = "BaseNode";
+
+/**
+ * A container for a consistent header layout intended to be used inside the
+ * `<BaseNode />` component.
+ */
+export const BaseNodeHeader = forwardRef<
+	HTMLElement,
+	HTMLAttributes<HTMLElement>
+>(({ className, ...props }, ref) => <CardHeader ref={ref} {...props} />);
+BaseNodeHeader.displayName = "BaseNodeHeader";
+
+/**
+ * The title text for the node. To maintain a native application feel, the title
+ * text is not selectable.
+ */
+export const BaseNodeHeaderTitle = forwardRef<
+	HTMLHeadingElement,
+	HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+	<h3 ref={ref} data-slot="base-node-title" {...props} />
+));
+BaseNodeHeaderTitle.displayName = "BaseNodeHeaderTitle";
+
+export const BaseNodeContent = forwardRef<
+	HTMLDivElement,
+	HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+	<CardContent ref={ref} data-slot="base-node-content" {...props} />
+));
+BaseNodeContent.displayName = "BaseNodeContent";
+
+export const BaseNodeFooter = forwardRef<
+	HTMLDivElement,
+	HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+	<div ref={ref} data-slot="base-node-footer" {...props} />
+));
+BaseNodeFooter.displayName = "BaseNodeFooter";

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

@@ -1,10 +1,10 @@
-import { Handle, NodeProps, Position } from "@xyflow/react";
+import { Handle, Position } from "@xyflow/react";
 
-export function ConnectionNode(props: NodeProps): JSX.Element {
-  return (
-    <div>
-      <Handle type="source" position={Position.Bottom} />
-      <Handle type="target" position={Position.Top} />
-    </div>
-  );
+export function ConnectionNode(): JSX.Element {
+	return (
+		<div>
+			<Handle type="source" position={Position.Bottom} style={{ opacity: 1 }} />
+			<Handle type="target" position={Position.Top} style={{ opacity: 0 }} />
+		</div>
+	);
 }

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

@@ -1,10 +1,10 @@
-import { Handle, NodeProps, Position } from "@xyflow/react";
+import { Handle, Position } from "@xyflow/react";
 
-export function EntryNode(props: NodeProps): JSX.Element {
-  return (
-    <div>
-      <Handle type="source" position={Position.Bottom} />
-      <Handle type="target" position={Position.Top} />
-    </div>
-  );
+export function EntryNode(): JSX.Element {
+	return (
+		<div>
+			<Handle type="source" position={Position.Bottom} />
+			<Handle type="target" position={Position.Top} />
+		</div>
+	);
 }