@k-4u/resource-mapper-core 0.0.1

package/src/lib/utils/flow/layout.test.ts

@@ -0,0 +1,271 @@
+import {describe, it, expect} from 'vitest'
+import type {Edge, Node} from '@xyflow/svelte'
+import {layoutFlowGraph, calculateEdgeOffset, OFFSET_STEP} from './layout'
+import type {FlowEdgeData, FlowGraphInput, FlowNodeData} from '$shared/flow-types'
+
+// Basic helpers to build nodes/edges with minimal required data
+function serviceNode(id: string, label = id, serviceType?: string, position = {x: 0, y: 0}): Node<FlowNodeData> {
+    return {
+        id,
+        data: {label, kind: 'service', serviceType},
+        position,
+        type: 'service'
+    } as unknown as Node<FlowNodeData>
+}
+
+function groupNode(id: string, label = id, position = {x: 0, y: 0}): Node<FlowNodeData> {
+    return {
+        id,
+        data: {label, kind: 'group'},
+        position,
+        type: 'serviceGroup'
+    } as unknown as Node<FlowNodeData>
+}
+
+function edge(id: string, source: string, target: string, data: FlowEdgeData = {}): Edge<FlowEdgeData> {
+    return {
+        id,
+        source,
+        target,
+        data
+    } as Edge<FlowEdgeData>
+}
+
+// Silence verbose debug logs during tests
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => {
+}
+// @ts-expect-error allow override in test env
+console.debug = noop
+// @ts-expect-error allow override in test env
+console.log = noop
+
+describe('layoutFlowGraph', () => {
+    it('returns positions for nodes and preserves signature', async () => {
+        const input: FlowGraphInput = {
+            groupNodes: [],
+            serviceNodes: [serviceNode('s1', 'Service 1')],
+            edges: [],
+            signature: 'sig-1'
+        }
+
+        const out = await layoutFlowGraph(input)
+
+        expect(out.signature).toBe(input.signature)
+        expect(out.nodes.length).toBeGreaterThanOrEqual(1)
+
+        const n = out.nodes.find((x) => x.id === 's1')
+        expect(n).toBeTruthy()
+        expect(n?.position?.x).toBeDefined()
+        expect(n?.position?.y).toBeDefined()
+    })
+
+    it('keeps nodes and edges ids and data', async () => {
+        const input: FlowGraphInput = {
+            groupNodes: [],
+            serviceNodes: [serviceNode('a', 'Service A', 'lambda'), serviceNode('b', 'Service B', 'sqs')],
+            edges: [edge('e1', 'a', 'b', {label: 'A->B', direction: 'outgoing'})],
+            signature: 'sig-2'
+        }
+
+        const out = await layoutFlowGraph(input)
+
+        // Nodes should be present
+        const nodeA = out.nodes.find((n) => n.id === 'a')
+        const nodeB = out.nodes.find((n) => n.id === 'b')
+        expect(nodeA).toBeTruthy()
+        expect(nodeB).toBeTruthy()
+
+        // Verify component-specific data is preserved
+        expect(nodeA?.data.label).toBe('Service A')
+        expect(nodeA?.data.serviceType).toBe('lambda')
+        expect(nodeB?.data.serviceType).toBe('sqs')
+
+        // Edge should be preserved with same ids and data
+        expect(out.edges.length).toBe(1)
+        const e = out.edges[0]
+        expect(e.id).toBe('e1')
+        expect(e.source).toBe('a')
+        expect(e.target).toBe('b')
+        expect(e.data?.label).toBe('A->B')
+        expect(e.data?.direction).toBe('outgoing')
+    })
+
+    it('handles a simple group with a child service node', async () => {
+        const g = groupNode('g1', 'Group 1')
+        const s = {...serviceNode('s1', 'Service in group'), parentId: 'g1'} as unknown as Node<FlowNodeData>
+
+        const input: FlowGraphInput = {
+            groupNodes: [g],
+            serviceNodes: [s],
+            edges: [],
+            signature: 'sig-3'
+        }
+
+        const out = await layoutFlowGraph(input)
+
+        // Expect both the group and the service node to be present in flattened output
+        const groupOut = out.nodes.find((n) => n.id === 'g1')
+        const childOut = out.nodes.find((n) => n.id === 's1')
+
+        expect(groupOut).toBeTruthy()
+        expect(childOut).toBeTruthy()
+
+        // Both should have positions
+        expect(groupOut?.position?.x).toBeDefined()
+        expect(groupOut?.position?.y).toBeDefined()
+        expect(childOut?.position?.x).toBeDefined()
+        expect(childOut?.position?.y).toBeDefined()
+    })
+})
+
+describe('calculateEdgeOffset', () => {
+    it('returns 0 for a single edge', () => {
+        const nodes: Node<FlowNodeData>[] = [serviceNode('s1'), serviceNode('t1')]
+        const edges: Edge<FlowEdgeData>[] = [
+            {id: 'e1', source: 's1', target: 't1', sourceHandle: 'output', targetHandle: 'input'} as Edge<FlowEdgeData>
+        ]
+
+        expect(calculateEdgeOffset('e1', nodes, edges, true)).toBe(0)
+        expect(calculateEdgeOffset('e1', nodes, edges, false)).toBe(0)
+    })
+
+    it('spreads multiple edges and sorts them by target position', () => {
+        const nodes: Node<FlowNodeData>[] = [
+            serviceNode('s1', 'Source', undefined, {x: 0, y: 100}),
+            serviceNode('t1', 'Top Target', undefined, {x: 200, y: 0}),
+            serviceNode('t2', 'Bottom Target', undefined, {x: 200, y: 200})
+        ]
+        const edges: Edge<FlowEdgeData>[] = [
+            {id: 'e_to_t1', source: 's1', target: 't1', sourceHandle: 'output'} as Edge<FlowEdgeData>,
+            {id: 'e_to_t2', source: 's1', target: 't2', sourceHandle: 'output'} as Edge<FlowEdgeData>
+        ]
+
+        // e_to_t1 connects to t1 (y=0)
+        // e_to_t2 connects to t2 (y=200)
+        // Sorted order: e_to_t1, e_to_t2
+        // index for e_to_t1 = 0. index for e_to_t2 = 1.
+        // offsets = (index - 0.5) * OFFSET_STEP
+
+        expect(calculateEdgeOffset('e_to_t1', nodes, edges, true)).toBe(-OFFSET_STEP / 2)
+        expect(calculateEdgeOffset('e_to_t2', nodes, edges, true)).toBe(OFFSET_STEP / 2)
+    })
+
+    it('spreads three edges correctly', () => {
+        const nodes: Node<FlowNodeData>[] = [
+            serviceNode('s1', 'Source', undefined, {x: 0, y: 100}),
+            serviceNode('t1', 'T1', undefined, {x: 200, y: 0}),
+            serviceNode('t2', 'T2', undefined, {x: 200, y: 100}),
+            serviceNode('t3', 'T3', undefined, {x: 200, y: 200})
+        ]
+        const edges: Edge<FlowEdgeData>[] = [
+            {id: 'e1', source: 's1', target: 't1', sourceHandle: 'output'} as Edge<FlowEdgeData>,
+            {id: 'e2', source: 's1', target: 't2', sourceHandle: 'output'} as Edge<FlowEdgeData>,
+            {id: 'e3', source: 's1', target: 't3', sourceHandle: 'output'} as Edge<FlowEdgeData>
+        ]
+
+        // Sorted order: e1 (y=0), e2 (y=100), e3 (y=200)
+        // index: 0, 1, 2. (n-1)/2 = 1.
+        // offsets: (0-1)*OFFSET_STEP, (1-1)*OFFSET_STEP, (2-1)*OFFSET_STEP
+
+        expect(calculateEdgeOffset('e1', nodes, edges, true)).toBe(-OFFSET_STEP)
+        expect(calculateEdgeOffset('e2', nodes, edges, true)).toBe(0)
+        expect(calculateEdgeOffset('e3', nodes, edges, true)).toBe(OFFSET_STEP)
+    })
+
+    it('correctly calculates offsets for nodes in groups vs orphans using absolute coordinates', () => {
+        // Node 1 (orphan) at x=10, y=60
+        // Group 1 at x=422, y=67
+        // Node 2 (child of Group 1) at x=10, y=160 (relative) -> Abs: y = 67 + 160 = 227
+        // Node 3 (child of Group 1) at x=350, y=260 (relative) -> Abs: y = 67 + 260 = 327
+        // Edges: Node 1 -> Node 3 (e1), Node 2 -> Node 3 (e2)
+        // Both connect to Node 3's input handle (target).
+        const nodes: Node<FlowNodeData>[] = [
+            serviceNode('n1', 'Orphan', undefined, {x: 10, y: 60}),
+            groupNode('g1', 'Group 1', {x: 422, y: 67}),
+            {...serviceNode('n2', 'Child 2', undefined, {x: 10, y: 160}), parentId: 'g1'} as Node<FlowNodeData>,
+            {...serviceNode('n3', 'Target 3', undefined, {x: 350, y: 260}), parentId: 'g1'} as Node<FlowNodeData>
+        ]
+        const edges: Edge<FlowEdgeData>[] = [
+            {id: 'e1', source: 'n1', target: 'n3', targetHandle: 'input'} as Edge<FlowEdgeData>,
+            {id: 'e2', source: 'n2', target: 'n3', targetHandle: 'input'} as Edge<FlowEdgeData>
+        ]
+
+        // Absolute positions:
+        // n1 (abs y=60)
+        // n2 (abs y=67+160=227)
+        // Both are sources of Node 3.
+        // Order should be e1 (60), e2 (227).
+        // Offset for e1: -4, Offset for e2: 4.
+        // This confirms n1's edge is "above" n2's edge (smaller Y offset).
+        // The user said: "verify if the connection coming from the second node is above of the connection coming from the first node."
+        // Maybe the user meant if it WAS above? No, I'll just check if e1 is above e2.
+
+        const offset1 = calculateEdgeOffset('e1', nodes, edges, false) // target offset for e1
+        const offset2 = calculateEdgeOffset('e2', nodes, edges, false) // target offset for e2
+
+        // Expected: offset1 < offset2 because n1 (abs 60) < n2 (abs 227)
+        expect(offset1).toBe(-OFFSET_STEP / 2)
+        expect(offset2).toBe(OFFSET_STEP / 2)
+
+        // Now if the parent was at y=-200
+        // n2 (abs y=-200+160=-40)
+        // n1 (abs y=60)
+        // Now n2 is HIGHER than n1.
+        // Order should be e2 (-40), e1 (60).
+        // Offset for e2: -4, Offset for e1: 4.
+        const nodes2: Node<FlowNodeData>[] = [
+            serviceNode('n1', 'Orphan', undefined, {x: 10, y: 60}),
+            groupNode('g1', 'Group 1', {x: 422, y: -200}),
+            {...serviceNode('n2', 'Child 2', undefined, {x: 10, y: 160}), parentId: 'g1'} as Node<FlowNodeData>,
+            {...serviceNode('n3', 'Target 3', undefined, {x: 350, y: 260}), parentId: 'g1'} as Node<FlowNodeData>
+        ]
+
+        const offset1_neg = calculateEdgeOffset('e1', nodes2, edges, false)
+        const offset2_neg = calculateEdgeOffset('e2', nodes2, edges, false)
+
+        // Expected: offset2_neg < offset1_neg because n2 (abs -40) < n1 (abs 60)
+        expect(offset2_neg).toBe(-OFFSET_STEP / 2)
+        expect(offset1_neg).toBe(OFFSET_STEP / 2)
+    })
+
+    it('correctly calculates absolute coordinates for deeply nested nodes', () => {
+        const nodes: Node<FlowNodeData>[] = [
+            groupNode('g1', 'G1', {x: 100, y: 100}),
+            {...groupNode('g2', 'G2', {x: 50, y: 50}), parentId: 'g1'} as Node<FlowNodeData>,
+            {...serviceNode('n1', 'N1', undefined, {x: 10, y: 10}), parentId: 'g2'} as Node<FlowNodeData>
+        ]
+        // n1 abs position should be: g1(100,100) + g2(50,50) + n1(10,10) = (160, 160)
+
+        // We'll create another node n2 and an edge n1 -> n2.
+        const nodesFull = [
+            ...nodes,
+            serviceNode('n2', 'N2', undefined, {x: 500, y: 500})
+        ]
+        const edges = [
+            {id: 'e1', source: 'n1', target: 'n2', sourceHandle: 'output', targetHandle: 'input'} as Edge<FlowEdgeData>,
+            {id: 'e2', source: 'n3', target: 'n4', sourceHandle: 'output', targetHandle: 'input'} as Edge<FlowEdgeData>
+        ]
+
+        // If n1 is at (160, 160) and n2 is at (500, 500)
+        const n3 = serviceNode('n3', 'N3', undefined, {x: 160, y: 170})
+        const n4 = serviceNode('n4', 'N4', undefined, {x: 500, y: 510})
+        const nodesExtra = [...nodesFull, n3, n4]
+
+        // e1 should be compared with other edges if they share handle or nodes
+        // Let's use same handle for easier testing of ordering
+        const edgesShared = [
+            {id: 'e1', source: 'n1', target: 'n2', sourceHandle: 'output', targetHandle: 'input'} as Edge<FlowEdgeData>,
+            {id: 'e2', source: 'n3', target: 'n2', sourceHandle: 'output', targetHandle: 'input'} as Edge<FlowEdgeData>
+        ]
+
+        // n1 abs y=160. n3 abs y=170.
+        // e1 should get -4, e2 should get 4.
+
+        const o1 = calculateEdgeOffset('e1', nodesExtra, edgesShared, false)
+        const o2 = calculateEdgeOffset('e2', nodesExtra, edgesShared, false)
+
+        expect(o1).toBe(-OFFSET_STEP / 2)
+        expect(o2).toBe(OFFSET_STEP / 2)
+    })
+})

package/src/lib/utils/flow/layout.ts

@@ -0,0 +1,240 @@
+import ELK from 'elkjs/lib/elk.bundled.js';
+import {type Edge, type Node} from '@xyflow/svelte';
+import type {FlowEdgeData, FlowGraphInput, FlowGraphOutput, FlowNodeData} from '$shared/flow-types';
+import type {ElkNode} from "elkjs/lib/elk-api";
+
+const elk = new ELK();
+const PADDING = 10;
+export const OFFSET_STEP = 20;
+
+/**
+ * Helper to calculate absolute position of a node by traversing its parent chain.
+ */
+export function getAbsolutePosition(nodeId: string, nodes: Node<FlowNodeData>[]): { x: number, y: number } {
+    const node = nodes.find(n => n.id === nodeId);
+    if (!node) return {x: 0, y: 0};
+
+    let x = node.position?.x ?? 0;
+    let y = node.position?.y ?? 0;
+
+    if (node.parentId) {
+        const parentPos = getAbsolutePosition(node.parentId, nodes);
+        x += parentPos.x;
+        y += parentPos.y;
+    }
+
+    return {x, y};
+}
+
+/**
+ * Calculates a deterministic offset for an edge to prevent overlapping.
+ * TODO: Replace this method with elk's built-in edge routing and spacing options once we can guarantee it works well in all cases.
+ * This probably means that we'll have to replace it once libavoid is integrated into elk: https://github.com/kieler/elkjs/issues/210
+ * This function handles two types of offsets:
+ * 1. Handle Offset: For multiple edges sharing the same handle on a node.
+ * 2. Trunk Offset: For edges that don't share a handle but might have overlapping
+ *    paths (trunks) in the same "lane".
+ */
+export function calculateEdgeOffset(
+    edgeId: string,
+    nodes: Node<FlowNodeData>[],
+    edges: Edge<FlowEdgeData>[],
+    isSource: boolean
+): number {
+    const edge = edges.find(e => e.id === edgeId);
+    if (!edge) return 0;
+
+    const nodeId = isSource ? edge.source : edge.target;
+    const handleId = isSource ? edge.sourceHandle : edge.targetHandle;
+
+    const handle = isSource ? edge.sourceHandle : edge.targetHandle;
+    const isVertical = handle?.toLowerCase().includes('top') || handle?.toLowerCase().includes('bottom');
+
+    let finalSiblings: Edge<FlowEdgeData>[] = [];
+    let usedAreaFallback = false;
+
+    // HANDLE OFFSET: Siblings on the same node and same handle
+    const siblings = edges.filter(e =>
+        (isSource ? e.source : e.target) === nodeId &&
+        (isSource ? e.sourceHandle : e.targetHandle) === handleId
+    );
+
+    if (siblings.length <= 1) {
+        // Fallback for bidirectional or single edges between same nodes
+        usedAreaFallback = true;
+        const otherId = isSource ? edge.target : edge.source;
+        finalSiblings = edges.filter(e => {
+            const isSamePair = (e.source === nodeId && e.target === otherId) ||
+                (e.source === otherId && e.target === nodeId);
+            return isSamePair && (e.source === nodeId || e.target === nodeId);
+        });
+    } else {
+        finalSiblings = siblings;
+    }
+
+    if (finalSiblings.length <= 1) return 0;
+
+    // Sort:
+    finalSiblings.sort((a, b) => {
+        if (usedAreaFallback) {
+            // For horizontal paths (Left/Right), we split them vertically by their overall Y midpoint
+            const aSPos = getAbsolutePosition(a.source, nodes);
+            const aTPos = getAbsolutePosition(a.target, nodes);
+            const bSPos = getAbsolutePosition(b.source, nodes);
+            const bTPos = getAbsolutePosition(b.target, nodes);
+
+            if (isVertical) {
+                const midA = (aSPos.x + aTPos.x) / 2;
+                const midB = (bSPos.x + bTPos.x) / 2;
+                if (midA !== midB) return midA - midB;
+            } else {
+                const midA = (aSPos.y + aTPos.y) / 2;
+                const midB = (bSPos.y + bTPos.y) / 2;
+                if (midA !== midB) return midA - midB;
+            }
+            return a.id.localeCompare(b.id);
+        }
+        const otherIdA = isSource ? a.target : a.source;
+        const otherIdB = isSource ? b.target : b.source;
+        const posA = getAbsolutePosition(otherIdA, nodes);
+        const posB = getAbsolutePosition(otherIdB, nodes);
+        const primary = isVertical ? (posA.x - posB.x) : (posA.y - posB.y);
+        if (primary !== 0) return primary;
+        return a.id.localeCompare(b.id);
+    });
+
+    const index = finalSiblings.findIndex(e => e.id === edgeId);
+    return (index - (finalSiblings.length - 1) / 2) * OFFSET_STEP;
+}
+
+const ELK_OPTIONS: Record<string, string> = {
+    'elk.algorithm': 'layered',
+    'elk.direction': 'RIGHT',
+    //Horizontal
+    'elk.spacing.nodeNodeBetweenLayers': '80',
+    //Vertical
+    'elk.spacing.nodeNode': '80',
+
+    'elk.spacing.edgeNode': '60',               // Gap between lines and boxes
+    'elk.spacing.edgeEdge': '40',               // Gap between parallel lines
+
+    'elk.layered.spacing.edgeNodeBetweenLayers': '60',
+    'elk.edgeRouting': 'ORTHOGONAL',
+    'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
+    'elk.portConstraints': 'FREE',
+    'elk.layered.crossingMinimization.strategy': 'LAYER_SWEEP',
+    'elk.layered.nodePlacement.strategy': 'NETWORK_SIMPLEX',
+};
+
+function convertEdgesToElkEdges(input: FlowGraphInput) {
+    return input.edges.map((edge) => ({
+        id: edge.id,
+        sources: [edge.source],
+        targets: [edge.target],
+        originalEdge: edge,
+    }));
+}
+
+/**
+ * Helper to get the dimensions of a node, prioritizing measured values from Svelte Flow.
+ */
+export function getNodeDimensions(node: Node<FlowNodeData>): { w: number, h: number } {
+    const w = Math.round(node.measured?.width ?? node.width ?? 150);
+    const h = Math.round(node.measured?.height ?? node.height ?? 40);
+    return {w, h};
+}
+
+
+export async function layoutFlowGraph(input: FlowGraphInput): Promise<FlowGraphOutput> {
+    const elkEdges = convertEdgesToElkEdges(input);
+    // console.debug('[layoutFlowGraph] Starting layout with input:', {input});
+    // Helper: Build node properties and handle dimensions
+    const prepareElkNode = (node: Node<FlowNodeData>) => {
+        const {w, h} = getNodeDimensions(node);
+        return {
+            ...node,
+            width: w,
+            height: h
+        };
+    };
+
+    // 1. Build the nested ELK structure
+    const elkChildren: ElkNode[] = input.groupNodes.map(parent => ({
+        ...prepareElkNode(parent),
+        layoutOptions: {
+            ...ELK_OPTIONS,
+            'elk.padding': `[top=60,left=${PADDING},bottom=${PADDING},right=${PADDING}]`,
+        },
+        children: input.serviceNodes.filter(child => child.parentId === parent.id).map(prepareElkNode)
+    }));
+
+    // Add nodes that aren't in any group
+    input.serviceNodes
+        .filter(child => child.parentId === undefined)
+        .forEach(node => elkChildren.push(prepareElkNode(node)));
+
+    const elkGraph = {
+        id: 'root',
+        layoutOptions: ELK_OPTIONS,
+        children: elkChildren,
+        edges: elkEdges
+    };
+
+    return elk.layout(elkGraph).then(async (layoutedGraph) => {
+        console.debug('[layoutFlowGraph] Layout completed:', {layoutedGraph});
+        const flattenedNodes: Node<FlowNodeData>[] = [];
+        const flattenedEdges: Edge<FlowEdgeData>[] = [];
+
+        // Lookup maps to handle the coordinate system bridge
+        const parentPosLookup = new Map<string, { x: number, y: number }>();
+        const nodeToParent = new Map<string, string>();
+        const nodeLookup = new Map<String, Node<FlowNodeData>>();
+
+        // 2. Process the results
+        layoutedGraph.children?.forEach(parentOrOrphan => {
+            const px = parentOrOrphan.x || 0;
+            const py = parentOrOrphan.y || 0;
+
+            // If it has children, it's a group node in our context
+            if (parentOrOrphan.children) {
+                parentPosLookup.set(parentOrOrphan.id, {x: px, y: py});
+
+                flattenedNodes.push({
+                    ...parentOrOrphan,
+                    position: {x: px, y: py},
+                    draggable: true,
+                } as Node<FlowNodeData>);
+
+                // Map children and record their parent for edge offsetting
+                parentOrOrphan.children.forEach(child => {
+                    nodeToParent.set(child.id, parentOrOrphan.id);
+                    const node = {
+                        ...child,
+                        position: {x: child.x || 0, y: child.y || 0},
+                        draggable: true,
+                        extent: [[PADDING, 50], [(parentOrOrphan.width || 0) - PADDING, (parentOrOrphan.height || 0) - PADDING]]
+                    } as Node<FlowNodeData>;
+                    flattenedNodes.push(node);
+                    nodeLookup.set(child.id, node);
+                });
+            } else {
+                // It's a top-level orphan node
+                const node = {
+                    ...parentOrOrphan,
+                    position: {x: px, y: py},
+                    draggable: true,
+                } as Node<FlowNodeData>;
+                flattenedNodes.push(node);
+                nodeLookup.set(node.id, node);
+            }
+        });
+
+        const edges = input.edges.filter(e => e.data.connectionType !== 'service-group');
+
+        return {
+            nodes: flattenedNodes,
+            edges,
+            signature: input.signature
+        };
+    });
+}

package/src/lib/utils/flow/serviceIds.ts

@@ -0,0 +1,5 @@
+import type { ServiceDefinition } from '$shared/types'
+
+//TODO: Do you need to exist, or can i put you somewhere else?
+export const getServiceNodeIdFromDefinition = (service: ServiceDefinition) =>
+  `svc::${service.groupId}::${service.identifier}`

package/src/lib/utils/flow/servicesGraph.test.ts

@@ -0,0 +1,119 @@
+import { describe, it, expect } from 'vitest'
+import { buildGroupServicesGraph } from './servicesGraph'
+import { ConnectionType, ServiceType, type GroupInfo, type ServiceDefinition } from '$shared/types'
+
+describe('servicesGraph', () => {
+  const currentGroup: GroupInfo = {
+    id: 'g1',
+    name: 'Group 1',
+    groupName: 'g1'
+  }
+
+  const allGroups = new Map<string, GroupInfo>([
+    ['g1', currentGroup]
+  ])
+
+  it('correctly loads bidirectional connections between two services in the same group', () => {
+    const serviceA: ServiceDefinition = {
+      friendlyName: 'Service A',
+      identifier: 'svc-a',
+      serviceType: ServiceType.LAMBDA,
+      groupId: 'g1',
+      outgoingConnections: [
+        {
+          connectionType: ConnectionType.TCP,
+          targetIdentifier: { groupId: 'g1', serviceId: 'svc-b' },
+          description: 'A to B'
+        }
+      ]
+    }
+
+    const serviceB: ServiceDefinition = {
+      friendlyName: 'Service B',
+      identifier: 'svc-b',
+      serviceType: ServiceType.DYNAMODB,
+      groupId: 'g1',
+      outgoingConnections: [
+        {
+          connectionType: ConnectionType.TCP,
+          targetIdentifier: { groupId: 'g1', serviceId: 'svc-a' },
+          description: 'B to A'
+        }
+      ]
+    }
+
+    const currentServices = [serviceA, serviceB]
+    const result = buildGroupServicesGraph(currentGroup, currentServices, allGroups, [])
+
+    // We expect two nodes and two edges
+    expect(result.graph.serviceNodes.length).toBe(2)
+    
+    // Check edges
+    expect(result.graph.edges.length).toBe(2)
+    
+    const edgeAB = result.graph.edges.find(e => e.source === 'svc::g1::svc-a' && e.target === 'svc::g1::svc-b')
+    const edgeBA = result.graph.edges.find(e => e.source === 'svc::g1::svc-b' && e.target === 'svc::g1::svc-a')
+    
+    expect(edgeAB).toBeDefined()
+    expect(edgeBA).toBeDefined()
+    
+    // Verify IDs are unique
+    expect(edgeAB?.id).not.toBe(edgeBA?.id)
+  })
+
+  it('correctly loads bidirectional connections involving an external service', () => {
+    const serviceA: ServiceDefinition = {
+      friendlyName: 'Service A',
+      identifier: 'svc-a',
+      serviceType: ServiceType.LAMBDA,
+      groupId: 'g1',
+      outgoingConnections: [
+        {
+          connectionType: ConnectionType.TCP,
+          targetIdentifier: { groupId: 'g2', serviceId: 'svc-ext' },
+          description: 'A to External'
+        }
+      ],
+      incomingConnections: [
+        {
+          connectionType: ConnectionType.TCP,
+          sourceIdentifier: { groupId: 'g2', serviceId: 'svc-ext' },
+          description: 'External to A'
+        }
+      ]
+    }
+
+    const group2: GroupInfo = { id: 'g2', name: 'Group 2', groupName: 'g2' }
+    const serviceExt: ServiceDefinition = {
+      friendlyName: 'External Service',
+      identifier: 'svc-ext',
+      serviceType: ServiceType.RDS,
+      groupId: 'g2'
+    }
+
+    const externalGroups = [
+      {
+        group: group2,
+        services: [serviceExt],
+        direction: 'outgoing' as const
+      },
+      {
+        group: group2,
+        services: [serviceExt],
+        direction: 'incoming' as const
+      }
+    ]
+
+    const result = buildGroupServicesGraph(currentGroup, [serviceA], allGroups, [], externalGroups)
+
+    // Should have serviceA and ONE external node (shared between directions)
+    expect(result.graph.serviceNodes.length).toBe(2) 
+    expect(result.graph.edges.length).toBe(2)
+
+    const edgeToExt = result.graph.edges.find(e => e.source === 'svc::g1::svc-a' && e.target === 'svc::g2::svc-ext')
+    const edgeFromExt = result.graph.edges.find(e => e.target === 'svc::g1::svc-a' && e.source === 'svc::g2::svc-ext')
+
+    expect(edgeToExt).toBeDefined()
+    expect(edgeFromExt).toBeDefined()
+  })
+})