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

package/src/lib/index.ts

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

package/src/lib/state/theme.svelte.ts

@@ -0,0 +1,21 @@
+export class ThemeState {
+    isDark = $state(false);
+
+    constructor() {
+        if (typeof window !== 'undefined') {
+            const stored = localStorage.getItem('preferredTheme');
+            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            this.isDark = stored ? stored === 'dark' : prefersDark;
+        }
+    }
+
+    toggle() {
+        this.isDark = !this.isDark;
+        if (typeof window !== 'undefined') {
+            localStorage.setItem('preferredTheme', this.isDark ? 'dark' : 'light');
+        }
+    }
+}
+
+export const theme = new ThemeState();
+

package/src/lib/stores/diagram.ts

@@ -0,0 +1,6 @@
+import { writable, type Writable } from 'svelte/store';
+import type {GroupInfo} from "$shared/types";
+
+export const selectedGroup: Writable<GroupInfo | null> = writable(null);
+export const showLegend: Writable<boolean> = writable(true);
+export const logDiagramAction = writable(0);

package/src/lib/stores/routingStore.test.ts

@@ -0,0 +1,133 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { routingStore } from './routingStore';
+import type { XYPosition } from '@xyflow/svelte';
+
+// Mock setTimeout to control the 16ms debounce
+vi.useFakeTimers();
+
+describe('routingStore', () => {
+    beforeEach(() => {
+        // Reset the store/router if possible? 
+        // Since it's a singleton, we might need a reset method or just clear the maps.
+        // For now let's just assume we can test it incrementally.
+    });
+
+    it('registers nodes and routes an edge between them', async () => {
+        const nodeA = {
+            nodeId: 'a',
+            absPos: { x: 0, y: 0 },
+            width: 100,
+            height: 50,
+            isGroup: false
+        };
+        const nodeB = {
+            nodeId: 'b',
+            absPos: { x: 200, y: 200 },
+            width: 100,
+            height: 50,
+            isGroup: false
+        };
+
+        await routingStore.registerNode(nodeA);
+        await routingStore.registerNode(nodeB);
+
+        await routingStore.registerEdge({
+            edgeId: 'e1',
+            sourceNodeId: 'a',
+            targetNodeId: 'b',
+            sourcePos: { x: 100, y: 25 },
+            sourceSide: 'right',
+            targetPos: { x: 200, y: 225 },
+            targetSide: 'left'
+        });
+
+        // Trigger debounce
+        vi.advanceTimersByTime(20);
+
+        // Check if edge e1 has points
+        let results: Record<string, XYPosition[]> = {};
+        const unsubscribe = routingStore.subscribe(val => {
+            results = val;
+        });
+
+        expect(results['e1']).toBeDefined();
+        // Since we use shoulders (checkpoints), libavoid might still return 3 points if it's very direct,
+        // but typically it's 4+ for orthogonal snaking.
+        expect(results['e1'].length).toBeGreaterThanOrEqual(3); 
+        
+        unsubscribe();
+    });
+
+    it('nudges parallel edges apart', async () => {
+        // Vertically stacked nodes
+        const nodes = [
+            { nodeId: 's', absPos: { x: 0, y: 100 }, width: 100, height: 50, isGroup: false },
+            { nodeId: 't1', absPos: { x: 300, y: 0 }, width: 100, height: 50, isGroup: false },
+            { nodeId: 't2', absPos: { x: 300, y: 200 }, width: 100, height: 50, isGroup: false }
+        ];
+
+        for (const n of nodes) await routingStore.registerNode(n);
+
+        // Two edges from same source to different targets
+        // Their paths might want to share the same "lane" if they were routed individually
+        await routingStore.registerEdge({
+            edgeId: 'e1', sourceNodeId: 's', targetNodeId: 't1',
+            sourcePos: { x: 100, y: 125 }, sourceSide: 'right',
+            targetPos: { x: 300, y: 25 }, targetSide: 'left'
+        });
+        await routingStore.registerEdge({
+            edgeId: 'e2', sourceNodeId: 's', targetNodeId: 't2',
+            sourcePos: { x: 100, y: 125 }, sourceSide: 'right',
+            targetPos: { x: 300, y: 225 }, targetSide: 'left'
+        });
+
+        vi.advanceTimersByTime(20);
+
+        let results: Record<string, XYPosition[]> = {};
+        routingStore.subscribe(val => results = val)();
+
+        const p1 = results['e1'];
+        const p2 = results['e2'];
+
+        expect(p1).toBeDefined();
+        expect(p2).toBeDefined();
+
+        // Check vertical segments (trunks)
+        const getTrunkX = (pts: XYPosition[]) => {
+            const v = pts.find((p, i) => i > 0 && p.x === pts[i-1].x && Math.abs(p.y - pts[i-1].y) > 10);
+            return v ? v.x : null;
+        };
+
+        const x1 = getTrunkX(p1);
+        const x2 = getTrunkX(p2);
+
+        if (x1 !== null && x2 !== null) {
+            expect(Math.abs(x1 - x2)).toBeGreaterThanOrEqual(10); // Nudging working
+        }
+    });
+
+    it('unregisters an edge and stops returning its points', async () => {
+        await routingStore.registerEdge({
+            edgeId: 'e_remove',
+            sourceNodeId: 'a',
+            targetNodeId: 'b',
+            sourcePos: { x: 100, y: 25 },
+            sourceSide: 'right',
+            targetPos: { x: 200, y: 225 },
+            targetSide: 'left'
+        });
+
+        vi.advanceTimersByTime(20);
+        
+        let results: Record<string, XYPosition[]> = {};
+        routingStore.subscribe(val => results = val)();
+        expect(results['e_remove']).toBeDefined();
+
+        routingStore.unregisterEdge('e_remove');
+        
+        // Unregistering deletes from state immediately but also processes transaction
+        results = {};
+        routingStore.subscribe(val => results = val)();
+        expect(results['e_remove']).toBeUndefined();
+    });
+});

package/src/lib/stores/routingStore.ts

@@ -0,0 +1,232 @@
+import {writable} from 'svelte/store';
+import type {XYPosition} from '@xyflow/svelte';
+import {type Avoid, AvoidLib, type ConnRef, type Router, type ShapeRef} from 'libavoid-js';
+import {OFFSET_STEP} from "$lib/utils/flow/layout";
+
+// --- Types ---
+
+export interface EdgeRoutingUpdate {
+    edgeId: string;
+    sourceNodeId: string;
+    targetNodeId: string;
+    sourcePos: XYPosition;
+    sourceSide: string;
+    targetPos: XYPosition;
+    targetSide: string;
+}
+
+export interface NodeRoutingUpdate {
+    nodeId: string;
+    absPos: XYPosition;
+    width: number;
+    height: number;
+    isGroup: boolean;
+}
+
+// --- Library Loading ---
+
+let avoidLibPromise: Promise<void> | null = null;
+let avoidLibInstance: Avoid | null = null;
+
+async function ensureAvoidLibLoaded() {
+    if (avoidLibPromise) return avoidLibPromise;
+    if (typeof window === 'undefined') {
+        //We're in test mode in node, load the library directly from the file system
+        avoidLibPromise = AvoidLib.load();
+    } else {
+        avoidLibPromise = AvoidLib.load("/libavoid.wasm");
+    }
+    return avoidLibPromise;
+}
+
+async function getAvoidLib() {
+    await ensureAvoidLibLoaded();
+    avoidLibInstance ??= AvoidLib.getInstance();
+    return avoidLibInstance;
+}
+
+// --- Helpers ---
+
+const getDirFlag = (pos: string) => {
+    const p = pos.toLowerCase();
+    if (p === 'right') return 8;
+    if (p === 'left') return 4;
+    if (p === 'top') return 1;
+    if (p === 'bottom') return 2;
+    return 15;
+};
+
+const getShoulderPoint = (avoid: Avoid, x: number, y: number, pos: string, dist: number) => {
+    switch (pos.toLowerCase()) {
+        case 'right': return new avoid.Point(x + dist, y);
+        case 'left': return new avoid.Point(x - dist, y);
+        case 'top': return new avoid.Point(x, y - dist);
+        case 'bottom': return new avoid.Point(x, y + dist);
+        default: return new avoid.Point(x, y);
+    }
+};
+
+// --- Store Implementation ---
+
+function createRoutingStore() {
+    const { subscribe, set } = writable<Record<string, XYPosition[]>>({});
+
+    let router: Router | null = null;
+    let avoid: Avoid | null = null;
+
+    const nodes = new Map<string, ShapeRef>();
+    const nodesMetadata = new Map<string, XYPosition>();
+    const edges = new Map<string, ConnRef>();
+
+    let pendingTransaction = false;
+
+    async function init() {
+        if (router) return;
+        avoid = await getAvoidLib();
+        router = new avoid.Router(avoid.RouterFlag.OrthogonalRouting.value);
+
+        router.setRoutingParameter(avoid.RoutingParameter.reverseDirectionPenalty.valueOf(), 1000);
+        router.setRoutingParameter(avoid.RoutingParameter.portDirectionPenalty.valueOf(), 500);
+        router.setRoutingParameter(avoid.RoutingParameter.idealNudgingDistance.valueOf(), OFFSET_STEP);
+        router.setRoutingParameter(avoid.RoutingParameter.segmentPenalty.valueOf(), 50);
+
+        // Options for nudging
+        router.setRoutingOption(avoid.RoutingOption.nudgeOrthogonalSegmentsConnectedToShapes.valueOf(), true);
+        router.setRoutingOption(avoid.RoutingOption.nudgeOrthogonalTouchingColinearSegments.valueOf(), true);
+    }
+
+    function processTransaction() {
+        if (!router || pendingTransaction) return;
+
+        pendingTransaction = true;
+        // Batch to next frame (16ms)
+        setTimeout(() => {
+            if (!router) {
+                pendingTransaction = false;
+                return;
+            }
+
+            router.processTransaction();
+
+            const results: Record<string, XYPosition[]> = {};
+            edges.forEach((conn, id) => {
+                const route = conn.displayRoute();
+                const pts: XYPosition[] = [];
+                for (let i = 0; i < route.size(); i++) {
+                    const p = route.at(i);
+                    pts.push({ x: p.x, y: p.y });
+                }
+                results[id] = pts;
+            });
+
+            set(results);
+            pendingTransaction = false;
+        }, 16);
+    }
+
+    return {
+        subscribe,
+
+        registerNode: async (data: NodeRoutingUpdate) => {
+            await init();
+            if (!router || !avoid) return;
+
+            if (data.isGroup) {
+                if (nodes.has(data.nodeId)) {
+                    const shape = nodes.get(data.nodeId)!;
+                    router.deleteShape(shape);
+                    nodes.delete(data.nodeId);
+                    nodesMetadata.delete(data.nodeId);
+                }
+                return;
+            }
+
+            nodesMetadata.set(data.nodeId, data.absPos);
+
+            const poly = new avoid.Polygon(4);
+            poly.setPoint(0, new avoid.Point(data.absPos.x, data.absPos.y));
+            poly.setPoint(1, new avoid.Point(data.absPos.x + data.width, data.absPos.y));
+            poly.setPoint(2, new avoid.Point(data.absPos.x + data.width, data.absPos.y + data.height));
+            poly.setPoint(3, new avoid.Point(data.absPos.x, data.absPos.y + data.height));
+
+            if (nodes.has(data.nodeId)) {
+                const shape = nodes.get(data.nodeId)!;
+                //@ts-ignore - libavoid typings are wrong, moveShape_poly actually needs three args
+                router.moveShape_poly(shape, poly, false);
+            } else {
+                const shape = new avoid.ShapeRef(router, poly);
+                nodes.set(data.nodeId, shape);
+            }
+
+            processTransaction();
+        },
+
+        registerEdge: async (data: EdgeRoutingUpdate) => {
+            await init();
+            if (!router || !avoid) return;
+
+            const sShape = nodes.get(data.sourceNodeId);
+            const tShape = nodes.get(data.targetNodeId);
+
+            if (!sShape || !tShape) return;
+
+            const createConnEnd = (nodeId: string, x: number, y: number, side: string, shape: ShapeRef) => {
+                if (!avoid) throw new Error('Avoid not loaded');
+                const pinClass = Array.from(data.edgeId).reduce((a, b) => a + (b.codePointAt(0) ?? 0), 0);
+
+                // Convert absolute coords to relative coords for the pin (libavoid expects relative to shape's top-left)
+                const abs = nodesMetadata.get(nodeId);
+                const xOff = x - (abs?.x ?? 0);
+                const yOff = y - (abs?.y ?? 0);
+
+                const pin = new avoid.ShapeConnectionPin(shape, pinClass, xOff, yOff, false, -40, getDirFlag(side));
+                pin.setExclusive(true);
+                return new avoid.ConnEnd(shape, pinClass);
+            };
+
+            const srcEnd = createConnEnd(data.sourceNodeId, data.sourcePos.x, data.sourcePos.y, data.sourceSide, sShape);
+            const dstEnd = createConnEnd(data.targetNodeId, data.targetPos.x, data.targetPos.y, data.targetSide, tShape);
+
+            let conn: ConnRef;
+            if (edges.has(data.edgeId)) {
+                conn = edges.get(data.edgeId)!;
+                conn.setSourceEndpoint(srcEnd);
+                conn.setDestEndpoint(dstEnd);
+            } else {
+                conn = new avoid.ConnRef(router, srcEnd, dstEnd);
+                edges.set(data.edgeId, conn);
+            }
+
+            // Checkpoints for shoulders
+            const checkpoints = new avoid.CheckpointVector();
+            checkpoints.push_back(new avoid.Checkpoint(getShoulderPoint(avoid, data.sourcePos.x, data.sourcePos.y, data.sourceSide, 10)));
+            checkpoints.push_back(new avoid.Checkpoint(getShoulderPoint(avoid, data.targetPos.x, data.targetPos.y, data.targetSide, 10)));
+            conn.setRoutingCheckpoints(checkpoints);
+
+            processTransaction();
+        },
+
+        unregisterEdge: (id: string) => {
+            if (!router || !edges.has(id)) return;
+            const conn = edges.get(id)!;
+            router.deleteConnector(conn);
+            edges.delete(id);
+
+            set(Object.fromEntries(
+                Array.from(edges.entries()).map(([id, conn]) => {
+                    const route = conn.displayRoute();
+                    const pts: XYPosition[] = [];
+                    for (let i = 0; i < route.size(); i++) {
+                        const p = route.at(i);
+                        pts.push({ x: p.x, y: p.y });
+                    }
+                    return [id, pts];
+                })
+            ));
+
+            processTransaction();
+        }
+    };
+}
+
+export const routingStore = createRoutingStore();

package/src/lib/utils/awsIcons.ts

@@ -0,0 +1,117 @@
+import { ServiceType } from '@k-4u/resource-mapper-shared'
+
+type IconLookup = Record<ServiceType, string>
+
+//@ts-ignore We ignore a bunch of missing options here for now. This should probably be generated from the service definitions at some point, but for now we can just hardcode the most common ones.
+const SERVICE_TYPE_TO_ICON: IconLookup = {
+  [ServiceType.EC2]: 'Compute/EC2.svg',
+  [ServiceType.ECS]: 'Containers/Elastic-Container-Service.svg',
+  [ServiceType.EKS]: 'Containers/Elastic-Kubernetes-Service.svg',
+  [ServiceType.LAMBDA]: 'Compute/Lambda.svg',
+  [ServiceType.FARGATE]: 'Compute/Fargate.svg',
+  [ServiceType.BATCH]: 'Compute/Batch.svg',
+  [ServiceType.ELASTIC_BEANSTALK]: 'Compute/Elastic-Beanstalk.svg',
+  [ServiceType.APP_RUNNER]: 'Containers/App-Runner.svg',
+  [ServiceType.ECR]: 'Containers/Elastic-Container-Registry.svg',
+  [ServiceType.ECS_ANYWHERE]: 'Containers/ECS-Anywhere.svg',
+  [ServiceType.EKS_ANYWHERE]: 'Containers/EKS-Anywhere.svg',
+  [ServiceType.S3]: 'Storage/Simple-Storage-Service.svg',
+  [ServiceType.EFS]: 'Storage/EFS.svg',
+  [ServiceType.EBS]: 'Storage/Elastic-Block-Store.svg',
+  [ServiceType.FSX]: 'Storage/FSx.svg',
+  [ServiceType.STORAGE_GATEWAY]: 'Storage/Storage-Gateway.svg',
+  [ServiceType.BACKUP]: 'Storage/Backup.svg',
+  [ServiceType.S3_GLACIER]: 'Storage/Simple-Storage-Service-Glacier.svg',
+  [ServiceType.RDS]: 'Database/RDS.svg',
+  [ServiceType.DYNAMODB]: 'Database/DynamoDB.svg',
+  [ServiceType.ELASTICACHE]: 'Database/ElastiCache.svg',
+  [ServiceType.VALKEY]: 'Database/ElastiCache.svg',
+  [ServiceType.AURORA]: 'Database/Aurora.svg',
+  [ServiceType.NEPTUNE]: 'Database/Neptune.svg',
+  [ServiceType.DOCUMENTDB]: 'Database/DocumentDB.svg',
+  [ServiceType.KEYSPACES]: 'Database/Keyspaces.svg',
+  [ServiceType.TIMESTREAM]: 'Database/Timestream.svg',
+  [ServiceType.MEMORYDB]: 'Database/MemoryDB-for-Redis.svg',
+  [ServiceType.QLDB]: 'Database/Quantum-Ledger-Database.svg',
+  [ServiceType.VPC]: 'Networking-Content-Delivery/Virtual-Private-Cloud.svg',
+  [ServiceType.CLOUDFRONT]: 'Networking-Content-Delivery/CloudFront.svg',
+  [ServiceType.ROUTE53]: 'Networking-Content-Delivery/Route-53.svg',
+  [ServiceType.API_GATEWAY]: 'App-Integration/API-Gateway.svg',
+  [ServiceType.DIRECT_CONNECT]: 'Networking-Content-Delivery/Direct-Connect.svg',
+  [ServiceType.APP_MESH]: 'Networking-Content-Delivery/App-Mesh.svg',
+  [ServiceType.CLOUD_MAP]: 'Networking-Content-Delivery/Cloud-Map.svg',
+  [ServiceType.GLOBAL_ACCELERATOR]: 'Networking-Content-Delivery/Global-Accelerator.svg',
+  [ServiceType.ALB]: 'Networking-Content-Delivery/Elastic-Load-Balancing.svg',
+  [ServiceType.NLB]: 'Networking-Content-Delivery/Elastic-Load-Balancing.svg',
+  [ServiceType.ELB]: 'Networking-Content-Delivery/Elastic-Load-Balancing.svg',
+  [ServiceType.ELASTIC_LOAD_BALANCING]: 'Networking-Content-Delivery/Elastic-Load-Balancing.svg',
+  [ServiceType.SQS]: 'App-Integration/Simple-Queue-Service.svg',
+  [ServiceType.SNS]: 'App-Integration/Simple-Notification-Service.svg',
+  [ServiceType.EVENTBRIDGE]: 'App-Integration/EventBridge.svg',
+  [ServiceType.EVENTBRIDGE_RULE]: 'App-Integration/EventBridge.svg',
+  [ServiceType.STEP_FUNCTIONS]: 'App-Integration/Step-Functions.svg',
+  [ServiceType.SWF]: 'App-Integration/Step-Functions.svg',
+  [ServiceType.MQ]: 'App-Integration/MQ.svg',
+  [ServiceType.APPSYNC]: 'Front-End-Web-Mobile/AppSync.svg',
+  [ServiceType.KINESIS]: 'Analytics/Kinesis.svg',
+  [ServiceType.KINESIS_FIREHOSE]: 'Analytics/Kinesis-Firehose.svg',
+  [ServiceType.KINESIS_ANALYTICS]: 'Analytics/Kinesis-Data-Analytics.svg',
+  [ServiceType.ATHENA]: 'Analytics/Athena.svg',
+  [ServiceType.EMR]: 'Analytics/EMR.svg',
+  [ServiceType.GLUE]: 'Analytics/Glue.svg',
+  [ServiceType.REDSHIFT]: 'Analytics/Redshift.svg',
+  [ServiceType.QUICKSIGHT]: 'Analytics/QuickSight.svg',
+  [ServiceType.OPENSEARCH]: 'Analytics/OpenSearch-Service.svg',
+  [ServiceType.MSK]: 'Analytics/Managed-Streaming-for-Apache-Kafka.svg',
+  [ServiceType.IAM]: 'Security-Identity-Compliance/Identity-and-Access-Management.svg',
+  [ServiceType.COGNITO]: 'Security-Identity-Compliance/Cognito.svg',
+  [ServiceType.SECRETS_MANAGER]: 'Security-Identity-Compliance/Secrets-Manager.svg',
+  [ServiceType.KMS]: 'Security-Identity-Compliance/Key-Management-Service.svg',
+  [ServiceType.WAF]: 'Security-Identity-Compliance/WAF.svg',
+  [ServiceType.SHIELD]: 'Security-Identity-Compliance/Shield.svg',
+  [ServiceType.GUARDDUTY]: 'Security-Identity-Compliance/GuardDuty.svg',
+  [ServiceType.INSPECTOR]: 'Security-Identity-Compliance/Inspector.svg',
+  [ServiceType.MACIE]: 'Security-Identity-Compliance/Macie.svg',
+  [ServiceType.SECURITY_HUB]: 'Security-Identity-Compliance/Security-Hub.svg',
+  [ServiceType.CERTIFICATE_MANAGER]: 'Security-Identity-Compliance/Certificate-Manager.svg',
+  [ServiceType.FIREWALL_MANAGER]: 'Security-Identity-Compliance/Firewall-Manager.svg',
+  [ServiceType.NETWORK_FIREWALL]: 'Security-Identity-Compliance/Network-Firewall.svg',
+  [ServiceType.CLOUDWATCH]: 'Management-Governance/CloudWatch.svg',
+  [ServiceType.CLOUDTRAIL]: 'Management-Governance/CloudTrail.svg',
+  [ServiceType.CONFIG]: 'Management-Governance/Config.svg',
+  [ServiceType.SYSTEMS_MANAGER]: 'Management-Governance/Systems-Manager.svg',
+  [ServiceType.CLOUDFORMATION]: 'Management-Governance/CloudFormation.svg',
+  [ServiceType.ORGANIZATIONS]: 'Management-Governance/Organizations.svg',
+  [ServiceType.CONTROL_TOWER]: 'Management-Governance/Control-Tower.svg',
+  [ServiceType.TRUSTED_ADVISOR]: 'Management-Governance/Trusted-Advisor.svg',
+  [ServiceType.CODECOMMIT]: 'Developer-Tools/CodeCommit.svg',
+  [ServiceType.CODEBUILD]: 'Developer-Tools/CodeBuild.svg',
+  [ServiceType.CODEDEPLOY]: 'Developer-Tools/CodeDeploy.svg',
+  [ServiceType.CODEPIPELINE]: 'Developer-Tools/CodePipeline.svg',
+  [ServiceType.CODEARTIFACT]: 'Developer-Tools/CodeArtifact.svg',
+  [ServiceType.CLOUD9]: 'Developer-Tools/Cloud9.svg',
+  [ServiceType.X_RAY]: 'Developer-Tools/X-Ray.svg',
+  [ServiceType.SAGEMAKER]: 'Machine-Learning/SageMaker.svg',
+  [ServiceType.COMPREHEND]: 'Machine-Learning/Comprehend.svg',
+  [ServiceType.REKOGNITION]: 'Machine-Learning/Rekognition.svg',
+  [ServiceType.TEXTRACT]: 'Machine-Learning/Textract.svg',
+  [ServiceType.TRANSLATE]: 'Machine-Learning/Translate.svg',
+  [ServiceType.TRANSCRIBE]: 'Machine-Learning/Transcribe.svg',
+  [ServiceType.POLLY]: 'Machine-Learning/Polly.svg',
+  [ServiceType.LEX]: 'Machine-Learning/Lex.svg',
+  [ServiceType.DMS]: 'Migration-Transfer/Database-Migration-Service.svg',
+  [ServiceType.TRANSFER_FAMILY]: 'Migration-Transfer/Transfer-Family.svg',
+  [ServiceType.MIGRATION_HUB]: 'Migration-Transfer/Migration-Hub.svg',
+  [ServiceType.DATASYNC]: 'Migration-Transfer/DataSync.svg',
+  [ServiceType.SNOWBALL]: 'Migration-Transfer/Snowball.svg',
+  [ServiceType.AMPLIFY]: 'Front-End-Web-Mobile/Amplify.svg'
+}
+
+export function getAwsIconPath(serviceType?: ServiceType | null): string | null {
+  if (!serviceType) {
+    return null
+  }
+  const file = SERVICE_TYPE_TO_ICON[serviceType]
+  return file ? `/icons/aws/${file}` : null
+}
+

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

@@ -0,0 +1,73 @@
+import type {GroupConnection, GroupInfo} from '$shared/types'
+import type {FlowEdgeData, FlowGraphInput, FlowNodeData} from '$shared/flow-types'
+import {createGraphSignature, formatConnectionLabel, sanitizeNodeId} from '$lib/utils/flow/helpers'
+import type {Edge, Node} from "@xyflow/svelte"
+
+export interface GroupOverviewGraphResult {
+  graph: FlowGraphInput | null
+  nodeToGroupMap: Record<string, string>
+}
+
+export function buildGroupOverviewGraph(
+  groups: Record<string, GroupInfo>,
+  connections: GroupConnection[] = []
+): GroupOverviewGraphResult {
+  if (!groups || Object.keys(groups).length === 0) {
+    return { graph: null, nodeToGroupMap: {} }
+  }
+
+  // Convert each group into a diagram node
+  const nodes: Node<FlowNodeData>[] = Object.entries(groups).map(([groupId, groupInfo]) => ({
+    id: sanitizeNodeId(groupId, 'mainGroup'),
+    type: 'mainGroup',
+    data: {
+      label: groupInfo.name,
+      subLabel: groupInfo.description ?? groupId,
+      groupId,
+      kind: 'mainGroup'
+    },
+    width: 120,
+    height: 80,
+    position: { x: 0, y: 0 },
+  }))
+
+    // Convert each connection into a diagram edge
+    const edges: Edge<FlowEdgeData>[] = connections.map((connection, index) => {
+        const sourceId = sanitizeNodeId(connection.sourceGroup, 'mainGroup')
+        const targetId = sanitizeNodeId(connection.targetGroup, 'mainGroup')
+        return {
+            id: `edge_${sourceId}_${targetId}_${index}`,
+            source: sourceId,
+            sourceHandle: 'output',
+            target: targetId,
+            targetHandle: 'input',
+            type: 'snake',
+            label: formatConnectionLabel(connection.connectionCount),
+            data: {
+                label: formatConnectionLabel(connection.connectionCount),
+            }
+        }
+    })
+
+  // Create a unique signature for the graph for caching/change detection
+  const signature = createGraphSignature('group-overview', {
+    groups: nodes.map(node => node.data.groupId).sort(),
+    connections: connections.map(connection => ({
+      sourceGroup: connection.sourceGroup,
+      targetGroup: connection.targetGroup,
+      connectionCount: connection.connectionCount
+    }))
+  })
+
+  const graph: FlowGraphInput = { groupNodes: [], serviceNodes: nodes, edges, signature }
+  // Map diagram node IDs back to group IDs for UI interaction
+  const nodeToGroupMap = nodes.reduce<Record<string, string>>((lookup, node) => {
+    if (node.data.groupId) {
+      lookup[node.id] = node.data.groupId
+    }
+    return lookup
+  }, {})
+
+    console.debug(graph)
+  return { graph, nodeToGroupMap }
+}

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

@@ -0,0 +1,14 @@
+import type {GroupConnection} from '$shared/types'
+
+const sanitizeRegEx = /[^a-zA-Z0-9_]/g
+
+export const sanitizeNodeId = (value: string, prefix = 'node') => {
+    const safe = (value || prefix).replace(sanitizeRegEx, '_')
+    return `${prefix}::${safe}`
+}
+
+export const formatConnectionLabel = (connectionCount: number) =>
+    connectionCount === 1 ? '1 connection' : `${connectionCount} connections`
+
+export const createGraphSignature = (namespace: string, payload: unknown) =>
+    `${namespace}:${JSON.stringify(payload)}`