@glossarist/concept-browser 0.7.41 → 0.7.43

package/package.json

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

package/scripts/__tests__/concept-groups.test.mjs

@@ -0,0 +1,51 @@
+import { describe, it, expect } from 'vitest';
+import { getGroups } from '../lib/concept-groups.mjs';
+
+describe('getGroups', () => {
+  it('returns explicit eng.groups when present', () => {
+    expect(getGroups({ eng: { groups: ['g1', 'g2'] }, termid: 1 })).toEqual(['g1', 'g2']);
+  });
+
+  it('derives groups from _domains with ref_type=section', () => {
+    expect(getGroups({
+      termid: 1,
+      _domains: [
+        { ref_type: 'section', concept_id: 'section-102-01' },
+        { ref_type: 'section', concept_id: 'section-102-02' },
+      ],
+    })).toEqual(['102-01', '102-02']);
+  });
+
+  it('ignores _domains entries without ref_type=section', () => {
+    expect(getGroups({
+      termid: 1,
+      _domains: [
+        { ref_type: 'other', concept_id: 'x' },
+        { ref_type: 'section', concept_id: 'section-103' },
+      ],
+    })).toEqual(['103']);
+  });
+
+  it('falls through when _domains has no section entries', () => {
+    expect(getGroups({
+      termid: '103-01-02',
+      _domains: [{ ref_type: 'other', concept_id: 'x' }],
+    })).toEqual(['103']);
+  });
+
+  it('derives group from termid with NNN- prefix (e.g. IEV)', () => {
+    expect(getGroups({ termid: '103-01-02' })).toEqual(['103']);
+  });
+
+  it('derives group from dotted termid (e.g. VIM)', () => {
+    expect(getGroups({ termid: '1.2.3.4' })).toEqual(['1.2.3']);
+  });
+
+  it('returns empty array when no derivation matches', () => {
+    expect(getGroups({ termid: 'abc' })).toEqual([]);
+  });
+
+  it('returns empty array when termid is missing', () => {
+    expect(getGroups({})).toEqual([]);
+  });
+});

package/scripts/generate-data.mjs

@@ -3,7 +3,7 @@ import path from 'path';
 import yaml from 'js-yaml';
 import { naturalSort, Register, parseMention } from 'glossarist';
 import { loadSiteConfig } from './load-site-config.mjs';
-
+import { getGroups } from './lib/concept-groups.mjs';
 const __dirname = path.dirname(new URL(import.meta.url).pathname);
 const ROOT = process.cwd();
 const PUBLIC = path.join(ROOT, 'public');
@@ -574,24 +574,6 @@ function getPrimaryDesignation(conceptYaml) {
   return descs;
 }
 
-function getGroups(conceptYaml) {
-  if (conceptYaml.eng && conceptYaml.eng.groups) return conceptYaml.eng.groups;
-  // Derive groups from domains (e.g. section-based grouping in G18)
-  if (conceptYaml._domains) {
-    const sectionIds = conceptYaml._domains
-      .filter(d => d.ref_type === 'section' && d.concept_id)
-      .map(d => d.concept_id.replace(/^section-/, ''));
-    if (sectionIds.length) return sectionIds;
-  }
-  const termid = String(conceptYaml.termid);
-  if (/^\d{3}-/.test(termid)) return [termid.substring(0, 3)];
-  if (/^\d+\.\d+\.\d+/.test(termid)) {
-    const parts = termid.split('.');
-    return [`${parts[0]}.${parts[1]}.${parts[2]}`];
-  }
-  return [];
-}
-
 function escapeTurtle(s) {
   return s.replace(/\\/g, '\\\\').replace(/"/g, '\\"').replace(/\n/g, '\\n');
 }

package/scripts/lib/concept-groups.mjs

@@ -0,0 +1,16 @@
+export function getGroups(conceptYaml) {
+  if (conceptYaml.eng && conceptYaml.eng.groups) return conceptYaml.eng.groups;
+  if (conceptYaml._domains) {
+    const sectionIds = conceptYaml._domains
+      .filter(d => d.ref_type === 'section' && d.concept_id)
+      .map(d => d.concept_id.replace(/^section-/, ''));
+    if (sectionIds.length) return sectionIds;
+  }
+  const termid = String(conceptYaml.termid);
+  if (/^\d{3}-/.test(termid)) return [termid.substring(0, 3)];
+  if (/^\d+\.\d+\.\d+/.test(termid)) {
+    const parts = termid.split('.');
+    return [`${parts[0]}.${parts[1]}.${parts[2]}`];
+  }
+  return [];
+}

package/src/__tests__/dataset-view.test.ts

@@ -4,7 +4,7 @@ import { createPinia, setActivePinia } from 'pinia';
 import { createRouter, createMemoryHistory } from 'vue-router';
 import DatasetView from '../views/DatasetView.vue';
 import { useVocabularyStore } from '../stores/vocabulary';
-import type { Manifest, ConceptSummary } from '../adapters/types';
+import type { Manifest, ConceptSummary, SectionNode } from '../adapters/types';
 
 function makeManifest(overrides: Partial<Manifest> = {}): Manifest {
   return {
@@ -230,4 +230,98 @@ describe('DatasetView', () => {
     expect(prevBtn).toBeDefined();
     expect(prevBtn!.attributes('disabled')).toBeDefined();
   });
+
+  describe('hierarchical section filter', () => {
+    const HIERARCHICAL_TREE: SectionNode[] = [
+      {
+        id: '102',
+        names: { eng: 'Mathematics' },
+        conceptCount: 0,
+        children: [
+          { id: '102-01', names: { eng: 'Sets' }, conceptCount: 2 },
+          {
+            id: '102-02',
+            names: { eng: 'Numbers' },
+            conceptCount: 2,
+            children: [
+              { id: '102-02-01', names: { eng: 'Reals' }, conceptCount: 1 },
+            ],
+          },
+        ],
+      },
+      { id: '103', names: { eng: 'Functions' }, conceptCount: 1 },
+    ];
+
+    function makeHierarchicalAdapter(concepts: ConceptSummary[], sections: SectionNode[]) {
+      const dense = concepts.filter(Boolean);
+      return {
+        registerId: 'test',
+        index: dense,
+        manifest: null,
+        getConceptCount: () => dense.length,
+        getConcepts: () => dense,
+        isRangeLoaded: () => true,
+        ensureChunksForRange: async () => {},
+        ensureAllChunksLoaded: async () => {},
+        getAdjacentConcepts: () => ({ prev: null, next: null }),
+        getSectionTree: () => sections,
+      } as any;
+    }
+
+    function mountHierarchical(concepts: ConceptSummary[], sectionId: string) {
+      const store = useVocabularyStore();
+      store.manifests.set('test', makeManifest());
+      store.datasets.set('test', makeHierarchicalAdapter(concepts, HIERARCHICAL_TREE));
+      return mount(DatasetView, {
+        global: { plugins: [pinia, router] },
+        props: { registerId: 'test' },
+      });
+    }
+
+    it('matches concepts in a child section when filtering by parent (closure)', async () => {
+      const concepts: ConceptSummary[] = [
+        { id: 'a', designations: { eng: 'set A' }, eng: 'set A', status: 'valid', groups: ['102-01'] },
+        { id: 'b', designations: { eng: 'unrelated' }, eng: 'unrelated', status: 'valid', groups: ['999'] },
+      ];
+      const wrapper = mountHierarchical(concepts, 'section-102');
+      await router.push({ name: 'dataset', params: { registerId: 'test' }, query: { section: 'section-102' } });
+      await flushPromises();
+      expect(wrapper.text()).toContain('set A');
+      expect(wrapper.text()).not.toContain('unrelated');
+    });
+
+    it('matches concepts at arbitrary depth (grandparent closure)', async () => {
+      const concepts: ConceptSummary[] = [
+        { id: 'deep', designations: { eng: 'real number' }, eng: 'real number', status: 'valid', groups: ['102-02-01'] },
+        { id: 'other', designations: { eng: 'other concept' }, eng: 'other concept', status: 'valid', groups: ['103'] },
+      ];
+      const wrapper = mountHierarchical(concepts, 'section-102');
+      await router.push({ name: 'dataset', params: { registerId: 'test' }, query: { section: 'section-102' } });
+      await flushPromises();
+      expect(wrapper.text()).toContain('real number');
+      expect(wrapper.text()).not.toContain('other concept');
+    });
+
+    it('still matches by concept ID prefix when no groups are set', async () => {
+      const concepts: ConceptSummary[] = [
+        { id: '102.3.4', designations: { eng: 'numbered term' }, eng: 'numbered term', status: 'valid' },
+        { id: '999.1', designations: { eng: 'different section' }, eng: 'different section', status: 'valid' },
+      ];
+      const wrapper = mountHierarchical(concepts, 'section-102');
+      await router.push({ name: 'dataset', params: { registerId: 'test' }, query: { section: 'section-102' } });
+      await flushPromises();
+      expect(wrapper.text()).toContain('numbered term');
+      expect(wrapper.text()).not.toContain('different section');
+    });
+
+    it('renders the section display name when filter is active', async () => {
+      const concepts: ConceptSummary[] = [
+        { id: 'a', designations: { eng: 'set A' }, eng: 'set A', status: 'valid', groups: ['102-01'] },
+      ];
+      const wrapper = mountHierarchical(concepts, 'section-102');
+      await router.push({ name: 'dataset', params: { registerId: 'test' }, query: { section: 'section-102' } });
+      await flushPromises();
+      expect(wrapper.text()).toContain('102 — Mathematics');
+    });
+  });
 });

package/src/__tests__/section-display.test.ts

@@ -0,0 +1,46 @@
+import { describe, it, expect } from 'vitest';
+import { sectionName, formatSectionLabel } from '../utils/section-display';
+
+describe('sectionName', () => {
+  it('prefers the requested language', () => {
+    expect(sectionName({ id: 'x', names: { eng: 'X', fra: 'X (fra)' } }, 'fra')).toBe('X (fra)');
+  });
+
+  it('falls back to English when requested language missing', () => {
+    expect(sectionName({ id: 'x', names: { eng: 'X' } }, 'deu')).toBe('X');
+  });
+
+  it('falls back to id when no names at all', () => {
+    expect(sectionName({ id: 'x', names: {} }, 'fra')).toBe('x');
+  });
+
+  it('falls back to id when names object missing', () => {
+    expect(sectionName({ id: 'x' }, 'fra')).toBe('x');
+  });
+});
+
+describe('formatSectionLabel', () => {
+  it('returns just id when name is empty', () => {
+    expect(formatSectionLabel({ id: '102', names: {} }, 'eng')).toBe('102');
+  });
+
+  it('returns just id when name equals id', () => {
+    expect(formatSectionLabel({ id: '102', names: { eng: '102' } }, 'eng')).toBe('102');
+  });
+
+  it('returns just name when name equals id-with-spaces (EXPRESS schema convention)', () => {
+    expect(formatSectionLabel({ id: 'action_schema', names: { eng: 'action schema' } }, 'eng')).toBe('action schema');
+  });
+
+  it('returns "id — name" when name is meaningfully different', () => {
+    expect(formatSectionLabel({ id: '102', names: { eng: 'Mathematics' } }, 'eng')).toBe('102 — Mathematics');
+  });
+
+  it('localizes the name lookup', () => {
+    expect(formatSectionLabel({ id: '102', names: { eng: 'Math', fra: 'Maths' } }, 'fra')).toBe('102 — Maths');
+  });
+
+  it('falls back through English when requested language has no name', () => {
+    expect(formatSectionLabel({ id: '102', names: { eng: 'Math' } }, 'fra')).toBe('102 — Math');
+  });
+});

package/src/__tests__/section-tree.test.ts

@@ -0,0 +1,128 @@
+import { describe, it, expect } from 'vitest';
+import type { SectionNode } from '../adapters/types';
+import {
+  findSectionNode,
+  collectDescendantSectionIds,
+  toSectionNode,
+  toSectionTree,
+} from '../utils/section-tree';
+
+const TREE: SectionNode[] = [
+  {
+    id: '102',
+    names: { eng: 'Mathematics' },
+    conceptCount: 0,
+    children: [
+      { id: '102-01', names: { eng: 'Sets' }, conceptCount: 5 },
+      {
+        id: '102-02',
+        names: { eng: 'Numbers' },
+        conceptCount: 3,
+        children: [
+          { id: '102-02-01', names: { eng: 'Reals' }, conceptCount: 1 },
+        ],
+      },
+    ],
+  },
+  { id: '103', names: { eng: 'Functions' }, conceptCount: 0 },
+];
+
+describe('findSectionNode', () => {
+  it('finds a root by id', () => {
+    expect(findSectionNode(TREE, '103')?.id).toBe('103');
+  });
+
+  it('finds a descendant by id (recursive)', () => {
+    expect(findSectionNode(TREE, '102-02-01')?.id).toBe('102-02-01');
+  });
+
+  it('returns null for unknown id', () => {
+    expect(findSectionNode(TREE, '999')).toBeNull();
+  });
+
+  it('returns null for empty tree', () => {
+    expect(findSectionNode([], '102')).toBeNull();
+  });
+});
+
+describe('collectDescendantSectionIds', () => {
+  it('includes root and all descendants at arbitrary depth', () => {
+    const ids = collectDescendantSectionIds(TREE, '102');
+    expect([...ids].sort()).toEqual(['102', '102-01', '102-02', '102-02-01']);
+  });
+
+  it('returns single-element set for a leaf', () => {
+    expect([...collectDescendantSectionIds(TREE, '103')]).toEqual(['103']);
+  });
+
+  it('returns empty set for unknown root', () => {
+    expect(collectDescendantSectionIds(TREE, '999').size).toBe(0);
+  });
+});
+
+describe('toSectionNode', () => {
+  it('maps minimal input with id only', () => {
+    expect(toSectionNode({ id: 'x' })).toEqual({
+      id: 'x',
+      names: {},
+      conceptCount: 0,
+    });
+  });
+
+  it('preserves names and conceptCount', () => {
+    expect(toSectionNode({ id: 'x', names: { eng: 'X' }, conceptCount: 7 })).toEqual({
+      id: 'x',
+      names: { eng: 'X' },
+      conceptCount: 7,
+    });
+  });
+
+  it('defaults missing id to empty string', () => {
+    expect(toSectionNode({}).id).toBe('');
+  });
+
+  it('defaults missing conceptCount to 0', () => {
+    expect(toSectionNode({ id: 'x' }).conceptCount).toBe(0);
+  });
+
+  it('defaults missing names to empty object', () => {
+    expect(toSectionNode({ id: 'x' }).names).toEqual({});
+  });
+
+  it('recursively maps children', () => {
+    const node = toSectionNode({
+      id: 'p',
+      names: { eng: 'Parent' },
+      children: [{ id: 'c', names: { eng: 'Child' } }],
+    });
+    expect(node.children?.[0]).toEqual({
+      id: 'c',
+      names: { eng: 'Child' },
+      conceptCount: 0,
+    });
+  });
+
+  it('omits children array when source has none', () => {
+    expect(toSectionNode({ id: 'x' }).children).toBeUndefined();
+  });
+
+  it('omits children array when source children is empty', () => {
+    expect(toSectionNode({ id: 'x', children: [] }).children).toBeUndefined();
+  });
+});
+
+describe('toSectionTree', () => {
+  it('maps a list of roots', () => {
+    const tree = toSectionTree([
+      { id: 'a', names: { eng: 'A' } },
+      { id: 'b' },
+    ]);
+    expect(tree).toHaveLength(2);
+    expect(tree[0].id).toBe('a');
+    expect(tree[1].names).toEqual({});
+  });
+
+  it('returns empty array for empty input', () => {
+    expect(toSectionTree([])).toEqual([]);
+  });
+});

package/src/adapters/GraphDataSource.ts

@@ -3,6 +3,7 @@ import type { Concept, RelatedConcept } from 'glossarist';
 import type { DatasetAdapter } from './DatasetAdapter';
 import { UriRouter } from './UriRouter';
 import { slugify } from '../utils/slugify';
+import { toSectionNode, toSectionTree } from '../utils/section-tree';
 
 interface DomainNodeJson {
   uri?: string;
@@ -14,12 +15,6 @@ interface DomainNodeJson {
   children?: DomainNodeJson[];
 }
 
-interface SectionJson {
-  id: string;
-  names?: Record<string, string>;
-  children?: SectionJson[];
-}
-
 function resolveRefTarget(rc: RelatedConcept, uriBase: string, registerId: string, urnMap?: ReadonlyMap<string, string>): string {
   if (!rc.ref) return '';
   const ref = rc.ref;
@@ -136,7 +131,7 @@ export class GraphDataSource {
   getSectionTree(): SectionNode[] {
     const nodes = this.adapter.manifest?.sections;
     if (!nodes || nodes.length === 0) return [];
-    return nodes.map(s => this.mapManifestSection(s));
+    return toSectionTree(nodes);
   }
 
   private mapDomainNode(dn: DomainNodeJson): GraphNode {
@@ -151,28 +146,17 @@ export class GraphDataSource {
       conceptCount: dn.conceptCount || 0,
     };
     if (dn.children && dn.children.length > 0) {
-      node.children = dn.children.map((c) => this.mapSectionNode(c));
+      node.children = dn.children.map(c => this.domainNodeToSection(c));
     }
     return node;
   }
 
-  private mapSectionNode(dn: DomainNodeJson): SectionNode {
-    const node: SectionNode = {
-      id: dn.id ?? '',
+  private domainNodeToSection(dn: DomainNodeJson): SectionNode {
+    return toSectionNode({
+      id: dn.id,
       names: dn.names || (dn.label ? { eng: dn.label } : {}),
-      conceptCount: dn.conceptCount || 0,
-    };
-    if (dn.children && dn.children.length > 0) {
-      node.children = dn.children.map((c) => this.mapSectionNode(c));
-    }
-    return node;
-  }
-
-  private mapManifestSection(s: SectionJson): SectionNode {
-    const node: SectionNode = { id: s.id, names: s.names || {}, conceptCount: 0 };
-    if (s.children && s.children.length > 0) {
-      node.children = s.children.map(c => this.mapManifestSection(c));
-    }
-    return node;
+      conceptCount: dn.conceptCount,
+      children: dn.children,
+    });
   }
 }

package/src/components/AppSidebar.vue

@@ -8,6 +8,8 @@ import { useSiteConfig } from '../config/use-site-config';
 import NavIcon from './NavIcon.vue';
 import { useI18n, locale } from '../i18n';
 import type { SectionNode } from '../adapters/types';
+import { toSectionTree } from '../utils/section-tree';
+import { formatSectionLabel, sectionName as sectionLocalized } from '../utils/section-display';
 
 const OntologySidebarSection = defineAsyncComponent(() => import('./OntologySidebarSection.vue'));
 
@@ -174,26 +176,15 @@ function toggleSectionNode(id: string) {
 function getDatasetSections(dsId: string): SectionNode[] {
   const m = store.manifests.get(dsId);
   if (!m?.sections?.length) return [];
-  return m.sections.map(s => enrichSectionNode(s));
-}
-
-function enrichSectionNode(s: { id: string; names: Record<string, string>; children?: any[] }): SectionNode {
-  const node: SectionNode = { id: s.id, names: s.names || {}, conceptCount: 0 };
-  if (s.children && s.children.length > 0) {
-    node.children = s.children.map(c => enrichSectionNode(c));
-  }
-  return node;
+  return toSectionTree(m.sections);
 }
 
 function sectionLabel(section: SectionNode): string {
-  const name = section.names[locale.value] || section.names.eng || '';
-  return name || section.id;
+  return sectionLocalized(section, locale.value);
 }
 
 function sectionDisplay(section: SectionNode): string {
-  const name = sectionLabel(section);
-  if (name && name !== section.id) return `${section.id} — ${name}`;
-  return name || section.id;
+  return formatSectionLabel(section, locale.value);
 }
 
 function goToSection(dsId: string, sectionId: string) {

package/src/utils/section-display.ts

@@ -0,0 +1,21 @@
+import type { SectionNode } from '../adapters/types';
+
+interface SectionLike {
+  id: string;
+  names?: Record<string, string>;
+}
+
+export function sectionName(section: SectionLike, lang: string): string {
+  const names = section.names || {};
+  return names[lang] || names.eng || section.id;
+}
+
+export function formatSectionLabel(section: SectionLike, lang: string): string {
+  const names = section.names || {};
+  const name = names[lang] || names.eng || '';
+  const bare = section.id;
+  if (!name) return bare;
+  if (name === bare) return name;
+  if (name === bare.replace(/_/g, ' ')) return name;
+  return `${bare} — ${name}`;
+}

package/src/utils/section-tree.ts

@@ -0,0 +1,53 @@
+import type { SectionNode } from '../adapters/types';
+
+interface SectionLike {
+  id?: string;
+  names?: Record<string, string>;
+  conceptCount?: number;
+  children?: SectionLike[];
+}
+
+export function findSectionNode(
+  tree: readonly SectionNode[],
+  id: string,
+): SectionNode | null {
+  for (const node of tree) {
+    if (node.id === id) return node;
+    if (node.children) {
+      const found = findSectionNode(node.children, id);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+export function collectDescendantSectionIds(
+  tree: readonly SectionNode[],
+  rootId: string,
+): Set<string> {
+  const root = findSectionNode(tree, rootId);
+  if (!root) return new Set();
+  const ids = new Set<string>();
+  const walk = (n: SectionNode) => {
+    ids.add(n.id);
+    n.children?.forEach(walk);
+  };
+  walk(root);
+  return ids;
+}
+
+export function toSectionNode(s: SectionLike): SectionNode {
+  const node: SectionNode = {
+    id: s.id ?? '',
+    names: s.names || {},
+    conceptCount: s.conceptCount ?? 0,
+  };
+  if (s.children && s.children.length > 0) {
+    node.children = s.children.map(toSectionNode);
+  }
+  return node;
+}
+
+export function toSectionTree(items: readonly SectionLike[]): SectionNode[] {
+  return items.map(toSectionNode);
+}

package/src/views/DatasetView.vue

@@ -9,7 +9,9 @@ import { langName, langLabel, sortLanguages } from '../utils/lang';
 import ConceptCard from '../components/ConceptCard.vue';
 import { useI18n, locale } from '../i18n';
 import { useSiteConfig } from '../config/use-site-config';
-import type { SectionNode } from '../adapters/types';
+import type { SectionNode, ConceptSummary } from '../adapters/types';
+import { collectDescendantSectionIds, findSectionNode } from '../utils/section-tree';
+import { formatSectionLabel } from '../utils/section-display';
 
 const props = defineProps<{ registerId: string }>();
 
@@ -30,10 +32,17 @@ const chunkLoading = ref(false);
 // Background chunk preloading via requestIdleCallback
 let idlePreloadHandle: ReturnType<typeof requestIdleCallback> | ReturnType<typeof setTimeout> | null = null;
 
-watch(adapter, (a) => {
-  if (idlePreloadHandle !== null) return;
+watch(adapter, async (a) => {
   if (!a || !a.index) return;
 
+  // If a section filter is active, load all chunks immediately (not idle)
+  if (sectionQuery.value && !allChunksLoaded.value) {
+    await ensureAllChunksForFilter(true);
+    return;
+  }
+
+  if (idlePreloadHandle !== null) return;
+
   const schedule: (cb: () => void) => number = typeof requestIdleCallback !== 'undefined'
     ? (cb) => requestIdleCallback(cb, { timeout: 2000 })
     : (cb) => window.setTimeout(cb, 0);
@@ -87,6 +96,7 @@ const allChunksLoaded = ref(false);
 const selectedLang = ref<string | null>(null);
 const viewMode = ref<'systematic' | 'alphabetical'>('systematic');
 const sectionQuery = computed(() => (route.query.section as string) || null);
+const page = ref(1);
 
 interface LangOption {
   code: string;
@@ -124,10 +134,14 @@ onUnmounted(() => window.removeEventListener('keydown', onGlobalKeydown));
 
 async function ensureAllChunksForFilter(needsLoad: boolean) {
   page.value = 1;
-  if (needsLoad && !allChunksLoaded.value && adapter.value) {
-    chunkLoading.value = true;
-    await adapter.value.ensureAllChunksLoaded();
+  if (!needsLoad || allChunksLoaded.value) return;
+  const a = adapter.value;
+  if (!a?.index) return;
+  chunkLoading.value = true;
+  try {
+    await a.ensureAllChunksLoaded();
     allChunksLoaded.value = true;
+  } finally {
     chunkLoading.value = false;
   }
 }
@@ -138,7 +152,7 @@ watch(filter, async (q) => {
 
 watch(sectionQuery, async () => {
   await ensureAllChunksForFilter(!!sectionQuery.value);
-});
+}, { immediate: true });
 
 watch(selectedLang, async (lang) => {
   await ensureAllChunksForFilter(!!lang);
@@ -155,20 +169,34 @@ const filtered = computed(() => {
   const q = filter.value.trim().toLowerCase();
   const lang = selectedLang.value;
   const sec = sectionQuery.value;
+  const closure = sectionClosure.value;
   return loadedConcepts.value.filter(c => {
     if (lang && !(lang in (c.designations ?? {}))) return false;
-    if (sec && !conceptMatchesSection(c, sec)) return false;
+    if (sec && !conceptMatchesSection(c, sec.replace(/^section-/, ''), closure)) return false;
     if (!q) return true;
     return (c.eng || '').toLowerCase().includes(q) || c.id.toLowerCase().includes(q);
   });
 });
 
-function conceptMatchesSection(concept: import('../adapters/types').ConceptSummary, sectionPrefix: string): boolean {
-  const prefix = sectionPrefix.replace(/^section-/, '');
-  // Check explicit groups (e.g. G18 sections derived from domains)
-  if (concept.groups?.length && concept.groups.includes(prefix)) return true;
-  // Check concept ID prefix matching (e.g. VIML/VIM numbered sections)
-  return concept.id.startsWith(prefix + '.') || concept.id.startsWith(prefix + '-');
+const sectionClosure = computed<Set<string> | null>(() => {
+  const q = sectionQuery.value;
+  if (!q) return null;
+  const prefix = q.replace(/^section-/, '');
+  const tree = getSections();
+  const closure = collectDescendantSectionIds(tree, prefix);
+  return closure.size > 0 ? closure : null;
+});
+
+function conceptMatchesSection(concept: ConceptSummary, sectionId: string, closure: Set<string> | null): boolean {
+  if (closure) {
+    if (concept.groups?.some(g => closure.has(g))) return true;
+    if (closure.has(sectionId)) {
+      return concept.id.startsWith(sectionId + '.') || concept.id.startsWith(sectionId + '-');
+    }
+    return false;
+  }
+  if (concept.groups?.length && concept.groups.includes(sectionId)) return true;
+  return concept.id.startsWith(sectionId + '.') || concept.id.startsWith(sectionId + '-');
 }
 
 function getSections(): SectionNode[] {
@@ -176,18 +204,12 @@ function getSections(): SectionNode[] {
   return adapter.value.getSectionTree();
 }
 
-function sectionName(section: SectionNode): string {
-  return section.names[locale.value] || section.names.eng || section.id;
-}
-
 const sectionDisplayName = computed(() => {
   if (!sectionQuery.value) return '';
   const prefix = sectionQuery.value.replace(/^section-/, '');
-  const sections = getSections();
-  const found = sections.find(s => s.id === prefix);
+  const found = findSectionNode(getSections(), prefix);
   if (!found) return prefix;
-  const name = sectionName(found);
-  return name !== found.id ? `${found.id} — ${name}` : name;
+  return formatSectionLabel(found, locale.value);
 });
 
 // Alphabetical grouping
@@ -202,7 +224,6 @@ const alphabetGroups = computed(() => {
   return [...groups.entries()].sort((a, b) => a[0].localeCompare(b[0]));
 });
 
-const page = ref(1);
 const perPage = 50;
 
 // Check if the current page range is loaded in the index