@glossarist/concept-browser 0.1.0

package/src/views/ConceptView.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { computed, watch, ref } from 'vue';
+import { useVocabularyStore } from '../stores/vocabulary';
+import ConceptDetail from '../components/ConceptDetail.vue';
+
+const props = defineProps<{
+  registerId: string;
+  conceptId: string;
+}>();
+
+const store = useVocabularyStore();
+const conceptLoading = ref(false);
+const localError = ref<string | null>(null);
+
+async function loadConcept(regId: string, cId: string) {
+  conceptLoading.value = true;
+  localError.value = null;
+  store.error = null;
+  try {
+    // Ensure dataset is loaded (index + chunks) before fetching concept
+    const adapter = store.datasets.get(regId);
+    if (!adapter?.index) {
+      await store.loadDataset(regId);
+    }
+    await store.viewConcept(regId, cId);
+  } catch (e: any) {
+    localError.value = e.message || 'Unknown error';
+  } finally {
+    conceptLoading.value = false;
+  }
+}
+
+watch(
+  () => [props.registerId, props.conceptId],
+  async ([regId, cId]) => {
+    await loadConcept(regId as string, cId as string);
+    loadAdjacent();
+  },
+  { immediate: true }
+);
+
+const concept = computed(() => store.currentConcept);
+const manifest = computed(() => store.currentManifest);
+const edges = computed(() => store.conceptEdges);
+const adjacent = ref({ prev: null as string | null, next: null as string | null });
+
+async function loadAdjacent() {
+  const adapter = store.datasets.get(props.registerId);
+  if (!adapter?.index) return;
+  const idx = adapter.getConceptPosition(props.conceptId);
+  if (idx >= 0) {
+    await adapter.ensureChunksForRange(Math.max(0, idx - 1), 3);
+  }
+  adjacent.value = adapter.getAdjacentConcepts(props.conceptId);
+}
+
+watch(() => props.conceptId, () => { loadAdjacent(); });
+</script>
+
+<template>
+  <div class="px-4 sm:px-6 lg:px-8 py-8">
+    <div v-if="conceptLoading" class="max-w-5xl mx-auto py-8 space-y-5">
+      <!-- Breadcrumb skeleton -->
+      <div class="flex items-center gap-1.5">
+        <div class="skeleton h-3 w-24"></div>
+        <div class="skeleton h-3 w-4"></div>
+        <div class="skeleton h-3 w-16"></div>
+      </div>
+      <!-- Title skeleton -->
+      <div class="skeleton h-10 w-72"></div>
+      <!-- Badge skeleton -->
+      <div class="flex gap-2">
+        <div class="skeleton h-5 w-20"></div>
+        <div class="skeleton h-5 w-16"></div>
+        <div class="skeleton h-5 w-28"></div>
+      </div>
+      <!-- Language section skeleton -->
+      <div class="border border-ink-100/80 rounded-lg p-4 space-y-3">
+        <div class="flex items-center gap-2">
+          <div class="skeleton h-4 w-4"></div>
+          <div class="skeleton h-5 w-40"></div>
+          <div class="skeleton h-3 w-12"></div>
+        </div>
+        <div class="skeleton h-20 w-full"></div>
+        <div class="skeleton h-4 w-3/4"></div>
+      </div>
+    </div>
+    <div v-else-if="localError" class="max-w-xl mx-auto text-center py-20">
+      <div class="card p-8 border-red-200 bg-red-50/50">
+        <p class="text-red-700 font-medium mb-1">Failed to load concept</p>
+        <p class="text-sm text-red-600/80 mb-4">{{ localError }}</p>
+        <div class="flex gap-2 justify-center">
+          <button @click="loadConcept(registerId, conceptId)" class="btn-primary">Retry</button>
+          <router-link :to="{ name: 'dataset', params: { registerId } }" class="btn-secondary">
+            Back to dataset
+          </router-link>
+        </div>
+      </div>
+    </div>
+    <div v-else-if="!concept" class="max-w-xl mx-auto text-center py-20">
+      <div class="card p-8">
+        <div class="text-ink-200 text-5xl mb-3 font-serif">?</div>
+        <h3 class="text-lg font-medium text-ink-700 mb-2">Concept not found</h3>
+        <p class="text-sm text-ink-400 mb-4">The concept "{{ conceptId }}" does not exist in this dataset.</p>
+        <router-link :to="{ name: 'dataset', params: { registerId } }" class="btn-primary">
+          Back to dataset
+        </router-link>
+      </div>
+    </div>
+    <ConceptDetail
+      v-else-if="concept && manifest"
+      :concept="concept"
+      :manifest="manifest"
+      :edges="edges"
+      :adjacent="adjacent"
+      :register-id="registerId"
+    />
+  </div>
+</template>

package/src/views/ContributorsView.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useSiteConfig } from '../config/use-site-config';
+
+interface Contributor {
+  language: string;
+  registerName: string;
+  organization: string;
+  contact: string;
+  email: string;
+  uri: string;
+  country: string;
+}
+
+interface ContributorsData {
+  register: string;
+  owner: string;
+  manager: string;
+  contributors: Contributor[];
+}
+
+const { config } = useSiteConfig();
+const data = ref<ContributorsData | null>(null);
+const loading = ref(true);
+const error = ref<string | null>(null);
+
+onMounted(async () => {
+  try {
+    const resp = await fetch('/contributors.json');
+    if (resp.ok) data.value = await resp.json();
+  } catch (e: any) {
+    error.value = e.message;
+  }
+  loading.value = false;
+});
+</script>
+
+<template>
+  <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <h1 class="font-serif text-3xl text-ink-800 mb-2">Contributors</h1>
+    <p class="text-ink-400 mb-8">
+      Organizations and individuals contributing to {{ config?.branding?.ownerName || config?.title || 'this glossary' }}.
+    </p>
+
+    <template v-if="loading">
+      <div class="animate-pulse space-y-6">
+        <div class="card p-6 space-y-3">
+          <div class="h-4 bg-ink-100 rounded w-40"></div>
+          <div class="h-6 bg-ink-100 rounded w-3/4"></div>
+          <div class="h-4 bg-ink-100 rounded w-1/2"></div>
+        </div>
+      </div>
+    </template>
+
+    <template v-else-if="error">
+      <div class="card p-8 text-center">
+        <p class="text-ink-500">Failed to load contributors.</p>
+      </div>
+    </template>
+
+    <template v-else-if="data">
+      <!-- Register metadata -->
+      <div v-if="data.owner" class="card p-6 mb-6">
+        <h2 class="section-label">Register Information</h2>
+        <dl class="space-y-3 mt-3">
+          <div v-if="data.owner" class="flex items-start gap-4">
+            <dt class="text-ink-400 text-sm w-40 flex-shrink-0 pt-0.5">Owner</dt>
+            <dd class="text-ink-800 font-medium">{{ data.owner }}</dd>
+          </div>
+          <div v-if="data.manager" class="flex items-start gap-4">
+            <dt class="text-ink-400 text-sm w-40 flex-shrink-0 pt-0.5">Manager</dt>
+            <dd class="text-ink-800">{{ data.manager }}</dd>
+          </div>
+        </dl>
+      </div>
+
+      <!-- Per-language contributors -->
+      <div v-if="data.contributors.length" class="card overflow-x-auto">
+        <table class="w-full text-sm">
+          <thead>
+            <tr class="border-b border-ink-100/60 bg-ink-50/50">
+              <th class="text-left px-5 py-3 text-ink-500 font-medium">Language</th>
+              <th class="text-left px-5 py-3 text-ink-500 font-medium">Organization</th>
+              <th class="text-left px-5 py-3 text-ink-500 font-medium">Contact</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="c in data.contributors" :key="c.language" class="border-b border-ink-50 last:border-0">
+              <td class="px-5 py-3">
+                <span class="text-xs font-semibold text-ink-500 bg-ink-50 px-1.5 py-0.5 rounded">{{ c.language.toUpperCase() }}</span>
+                <span v-if="c.registerName" class="ml-2 text-ink-600 text-xs">{{ c.registerName }}</span>
+              </td>
+              <td class="px-5 py-3 text-ink-700">
+                <span v-if="c.uri"><a :href="c.uri" target="_blank" class="concept-link">{{ c.organization }}</a></span>
+                <span v-else>{{ c.organization }}</span>
+              </td>
+              <td class="px-5 py-3 text-ink-500 text-xs">{{ c.contact }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </template>
+
+    <template v-else>
+      <div class="card p-8 text-center">
+        <p class="text-ink-500">No contributor information available.</p>
+      </div>
+    </template>
+  </div>
+</template>

package/src/views/DatasetView.vue

@@ -0,0 +1,249 @@
+<script setup lang="ts">
+import { computed, ref, watch, onMounted, onUnmounted } from 'vue';
+import { useVocabularyStore } from '../stores/vocabulary';
+import { useDsStyle } from '../utils/dataset-style';
+import { useDatasetLoader } from '../composables/use-dataset-loader';
+import ConceptCard from '../components/ConceptCard.vue';
+
+const props = defineProps<{ registerId: string }>();
+
+const store = useVocabularyStore();
+const { getStyle } = useDsStyle();
+const { loading, localError, ensureLoaded } = useDatasetLoader(() => props.registerId);
+
+const manifest = computed(() => store.manifests.get(props.registerId));
+const adapter = computed(() => store.datasets.get(props.registerId));
+const chunkLoading = ref(false);
+
+const totalConceptCount = computed(() => adapter.value?.getConceptCount() ?? 0);
+
+const filter = ref('');
+const filterInput = ref<HTMLInputElement | null>(null);
+const allChunksLoaded = ref(false);
+
+function onGlobalKeydown(e: KeyboardEvent) {
+  if (e.key === '/' && document.activeElement?.tagName !== 'INPUT' && document.activeElement?.tagName !== 'TEXTAREA') {
+    e.preventDefault();
+    filterInput.value?.focus();
+  }
+}
+
+onMounted(() => window.addEventListener('keydown', onGlobalKeydown));
+onUnmounted(() => window.removeEventListener('keydown', onGlobalKeydown));
+
+// When filtering, ensure all chunks are loaded for accurate search
+watch(filter, async (q) => {
+  page.value = 1;
+  if (q.trim().length >= 2 && !allChunksLoaded.value && adapter.value) {
+    chunkLoading.value = true;
+    await adapter.value.ensureAllChunksLoaded();
+    allChunksLoaded.value = true;
+    chunkLoading.value = false;
+  }
+});
+
+// Dense array: only loaded (non-undefined) entries
+const loadedConcepts = computed(() => {
+  const arr = adapter.value?.getConcepts() as (import('../adapters/types').ConceptSummary | undefined)[] | undefined;
+  if (!arr) return [];
+  return arr.filter((c): c is import('../adapters/types').ConceptSummary => c != null);
+});
+
+const filtered = computed(() => {
+  const q = filter.value.trim().toLowerCase();
+  if (!q) return loadedConcepts.value;
+  return loadedConcepts.value.filter(c => {
+    return (c.eng || '').toLowerCase().includes(q) || c.id.toLowerCase().includes(q);
+  });
+});
+
+const page = ref(1);
+const perPage = 50;
+
+// Check if the current page range is loaded in the index
+const pageLoaded = computed(() => {
+  if (!adapter.value) return false;
+  const start = (page.value - 1) * perPage;
+  return adapter.value.isRangeLoaded(start, perPage);
+});
+
+const paged = computed(() => {
+  // When filtering, paginate over filtered dense results (all chunks loaded)
+  if (filter.value.trim()) {
+    const start = (page.value - 1) * perPage;
+    return filtered.value.slice(start, start + perPage);
+  }
+  // When not filtering, slice directly from the pre-allocated index (may contain undefined)
+  const start = (page.value - 1) * perPage;
+  const arr = adapter.value?.getConcepts() as (import('../adapters/types').ConceptSummary | undefined)[] | undefined;
+  if (!arr) return [];
+  return arr.slice(start, start + perPage).filter((c): c is import('../adapters/types').ConceptSummary => c != null);
+});
+
+const totalPages = computed(() => {
+  if (filter.value.trim()) {
+    return Math.max(1, Math.ceil(filtered.value.length / perPage));
+  }
+  return Math.max(1, Math.ceil(totalConceptCount.value / perPage));
+});
+
+// Load chunks needed for current page
+watch(page, async () => {
+  if (!adapter.value || filter.value.trim()) return;
+  const start = (page.value - 1) * perPage;
+  if (!adapter.value.isRangeLoaded(start, perPage)) {
+    chunkLoading.value = true;
+    await adapter.value.ensureChunksForRange(start, perPage);
+    chunkLoading.value = false;
+  }
+}, { immediate: true });
+
+// Visible page numbers for pagination (avoids iterating 445+ pages)
+const visiblePages = computed(() => {
+  const total = totalPages.value;
+  const current = page.value;
+  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+  const pages: number[] = [1];
+  const rangeStart = Math.max(2, current - 2);
+  const rangeEnd = Math.min(total - 1, current + 2);
+  if (rangeStart > 2) pages.push(-1);
+  for (let p = rangeStart; p <= rangeEnd; p++) pages.push(p);
+  if (rangeEnd < total - 1) pages.push(-2);
+  pages.push(total);
+  return pages;
+});
+
+function goToPage(p: number) {
+  page.value = Math.max(1, Math.min(p, totalPages.value));
+  window.scrollTo({ top: 0, behavior: 'smooth' });
+}
+</script>
+
+<template>
+  <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <!-- Breadcrumb -->
+    <nav aria-label="Breadcrumb" class="flex items-center gap-1.5 text-sm text-ink-400 mb-6">
+      <router-link :to="{ name: 'home' }" class="hover:text-ink-700 transition-colors">Home</router-link>
+      <span class="text-ink-200">/</span>
+      <span class="text-ink-700">{{ manifest?.title || registerId }}</span>
+    </nav>
+
+    <!-- Header -->
+    <div v-if="manifest" class="mb-8">
+      <h1 class="font-serif text-3xl text-ink-800 mb-2">{{ manifest.title }}</h1>
+      <p class="text-ink-400 leading-relaxed max-w-2xl">{{ manifest.description }}</p>
+      <div class="flex flex-wrap gap-2 mt-4">
+        <span class="badge" :style="{ backgroundColor: getStyle(registerId).light, color: getStyle(registerId).dark }">{{ manifest.conceptCount.toLocaleString() }} concepts</span>
+        <span class="badge badge-gray">{{ manifest.languages.length }} languages</span>
+        <span class="badge badge-green">{{ manifest.owner }}</span>
+        <router-link :to="{ name: 'stats', params: { registerId } }" class="badge badge-blue hover:opacity-80 transition-opacity">
+          Statistics
+        </router-link>
+        <router-link :to="{ name: 'about', params: { registerId } }" class="badge badge-purple hover:opacity-80 transition-opacity">
+          About
+        </router-link>
+      </div>
+    </div>
+
+    <!-- Loading state (initial dataset load) -->
+    <div v-if="loading || (!adapter?.index && !localError)" class="space-y-4 py-4">
+      <div class="space-y-2">
+        <div class="skeleton h-3 w-32"></div>
+        <div class="skeleton h-8 w-64"></div>
+        <div class="skeleton h-4 w-96"></div>
+      </div>
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 mt-6">
+        <div v-for="i in 6" :key="i" class="skeleton h-20"></div>
+      </div>
+    </div>
+
+    <!-- Error state -->
+    <div v-else-if="localError" class="max-w-xl mx-auto text-center py-20">
+      <div class="card p-8 border-red-200 bg-red-50/50">
+        <p class="text-red-700 font-medium mb-1">Failed to load dataset</p>
+        <p class="text-sm text-red-600/80 mb-4">{{ localError }}</p>
+        <div class="flex gap-2 justify-center">
+          <button @click="ensureLoaded" class="btn-primary">Retry</button>
+          <router-link :to="{ name: 'home' }" class="btn-secondary">Back to home</router-link>
+        </div>
+      </div>
+    </div>
+
+    <template v-else>
+      <!-- Filters -->
+      <div class="flex flex-wrap items-center gap-3 mb-5">
+        <div class="relative">
+          <input
+            ref="filterInput"
+            v-model="filter"
+            type="text"
+            aria-label="Filter concepts"
+            placeholder="Filter concepts... (press /)"
+            class="pl-9 pr-3 py-2 text-sm bg-surface border border-ink-100 rounded-lg focus:ring-2 focus:ring-ink-200 focus:border-ink-400 outline-none placeholder:text-ink-300 transition-all w-full sm:w-64"
+          />
+          <svg class="absolute left-3 top-2.5 w-4 h-4 text-ink-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+          </svg>
+        </div>
+        <span class="text-sm text-ink-400">
+          {{ filter.trim()
+            ? `${filtered.length.toLocaleString()} of ${totalConceptCount.toLocaleString()} concepts`
+            : `${totalConceptCount.toLocaleString()} concepts`
+          }}
+        </span>
+      </div>
+
+      <!-- Chunk loading skeleton -->
+      <div v-if="chunkLoading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+        <div v-for="i in 6" :key="i" class="skeleton h-20"></div>
+      </div>
+
+      <!-- Concept grid -->
+      <div v-else-if="paged.length" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+        <ConceptCard
+          v-for="(entry, idx) in paged"
+          :key="entry.id"
+          :entry="entry"
+          :register-id="registerId"
+          class="animate-entrance"
+          :style="{ animationDelay: `${Math.min(idx, 20) * 30}ms` }"
+        />
+      </div>
+
+      <!-- Empty state -->
+      <div v-else class="text-center py-20">
+        <div class="text-ink-200 text-5xl mb-4 font-serif">&empty;</div>
+        <template v-if="filter.trim()">
+          <p class="text-ink-500 font-medium mb-1">No concepts match your filter</p>
+          <button @click="filter = ''" class="text-sm concept-link mt-1">Clear filter</button>
+        </template>
+        <template v-else>
+          <p class="text-ink-500 font-medium mb-1">This dataset has no concepts</p>
+        </template>
+      </div>
+
+      <!-- Pagination -->
+      <div v-if="totalPages > 1" class="flex items-center justify-center gap-1.5 mt-8 pt-6 border-t border-ink-100/60">
+        <button
+          :disabled="page <= 1"
+          @click="goToPage(page - 1)"
+          class="btn-secondary disabled:opacity-30 text-xs"
+        >&larr; Prev</button>
+        <template v-for="p in visiblePages" :key="p">
+          <span v-if="p < 0" class="text-ink-300 px-0.5">&hellip;</span>
+          <button
+            v-else
+            @click="goToPage(p)"
+            :class="p === page ? 'bg-ink-800 text-white' : 'bg-surface-raised text-ink-600 hover:bg-ink-50 border border-ink-100'"
+            class="px-3 py-1.5 rounded-lg text-sm font-medium transition-colors"
+          >{{ p }}</button>
+        </template>
+        <button
+          :disabled="page >= totalPages"
+          @click="goToPage(page + 1)"
+          class="btn-secondary disabled:opacity-30 text-xs"
+        >Next &rarr;</button>
+      </div>
+    </template>
+  </div>
+</template>

package/src/views/GraphView.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useVocabularyStore } from '../stores/vocabulary';
+import GraphPanel from '../components/GraphPanel.vue';
+
+const store = useVocabularyStore();
+const graphLoading = ref(true);
+
+// Depend on graphVersion so computed re-evaluates when edges are added
+const graphNodes = computed(() => {
+  store.graphVersion; // reactivity dependency
+  return store.graph.getAllNodes();
+});
+const graphEdges = computed(() => {
+  store.graphVersion; // reactivity dependency
+  return store.graph.getEdges();
+});
+
+const registers = computed(() =>
+  store.datasetList.map(ds => ({
+    id: ds.id,
+    title: ds.manifest.title,
+  }))
+);
+
+const totalEdges = computed(() => {
+  let sum = 0;
+  for (const s of Object.values(store.edgeStatus)) {
+    sum += s.count;
+  }
+  return sum;
+});
+
+onMounted(async () => {
+  try {
+    await store.loadAllGraphData();
+  } finally {
+    graphLoading.value = false;
+  }
+});
+</script>
+
+<template>
+  <div class="flex flex-col" style="height: calc(100vh - 56px)">
+    <div class="px-4 sm:px-6 py-3 border-b border-ink-100/60 bg-surface-raised flex items-center gap-3 flex-shrink-0">
+      <nav aria-label="Breadcrumb" class="flex items-center gap-1.5 text-sm">
+        <router-link :to="{ name: 'home' }" class="text-ink-400 hover:text-ink-700 transition-colors">Home</router-link>
+        <span class="text-ink-200">/</span>
+        <span class="text-ink-700 font-medium">Graph View</span>
+      </nav>
+      <span class="text-xs text-ink-300 ml-1">
+        {{ graphEdges.length.toLocaleString() }} edges
+      </span>
+    </div>
+    <div class="flex-1 min-h-0">
+      <div v-if="graphLoading" class="flex items-center justify-center h-full">
+        <div class="text-center">
+          <div class="w-8 h-8 border-2 border-ink-200 border-t-ink-600 rounded-full animate-spin mx-auto mb-3"></div>
+          <p class="text-sm text-ink-400">Loading graph data&hellip;</p>
+        </div>
+      </div>
+      <GraphPanel v-else :nodes="graphNodes" :edges="graphEdges" :registers="registers" />
+    </div>
+  </div>
+</template>