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

package/src/routes/+page.svelte

@@ -1,81 +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}
+<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

@@ -1,31 +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'
-    }
-  }
-}
+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

@@ -1,102 +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}
+<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

@@ -1,48 +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
-    }
-}
-
+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

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

package/svelte.config.js

@@ -1,28 +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'),
-		}
-	}
-};
-
+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

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

package/tsconfig.json

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