@glossarist/concept-browser 0.4.5 → 0.4.6

package/package.json

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

package/src/components/AppSidebar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, watch } from 'vue';
 import { useVocabularyStore } from '../stores/vocabulary';
 import { useUiStore } from '../stores/ui';
 import { useRoute, useRouter } from 'vue-router';
@@ -25,6 +25,7 @@ const {
   taxonomyLabels,
   treeRoots,
   supportingClasses,
+  isOverview,
   toggleExpand,
   childClasses,
   hasChildren,
@@ -72,6 +73,22 @@ function isActive(page: { route: string; datasetScoped?: boolean }): boolean {
   }
   return route.name === page.route;
 }
+
+function selectClass(id: string) {
+  activeClassId.value = id;
+  activeTaxonomy.value = null;
+  scrollMainToTop();
+}
+
+function selectTaxonomy(key: string) {
+  activeTaxonomy.value = key;
+  scrollMainToTop();
+}
+
+function scrollMainToTop() {
+  const main = document.querySelector('main');
+  if (main) main.scrollTo({ top: 0, behavior: 'smooth' });
+}
 </script>
 
 <template>
@@ -88,85 +105,92 @@ function isActive(page: { route: string; datasetScoped?: boolean }): boolean {
       <!-- Navigation -->
       <div class="section-label">Navigation</div>
       <nav class="space-y-0.5 mb-6">
-        <router-link
-          v-for="page in globalPages"
-          :key="page.route || 'home'"
-          :to="pageRoute(page)"
-          class="btn-ghost w-full text-left flex items-center gap-2"
-          :class="isActive(page) ? 'active' : ''"
-          @click="closeMobile"
-        >
-          <NavIcon :name="page.icon" />
-          {{ page.title }}
-        </router-link>
-      </nav>
+        <template v-for="page in globalPages" :key="page.route || 'home'">
+          <router-link
+            :to="pageRoute(page)"
+            class="btn-ghost w-full text-left flex items-center gap-2"
+            :class="isActive(page) ? 'active' : ''"
+            @click="closeMobile"
+          >
+            <NavIcon :name="page.icon" />
+            {{ page.title }}
+          </router-link>
 
-      <!-- Ontology class tree (shown when on /ontology route) -->
-      <div v-if="isOntologyRoute" class="mb-6">
-        <div class="section-label">Classes</div>
-        <nav class="space-y-0.5">
-          <template v-for="root in treeRoots" :key="root.compact">
-            <button @click="activeClassId = root.compact; activeTaxonomy = null; toggleExpand(root)"
+          <!-- Ontology class tree nested under Ontology nav item -->
+          <div v-if="page.route === 'ontology' && isOntologyRoute" class="ml-4 mt-1 mb-2 space-y-0.5">
+            <!-- Overview -->
+            <button @click="activeClassId = null; activeTaxonomy = null; scrollMainToTop()"
               class="w-full flex items-center gap-1.5 px-2 py-1.5 rounded-lg text-xs transition-colors"
-              :class="activeClassId === root.compact && !activeTaxonomy ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-600 hover:bg-ink-50'"
+              :class="isOverview ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-600 hover:bg-ink-50'"
             >
-              <span v-if="hasChildren(root)" class="text-[10px] text-ink-300 w-3">{{ expandedClasses.has(root.compact) ? '▾' : '▸' }}</span>
-              <span v-else class="w-3"></span>
-              <span class="flex-1 text-left">{{ root.label }}</span>
+              <span class="w-3 text-ink-200">·</span>
+              <span class="flex-1 text-left">Overview</span>
             </button>
-            <!-- Children -->
-            <div v-if="expandedClasses.has(root.compact) && hasChildren(root)" class="ml-3">
-              <template v-for="child in childClasses(root.compact)" :key="child.compact">
-                <button @click="activeClassId = child.compact; activeTaxonomy = null; toggleExpand(child)"
-                  class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[11px] transition-colors"
-                  :class="activeClassId === child.compact && !activeTaxonomy ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-500 hover:bg-ink-50'"
-                >
-                  <span v-if="hasChildren(child)" class="text-[10px] text-ink-300 w-3">{{ expandedClasses.has(child.compact) ? '▾' : '▸' }}</span>
-                  <span v-else class="w-3 text-ink-200">·</span>
-                  <span class="flex-1 text-left">{{ child.label }}</span>
-                </button>
-                <!-- Grandchildren -->
-                <div v-if="expandedClasses.has(child.compact) && hasChildren(child)" class="ml-3">
-                  <button v-for="gc in childClasses(child.compact)" :key="gc.compact"
-                    @click="activeClassId = gc.compact; activeTaxonomy = null"
+
+            <div class="text-[10px] uppercase tracking-wide text-ink-300 mt-2 mb-1 px-2">Classes</div>
+            <template v-for="root in treeRoots" :key="root.compact">
+              <button @click="selectClass(root.compact); toggleExpand(root)"
+                class="w-full flex items-center gap-1.5 px-2 py-1.5 rounded-lg text-xs transition-colors"
+                :class="activeClassId === root.compact && !activeTaxonomy ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-600 hover:bg-ink-50'"
+              >
+                <span v-if="hasChildren(root)" class="text-[10px] text-ink-300 w-3">{{ expandedClasses.has(root.compact) ? '▾' : '▸' }}</span>
+                <span v-else class="w-3 text-ink-200">·</span>
+                <span class="flex-1 text-left">{{ root.label }}</span>
+              </button>
+              <!-- Children -->
+              <div v-if="expandedClasses.has(root.compact) && hasChildren(root)" class="ml-3">
+                <template v-for="child in childClasses(root.compact)" :key="child.compact">
+                  <button @click="selectClass(child.compact); toggleExpand(child)"
                     class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[11px] transition-colors"
-                    :class="activeClassId === gc.compact && !activeTaxonomy ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-400 hover:bg-ink-50'"
+                    :class="activeClassId === child.compact && !activeTaxonomy ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-500 hover:bg-ink-50'"
                   >
-                    <span class="w-3 text-ink-200">·</span>
-                    <span class="flex-1 text-left">{{ gc.label }}</span>
+                    <span v-if="hasChildren(child)" class="text-[10px] text-ink-300 w-3">{{ expandedClasses.has(child.compact) ? '▾' : '▸' }}</span>
+                    <span v-else class="w-3 text-ink-200">·</span>
+                    <span class="flex-1 text-left">{{ child.label }}</span>
                   </button>
-                </div>
-              </template>
+                  <!-- Grandchildren -->
+                  <div v-if="expandedClasses.has(child.compact) && hasChildren(child)" class="ml-3">
+                    <button v-for="gc in childClasses(child.compact)" :key="gc.compact"
+                      @click="selectClass(gc.compact)"
+                      class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[11px] transition-colors"
+                      :class="activeClassId === gc.compact && !activeTaxonomy ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-400 hover:bg-ink-50'"
+                    >
+                      <span class="w-3 text-ink-200">·</span>
+                      <span class="flex-1 text-left">{{ gc.label }}</span>
+                    </button>
+                  </div>
+                </template>
+              </div>
+            </template>
+
+            <!-- Supporting classes -->
+            <div v-if="supportingClasses.length" class="mt-2 pt-2 border-t border-ink-100/40">
+              <div class="text-[10px] uppercase tracking-wide text-ink-300 mb-1 px-2">Supporting</div>
+              <button v-for="cls in supportingClasses" :key="cls.compact"
+                @click="selectClass(cls.compact)"
+                class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[11px] transition-colors"
+                :class="activeClassId === cls.compact && !activeTaxonomy ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-400 hover:bg-ink-50'"
+              >
+                <span class="w-3 text-ink-200">·</span>
+                <span class="flex-1 text-left">{{ cls.label }}</span>
+              </button>
             </div>
-          </template>
-
-          <!-- Supporting classes -->
-          <div v-if="supportingClasses.length" class="mt-3 pt-2 border-t border-ink-100/40">
-            <div class="text-[10px] uppercase tracking-wide text-ink-300 mb-1 px-2">Supporting</div>
-            <button v-for="cls in supportingClasses" :key="cls.compact"
-              @click="activeClassId = cls.compact; activeTaxonomy = null"
-              class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[11px] transition-colors"
-              :class="activeClassId === cls.compact && !activeTaxonomy ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-400 hover:bg-ink-50'"
-            >
-              <span class="w-3 text-ink-200">·</span>
-              <span class="flex-1 text-left">{{ cls.label }}</span>
-            </button>
-          </div>
 
-          <!-- SKOS Taxonomies -->
-          <div class="mt-3 pt-2 border-t border-ink-100/40">
-            <div class="text-[10px] uppercase tracking-wide text-ink-300 mb-1 px-2">Taxonomies</div>
-            <button v-for="tk in taxonomyKeys" :key="tk"
-              @click="activeTaxonomy = tk"
-              class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[11px] transition-colors"
-              :class="activeTaxonomy === tk ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-400 hover:bg-ink-50'"
-            >
-              <span class="w-3 text-ink-200">·</span>
-              <span class="flex-1 text-left">{{ taxonomyLabels[tk] }}</span>
-            </button>
+            <!-- SKOS Taxonomies -->
+            <div class="mt-2 pt-2 border-t border-ink-100/40">
+              <div class="text-[10px] uppercase tracking-wide text-ink-300 mb-1 px-2">Taxonomies</div>
+              <button v-for="tk in taxonomyKeys" :key="tk"
+                @click="selectTaxonomy(tk)"
+                class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[11px] transition-colors"
+                :class="activeTaxonomy === tk ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-400 hover:bg-ink-50'"
+              >
+                <span class="w-3 text-ink-200">·</span>
+                <span class="flex-1 text-left">{{ taxonomyLabels[tk] }}</span>
+              </button>
+            </div>
           </div>
-        </nav>
-      </div>
+        </template>
+      </nav>
 
       <!-- Dataset-level navigation (shown when viewing a dataset) -->
       <div v-if="showDatasetNav" class="mb-6">

package/src/composables/use-ontology-nav.ts

@@ -6,9 +6,11 @@ import {
   type OwlClass,
 } from '../adapters/ontology-schema';
 
-const activeClassId = ref('gloss:Concept');
+const OVERVIEW_ID = '__overview__';
+
+const activeClassId = ref<string | null>(null);
 const activeTaxonomy = ref<string | null>(null);
-const expandedClasses = ref(new Set<string>(['gloss:Concept', 'gloss:Designation']));
+const expandedClasses = ref(new Set<string>(['gloss:Designation']));
 
 const taxonomyKeys = [
   'conceptStatus', 'entryStatus', 'normativeStatus', 'sourceType', 'sourceStatus',
@@ -56,6 +58,8 @@ const supportingClasses = computed(() =>
   )
 );
 
+const isOverview = computed(() => activeClassId.value === null && activeTaxonomy.value === null);
+
 const allNavItems = computed(() => {
   const items: { id: string; label: string; depth: number }[] = [];
   function walk(classes: OwlClass[], depth: number) {
@@ -80,6 +84,7 @@ export function useOntologyNav() {
     treeRoots,
     supportingClasses,
     allNavItems,
+    isOverview,
     toggleExpand,
     childClasses,
     hasChildren,

package/src/views/OntologySchemaView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-import { getClass, getAllPropertiesForClass, getStats } from '../adapters/ontology-schema';
+import { computed, watch } from 'vue';
+import { getClass, getAllPropertiesForClass, getAllClasses, getStats } from '../adapters/ontology-schema';
 import { ontology, type TaxonomyConcept } from '../adapters/ontology-registry';
 import { useOntologyNav } from '../composables/use-ontology-nav';
 
@@ -11,10 +11,14 @@ const {
   activeTaxonomy,
   taxonomyLabels,
   allNavItems,
+  isOverview,
+  treeRoots,
+  hasChildren,
+  childClasses,
 } = useOntologyNav();
 
-const activeClass = computed(() => getClass(activeClassId.value));
-const activeProperties = computed(() => getAllPropertiesForClass(activeClassId.value));
+const activeClass = computed(() => activeClassId.value ? getClass(activeClassId.value) : null);
+const activeProperties = computed(() => activeClassId.value ? getAllPropertiesForClass(activeClassId.value) : { object: [], datatype: [] });
 
 function activeTaxonomyData() {
   if (!activeTaxonomy.value) return null;
@@ -23,6 +27,14 @@ function activeTaxonomyData() {
   const top = all.filter(c => !c.broader);
   return { scheme: ontology.getScheme(key), concepts: all, top };
 }
+
+// Scroll to top when selection changes
+watch([activeClassId, activeTaxonomy], () => {
+  const main = document.querySelector('main');
+  if (main) main.scrollTo({ top: 0, behavior: 'smooth' });
+});
+
+const allClasses = getAllClasses();
 </script>
 
 <template>
@@ -49,6 +61,10 @@ function activeTaxonomyData() {
     <!-- Sticky mobile chips (for small screens where sidebar is hidden) -->
     <div class="lg:hidden sticky top-14 z-10 bg-surface -mx-4 px-4 py-2 border-b border-ink-100/60 mb-4">
       <div class="flex gap-2 overflow-x-auto scrollbar-none">
+        <button @click="activeClassId = null; activeTaxonomy = null"
+          class="flex-shrink-0 px-3 py-2.5 rounded-lg text-xs font-medium whitespace-nowrap transition-colors min-h-[44px] flex items-center gap-1.5"
+          :class="isOverview ? 'bg-ink-800 text-white' : 'bg-surface-raised border border-ink-100 text-ink-600 hover:bg-ink-50'"
+        >Overview</button>
         <button v-for="item in allNavItems" :key="item.id"
           @click="activeClassId = item.id; activeTaxonomy = null"
           class="flex-shrink-0 px-3 py-2.5 rounded-lg text-xs font-medium whitespace-nowrap transition-colors min-h-[44px] flex items-center gap-1.5"
@@ -70,6 +86,25 @@ function activeTaxonomyData() {
 
     <!-- Detail panel -->
     <div>
+      <!-- Overview: all classes summary -->
+      <template v-if="isOverview">
+        <h2 class="text-lg font-semibold text-ink-800 mb-4">Class Overview</h2>
+        <div class="grid gap-3 sm:grid-cols-2">
+          <div v-for="cls in allClasses" :key="cls.compact"
+            @click="activeClassId = cls.compact"
+            class="border border-ink-100/60 rounded-lg p-3 cursor-pointer hover:border-ink-200 hover:bg-ink-50/50 transition-colors">
+            <div class="flex items-center gap-2">
+              <span class="text-sm font-medium text-ink-700">{{ cls.label }}</span>
+              <code class="text-[10px] text-ink-400 bg-ink-50 px-1.5 py-0.5 rounded">{{ cls.compact }}</code>
+            </div>
+            <p v-if="cls.comment" class="text-xs text-ink-400 mt-1 line-clamp-2">{{ cls.comment }}</p>
+            <div v-if="cls.subClassOf" class="text-[10px] text-ink-300 mt-1">
+              subClassOf <code class="text-ink-400">{{ cls.subClassOf }}</code>
+            </div>
+          </div>
+        </div>
+      </template>
+
       <!-- Class detail -->
       <template v-if="!activeTaxonomy && activeClass">
         <div class="pb-4 border-b border-ink-100/60 mb-4">