@glossarist/concept-browser 0.5.0 → 0.6.0

package/src/adapters/ontology-schema.ts

@@ -1,5 +1,5 @@
 /**
- * Ontology schema loader — provides class/property definitions parsed from
+ * Ontology schema loader — provides class/property/shape definitions parsed from
  * the Glossarist OWL ontology for the Ontospy-style concept view.
  */
 import schemaData from '../data/ontology-schema.json';
@@ -28,14 +28,72 @@ export interface OwlProperty {
   inverseOf: string | null;
 }
 
+export interface ShaclConstraint {
+  path: string | null;
+  datatype: string | null;
+  class: string | null;
+  valuesFrom: string | null;
+  nodeKind: string | null;
+  minCount: number | null;
+  maxCount: number | null;
+  in: string[] | null;
+}
+
+export interface OwlShape {
+  iri: string;
+  compact: string;
+  label: string;
+  comment: string | null;
+  targetClass: string | null;
+  shapeClass: string | null;
+  constraints: ShaclConstraint[];
+}
+
+export interface OwlOntology {
+  iri: string;
+  label: string;
+  comment: string | null;
+  prefix: string | null;
+  namespaceUri: string | null;
+  imports: { iri: string; label: string }[];
+  license: string | null;
+  created: string | null;
+}
+
+export interface AnnotationProperty {
+  iri: string;
+  compact: string;
+  label: string;
+}
+
+export type EntityType = 'class' | 'objectProperty' | 'datatypeProperty' | 'shape' | 'annotationProperty';
+
+export const ENTITY_TYPE_META: Record<EntityType, { label: string; color: string }> = {
+  class: { label: 'Classes', color: 'blue' },
+  objectProperty: { label: 'Object Properties', color: 'emerald' },
+  datatypeProperty: { label: 'Datatype Properties', color: 'amber' },
+  shape: { label: 'SHACL Shapes', color: 'purple' },
+  annotationProperty: { label: 'Annotation Properties', color: 'pink' },
+};
+
 interface OntologySchema {
+  ontology: OwlOntology | null;
   ontologyIri: string;
   ontologyLabel: string;
   classes: Record<string, OwlClass>;
   classHierarchyRoots: string[];
   properties: Record<string, OwlProperty>;
   propertiesByDomain: Record<string, { object: string[]; datatype: string[] }>;
-  stats: { classCount: number; objectPropertyCount: number; datatypePropertyCount: number };
+  shapes: Record<string, OwlShape>;
+  shapesByTargetClass: Record<string, string[]>;
+  annotationProperties: AnnotationProperty[];
+  stats: {
+    classCount: number;
+    objectPropertyCount: number;
+    datatypePropertyCount: number;
+    shapeCount: number;
+    annotationPropertyCount: number;
+  };
 }
 
 const data = schemaData as unknown as OntologySchema;
@@ -48,6 +106,10 @@ export function getProperty(id: string): OwlProperty | null {
   return data.properties[id] ?? null;
 }
 
+export function getShape(id: string): OwlShape | null {
+  return data.shapes[id] ?? null;
+}
+
 export function getPropertiesForDomain(domain: string): { object: OwlProperty[]; datatype: OwlProperty[] } {
   const group = data.propertiesByDomain[domain];
   if (!group) return { object: [], datatype: [] };
@@ -57,7 +119,6 @@ export function getPropertiesForDomain(domain: string): { object: OwlProperty[];
   };
 }
 
-/** Get all properties applicable to a class, including inherited ones. */
 export function getAllPropertiesForClass(classId: string): { object: OwlProperty[]; datatype: OwlProperty[] } {
   const cls = data.classes[classId];
   if (!cls) return { object: [], datatype: [] };
@@ -80,7 +141,11 @@ export function getAllPropertiesForClass(classId: string): { object: OwlProperty
   return { object: objectProps, datatype: datatypeProps };
 }
 
-/** Get the full class hierarchy tree starting from roots. */
+export function getShapesForClass(classId: string): OwlShape[] {
+  const shapeIds = data.shapesByTargetClass[classId] ?? [];
+  return shapeIds.map(id => data.shapes[id]).filter(Boolean);
+}
+
 export function getClassTree(): OwlClass[] {
   return data.classHierarchyRoots
     .map(id => data.classes[id])
@@ -95,6 +160,26 @@ export function getAllProperties(): OwlProperty[] {
   return Object.values(data.properties);
 }
 
+export function getObjectProperties(): OwlProperty[] {
+  return Object.values(data.properties).filter(p => p.type === 'object');
+}
+
+export function getDatatypeProperties(): OwlProperty[] {
+  return Object.values(data.properties).filter(p => p.type === 'datatype');
+}
+
+export function getAllShapes(): OwlShape[] {
+  return Object.values(data.shapes);
+}
+
+export function getAnnotationProperties(): AnnotationProperty[] {
+  return data.annotationProperties;
+}
+
+export function getOntology(): OwlOntology | null {
+  return data.ontology;
+}
+
 export function getStats() {
   return data.stats;
 }

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/AppFooter.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useSiteConfig } from '../config/use-site-config';
+import { useI18n } from '../i18n';
 
 const { config } = useSiteConfig();
+const { t } = useI18n();
 
 const poweredBy = computed(() => {
   const pb = config.value?.features?.poweredBy as { message?: string; url?: string } | undefined;
-  return { message: pb?.message || 'Built with the Glossarist Concept Browser', url: pb?.url || 'https://github.com/glossarist/concept-browser' };
+  return { message: pb?.message || t('footer.builtWith'), url: pb?.url || 'https://github.com/glossarist/concept-browser' };
 });
 
 const socialLinks = computed(() => {

package/src/components/AppHeader.vue

@@ -3,13 +3,23 @@ import { useRouter } from 'vue-router';
 import { useUiStore } from '../stores/ui';
 import { useVocabularyStore } from '../stores/vocabulary';
 import { useSiteConfig } from '../config/use-site-config';
-import { ref } from 'vue';
+import { useI18n } from '../i18n';
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
 
 const router = useRouter();
 const ui = useUiStore();
 const store = useVocabularyStore();
 const { config: siteConfig } = useSiteConfig();
+const { locale, t, setLocale } = useI18n();
 const searchInput = ref('');
+const langOpen = ref(false);
+
+const uiLanguages = computed(() => siteConfig.value?.uiLanguages || []);
+const showLangSelector = computed(() => uiLanguages.value.length > 1);
+const currentLangLabel = computed(() => {
+  const cur = uiLanguages.value.find(l => l.code === locale.value);
+  return cur?.label || locale.value.toUpperCase();
+});
 
 function doSearch() {
   const q = searchInput.value.trim();
@@ -22,6 +32,18 @@ function doSearch() {
 function goHome() {
   router.push({ name: 'home' });
 }
+
+function selectLang(code: string) {
+  setLocale(code);
+  langOpen.value = false;
+}
+
+function closeLangOnOutside(e: MouseEvent) {
+  if (langOpen.value) langOpen.value = false;
+}
+
+onMounted(() => document.addEventListener('click', closeLangOnOutside));
+onBeforeUnmount(() => document.removeEventListener('click', closeLangOnOutside));
 </script>
 
 <template>
@@ -64,8 +86,8 @@ function goHome() {
           <input
             v-model="searchInput"
             type="text"
-            aria-label="Search concepts"
-            placeholder="Search..."
+            :aria-label="t('search.conceptSearch')"
+            :placeholder="t('search.placeholder')"
             class="w-full 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"
           />
           <svg class="absolute left-3 top-2.5 w-4 h-4 text-ink-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -76,7 +98,27 @@ function goHome() {
 
       <!-- Stats -->
       <div class="text-xs text-ink-400 flex-shrink-0 hidden md:block">
-        {{ store.datasetList.length }} datasets
+        {{ store.datasetList.length }} {{ t('header.datasets') }}
+      </div>
+
+      <!-- Language selector -->
+      <div v-if="showLangSelector" class="relative flex-shrink-0" @click.stop>
+        <button
+          @click="langOpen = !langOpen"
+          class="px-2.5 py-1 rounded-lg text-xs font-semibold text-ink-500 hover:text-ink-700 hover:bg-ink-50 transition-colors border border-ink-100 flex items-center gap-1"
+        >
+          {{ currentLangLabel }}
+          <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+        </button>
+        <div v-if="langOpen" class="absolute right-0 top-full mt-1 bg-surface-raised border border-ink-100 rounded-lg shadow-lg py-1 min-w-[120px] z-50">
+          <button
+            v-for="lang in uiLanguages"
+            :key="lang.code"
+            @click="selectLang(lang.code)"
+            class="w-full text-left px-3 py-1.5 text-sm transition-colors"
+            :class="locale === lang.code ? 'bg-ink-50 text-ink-800 font-medium' : 'text-ink-600 hover:bg-ink-50'"
+          >{{ lang.label }}</button>
+        </div>
       </div>
 
       <!-- Theme toggle -->