@glossarist/concept-browser 0.4.12 → 0.4.14

package/src/components/AppSidebar.vue

@@ -19,16 +19,27 @@ const currentDataset = computed(() => route.params.registerId as string ?? '');
 
 const {
   expandedClasses,
+  collapsedSections,
+  searchQuery,
   taxonomyKeys,
   taxonomyLabels,
   treeRoots,
+  allShapes,
+  objectProperties,
+  datatypeProperties,
+  annotationProperties,
+  groupedIndividuals,
+  totalIndividuals,
+  searchResults,
   toggleExpand,
+  toggleSection,
   childClasses,
   hasChildren,
+  ENTITY_TYPE_META,
 } = useOntologyNav();
 
 const isOntologyRoute = computed(() =>
-  route.name === 'ontology' || route.name === 'ontology-class' || route.name === 'ontology-taxonomy'
+  ['ontology', 'ontology-class', 'ontology-taxonomy', 'ontology-shape', 'ontology-property'].includes(route.name as string)
 );
 
 const activeClassId = computed(() => {
@@ -42,6 +53,18 @@ const activeTaxonomy = computed(() => {
   return route.params.taxonomyKey as string;
 });
 
+const activeShapeId = computed(() => {
+  if (route.name !== 'ontology-shape') return null;
+  const slug = route.params.shapeId as string;
+  return slug.replace(/-/g, ':');
+});
+
+const activePropertyId = computed(() => {
+  if (route.name !== 'ontology-property') return null;
+  const slug = route.params.propertyId as string;
+  return slug.replace(/-/g, ':');
+});
+
 const isOverview = computed(() => route.name === 'ontology');
 
 const datasetEntries = computed(() => {
@@ -92,6 +115,16 @@ function selectClass(id: string) {
 function selectTaxonomy(key: string) {
   router.push(`/ontology/taxonomy/${key}`);
 }
+
+function selectShape(id: string) {
+  router.push(`/ontology/shape/${compactToSlug(id)}`);
+}
+
+function selectProperty(id: string) {
+  router.push(`/ontology/property/${compactToSlug(id)}`);
+}
+
+const isSearching = computed(() => !!searchQuery.value.trim());
 </script>
 
 <template>
@@ -119,9 +152,22 @@ function selectTaxonomy(key: string) {
             {{ page.title }}
           </router-link>
 
-          <!-- 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 -->
+          <!-- Ontology entity sections nested under Ontology nav item -->
+          <div v-if="page.route === 'ontology' && isOntologyRoute" class="ml-3 mt-1 mb-2 space-y-0.5">
+            <!-- Search input -->
+            <div class="relative mb-1.5">
+              <input
+                v-model="searchQuery"
+                type="text"
+                placeholder="Search entities..."
+                class="w-full text-[11px] px-2 py-1.5 rounded-md border border-ink-200/60 bg-surface text-ink-700 placeholder:text-ink-300 focus:outline-none focus:border-blue-300 focus:ring-1 focus:ring-blue-200"
+              />
+              <span v-if="searchResults" class="absolute right-2 top-1/2 -translate-y-1/2 text-[9px] text-ink-400">
+                {{ searchResults.total }}
+              </span>
+            </div>
+
+            <!-- Overview link -->
             <router-link to="/ontology"
               class="w-full flex items-center gap-1.5 px-2 py-1.5 rounded-lg text-xs transition-colors"
               :class="isOverview ? 'bg-ink-800/8 text-blue-700 font-medium' : 'text-ink-600 hover:bg-ink-50'"
@@ -130,54 +176,246 @@ function selectTaxonomy(key: string) {
               <span class="flex-1 text-left">Overview</span>
             </router-link>
 
-            <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)"
+            <!-- Search results mode -->
+            <template v-if="isSearching && searchResults">
+              <div v-if="searchResults.classes.length" class="mt-1">
+                <div class="px-2 py-1 text-[10px] uppercase tracking-wide text-blue-500 font-medium">Classes ({{ searchResults.classes.length }})</div>
+                <button v-for="cls in searchResults.classes" :key="cls.compact"
+                  @click="selectClass(cls.compact); searchQuery = ''"
+                  class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[11px] transition-colors text-ink-600 hover:bg-ink-50"
+                >
+                  <span class="w-3 text-ink-200">·</span>
+                  <span class="flex-1 text-left truncate">{{ cls.label }}</span>
+                  <code class="text-[9px] text-ink-300">{{ cls.compact }}</code>
+                </button>
+              </div>
+              <div v-if="searchResults.objectProperties.length" class="mt-1">
+                <div class="px-2 py-1 text-[10px] uppercase tracking-wide text-emerald-500 font-medium">Object Properties ({{ searchResults.objectProperties.length }})</div>
+                <button v-for="p in searchResults.objectProperties" :key="p.compact"
+                  @click="selectProperty(p.compact); searchQuery = ''"
+                  class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[11px] transition-colors text-ink-600 hover:bg-ink-50"
+                >
+                  <span class="w-3 text-ink-200">·</span>
+                  <span class="flex-1 text-left truncate">{{ p.label }}</span>
+                </button>
+              </div>
+              <div v-if="searchResults.datatypeProperties.length" class="mt-1">
+                <div class="px-2 py-1 text-[10px] uppercase tracking-wide text-amber-500 font-medium">Datatype Properties ({{ searchResults.datatypeProperties.length }})</div>
+                <button v-for="p in searchResults.datatypeProperties" :key="p.compact"
+                  @click="selectProperty(p.compact); searchQuery = ''"
+                  class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[11px] transition-colors text-ink-600 hover:bg-ink-50"
+                >
+                  <span class="w-3 text-ink-200">·</span>
+                  <span class="flex-1 text-left truncate">{{ p.label }}</span>
+                </button>
+              </div>
+              <div v-if="searchResults.shapes.length" class="mt-1">
+                <div class="px-2 py-1 text-[10px] uppercase tracking-wide text-purple-500 font-medium">SHACL Shapes ({{ searchResults.shapes.length }})</div>
+                <button v-for="s in searchResults.shapes" :key="s.compact"
+                  @click="selectShape(s.compact); searchQuery = ''"
+                  class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[11px] transition-colors text-ink-600 hover:bg-ink-50"
+                >
+                  <span class="w-3 text-ink-200">·</span>
+                  <span class="flex-1 text-left truncate">{{ s.label }}</span>
+                </button>
+              </div>
+              <div v-if="searchResults.individuals.length" class="mt-1">
+                <div class="px-2 py-1 text-[10px] uppercase tracking-wide text-rose-500 font-medium">Named Individuals ({{ searchResults.individuals.length }})</div>
+                <button v-for="ind in searchResults.individuals" :key="ind.group + '/' + ind.id"
+                  @click="selectTaxonomy(ind.group); searchQuery = ''"
+                  class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[11px] transition-colors text-ink-600 hover:bg-ink-50"
+                >
+                  <span class="w-3 text-ink-200">·</span>
+                  <span class="flex-1 text-left truncate">{{ ind.prefLabel }}</span>
+                  <span class="text-[9px] text-ink-300">{{ taxonomyLabels[ind.group] }}</span>
+                </button>
+              </div>
+              <div v-if="searchResults.annotationProperties.length" class="mt-1">
+                <div class="px-2 py-1 text-[10px] uppercase tracking-wide text-pink-500 font-medium">Annotation Properties ({{ searchResults.annotationProperties.length }})</div>
+                <div v-for="ap in searchResults.annotationProperties" :key="ap.compact"
+                  class="px-2 py-0.5 text-[11px] text-ink-500"
+                >
+                  <span class="w-3 inline-block text-ink-200">·</span>
+                  {{ ap.compact }}
+                </div>
+              </div>
+              <div v-if="searchResults.total === 0" class="px-2 py-3 text-[11px] text-ink-300 italic">
+                No entities match "{{ searchQuery }}"
+              </div>
+            </template>
+
+            <!-- Normal browse mode -->
+            <template v-if="!isSearching">
+              <!-- Classes section -->
+              <div class="mt-1">
+                <button @click="toggleSection('class')"
+                  class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[10px] uppercase tracking-wide text-ink-400 hover:text-ink-600 hover:bg-ink-50 transition-colors"
+                >
+                  <span class="w-3 text-[10px]">{{ collapsedSections.has('class') ? '▸' : '▾' }}</span>
+                  <span class="flex-1 text-left">Classes</span>
+                  <span class="badge text-[9px] bg-blue-50 text-blue-600 px-1 py-0.5">{{ treeRoots.length }}+</span>
+                </button>
+                <div v-if="!collapsedSections.has('class')" class="mt-0.5 space-y-0">
+                  <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 && !activeShapeId && !activePropertyId ? '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>
+                    <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 === child.compact ? '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>
+                        <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 ? '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>
+                </div>
+              </div>
+
+              <!-- Object Properties section -->
+              <div class="mt-1">
+                <button @click="toggleSection('objectProperty')"
+                  class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[10px] uppercase tracking-wide text-ink-400 hover:text-ink-600 hover:bg-ink-50 transition-colors"
+                >
+                  <span class="w-3 text-[10px]">{{ collapsedSections.has('objectProperty') ? '▸' : '▾' }}</span>
+                  <span class="flex-1 text-left">Object Properties</span>
+                  <span class="badge text-[9px] bg-emerald-50 text-emerald-600 px-1 py-0.5">{{ objectProperties.length }}</span>
+                </button>
+                <div v-if="!collapsedSections.has('objectProperty')" class="mt-0.5 max-h-40 overflow-y-auto">
+                  <button v-for="p in objectProperties" :key="p.compact"
+                    @click="selectProperty(p.compact)"
+                    class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[11px] transition-colors"
+                    :class="activePropertyId === p.compact ? '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 truncate">{{ p.label }}</span>
+                  </button>
+                </div>
+              </div>
+
+              <!-- Datatype Properties section -->
+              <div class="mt-1">
+                <button @click="toggleSection('datatypeProperty')"
+                  class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[10px] uppercase tracking-wide text-ink-400 hover:text-ink-600 hover:bg-ink-50 transition-colors"
+                >
+                  <span class="w-3 text-[10px]">{{ collapsedSections.has('datatypeProperty') ? '▸' : '▾' }}</span>
+                  <span class="flex-1 text-left">Datatype Properties</span>
+                  <span class="badge text-[9px] bg-amber-50 text-amber-600 px-1 py-0.5">{{ datatypeProperties.length }}</span>
+                </button>
+                <div v-if="!collapsedSections.has('datatypeProperty')" class="mt-0.5 max-h-40 overflow-y-auto">
+                  <button v-for="p in datatypeProperties" :key="p.compact"
+                    @click="selectProperty(p.compact)"
+                    class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[11px] transition-colors"
+                    :class="activePropertyId === p.compact ? '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 truncate">{{ p.label }}</span>
+                  </button>
+                </div>
+              </div>
+
+              <!-- SHACL Shapes section -->
+              <div class="mt-1">
+                <button @click="toggleSection('shape')"
+                  class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[10px] uppercase tracking-wide text-ink-400 hover:text-ink-600 hover:bg-ink-50 transition-colors"
+                >
+                  <span class="w-3 text-[10px]">{{ collapsedSections.has('shape') ? '▸' : '▾' }}</span>
+                  <span class="flex-1 text-left">SHACL Shapes</span>
+                  <span class="badge text-[9px] bg-purple-50 text-purple-600 px-1 py-0.5">{{ allShapes.length }}</span>
+                </button>
+                <div v-if="!collapsedSections.has('shape')" class="mt-0.5 max-h-40 overflow-y-auto">
+                  <button v-for="s in allShapes" :key="s.compact"
+                    @click="selectShape(s.compact)"
                     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'"
+                    :class="activeShapeId === s.compact ? '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>
+                    <span class="w-3 text-ink-200">·</span>
+                    <span class="flex-1 text-left truncate">{{ s.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="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'"
+                </div>
+              </div>
+
+              <!-- Named Individuals section -->
+              <div class="mt-1">
+                <button @click="toggleSection('namedIndividual')"
+                  class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[10px] uppercase tracking-wide text-ink-400 hover:text-ink-600 hover:bg-ink-50 transition-colors"
+                >
+                  <span class="w-3 text-[10px]">{{ collapsedSections.has('namedIndividual') ? '▸' : '▾' }}</span>
+                  <span class="flex-1 text-left">Named Individuals</span>
+                  <span class="badge text-[9px] bg-rose-50 text-rose-600 px-1 py-0.5">{{ totalIndividuals }}</span>
+                </button>
+                <div v-if="!collapsedSections.has('namedIndividual')" class="mt-0.5 max-h-64 overflow-y-auto">
+                  <template v-for="group in groupedIndividuals" :key="group.key">
+                    <button @click="selectTaxonomy(group.key)"
+                      class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[10px] uppercase tracking-wide text-ink-300 hover:text-ink-500 transition-colors"
                     >
                       <span class="w-3 text-ink-200">·</span>
-                      <span class="flex-1 text-left">{{ gc.label }}</span>
+                      <span class="flex-1 text-left">{{ group.label }}</span>
+                      <span class="text-[9px] text-ink-300">{{ group.concepts.length }}</span>
                     </button>
+                  </template>
+                </div>
+              </div>
+
+              <!-- SKOS Taxonomies section -->
+              <div class="mt-1">
+                <button @click="toggleSection('taxonomy')"
+                  class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[10px] uppercase tracking-wide text-ink-400 hover:text-ink-600 hover:bg-ink-50 transition-colors"
+                >
+                  <span class="w-3 text-[10px]">{{ collapsedSections.has('taxonomy') ? '▸' : '▾' }}</span>
+                  <span class="flex-1 text-left">SKOS Taxonomies</span>
+                  <span class="badge text-[9px] bg-rose-50 text-rose-600 px-1 py-0.5">{{ taxonomyKeys.length }}</span>
+                </button>
+                <div v-if="!collapsedSections.has('taxonomy')" class="mt-0.5">
+                  <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>
+
+              <!-- Annotation Properties section -->
+              <div class="mt-1">
+                <button @click="toggleSection('annotationProperty')"
+                  class="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-[10px] uppercase tracking-wide text-ink-400 hover:text-ink-600 hover:bg-ink-50 transition-colors"
+                >
+                  <span class="w-3 text-[10px]">{{ collapsedSections.has('annotationProperty') ? '▸' : '▾' }}</span>
+                  <span class="flex-1 text-left">Annotation Properties</span>
+                  <span class="badge text-[9px] bg-pink-50 text-pink-600 px-1 py-0.5">{{ annotationProperties.length }}</span>
+                </button>
+                <div v-if="!collapsedSections.has('annotationProperty')" class="mt-0.5">
+                  <div v-for="ap in annotationProperties" :key="ap.compact"
+                    class="w-full flex items-center gap-1.5 px-2 py-1 text-[11px] text-ink-500"
+                  >
+                    <span class="w-3 text-ink-200">·</span>
+                    <code class="text-ink-400">{{ ap.compact }}</code>
                   </div>
-                </template>
+                </div>
               </div>
             </template>
-
-            <!-- 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>
         </template>
       </nav>

package/src/components/ConceptRdfView.vue

@@ -333,8 +333,8 @@ const rdfSource = computed(() => rdfFormat.value === 'turtle' ? turtleSource.val
             </button>
           </div>
           <div class="flex gap-1.5 mt-2.5">
-            <span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-medium bg-blue-50 text-blue-700 border border-blue-100">gloss:Concept</span>
-            <span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-medium bg-emerald-50 text-emerald-700 border border-emerald-100">skos:Concept</span>
+            <router-link to="/ontology/class/gloss-Concept" class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-medium bg-blue-50 text-blue-700 border border-blue-100 hover:bg-blue-100 transition-colors">gloss:Concept</router-link>
+            <router-link to="/ontology/class/gloss-Concept" class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-medium bg-emerald-50 text-emerald-700 border border-emerald-100 hover:bg-emerald-100 transition-colors">skos:Concept</router-link>
           </div>
         </div>
       </div>
@@ -356,7 +356,7 @@ const rdfSource = computed(() => rdfFormat.value === 'turtle' ? turtleSource.val
     <div v-for="(section, si) in sections" :key="si" class="card p-5">
       <div class="flex items-center gap-2 mb-3">
         <div class="w-1 h-4 rounded-full" :class="section.classId === 'gloss:Concept' ? 'bg-blue-500' : section.classId === 'gloss:LocalizedConcept' ? 'bg-emerald-500' : 'bg-amber-500'"></div>
-        <code class="text-xs font-semibold text-ink-700">{{ section.classId }}</code>
+        <router-link :to="`/ontology/class/${section.classId.replace(/:/g, '-')}`" class="text-xs font-semibold text-ink-700 hover:text-blue-600 transition-colors">{{ section.classId }}</router-link>
         <span class="text-xs text-ink-400">·</span>
         <span class="text-xs text-ink-500">{{ section.label }}</span>
       </div>

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

@@ -2,8 +2,21 @@ import { ref, computed } from 'vue';
 import {
   getClass,
   getClassTree,
+  getAllShapes,
+  getObjectProperties,
+  getDatatypeProperties,
+  getAnnotationProperties,
+  getOntology,
+  getStats,
   type OwlClass,
+  type OwlShape,
+  type OwlProperty,
+  type AnnotationProperty,
+  type OwlOntology,
+  ENTITY_TYPE_META,
+  type EntityType,
 } from '../adapters/ontology-schema';
+import taxonomyData from '../data/taxonomies.json';
 
 export function slugToCompact(slug: string): string {
   return slug.replace(/-/g, ':');
@@ -15,6 +28,57 @@ export function compactToSlug(compact: string): string {
 
 const expandedClasses = ref(new Set<string>(['gloss:Designation']));
 
+const collapsedSections = ref(new Set<string>([
+  'objectProperty',
+  'datatypeProperty',
+  'shape',
+  'taxonomy',
+  'namedIndividual',
+  'annotationProperty',
+]));
+
+const searchQuery = ref('');
+
+function toggleExpand(cls: OwlClass) {
+  const s = new Set(expandedClasses.value);
+  if (s.has(cls.compact)) s.delete(cls.compact);
+  else s.add(cls.compact);
+  expandedClasses.value = s;
+}
+
+function toggleSection(key: string) {
+  const s = new Set(collapsedSections.value);
+  if (s.has(key)) s.delete(key);
+  else s.add(key);
+  collapsedSections.value = s;
+}
+
+function expandAllSections() {
+  collapsedSections.value = new Set();
+}
+
+function collapseAllSections() {
+  collapsedSections.value = new Set(['objectProperty', 'datatypeProperty', 'shape', 'taxonomy', 'class', 'namedIndividual', 'annotationProperty']);
+}
+
+function childClasses(parentId: string): OwlClass[] {
+  const cls = getClass(parentId);
+  if (!cls) return [];
+  return cls.children.map(id => getClass(id)).filter((c): c is OwlClass => !!c);
+}
+
+function hasChildren(cls: OwlClass): boolean {
+  return cls.children.length > 0;
+}
+
+const treeRoots = getClassTree();
+const allShapes = getAllShapes();
+const objectProperties = getObjectProperties();
+const datatypeProperties = getDatatypeProperties();
+const annotationProperties = getAnnotationProperties();
+const ontology = getOntology();
+const stats = getStats();
+
 const taxonomyKeys = [
   'conceptStatus', 'entryStatus', 'normativeStatus', 'sourceType', 'sourceStatus',
   'relationshipType', 'designationType', 'termType', 'grammarGender', 'grammarNumber',
@@ -33,24 +97,53 @@ const taxonomyLabels: Record<string, string> = {
   grammarNumber: 'Grammar Number',
 };
 
-function toggleExpand(cls: OwlClass) {
-  const s = new Set(expandedClasses.value);
-  if (s.has(cls.compact)) s.delete(cls.compact);
-  else s.add(cls.compact);
-  expandedClasses.value = s;
+interface IndividualGroup {
+  key: string;
+  label: string;
+  concepts: { id: string; prefLabel: string }[];
 }
 
-function childClasses(parentId: string): OwlClass[] {
-  const cls = getClass(parentId);
-  if (!cls) return [];
-  return cls.children.map(id => getClass(id)).filter((c): c is OwlClass => !!c);
-}
+const groupedIndividuals = computed<IndividualGroup[]>(() => {
+  return taxonomyKeys.map(key => {
+    const tax = (taxonomyData as Record<string, any>)[key];
+    if (!tax) return { key, label: taxonomyLabels[key] || key, concepts: [] };
+    const concepts = Object.values(tax.concepts as Record<string, any>).map((c: any) => ({
+      id: c.id,
+      prefLabel: c.prefLabel,
+    }));
+    return { key, label: tax.schemeLabel || taxonomyLabels[key] || key, concepts };
+  });
+});
 
-function hasChildren(cls: OwlClass): boolean {
-  return cls.children.length > 0;
+const totalIndividuals = computed(() =>
+  groupedIndividuals.value.reduce((sum, g) => sum + g.concepts.length, 0),
+);
+
+const valuesToTaxonomy: Record<string, string> = {
+  'gloss:status': 'conceptStatus',
+  'gloss:entstatus': 'entryStatus',
+  'gloss:norm': 'normativeStatus',
+  'gloss:sourceType': 'sourceType',
+  'gloss:sourceStatus': 'sourceStatus',
+  'gloss:rel': 'relationshipType',
+  'gloss:desigType': 'designationType',
+  'gloss:termType': 'termType',
+  'gloss:gender': 'grammarGender',
+  'gloss:number': 'grammarNumber',
+};
+
+function taxonomyKeyForValuesFrom(valuesFrom: string | null): string | null {
+  if (!valuesFrom) return null;
+  return valuesToTaxonomy[valuesFrom] ?? null;
 }
 
-const treeRoots = getClassTree();
+function getShapesForTaxonomy(taxonomyKey: string): OwlShape[] {
+  const targetScheme = Object.entries(valuesToTaxonomy).find(([, v]) => v === taxonomyKey)?.[0];
+  if (!targetScheme) return [];
+  return allShapes.filter(s =>
+    s.constraints.some(c => c.valuesFrom === targetScheme),
+  );
+}
 
 const allNavItems = computed(() => {
   const items: { id: string; label: string; depth: number }[] = [];
@@ -66,15 +159,92 @@ const allNavItems = computed(() => {
   return items;
 });
 
+function matchesSearch(text: string, query: string): boolean {
+  return text.toLowerCase().includes(query.toLowerCase());
+}
+
+const searchResults = computed(() => {
+  const q = searchQuery.value.trim();
+  if (!q) return null;
+
+  const matchedClasses: OwlClass[] = [];
+  const matchedObjectProps: OwlProperty[] = [];
+  const matchedDatatypeProps: OwlProperty[] = [];
+  const matchedShapes: OwlShape[] = [];
+  const matchedIndividuals: { group: string; id: string; prefLabel: string }[] = [];
+  const matchedAnnotationProps: AnnotationProperty[] = [];
+
+  // Walk all classes (tree + leaves)
+  function walkAll(classes: OwlClass[]) {
+    for (const cls of classes) {
+      if (matchesSearch(cls.label, q) || matchesSearch(cls.compact, q)) {
+        matchedClasses.push(cls);
+      }
+      walkAll(childClasses(cls.compact));
+    }
+  }
+  walkAll(treeRoots);
+
+  for (const p of objectProperties) {
+    if (matchesSearch(p.label, q) || matchesSearch(p.compact, q)) matchedObjectProps.push(p);
+  }
+  for (const p of datatypeProperties) {
+    if (matchesSearch(p.label, q) || matchesSearch(p.compact, q)) matchedDatatypeProps.push(p);
+  }
+  for (const s of allShapes) {
+    if (matchesSearch(s.label, q) || matchesSearch(s.compact, q)) matchedShapes.push(s);
+  }
+  for (const g of groupedIndividuals.value) {
+    for (const c of g.concepts) {
+      if (matchesSearch(c.prefLabel, q) || matchesSearch(c.id, q)) {
+        matchedIndividuals.push({ group: g.key, id: c.id, prefLabel: c.prefLabel });
+      }
+    }
+  }
+  for (const ap of annotationProperties) {
+    if (matchesSearch(ap.label, q) || matchesSearch(ap.compact, q)) matchedAnnotationProps.push(ap);
+  }
+
+  const total = matchedClasses.length + matchedObjectProps.length + matchedDatatypeProps.length + matchedShapes.length + matchedIndividuals.length + matchedAnnotationProps.length;
+
+  return {
+    total,
+    classes: matchedClasses,
+    objectProperties: matchedObjectProps,
+    datatypeProperties: matchedDatatypeProps,
+    shapes: matchedShapes,
+    individuals: matchedIndividuals,
+    annotationProperties: matchedAnnotationProps,
+  };
+});
+
 export function useOntologyNav() {
   return {
     expandedClasses,
+    collapsedSections,
+    searchQuery,
     taxonomyKeys,
     taxonomyLabels,
     treeRoots,
+    allShapes,
+    objectProperties,
+    datatypeProperties,
+    annotationProperties,
+    ontology,
+    stats,
+    groupedIndividuals,
+    totalIndividuals,
     allNavItems,
+    searchResults,
+    valuesToTaxonomy,
+    taxonomyKeyForValuesFrom,
+    getShapesForTaxonomy,
     toggleExpand,
+    toggleSection,
+    expandAllSections,
+    collapseAllSections,
     childClasses,
     hasChildren,
+    ENTITY_TYPE_META,
   };
 }