ea 0.6.3 → 0.6.5

data/frontend/src/components/PackageDetails.vue

@@ -1,14 +1,56 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, watch } from 'vue'
 import { useDataStore } from '../stores/dataStore'
 import { useUiStore } from '../stores/uiStore'
+import type { SpaPackagePayload } from '../types'
 
 const data = useDataStore()
 const ui = useUiStore()
 
+const pkgId = computed(() => ui.currentPackageId)
 const pkg = computed(() =>
-  ui.currentPackageId ? data.getPackageById(ui.currentPackageId) : null,
+  pkgId.value ? (data.elementFor(pkgId.value)?.payload as SpaPackagePayload | undefined) ?? null : null,
 )
+
+watch(
+  pkgId,
+  async (id) => {
+    if (!id) return
+    const shard = await data.ensureElement(id)
+    if (!shard || ui.currentPackageId !== id) return
+    const p = shard.payload
+    await data.ensureElements([
+      ...(p.classifierIds || []),
+      ...(p.subPackageIds || []),
+      ...(p.diagramIds || []),
+    ])
+  },
+  { immediate: true },
+)
+
+function definitionOf(p: SpaPackagePayload | null): string {
+  return p?.annotations?.find((a) => a.kind === 'documentation')?.body || ''
+}
+
+const subPackageIds = computed(() => pkg.value?.subPackageIds ?? [])
+const diagramIds = computed(() => pkg.value?.diagramIds ?? [])
+const classifierIds = computed(() => pkg.value?.classifierIds ?? [])
+
+function pkgName(id: string): string {
+  return data.nodesById[id]?.name || id
+}
+
+function diagramName(id: string): string {
+  return data.elementFor(id)?.payload?.name || id
+}
+
+function entryFor(id: string) {
+  return data.entriesById[id]
+}
+
+function elementFor(id: string) {
+  return data.elementFor(id)?.payload
+}
 </script>
 
 <template>
@@ -16,49 +58,48 @@ const pkg = computed(() =>
     <div class="entity-header">
       <div class="entity-title">
         <h2 class="entity-name">{{ pkg.name }}</h2>
-        <div class="entity-subtitle" v-if="pkg.path">{{ pkg.path }}</div>
       </div>
       <span class="entity-badge badge-package">Package</span>
     </div>
 
-    <div class="entity-metadata" v-if="pkg.stereotypes.length">
+    <div class="entity-metadata" v-if="pkg.stereotypeRefs.length">
       <div class="metadata-item">
         <span class="metadata-label">Stereotypes</span>
         <span class="metadata-value">
-          <span v-for="s in pkg.stereotypes" :key="s" class="stereotype-tag">&laquo;{{ s }}&raquo;</span>
+          <span v-for="s in pkg.stereotypeRefs" :key="s" class="stereotype-tag">&laquo;{{ s }}&raquo;</span>
         </span>
       </div>
     </div>
 
-    <div class="entity-definition" v-if="pkg.definition">
-      <div class="definition-content">{{ pkg.definition }}</div>
+    <div class="entity-definition" v-if="definitionOf(pkg)">
+      <div class="definition-content">{{ definitionOf(pkg) }}</div>
     </div>
 
-    <div class="section" v-if="pkg.diagrams.length">
-      <h3 class="section-title">Diagrams <span class="section-count">{{ pkg.diagrams.length }}</span></h3>
+    <div class="section" v-if="diagramIds.length">
+      <h3 class="section-title">Diagrams <span class="section-count">{{ diagramIds.length }}</span></h3>
       <div class="item-list">
-        <div v-for="diagId in pkg.diagrams" :key="diagId"
+        <div v-for="diagId in diagramIds" :key="diagId"
              class="list-item clickable-row" @click="ui.selectDiagram(diagId)">
           <span class="list-item-icon">&#128202;</span>
-          <span class="list-item-name">{{ data.getDiagramById(diagId)?.name || diagId }}</span>
+          <span class="list-item-name">{{ diagramName(diagId) }}</span>
         </div>
       </div>
     </div>
 
-    <div class="section" v-if="pkg.subPackages.length">
-      <h3 class="section-title">Sub-Packages <span class="section-count">{{ pkg.subPackages.length }}</span></h3>
+    <div class="section" v-if="subPackageIds.length">
+      <h3 class="section-title">Sub-Packages <span class="section-count">{{ subPackageIds.length }}</span></h3>
       <div class="item-list">
-        <div v-for="subId in pkg.subPackages" :key="subId"
-             class="list-item clickable-row" @click="ui.selectPackage(subId)">
+        <div v-for="subId in subPackageIds" :key="subId"
+             class="list-item clickable-row" @click="ui.selectPackage(subId, pkgName(subId))">
           <span class="list-item-icon">&#128193;</span>
-          <span class="list-item-name">{{ data.getPackageById(subId)?.name || subId }}</span>
-          <span class="tree-count">{{ data.getPackageById(subId)?.classes.length || 0 }}</span>
+          <span class="list-item-name">{{ pkgName(subId) }}</span>
+          <span class="tree-count">{{ data.nodesById[subId]?.classifierIds.length || 0 }}</span>
         </div>
       </div>
     </div>
 
-    <div class="section" v-if="pkg.classes.length">
-      <h3 class="section-title">Classes <span class="section-count">{{ pkg.classes.length }}</span></h3>
+    <div class="section" v-if="classifierIds.length">
+      <h3 class="section-title">Classes <span class="section-count">{{ classifierIds.length }}</span></h3>
       <div class="table-wrapper">
         <table class="data-table">
           <thead>
@@ -70,22 +111,22 @@ const pkg = computed(() =>
             </tr>
           </thead>
           <tbody>
-            <tr v-for="clsId in pkg.classes" :key="clsId" class="clickable-row"
-                @click="ui.selectClass(clsId)">
-              <td>{{ data.getClassById(clsId)?.name }}</td>
-              <td><span class="entity-badge" :class="'badge-' + (data.getClassById(clsId)?.type || 'class').toLowerCase()">{{ data.getClassById(clsId)?.type }}</span></td>
+            <tr v-for="clsId in classifierIds" :key="clsId" class="clickable-row"
+                @click="ui.selectClass(clsId, entryFor(clsId)?.name)">
+              <td>{{ entryFor(clsId)?.name || elementFor(clsId)?.name || clsId }}</td>
+              <td><span class="entity-badge" :class="'badge-' + (entryFor(clsId)?.kind || 'class')">{{ entryFor(clsId)?.kind || 'class' }}</span></td>
               <td>
-                <span v-for="s in (data.getClassById(clsId)?.stereotypes || [])" :key="s"
+                <span v-for="s in (elementFor(clsId)?.stereotypeRefs || [])" :key="s"
                       class="stereotype-tag">&laquo;{{ s }}&raquo;</span>
               </td>
-              <td>{{ data.getClassById(clsId)?.attributes.length || 0 }}</td>
+              <td>{{ elementFor(clsId)?.properties?.length || 0 }}</td>
             </tr>
           </tbody>
         </table>
       </div>
     </div>
 
-    <div class="empty-state" v-if="!pkg.classes.length && !pkg.subPackages.length && !pkg.diagrams.length">
+    <div class="empty-state" v-if="!classifierIds.length && !subPackageIds.length && !diagramIds.length">
       <p>This package is empty.</p>
     </div>
   </div>

data/frontend/src/components/PackageTreeNode.vue

@@ -2,32 +2,40 @@
 import { computed } from 'vue'
 import { useDataStore } from '../stores/dataStore'
 import { useUiStore } from '../stores/uiStore'
-import type { SpaPackageTreeNode } from '../types'
 
-const props = defineProps<{ node: SpaPackageTreeNode }>()
+const props = defineProps<{ nodeId: string }>()
 const data = useDataStore()
 const ui = useUiStore()
 
-const isExpanded = computed(() => ui.expandedNodes.has(props.node.id))
+const node = computed(() => data.nodesById[props.nodeId])
+const isExpanded = computed(() => ui.expandedNodes.has(props.nodeId))
 const isSelected = computed(() =>
-  ui.currentView === 'package' && ui.currentPackageId === props.node.id,
+  ui.currentView === 'package' && ui.currentPackageId === props.nodeId,
 )
-const children = computed(() => props.node.children || [])
-const nodeClasses = computed(() => props.node.classes || [])
+const children = computed(() => node.value?.childIds ?? [])
+const childNodes = computed(() =>
+  children.value.map((id) => data.nodesById[id]).filter((n) => !!n),
+)
+const classEntries = computed(() =>
+  (node.value?.classifierIds ?? [])
+    .map((id) => data.entriesById[id])
+    .filter((e) => !!e),
+)
+const classCount = computed(() => node.value?.classifierIds.length ?? 0)
 
 function toggle() {
-  ui.toggleNode(props.node.id)
+  ui.toggleNode(props.nodeId)
 }
 
 function select() {
-  ui.selectPackage(props.node.id, props.node.name)
+  ui.selectPackage(props.nodeId, node.value?.name)
 }
 </script>
 
 <template>
-  <div class="tree-node">
+  <div class="tree-node" v-if="node">
     <div class="tree-node-content" :class="{ selected: isSelected }">
-      <button class="tree-toggle" v-if="children.length || nodeClasses.length" @click.stop="toggle">
+      <button class="tree-toggle" v-if="children.length || classEntries.length" @click.stop="toggle">
         <svg width="12" height="12" viewBox="0 0 12 12" fill="none" :class="{ expanded: isExpanded }">
           <path d="M4 3l3 3-3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
@@ -41,23 +49,20 @@ function select() {
       </span>
 
       <span class="tree-label-group" @click="select">
-        <span class="tree-stereotype" v-if="node.stereotypes && node.stereotypes.length">
-          <span v-for="s in node.stereotypes" :key="s">&laquo;{{ s }}&raquo;</span>
-        </span>
         <span class="tree-label">{{ node.name }}</span>
       </span>
 
-      <span class="tree-count" v-if="node.classCount">{{ node.classCount }}</span>
+      <span class="tree-count" v-if="classCount">{{ classCount }}</span>
     </div>
 
     <div class="tree-children" v-if="isExpanded">
-      <PackageTreeNode v-for="child in children" :key="child.id" :node="child" />
+      <PackageTreeNode v-for="child in childNodes" :key="child.id" :node-id="child.id" />
 
-      <div v-for="cls in nodeClasses" :key="cls.id"
-           class="tree-item" :class="{ selected: ui.currentClassId === cls.id }"
-           @click="ui.selectClass(cls.id, cls.name)">
-        <span class="badge badge-class">{{ cls.stereotypes.length ? cls.stereotypes[0][0] : 'C' }}</span>
-        <span class="tree-item-label">{{ cls.name }}</span>
+      <div v-for="entry in classEntries" :key="entry.id"
+           class="tree-item" :class="{ selected: ui.currentClassId === entry.id }"
+           @click="ui.selectClass(entry.id, entry.name)">
+        <span class="badge badge-class">{{ entry.kind.charAt(0).toUpperCase() }}</span>
+        <span class="tree-item-label">{{ entry.name }}</span>
       </div>
     </div>
   </div>

data/frontend/src/components/SearchResults.vue

@@ -6,14 +6,26 @@ import { useUiStore } from '../stores/uiStore'
 const data = useDataStore()
 const ui = useUiStore()
 
-const resultsByType = computed(() => {
+const resultsByKind = computed(() => {
   const groups: Record<string, typeof data.searchEntries> = {}
   for (const entry of data.searchEntries) {
-    const type = entry.type
-    ;(groups[type] ??= []).push(entry)
+    ;(groups[entry.kind] ??= []).push(entry)
   }
   return groups
 })
+
+function isClickable(kind: string): boolean {
+  return kind !== 'property'
+}
+
+function open(entry: { id: string; kind: string; name: string }) {
+  if (!isClickable(entry.kind)) return
+  if (entry.kind === 'package') {
+    ui.selectPackage(entry.id, entry.name)
+  } else {
+    ui.selectClass(entry.id, entry.name)
+  }
+}
 </script>
 
 <template>
@@ -23,19 +35,20 @@ const resultsByType = computed(() => {
         <h2 class="entity-name">Search Results</h2>
       </div>
     </div>
-    <div v-for="(entries, type) in resultsByType" :key="type" class="section">
-      <h3 class="section-title">{{ type }}s <span class="section-count">{{ entries.length }}</span></h3>
+    <div v-for="(entries, kind) in resultsByKind" :key="kind" class="section">
+      <h3 class="section-title">{{ kind }}s <span class="section-count">{{ entries.length }}</span></h3>
       <div class="table-wrapper">
         <table class="data-table">
           <thead>
             <tr><th>Name</th><th>Package</th><th>Type</th></tr>
           </thead>
           <tbody>
-            <tr v-for="entry in entries" :key="entry.id" class="clickable-row"
-                @click="entry.type === 'class' ? ui.selectClass(entry.entityId) : ui.selectPackage(entry.entityId)">
+            <tr v-for="entry in entries" :key="entry.id" class="data-row"
+                :class="{ 'clickable-row': isClickable(entry.kind) }"
+                @click="open(entry)">
               <td>{{ entry.name }}</td>
               <td>{{ entry.package }}</td>
-              <td><span class="entity-badge" :class="'badge-' + (entry.entityType || 'class').toLowerCase()">{{ entry.entityType }}</span></td>
+              <td><span class="entity-badge" :class="'badge-' + entry.kind">{{ entry.kind }}</span></td>
             </tr>
           </tbody>
         </table>

data/frontend/src/components/WelcomeView.vue

@@ -48,7 +48,7 @@ function formatDate(isoString?: string): string {
     <h1 class="welcome-title">{{ data.metadata?.title || 'UML Model Browser' }}</h1>
     <p class="welcome-subtitle">Explore UML model packages, classes, and associations</p>
 
-    <div class="welcome-stats" v-if="data.metadata">
+    <div class="welcome-stats" v-if="data.metadata?.statistics">
       <div class="welcome-stat">
         <div class="welcome-stat-value">{{ data.metadata.statistics.packages }}</div>
         <div class="welcome-stat-label">Packages</div>
@@ -68,7 +68,7 @@ function formatDate(isoString?: string): string {
     </div>
 
     <div class="welcome-meta" v-if="data.metadata">
-      <div class="meta-item">
+      <div class="meta-item" v-if="data.metadata.generator">
         <span class="meta-label">Generator</span>
         <span class="meta-value">{{ data.metadata.generator }}</span>
       </div>

data/frontend/src/stores/dataStore.ts

@@ -1,79 +1,173 @@
 import { defineStore } from 'pinia'
 import type {
   SpaData,
-  SpaDocument,
-  SpaSearchIndex,
+  SpaMetadata,
+  SpaPackageTreeNode,
+  SpaPackageTree,
   SpaSearchEntry,
-  SpaClass,
-  SpaPackage,
-  SpaAttribute,
-  SpaAssociation,
-  SpaOperation,
-  SpaDiagram,
+  SpaSearchIndex,
+  SpaShard,
+  SpaSkeletonEntry,
 } from '../types'
 
+const SHARD_DIRS: Record<string, string> = {
+  class: 'classes',
+  enumeration: 'enumerations',
+  data_type: 'data_types',
+  primitive_type: 'primitive_types',
+  interface: 'interfaces',
+  package: 'packages',
+  diagram: 'diagrams',
+  property: 'properties',
+}
+
+const FETCH_CONCURRENCY = 12
+
+const inflight = new Map<string, Promise<SpaShard | null>>()
+
 export const useDataStore = defineStore('data', {
   state: () => ({
-    metadata: null as SpaDocument['metadata'] | null,
-    packageTree: null as SpaDocument['packageTree'] | null,
-    packages: {} as Record<string, SpaPackage>,
-    classes: {} as Record<string, SpaClass>,
-    attributes: {} as Record<string, SpaAttribute>,
-    associations: {} as Record<string, SpaAssociation>,
-    operations: {} as Record<string, SpaOperation>,
-    diagrams: {} as Record<string, SpaDiagram>,
+    metadata: null as SpaMetadata | null,
+    packageTree: null as SpaPackageTree | null,
+    entries: [] as SpaSkeletonEntry[],
     searchEntries: [] as SpaSearchEntry[],
+    elements: {} as Record<string, SpaShard>,
+    shardBase: '',
     loaded: false,
   }),
 
   getters: {
-    getClassById: (state) => (id: string) => state.classes[id],
-    getPackageById: (state) => (id: string) => state.packages[id],
-    getAttributeById: (state) => (id: string) => state.attributes[id],
-    getAssociationById: (state) => (id: string) => state.associations[id],
-    getOperationById: (state) => (id: string) => state.operations[id],
-    getDiagramById: (state) => (id: string) => state.diagrams[id],
-
-    classCount: (state) => Object.keys(state.classes).length,
-    packageCount: (state) => Object.keys(state.packages).length,
-    associationCount: (state) => Object.keys(state.associations).length,
-    attributeCount: (state) => Object.keys(state.attributes).length,
+    entriesById(): Record<string, SpaSkeletonEntry> {
+      const map: Record<string, SpaSkeletonEntry> = {}
+      for (const e of this.entries) map[e.id] = e
+      return map
+    },
+
+    nodesById(): Record<string, SpaPackageTreeNode> {
+      const map: Record<string, SpaPackageTreeNode> = {}
+      if (this.packageTree) {
+        for (const n of this.packageTree.nodes) map[n.id] = n
+      }
+      return map
+    },
+
+    rootNodes(): SpaPackageTreeNode[] {
+      const tree = this.packageTree
+      if (!tree) return []
+      const map = this.nodesById
+      return tree.rootIds.map((id) => map[id]).filter((n) => !!n)
+    },
   },
 
   actions: {
     loadFromEmbedded() {
       const win = window as any
-      if (!win.__SPA_DATA__) {
+      const raw = win.__SPA_DATA__ as SpaData
+      if (!raw) {
         throw new Error('No embedded SPA data found in window.__SPA_DATA__')
       }
-      this.loadData(win.__SPA_DATA__)
+      this.metadata = raw.metadata
+      this.packageTree = raw.packageTree
+      this.entries = raw.entries || []
+      this.searchEntries = raw.searchIndex?.entries || []
+      this.hydrateShards(raw.shards || [])
+      this.loaded = true
     },
 
-    async loadFromUrl(dataUrl: string, searchUrl: string) {
-      const [dataRes, searchRes] = await Promise.all([
-        fetch(dataUrl),
+    async loadFromSharded(skeletonUrl: string, searchUrl: string, shardBase: string) {
+      const [skeletonRes, searchRes] = await Promise.all([
+        fetch(skeletonUrl),
         fetch(searchUrl),
       ])
-      const data = await dataRes.json()
-      const searchIndex = await searchRes.json()
-      this.loadData({ ...data, searchIndex })
+      if (!skeletonRes.ok) {
+        throw new Error(`Failed to load ${skeletonUrl}: ${skeletonRes.status}`)
+      }
+      if (!searchRes.ok) {
+        throw new Error(`Failed to load ${searchUrl}: ${searchRes.status}`)
+      }
+      const skeleton = await skeletonRes.json()
+      const searchIndex: SpaSearchIndex = await searchRes.json()
+      this.metadata = skeleton.metadata
+      this.packageTree = skeleton.packageTree
+      this.entries = skeleton.entries || []
+      this.searchEntries = searchIndex.entries || []
+      this.shardBase = shardBase || ''
+      this.loaded = true
     },
 
-    loadData(raw: SpaData) {
-      this.metadata = raw.metadata
-      this.packageTree = raw.packageTree
-      this.packages = raw.packages || {}
-      this.classes = raw.classes || {}
-      this.attributes = raw.attributes || {}
-      this.associations = raw.associations || {}
-      this.operations = raw.operations || {}
-      this.diagrams = raw.diagrams || {}
-      this.searchEntries = raw.searchIndex?.documentStore || []
-      this.loaded = true
+    hydrateShards(shards: SpaShard[]) {
+      for (const shard of shards) this.elements[shard.id] = shard
+    },
+
+    elementFor(id: string): SpaShard | null {
+      return this.elements[id] || null
+    },
+
+    kindFor(id: string): string | null {
+      const entry = this.entriesById[id]
+      if (entry) return entry.kind
+      if (this.nodesById[id]) return 'package'
+      if (this.packageTree?.nodes.some((n) => n.diagramIds.includes(id))) {
+        return 'diagram'
+      }
+      return null
+    },
+
+    shardUrlFor(id: string, kind: string): string {
+      const dir = SHARD_DIRS[kind] || `${kind}s`
+      return `${this.shardBase}${dir}/${id}.json`
+    },
+
+    async ensureElement(id: string): Promise<SpaShard | null> {
+      const cached = this.elements[id]
+      if (cached) return cached
+
+      const kind = this.kindFor(id)
+      if (!kind) return null
+
+      const existing = inflight.get(id)
+      if (existing) return existing
+
+      const url = this.shardUrlFor(id, kind)
+      const pending = fetch(url)
+        .then(async (res) => {
+          if (!res.ok) {
+            throw new Error(`Failed to load ${url}: ${res.status}`)
+          }
+          const shard: SpaShard = await res.json()
+          this.elements[shard.id] = shard
+          return shard
+        })
+        .finally(() => {
+          inflight.delete(id)
+        })
+      inflight.set(id, pending)
+      return pending
+    },
+
+    async ensureElements(ids: string[]): Promise<void> {
+      const queue = [...ids]
+      const workers = Array.from(
+        { length: Math.min(FETCH_CONCURRENCY, queue.length) },
+        async () => {
+          for (;;) {
+            const id = queue.shift()
+            if (!id) return
+            try {
+              await this.ensureElement(id)
+            } catch {
+              // leave the element missing; views render what they have
+            }
+          }
+        },
+      )
+      await Promise.all(workers)
     },
 
-    findClassByName(name: string): SpaClass | undefined {
-      return Object.values(this.classes).find((c) => c.name === name)
+    classifierEntryByName(name: string): SpaSkeletonEntry | undefined {
+      return this.entries.find(
+        (e) => e.qualifiedName === name || e.name === name,
+      )
     },
   },
 })

data/frontend/src/stores/uiStore.ts

@@ -132,16 +132,15 @@ export const useUiStore = defineStore('ui', {
 
       if (hash.startsWith('/package/')) {
         const id = hash.slice('/package/'.length)
-        const pkg = data.getPackageById(id)
+        const pkg = data.nodesById[id]
         this.selectPackage(id, pkg?.name)
       } else if (hash.startsWith('/class/')) {
         const id = hash.slice('/class/'.length)
-        const cls = data.getClassById(id)
+        const cls = data.entriesById[id]
         this.selectClass(id, cls?.name)
       } else if (hash.startsWith('/diagram/')) {
         const id = hash.slice('/diagram/'.length)
-        const diag = data.getDiagramById(id)
-        this.selectDiagram(id, diag?.name)
+        this.selectDiagram(id)
       }
     },