ea 0.4.0 → 0.5.0

data/frontend/src/components/PackageDetails.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useDataStore } from '../stores/dataStore'
+import { useUiStore } from '../stores/uiStore'
+
+const data = useDataStore()
+const ui = useUiStore()
+
+const pkg = computed(() =>
+  ui.currentPackageId ? data.getPackageById(ui.currentPackageId) : null,
+)
+</script>
+
+<template>
+  <div class="detail-view" v-if="pkg">
+    <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="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>
+      </div>
+    </div>
+
+    <div class="entity-definition" v-if="pkg.definition">
+      <div class="definition-content">{{ pkg.definition }}</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="item-list">
+        <div v-for="diagId in pkg.diagrams" :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>
+        </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="item-list">
+        <div v-for="subId in pkg.subPackages" :key="subId"
+             class="list-item clickable-row" @click="ui.selectPackage(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>
+        </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="table-wrapper">
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Type</th>
+              <th>Stereotypes</th>
+              <th>Attrs</th>
+            </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>
+              <td>
+                <span v-for="s in (data.getClassById(clsId)?.stereotypes || [])" :key="s"
+                      class="stereotype-tag">&laquo;{{ s }}&raquo;</span>
+              </td>
+              <td>{{ data.getClassById(clsId)?.attributes.length || 0 }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <div class="empty-state" v-if="!pkg.classes.length && !pkg.subPackages.length && !pkg.diagrams.length">
+      <p>This package is empty.</p>
+    </div>
+  </div>
+</template>

data/frontend/src/components/PackageTreeNode.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+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 data = useDataStore()
+const ui = useUiStore()
+
+const isExpanded = computed(() => ui.expandedNodes.has(props.node.id))
+const isSelected = computed(() =>
+  ui.currentView === 'package' && ui.currentPackageId === props.node.id,
+)
+const children = computed(() => props.node.children || [])
+const nodeClasses = computed(() => props.node.classes || [])
+
+function toggle() {
+  ui.toggleNode(props.node.id)
+}
+
+function select() {
+  ui.selectPackage(props.node.id, props.node.name)
+}
+</script>
+
+<template>
+  <div class="tree-node">
+    <div class="tree-node-content" :class="{ selected: isSelected }">
+      <button class="tree-toggle" v-if="children.length || nodeClasses.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>
+      </button>
+      <span class="tree-toggle-placeholder" v-else></span>
+
+      <span class="tree-icon" @click="select" style="cursor: pointer;">
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <path d="M2 6L8 2L14 6V13C14 13.5 13.5 14 13 14H3C2.5 14 2 13.5 2 13V6Z" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </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>
+    </div>
+
+    <div class="tree-children" v-if="isExpanded">
+      <PackageTreeNode v-for="child in children" :key="child.id" :node="child" />
+
+      <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>
+    </div>
+  </div>
+</template>

data/frontend/src/components/SearchResults.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useDataStore } from '../stores/dataStore'
+import { useUiStore } from '../stores/uiStore'
+
+const data = useDataStore()
+const ui = useUiStore()
+
+const resultsByType = computed(() => {
+  const groups: Record<string, typeof data.searchEntries> = {}
+  for (const entry of data.searchEntries) {
+    const type = entry.type
+    ;(groups[type] ??= []).push(entry)
+  }
+  return groups
+})
+</script>
+
+<template>
+  <div class="detail-view">
+    <div class="entity-header">
+      <div class="entity-title">
+        <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 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)">
+              <td>{{ entry.name }}</td>
+              <td>{{ entry.package }}</td>
+              <td><span class="entity-badge" :class="'badge-' + (entry.entityType || 'class').toLowerCase()">{{ entry.entityType }}</span></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <div class="empty-state" v-if="!data.searchEntries.length">
+      <p>No results found.</p>
+    </div>
+  </div>
+</template>

data/frontend/src/components/WelcomeView.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useDataStore } from '../stores/dataStore'
+import { useUiStore } from '../stores/uiStore'
+
+const data = useDataStore()
+const ui = useUiStore()
+
+const LUTAML_LOGO_LIGHT = 'https://raw.githubusercontent.com/lutaml/branding/refs/heads/main/svg/lutaml-logo_logo-icon-light.svg'
+const LUTAML_LOGO_DARK = 'https://raw.githubusercontent.com/lutaml/branding/refs/heads/main/svg/lutaml-logo_logo-icon-dark.svg'
+
+// Honour a user-defined square logo from the static-site config
+// (metadata.appearance.logos.square.{light,dark}) before falling back
+// to the default LutaML branding. Mirrors AppSidebar.vue so the
+// welcome screen and the sidebar never disagree about which logo to
+// show.
+const welcomeLogo = computed(() => {
+  const logos = data.metadata?.appearance?.logos
+  if (logos?.square) {
+    const variant = ui.darkMode ? logos.square.dark : logos.square.light
+    if (variant?.url) return variant.url
+    if (variant?.path) return variant.path
+  }
+  return ui.darkMode ? LUTAML_LOGO_DARK : LUTAML_LOGO_LIGHT
+})
+
+function formatDate(isoString?: string): string {
+  if (!isoString) return ''
+  try {
+    const date = new Date(isoString)
+    return date.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })
+  } catch {
+    return isoString
+  }
+}
+</script>
+
+<template>
+  <div class="view-welcome">
+    <div class="welcome-logo">
+      <img
+        :src="welcomeLogo"
+        :alt="data.metadata?.title || 'Logo'"
+        width="48"
+        height="48"
+      />
+    </div>
+    <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-stat">
+        <div class="welcome-stat-value">{{ data.metadata.statistics.packages }}</div>
+        <div class="welcome-stat-label">Packages</div>
+      </div>
+      <div class="welcome-stat">
+        <div class="welcome-stat-value">{{ data.metadata.statistics.classes }}</div>
+        <div class="welcome-stat-label">Classes</div>
+      </div>
+      <div class="welcome-stat">
+        <div class="welcome-stat-value">{{ data.metadata.statistics.attributes }}</div>
+        <div class="welcome-stat-label">Attributes</div>
+      </div>
+      <div class="welcome-stat">
+        <div class="welcome-stat-value">{{ data.metadata.statistics.associations }}</div>
+        <div class="welcome-stat-label">Associations</div>
+      </div>
+    </div>
+
+    <div class="welcome-meta" v-if="data.metadata">
+      <div class="meta-item">
+        <span class="meta-label">Generator</span>
+        <span class="meta-value">{{ data.metadata.generator }}</span>
+      </div>
+      <div class="meta-item" v-if="data.metadata.version">
+        <span class="meta-label">Version</span>
+        <span class="meta-value">{{ data.metadata.version }}</span>
+      </div>
+      <div class="meta-item" v-if="data.metadata.generated">
+        <span class="meta-label">Generated</span>
+        <span class="meta-value">{{ formatDate(data.metadata.generated) }}</span>
+      </div>
+    </div>
+
+    <p class="welcome-actions">Select a package from the sidebar or press <kbd>/</kbd> to search</p>
+  </div>
+</template>

data/frontend/src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

data/frontend/src/stores/dataStore.ts

@@ -0,0 +1,79 @@
+import { defineStore } from 'pinia'
+import type {
+  SpaData,
+  SpaDocument,
+  SpaSearchIndex,
+  SpaSearchEntry,
+  SpaClass,
+  SpaPackage,
+  SpaAttribute,
+  SpaAssociation,
+  SpaOperation,
+  SpaDiagram,
+} from '../types'
+
+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>,
+    searchEntries: [] as SpaSearchEntry[],
+    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,
+  },
+
+  actions: {
+    loadFromEmbedded() {
+      const win = window as any
+      if (!win.__SPA_DATA__) {
+        throw new Error('No embedded SPA data found in window.__SPA_DATA__')
+      }
+      this.loadData(win.__SPA_DATA__)
+    },
+
+    async loadFromUrl(dataUrl: string, searchUrl: string) {
+      const [dataRes, searchRes] = await Promise.all([
+        fetch(dataUrl),
+        fetch(searchUrl),
+      ])
+      const data = await dataRes.json()
+      const searchIndex = await searchRes.json()
+      this.loadData({ ...data, searchIndex })
+    },
+
+    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
+    },
+
+    findClassByName(name: string): SpaClass | undefined {
+      return Object.values(this.classes).find((c) => c.name === name)
+    },
+  },
+})

data/frontend/src/stores/uiStore.ts

@@ -0,0 +1,167 @@
+import { defineStore } from 'pinia'
+import { useDataStore } from './dataStore'
+
+export type ViewName = 'welcome' | 'package' | 'class' | 'search' | 'diagram'
+
+interface Breadcrumb {
+  label: string
+  id?: string
+  type?: string
+}
+
+export const useUiStore = defineStore('ui', {
+  state: () => ({
+    currentView: 'welcome' as ViewName,
+    currentPackageId: null as string | null,
+    currentPackageLabel: null as string | null,
+    currentClassId: null as string | null,
+    currentClassLabel: null as string | null,
+    currentDiagramId: null as string | null,
+    currentDiagramLabel: null as string | null,
+    sidebarVisible: true,
+    darkMode: false,
+    expandedNodes: new Set<string>(),
+    breadcrumbs: [] as Breadcrumb[],
+    searchQuery: '',
+  }),
+
+  actions: {
+    showWelcome() {
+      this.currentView = 'welcome'
+      this.currentPackageId = null
+      this.currentClassId = null
+      this.currentDiagramId = null
+      this.breadcrumbs = []
+      this.updateHash()
+    },
+
+    selectPackage(id: string, label?: string) {
+      this.currentView = 'package'
+      this.currentPackageId = id
+      this.currentPackageLabel = label || null
+      this.currentClassId = null
+      this.currentDiagramId = null
+      this.breadcrumbs = [{ label: label || 'Package', id, type: 'package' }]
+      this.expandToNode(id)
+      this.updateHash()
+    },
+
+    selectClass(id: string, label?: string) {
+      this.currentView = 'class'
+      this.currentClassId = id
+      this.currentClassLabel = label || null
+      this.currentDiagramId = null
+      this.breadcrumbs = [
+        ...(this.currentPackageId && this.currentPackageLabel
+          ? [
+              {
+                label: this.currentPackageLabel,
+                id: this.currentPackageId,
+                type: 'package',
+              },
+            ]
+          : []),
+        { label: label || 'Class', id, type: 'class' },
+      ]
+      this.updateHash()
+    },
+
+    selectDiagram(id: string, label?: string) {
+      this.currentView = 'diagram'
+      this.currentDiagramId = id
+      this.currentDiagramLabel = label || null
+      this.breadcrumbs = [
+        ...(this.currentPackageId && this.currentPackageLabel
+          ? [
+              {
+                label: this.currentPackageLabel,
+                id: this.currentPackageId,
+                type: 'package',
+              },
+            ]
+          : []),
+        { label: label || 'Diagram', id, type: 'diagram' },
+      ]
+      this.updateHash()
+    },
+
+    showSearch(query: string) {
+      this.currentView = 'search'
+      this.searchQuery = query
+      this.updateHash()
+    },
+
+    toggleNode(nodeId: string) {
+      if (this.expandedNodes.has(nodeId)) {
+        this.expandedNodes.delete(nodeId)
+      } else {
+        this.expandedNodes.add(nodeId)
+      }
+    },
+
+    expandToNode(nodeId: string) {
+      this.expandedNodes.add(nodeId)
+    },
+
+    expandAll() {
+      const addAll = (nodes: any[]) => {
+        for (const n of nodes) {
+          this.expandedNodes.add(n.id)
+          if (n.children) addAll(n.children)
+        }
+      }
+    },
+
+    collapseAll() {
+      this.expandedNodes.clear()
+    },
+
+    toggleSidebar() {
+      this.sidebarVisible = !this.sidebarVisible
+    },
+
+    toggleDarkMode() {
+      this.darkMode = !this.darkMode
+    },
+
+    navigateToHash() {
+      const hash = window.location.hash.slice(1)
+      if (!hash) return
+
+      const data = useDataStore()
+
+      if (hash.startsWith('/package/')) {
+        const id = hash.slice('/package/'.length)
+        const pkg = data.getPackageById(id)
+        this.selectPackage(id, pkg?.name)
+      } else if (hash.startsWith('/class/')) {
+        const id = hash.slice('/class/'.length)
+        const cls = data.getClassById(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)
+      }
+    },
+
+    updateHash() {
+      let hash = ''
+      switch (this.currentView) {
+        case 'package':
+          hash = `/package/${this.currentPackageId}`
+          break
+        case 'class':
+          hash = `/class/${this.currentClassId}`
+          break
+        case 'diagram':
+          hash = `/diagram/${this.currentDiagramId}`
+          break
+        case 'search':
+          hash = `/search?q=${encodeURIComponent(this.searchQuery)}`
+          break
+      }
+      window.location.hash = hash
+    },
+  },
+})