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

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

@@ -0,0 +1,258 @@
+import {
+    type ConnectionType,
+    type ExternalConnectionDirection,
+    type ExternalGroupServices,
+    type GroupConnection,
+    type GroupInfo,
+    type ServiceDefinition,
+    type ServiceIncomingLink,
+    type ServiceLink
+} from '$shared/types'
+import type {FlowEdgeData, FlowNodeData, ServicesGraphResult,} from '$shared/flow-types'
+import {createGraphSignature} from '$lib/utils/flow/helpers'
+import {getServiceNodeIdFromDefinition} from '$lib/utils/flow/serviceIds'
+import type {Edge, Node} from "@xyflow/svelte";
+
+const position = {x: 0, y: 0};
+
+function createServiceNode(nodeId: string, service: ServiceDefinition): Node<FlowNodeData> {
+    return {
+        id: nodeId,
+        type: 'service',
+        width: 220,
+        height: 120,
+        data: {
+            label: service.friendlyName,
+            subLabel: service.description ?? undefined,
+            groupId: service.groupId,
+            serviceId: service.identifier,
+            serviceType: service.serviceType,
+            kind: 'service'
+        },
+        parentId: `group_${service.groupId}`,
+        position
+    };
+}
+
+
+export function buildGroupServicesGraph(
+    currentGroup: GroupInfo,
+    currentServices: ServiceDefinition[],
+    allGroups: Map<string, GroupInfo>,
+    groupConnections: GroupConnection[],
+    externalGroups: ExternalGroupServices[] = []
+): ServicesGraphResult {
+    const nodes: Node<FlowNodeData>[] = []
+    const edges: Edge<FlowEdgeData>[] = []
+    const serviceNodeLookup = new Map<string, string>()
+    const externalNodeMap = new Map<string, Node<FlowNodeData>>()
+    const serviceNodeRecord: Record<string, ServiceDefinition> = {}
+    const externalNodeRecord: Record<string, { service: ServiceDefinition; group: GroupInfo }> = {}
+
+    if (!currentServices.length) {
+        nodes.push({
+            id: `placeholder_${currentGroup.groupName}`,
+            data: {
+                label: 'No services defined',
+                subLabel: 'Add services to see relationships',
+                kind: 'service',
+                groupId: currentGroup.groupName,
+                isPlaceholder: true
+            },
+            position
+        })
+        return {
+            graph: {
+                groupNodes: [],
+                serviceNodes: nodes,
+                edges,
+                signature: createGraphSignature('group-services', {group: currentGroup.groupName, placeholder: true})
+            },
+            serviceNodes: serviceNodeRecord,
+            externalNodes: externalNodeRecord
+        }
+    }
+
+    // 2. Add Connections
+    const externalLookup = createDirectionLookup(externalGroups)
+
+    const addConnections = (
+        serviceNodeId: string,
+        connections: (ServiceLink | ServiceIncomingLink)[] | undefined
+    ) => {
+        connections?.forEach(conn => {
+            const isOutgoing = 'targetIdentifier' in conn
+            const remoteIdentifier = isOutgoing ? conn.targetIdentifier : conn.sourceIdentifier
+            if (remoteIdentifier.groupId === currentGroup.groupName) {
+                const remoteNodeId = remoteIdentifier.serviceId ? serviceNodeLookup.get(remoteIdentifier.serviceId) : undefined
+                if (remoteNodeId) {
+                    const sourceId = isOutgoing ? serviceNodeId : remoteNodeId
+                    const targetId = isOutgoing ? remoteNodeId : serviceNodeId
+                    edges.push(buildEdge(sourceId, targetId, conn.connectionType, 'internal'))
+                }
+            } else if (remoteIdentifier.groupId && remoteIdentifier.serviceId) {
+                const extNodeId = ensureExternalNode(remoteIdentifier.groupId, remoteIdentifier.serviceId, externalLookup, externalNodeMap, externalNodeRecord)
+                if (extNodeId) {
+                    const sourceId = isOutgoing ? serviceNodeId : extNodeId
+                    const targetId = isOutgoing ? extNodeId : serviceNodeId
+                    edges.push(buildEdge(sourceId, targetId, conn.connectionType, 'external'))
+                }
+            }
+        })
+    }
+
+    currentServices.forEach(service => {
+        const nodeId = getServiceNodeIdFromDefinition(service)
+        serviceNodeLookup.set(service.identifier, nodeId)
+        serviceNodeRecord[nodeId] = service
+        nodes.push(createServiceNode(nodeId, service))
+    })
+
+    currentServices.forEach(service => {
+        const currentServiceNodeId = serviceNodeLookup.get(service.identifier)
+        if (!currentServiceNodeId) return
+
+        addConnections(currentServiceNodeId, service.outgoingConnections)
+        addConnections(currentServiceNodeId, service.incomingConnections)
+    })
+
+    // 4. Create Group Container Nodes
+    const groupNodes: Node<FlowNodeData>[] = Array.from(allGroups.values()).map(g => ({
+        id: `group_${g.groupName}`,
+        type: 'serviceGroup',
+        data: {
+            label: g.name,
+            subLabel: g.description ?? undefined,
+            groupId: g.groupName,
+            kind: 'group'
+        },
+        position,
+        class: g.groupName === currentGroup.groupName ? 'current-group' : 'external-group'
+    }))
+
+    // 5. Add Group-to-Group Edges
+    groupConnections.forEach(conn => {
+        edges.push(buildEdge(`group_${conn.sourceGroup}`, `group_${conn.targetGroup}`, 'service-group'))
+    })
+
+    const signature = createGraphSignature('group-services', {
+        group: currentGroup.groupName,
+        services: currentServices.map(service => ({identifier: service.identifier, type: service.serviceType})).sort((a, b) =>
+            a.identifier.localeCompare(b.identifier)
+        ),
+        external: externalGroups.map(entry => ({
+            direction: entry.direction,
+            group: entry.group.groupName,
+            services: entry.services.map(service => service.identifier).sort()
+        }))
+    })
+
+    return {
+        graph: {
+            groupNodes,
+            serviceNodes: nodes.concat(Array.from(externalNodeMap.values())),
+            edges,
+            signature
+        },
+        serviceNodes: serviceNodeRecord,
+        externalNodes: externalNodeRecord
+    }
+}
+
+function createDirectionLookup(
+    entries: ExternalGroupServices[]
+): Map<string, { incoming?: ExternalGroupServices; outgoing?: ExternalGroupServices }> {
+    return entries.reduce((lookup, entry) => {
+        const key = entry.group?.groupName
+        if (!key) return lookup
+        const existing = lookup.get(key) || {}
+        if (entry.direction === 'incoming') {
+            existing.incoming = entry
+        } else if (entry.direction === 'outgoing') {
+            existing.outgoing = entry
+        }
+        lookup.set(key, existing)
+        return lookup
+    }, new Map<string, { incoming?: ExternalGroupServices; outgoing?: ExternalGroupServices }>())
+}
+
+// Registers an external node in the nodeMap and externalNodeRecord.
+// It uses a consistent svc::<groupId>::<serviceId> naming scheme.
+function ensureExternalNode(
+    groupId: string,
+    serviceId: string,
+    lookup: Map<string, { incoming?: ExternalGroupServices; outgoing?: ExternalGroupServices }>,
+    nodeMap: Map<string, Node<FlowNodeData>>,
+    record: Record<string, { service: ServiceDefinition; group: GroupInfo }>
+): string | null {
+    const key = `svc::${groupId}::${serviceId}`
+    if (nodeMap.has(key)) {
+        return key
+    }
+
+    // Try to find the service in either direction
+    const externalMeta = findExternalService('outgoing', groupId, serviceId, lookup) ||
+        findExternalService('incoming', groupId, serviceId, lookup)
+
+    if (!externalMeta) {
+        return null
+    }
+
+    nodeMap.set(key, {
+        id: key,
+        width: 220,
+        height: 70,
+        type: 'external',
+        data: {
+            label: externalMeta.service.friendlyName,
+            serviceType: externalMeta.service.serviceType,
+            subLabel: externalMeta.group.name,
+            groupId: groupId,
+            serviceId: externalMeta.service.identifier,
+            kind: 'external',
+        },
+        extent: "parent",
+        position: {x: 0, y: 0},
+        parentId: `group_${groupId}`,
+    })
+    record[key] = {service: externalMeta.service, group: externalMeta.group}
+
+    return key
+}
+
+function findExternalService(
+    direction: ExternalConnectionDirection,
+    groupId: string,
+    serviceId: string,
+    lookup: Map<string, { incoming?: ExternalGroupServices; outgoing?: ExternalGroupServices }>
+) {
+    const entries = lookup.get(groupId)
+    if (!entries) return null
+    const dirEntry = entries[direction]
+    if (!dirEntry) return null
+    const service = dirEntry.services.find(item => item.identifier === serviceId)
+    if (!service) return null
+    return { group: dirEntry.group, service }
+}
+
+function buildEdge(
+    sourceId: string,
+    targetId: string,
+    connectionType?: ConnectionType | 'service-group',
+    edgeType: 'external' | 'internal' = 'internal' //TODO: Name me better
+): Edge<FlowEdgeData> {
+    console.debug(`Creating edge from ${sourceId} to ${targetId} of type ${connectionType} (${edgeType})`)
+    return {
+        id: `edge_${sourceId}_${targetId}`,
+        source: sourceId,
+        sourceHandle: 'output',
+        target: targetId,
+        targetHandle: 'input',
+        type: 'snake',
+        // type: 'smoothstep',
+        markerEnd: 'arrow',
+        class: `edge-${edgeType}`,
+        label: connectionType || "",
+        data: {label: connectionType, connectionType}
+    }
+}

package/src/routes/+error.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+import {ErrorDisplay} from '$lib/components';
+import { page } from '$app/stores';
+
+let { error, status } = $props<{ error: Error; status: number }>();
+
+const checkList = [
+  "Check your internet connection",
+  "Try refreshing the page",
+  "Contact support if the issue persists"
+];
+
+const technicalDetails = $derived({
+  status,
+  message: error?.message,
+  stack: error?.stack,
+  url: $page.url.pathname
+});
+
+function handleRetry() {
+  location.reload();
+}
+function handleBack() {
+  history.back();
+}
+</script>
+
+<ErrorDisplay
+  title={status ? `Error ${status}` : 'Error'}
+  message={error?.message ?? 'An unexpected error occurred.'}
+  checkList={checkList}
+  technicalDetails={technicalDetails}
+  onRetry={handleRetry}
+  onBack={handleBack}
+/>
+

package/src/routes/+layout.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import {Header, LoadingOverlay} from '$lib/components';
+    import {navigating} from '$app/state';
+    import './layout.css';
+    import '../app.css';
+    import favicon from '$lib/assets/favicon.svg';
+    import {theme} from '$lib/state/theme.svelte';
+
+    let { children } = $props();
+
+    $effect(() => {
+        if (typeof document !== 'undefined') {
+            document.documentElement.classList.toggle('dark', theme.isDark);
+        }
+    });
+</script>
+
+<svelte:head><link rel="icon" href={favicon} /></svelte:head>
+<Header />
+
+{#if navigating.to}
+    <LoadingOverlay message="Loading..." />
+{/if}
+
+<main class="w-full h-full px-6 py-6">
+    {@render children()}
+</main>

package/src/routes/+page.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+    import type {PageData} from './$types'
+    import {FlowCanvas, GroupDetailSidebar, LoadingSpinner, EmptyState, ErrorDisplay} from '$lib/components'
+    import {buildGroupOverviewGraph} from '$lib/utils/flow/groupOverviewGraph'
+    import {goto, invalidateAll} from '$app/navigation'
+    import {SvelteFlowProvider} from "@xyflow/svelte";
+
+    let { data } = $props<{ data: PageData }>()
+
+    const groups = $derived(data.groups)
+    const groupConnections = $derived(data.groupConnections)
+    const errorMessage = $derived(data.errorMessage)
+
+    let { graphInput, nodeGroupMap } = $derived.by(() => {
+        if (groups && groupConnections) {
+            const {graph, nodeToGroupMap} = buildGroupOverviewGraph(groups, groupConnections)
+            console.debug('[overview.svelte] built flow graph', {
+                groups: Object.keys(groups).length,
+                connections: groupConnections.length,
+                nodeCount: Object.keys(nodeToGroupMap).length,
+                hasGraph: !!graph
+            })
+            return { graphInput: graph, nodeGroupMap: nodeToGroupMap }
+        }
+        return { graphInput: null, nodeGroupMap: {} }
+    })
+
+    let isLoading = $derived(!groups || !groupConnections)
+    let hasDiagramContent = $derived(true)
+
+    function handleNodeDoubleClick(event: CustomEvent<string>) {
+        const groupId = nodeGroupMap[event.detail]
+        console.debug('[overview.svelte] nodeDoubleClick', {nodeId: event.detail, groupId})
+        if (groupId) {
+            goto(`/group/${groupId}`)
+        }
+    }
+
+    async function refreshData() {
+        await invalidateAll()
+    }
+</script>
+
+<svelte:head>
+    <title>Resource Mapper – Overview</title>
+</svelte:head>
+
+{#if errorMessage}
+    <ErrorDisplay
+            title="Error loading groups"
+            message="Failed to load the group overview diagram."
+            checkList={[
+      'Ensure YAML data exists under /data/services',
+      'Check the browser console for more details'
+    ]}
+            technicalDetails={errorMessage}
+            onRetry={refreshData}
+    />
+{:else if isLoading}
+    <LoadingSpinner message="Loading group overview..."/>
+{:else if !hasDiagramContent}
+    <EmptyState title="No Groups Found" message="No group definitions were discovered in the static data set."/>
+{:else}
+    <div class="flex h-full w-full gap-1 lg:flex-row">
+        <SvelteFlowProvider>
+            <!-- Todo: make the pending variable dependant on the actual loading of data -->
+            <FlowCanvas
+                    graph={graphInput}
+                    pending={isLoading}
+                    on:nodeDoubleClick={handleNodeDoubleClick}
+            />
+            <!-- Todo: Check if we can resize this sidebar on drag -->
+            <!-- Todo: Check if we can close the sidebar with a button in the center left of the sidebar when open -->
+            <GroupDetailSidebar
+                    groupMap={nodeGroupMap}
+                    groups={groups ?? {}}
+                    placeholderMessage="Select a group to see details"
+            />
+        </SvelteFlowProvider>
+    </div>
+{/if}

package/src/routes/+page.ts

@@ -0,0 +1,31 @@
+import type {PageLoad} from './$types'
+import {getAllGroups} from '$lib/data/groups'
+import {getAllGroupConnections} from '$lib/data/connections'
+import {getAllTeams} from '$lib/data/teams'
+import {selectedGroup} from "$lib/stores/diagram";
+
+export const load: PageLoad = async () => {
+  try {
+    console.debug('[overview.load] start fetching data')
+    const [groups, groupConnections, teams] = await Promise.all([
+      getAllGroups(),
+      getAllGroupConnections(),
+      getAllTeams()
+    ])
+    console.debug('[overview.load] data fetched', {
+      groups,
+      groupConnections,
+      teams
+    })
+    selectedGroup.set(null);
+    return { groups, groupConnections, teams }
+  } catch (error) {
+    console.error('[overview.load] failed to fetch data', error)
+    return {
+      groups: null,
+      groupConnections: null,
+      teams: null,
+      errorMessage: error instanceof Error ? error.message : 'Failed to load overview data'
+    }
+  }
+}

package/src/routes/group/[groupId]/+page.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+    import type {PageData} from './$types'
+    import type {ExternalGroupServices, GroupInfo, ServiceDefinition} from '$shared/types'
+    import {FlowCanvas, LoadingOverlay, ErrorDisplay, EmptyState, ServiceDetailSidebar} from '$lib/components';
+    import type {FlowGraphInput} from '$shared/flow-types'
+    import {buildGroupServicesGraph} from '$lib/utils/flow/servicesGraph'
+    import {goto} from '$app/navigation'
+    import {SvelteFlowProvider} from '@xyflow/svelte';
+    import {selectedGroup} from "$lib/stores/diagram";
+
+    let {data}: { data: PageData } = $props()
+
+    let group = $derived(data.group)
+    let allGroups = $derived(data.groups)
+    let groupConnections = $derived(data.connections)
+    let services: ServiceDefinition[] = $derived(data.services ?? [])
+    let externalServices: ExternalGroupServices[] = $derived(data.externalServices ?? [])
+    let groupId = $derived(data.groupId)
+
+    let serviceNodeLookup = $state<Record<string, ServiceDefinition>>({})
+    let externalServiceLookup = $state<Record<string, { service: ServiceDefinition; group: GroupInfo }>>({})
+    let externalGroupNodeLookup = $state<Record<string, string>>({})
+    let groupGraph = $state<FlowGraphInput | null>(null)
+    let loadError = $state<string | null>(null)
+    let hasDiagramContent = $derived(!!(groupGraph && groupGraph.serviceNodes.length > 0))
+
+
+    $effect(() => {
+        if (!group) {
+            loadError = groupId ? `Unable to load group '${groupId}'.` : 'Missing group identifier.'
+        } else {
+            loadError = null
+            selectedGroup.set(data.group)
+        }
+    })
+
+    $effect(() => {
+        if (group) {
+            const result = buildGroupServicesGraph(group, services, allGroups, groupConnections, externalServices)
+            groupGraph = result.graph
+            serviceNodeLookup = result.serviceNodes
+            externalServiceLookup = result.externalNodes
+            externalGroupNodeLookup = Object.entries(result.externalNodes).reduce<Record<string, string>>((acc, [nodeId, entry]) => {
+                acc[nodeId] = entry.group.groupName
+                return acc
+            }, {})
+            console.debug('[group.svelte] built flow graph', {
+                group: group.groupName,
+                services: services.length,
+                externalEntries: externalServices.length,
+            })
+        } else {
+            groupGraph = null
+            serviceNodeLookup = {}
+            externalServiceLookup = {}
+            externalGroupNodeLookup = {}
+        }
+    })
+
+    function handleNodeDoubleClick(event: CustomEvent<string>) {
+        const nodeId = event.detail
+        const externalGroupId = externalGroupNodeLookup[nodeId]
+        console.debug('[group.svelte] nodeDoubleClick', {nodeId, externalGroupId})
+        if (externalGroupId) {
+            goto(`/group/${externalGroupId}`)
+        }
+    }
+</script>
+
+<svelte:head>
+    <title>Resource Mapper – {group?.name ?? 'Group'}</title>
+</svelte:head>
+
+{#if loadError}
+    <ErrorDisplay
+            title="Unable to load group"
+            message={loadError}
+            checkList={['Verify the group identifier in the URL', 'Ensure the YAML definition exists']}
+            onBack={() => goto('/')}
+    />
+{:else if !group}
+    <LoadingOverlay message="Loading group..."/>
+{:else if !hasDiagramContent}
+    <EmptyState title="No services" message="This group has no service diagram to display yet."/>
+{:else}
+    <div class="flex h-full w-full gap-1 lg:flex-row">
+        <SvelteFlowProvider>
+            <FlowCanvas
+                    graph={groupGraph}
+                    pending={false}
+                    on:nodeDoubleClick={handleNodeDoubleClick}
+            />
+            <!--            on:nodeClick={handleNodeClick}-->
+
+            <ServiceDetailSidebar
+                    {group}
+                    {serviceNodeLookup}
+                    {externalServiceLookup}
+            />
+        </SvelteFlowProvider>
+    </div>
+{/if}

package/src/routes/group/[groupId]/+page.ts

@@ -0,0 +1,48 @@
+import type {PageLoad} from './$types'
+import {error} from '@sveltejs/kit'
+import {getGroup} from '$lib/data/groups'
+import {getExternalServicesForGroup, getServicesByGroup} from '$lib/data/services'
+import {getAllTeams} from '$lib/data/teams'
+import type {GroupInfo} from "$shared/types";
+import {getConnectionsFromGroup, getConnectionsToGroup} from "$lib/data/connections";
+
+export const load: PageLoad = async ({params}) => {
+    const {groupId} = params
+    if (!groupId) {
+        throw error(400, 'Missing group identifier')
+    }
+
+    const [services, externalServices, teams, connectionsFrom, connectionsTo] = await Promise.all([
+        getServicesByGroup(groupId),
+        getExternalServicesForGroup(groupId),
+        getAllTeams(),
+        getConnectionsFromGroup(groupId),
+        getConnectionsToGroup(groupId)
+    ])
+
+    const groupInfo = await getGroup(groupId);
+    if (!groupInfo) {
+        throw error(404, `Unknown group '${groupId}'`)
+    }
+
+    const allGroups: Map<string, GroupInfo> = new Map();
+    allGroups.set(groupInfo.id, groupInfo)
+
+    externalServices.forEach((externalService) => {
+        if (!allGroups.has(externalService.group.id)) {
+            allGroups.set(externalService.group.id, externalService.group)
+        }
+    })
+    const allConnections = connectionsFrom.concat(connectionsTo);
+
+    return {
+        groupId,
+        group: groupInfo,
+        groups: allGroups,
+        connections: allConnections,
+        services,
+        externalServices,
+        teams
+    }
+}
+

package/static/static/robots.txt

@@ -0,0 +1,3 @@
+# allow crawling everything by default
+User-agent: *
+Disallow:

package/svelte.config.js

@@ -0,0 +1,28 @@
+import adapter from '@sveltejs/adapter-static';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const outDir = process.env.MAPPER_BUILD_OUT || 'build';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		adapter: adapter({
+			pages: outDir,
+			assets: outDir,
+			fallback: "index.html",
+			precompress: true,
+			strict: true
+		}),
+		prerender: {
+			entries: ['*']
+		},
+		alias: {
+			$shared: path.resolve(dirname, '../shared/src'),
+		}
+	}
+};
+
+export default config;

package/tailwind.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  darkMode: 'class',
+  content: [
+    './src/**/*.{html,js,svelte,ts}',
+    '../shared/src/**/*.{ts}',
+    '../engine/src/**/*.{ts}'
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "extends": [
+    "../../tsconfig.base.json",
+    "./.svelte-kit/tsconfig.json"
+  ],
+  "compilerOptions": {
+    "outDir": "dist"
+  },
+  "include": [
+    "src",
+    ".",
+    "src/app.d.ts"
+  ],
+  "references": [
+    {
+      "path": "../shared"
+    },
+    {
+      "path": "../engine"
+    }
+  ]
+}