@glossarist/concept-browser 0.4.15 → 0.4.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glossarist/concept-browser",
-  "version": "0.4.15",
+  "version": "0.4.18",
   "description": "Vue SPA for browsing Glossarist terminology datasets with cross-reference resolution, graph visualization, and multi-language support",
   "type": "module",
   "bin": {

package/src/__tests__/concept-card.test.ts

@@ -108,8 +108,22 @@ describe('ConceptCard', () => {
     expect(router.currentRoute.value.params.conceptId).toBe('3.1.1.1');
   });
 
-  it('shows language count from manifest', () => {
+  it('shows language count from designations', () => {
     const wrapper = mountCard();
-    expect(wrapper.text()).toContain('2 lang');
+    expect(wrapper.text()).toContain('1 lang');
+  });
+
+  it('shows selected language designation as title', () => {
+    const wrapper = mountCard(makeEntry({
+      designations: { eng: 'test term', fra: 'terme test' },
+      eng: 'test term',
+    }), 'test');
+    expect(wrapper.text()).toContain('test term');
+
+    const wrapperFra = mount(ConceptCard, {
+      global: { plugins: [pinia, router] },
+      props: { entry: makeEntry({ designations: { eng: 'test term', fra: 'terme test' }, eng: 'test term' }), registerId: 'test', displayLang: 'fra' },
+    });
+    expect(wrapperFra.text()).toContain('terme test');
   });
 });

package/src/adapters/model-bridge.ts

@@ -238,6 +238,7 @@ function conceptFromJsonLd(doc: Record<string, any>): Concept {
   }
 
   const related = (doc['gl:references'] ?? []).map(mapRelatedFromJsonLd);
+  const tags = Array.isArray(doc['gl:tags']) ? [...doc['gl:tags']] : [];
 
   return Concept.fromJSON({
     id,
@@ -245,6 +246,7 @@ function conceptFromJsonLd(doc: Record<string, any>): Concept {
     uri: doc['@id'] ?? null,
     localizations,
     related,
+    tags,
     status: null,
   });
 }

package/src/adapters/types.ts

@@ -82,6 +82,7 @@ export interface ConceptEntry {
   id: string;
   designations: Record<string, string>;
   groups: string[];
+  tags: string[];
   status: string;
 }
 

package/src/components/ConceptCard.vue

@@ -8,6 +8,7 @@ import { useVocabularyStore } from '../stores/vocabulary';
 const props = defineProps<{
   entry: ConceptSummary;
   registerId: string;
+  displayLang?: string | null;
 }>();
 
 const router = useRouter();
@@ -29,6 +30,17 @@ function statusColor(status: string): string {
 }
 
 const manifestLanguages = computed(() => store.manifests.get(props.registerId)?.languages ?? []);
+
+const displayTitle = computed(() => {
+  if (props.displayLang && props.entry.designations?.[props.displayLang]) {
+    return props.entry.designations[props.displayLang];
+  }
+  return props.entry.eng || props.entry.id;
+});
+
+const langCount = computed(() => {
+  return Object.keys(props.entry.designations ?? {}).length;
+});
 </script>
 
 <template>
@@ -41,7 +53,7 @@ const manifestLanguages = computed(() => store.manifests.get(props.registerId)?.
     <div class="flex items-start justify-between gap-2">
       <div class="min-w-0">
         <h3 class="font-medium text-ink-800 truncate group-hover:text-ink-900 transition-colors leading-snug text-[15px]">
-          {{ entry.eng || entry.id }}
+          {{ displayTitle }}
         </h3>
         <p class="text-[11px] text-ink-300 mt-1 font-mono tabular-nums">{{ entry.id }}</p>
       </div>
@@ -53,14 +65,14 @@ const manifestLanguages = computed(() => store.manifests.get(props.registerId)?.
       </span>
     </div>
     <!-- Language coverage -->
-    <div class="flex items-center gap-1.5 mt-2.5" :aria-label="`${manifestLanguages.length} languages`">
-      <span class="text-[11px] text-ink-300">{{ manifestLanguages.length }} lang</span>
+    <div class="flex items-center gap-1.5 mt-2.5">
+      <span class="text-[11px] text-ink-300">{{ langCount }} lang</span>
       <div class="flex gap-0.5">
         <span
           v-for="lang in manifestLanguages"
           :key="lang"
           class="w-1.5 h-1.5 rounded-full"
-          :style="{ backgroundColor: getColor(registerId) + '40' }"
+          :style="{ backgroundColor: (lang in (entry.designations ?? {})) ? getColor(registerId) : getColor(registerId) + '20' }"
           :aria-label="lang"
         ></span>
       </div>

package/src/components/ConceptDetail.vue

@@ -83,6 +83,9 @@ const conceptDates = computed(() => props.concept.dates);
 // Managed concept sources (distinct from localized sources)
 const conceptSources = computed(() => props.concept.sources);
 
+// Managed concept tags
+const conceptTags = computed(() => props.concept.tags ?? []);
+
 // Cross-reference resolver: generates clickable links for inline refs
 
 const { ensureBibLoaded, bibResolver, figResolver } = useRenderOptions(() => props.registerId);
@@ -683,6 +686,14 @@ const nonVerbalReps = computed(() => {
             </div>
           </div>
 
+          <!-- Tags -->
+          <div v-if="conceptTags.length" class="card p-5">
+            <div class="section-label">Tags</div>
+            <div class="flex flex-wrap gap-1.5 mt-3">
+              <span v-for="tag in conceptTags" :key="tag" class="badge badge-gray text-[10px]">{{ tag }}</span>
+            </div>
+          </div>
+
           <!-- Managed concept dates -->
           <div v-if="conceptDates.length" class="card p-5">
             <div class="section-label">Lifecycle dates</div>

package/src/views/DatasetView.vue

@@ -4,6 +4,7 @@ import { useVocabularyStore } from '../stores/vocabulary';
 import { useDsStyle } from '../utils/dataset-style';
 import { useDatasetLoader } from '../composables/use-dataset-loader';
 import { FORMAT_LABELS } from '../config/types';
+import { langName, langLabel, sortLanguages } from '../utils/lang';
 import ConceptCard from '../components/ConceptCard.vue';
 
 const props = defineProps<{ registerId: string }>();
@@ -38,6 +39,26 @@ const totalConceptCount = computed(() => adapter.value?.getConceptCount() ?? 0);
 const filter = ref('');
 const filterInput = ref<HTMLInputElement | null>(null);
 const allChunksLoaded = ref(false);
+const selectedLang = ref<string | null>(null);
+
+interface LangOption {
+  code: string;
+  name: string;
+  label: string;
+  termCount: number;
+}
+
+const languageOptions = computed<LangOption[]>(() => {
+  const m = manifest.value;
+  if (!m) return [];
+  const sorted = sortLanguages(m.languages, m.languageOrder);
+  return sorted.map(code => ({
+    code,
+    name: langName(code),
+    label: langLabel(code),
+    termCount: m.languageStats?.[code]?.terms ?? 0,
+  }));
+});
 
 function onGlobalKeydown(e: KeyboardEvent) {
   if (e.key === '/' && document.activeElement?.tagName !== 'INPUT' && document.activeElement?.tagName !== 'TEXTAREA') {
@@ -65,6 +86,17 @@ watch(filter, async (q) => {
   }
 });
 
+// When language filter changes, reset page and load all chunks
+watch(selectedLang, async (lang) => {
+  page.value = 1;
+  if (lang && !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();
@@ -74,8 +106,10 @@ const loadedConcepts = computed(() => {
 
 const filtered = computed(() => {
   const q = filter.value.trim().toLowerCase();
-  if (!q) return loadedConcepts.value;
+  const lang = selectedLang.value;
   return loadedConcepts.value.filter(c => {
+    if (lang && !(lang in (c.designations ?? {}))) return false;
+    if (!q) return true;
     return (c.eng || '').toLowerCase().includes(q) || c.id.toLowerCase().includes(q);
   });
 });
@@ -91,8 +125,8 @@ const pageLoaded = computed(() => {
 });
 
 const paged = computed(() => {
-  // When filtering, paginate over filtered dense results (all chunks loaded)
-  if (filter.value.trim()) {
+  // When filtering (text or language), paginate over filtered dense results (all chunks loaded)
+  if (filter.value.trim() || selectedLang.value) {
     const start = (page.value - 1) * perPage;
     return filtered.value.slice(start, start + perPage);
   }
@@ -104,7 +138,7 @@ const paged = computed(() => {
 });
 
 const totalPages = computed(() => {
-  if (filter.value.trim()) {
+  if (filter.value.trim() || selectedLang.value) {
     return Math.max(1, Math.ceil(filtered.value.length / perPage));
   }
   return Math.max(1, Math.ceil(totalConceptCount.value / perPage));
@@ -112,7 +146,7 @@ const totalPages = computed(() => {
 
 // Load chunks needed for current page
 watch(page, async () => {
-  if (!adapter.value || filter.value.trim()) return;
+  if (!adapter.value || filter.value.trim() || selectedLang.value) return;
   const start = (page.value - 1) * perPage;
   if (!adapter.value.isRangeLoaded(start, perPage)) {
     chunkLoading.value = true;
@@ -229,7 +263,10 @@ function goToPage(p: number) {
           </svg>
         </div>
         <span class="text-sm text-ink-400">
-          <template v-if="filter.trim()">
+          <template v-if="selectedLang">
+            {{ filtered.length.toLocaleString() }} of {{ totalConceptCount.toLocaleString() }} concepts in {{ langName(selectedLang) }}
+          </template>
+          <template v-else-if="filter.trim()">
             {{ filtered.length.toLocaleString() }} of {{ totalConceptCount.toLocaleString() }} concepts
           </template>
           <template v-else-if="totalPages > 1">
@@ -241,6 +278,39 @@ function goToPage(p: number) {
         </span>
       </div>
 
+      <!-- Language filter -->
+      <div v-if="languageOptions.length > 1" class="flex flex-wrap gap-1.5 mb-5">
+        <button
+          @click="selectedLang = null"
+          :class="[
+            selectedLang === null
+              ? '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-xs font-medium transition-colors"
+        >
+          All {{ totalConceptCount.toLocaleString() }}
+        </button>
+        <button
+          v-for="lang in languageOptions"
+          :key="lang.code"
+          @click="selectedLang = selectedLang === lang.code ? null : lang.code"
+          :class="[
+            selectedLang === lang.code
+              ? '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-xs font-medium transition-colors flex items-center gap-1.5"
+        >
+          <span
+            class="text-[10px] font-semibold px-1.5 py-0.5 rounded"
+            :class="selectedLang === lang.code ? 'bg-ink-700 text-ink-200' : 'bg-ink-50 text-ink-500'"
+          >{{ lang.label }}</span>
+          {{ lang.name }}
+          <span class="text-[10px] opacity-60">{{ lang.termCount }}</span>
+        </button>
+      </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>
@@ -253,6 +323,7 @@ function goToPage(p: number) {
           :key="entry.id"
           :entry="entry"
           :register-id="registerId"
+          :display-lang="selectedLang"
           class="animate-entrance"
           :style="{ animationDelay: `${Math.min(idx, 20) * 30}ms` }"
         />