From 358716a195e7c2e55692c4132564ac805ddc0468 Mon Sep 17 00:00:00 2001
From: Ronald Tse <ronald.tse@ribose.com>
Date: Fri, 15 May 2026 07:12:59 +0800
Subject: [PATCH 1/2] feat: add domain edge support and improve graph
 visualization

- Add domain extraction to build-edges.js with domain-nodes.json output
- Add extractDomainEdges to DatasetAdapter for runtime domain detection
- Update GraphEngine with domain node type and per-lang edge dedup
- Update GraphPanel with domain node rendering (rounded rect, purple)
- Add domain display section to ConceptDetail.vue
- Update vocabulary store to load domain nodes alongside edges
- Add EDGE_TYPE constant and GraphEdge.lang field to types
- Update test helpers and add domain/edge tests
---
 scripts/build-edges.js                | 85 +++++++++++++++++++++---
 src/__tests__/dataset-adapter.test.ts | 93 ++++++++++++++++++++++++++
 src/__tests__/graph.test.ts           | 62 ++++++++++++++++++
 src/__tests__/test-helpers.ts         |  2 +
 src/adapters/DatasetAdapter.ts        | 42 +++++++++++-
 src/adapters/types.ts                 | 44 +++++++++++--
 src/components/ConceptDetail.vue      | 44 ++++++++++++-
 src/components/GraphPanel.vue         | 94 +++++++++++++++++++++------
 src/graph/GraphEngine.ts              | 11 ++--
 src/stores/vocabulary.ts              | 35 +++++++++-
 10 files changed, 466 insertions(+), 46 deletions(-)

diff --git a/scripts/build-edges.js b/scripts/build-edges.js
index db84608..711535b 100644
--- a/scripts/build-edges.js
+++ b/scripts/build-edges.js
@@ -1,7 +1,7 @@
 /**
- * Pre-computes cross-reference edges for each dataset.
- * Reads all concept JSON files, extracts structured and inline references,
- * and writes edges.json for each dataset.
+ * Pre-computes cross-reference and domain edges for each dataset.
+ * Reads all concept JSON files, extracts structured references and
+ * authoritative sources (domains), and writes edges.json + domain-nodes.json.
  *
  * Usage: node scripts/build-edges.js
  */
@@ -13,12 +13,18 @@ const __dirname = dirname(fileURLToPath(import.meta.url));
 const ROOT = process.cwd();
 const DATA_DIR = join(ROOT, 'public', 'data');
 
-function extractEdgesFromConcept(concept, registerId) {
+// --- Normalization ---
+
+function slugify(text) {
+  return text.toLowerCase().replace(/[^\w\s-]/g, '').replace(/[\s/]+/g, '-');
+}
+
+// --- Extractors (open/closed: add new extractors to EXTRACTORS array) ---
+
+function extractReferences(concept, registerId) {
   const edges = [];
   const sourceUri = concept['@id'];
-
-  for (const [_lang, lc] of Object.entries(concept['gl:localizedConcept'] || {})) {
-    // Structured cross-references (gl:references array, pre-computed during data generation)
+  for (const [lang, lc] of Object.entries(concept['gl:localizedConcept'] || {})) {
     if (lc['gl:references']) {
       for (const ref of lc['gl:references']) {
         if (ref['@id'] && ref['@id'] !== sourceUri) {
@@ -28,15 +34,42 @@ function extractEdgesFromConcept(concept, registerId) {
             type: 'references',
             label: ref['gl:term'] || undefined,
             register: registerId,
+            lang,
           });
         }
       }
     }
   }
+  return edges;
+}
 
+function extractDomains(concept, registerId) {
+  const edges = [];
+  const sourceUri = concept['@id'];
+  for (const [lang, lc] of Object.entries(concept['gl:localizedConcept'] || {})) {
+    const domain = lc['gl:domain'];
+    if (domain) {
+      edges.push({
+        source: sourceUri,
+        target: `https://glossarist.org/${registerId}/domain/${slugify(domain)}`,
+        type: 'domain',
+        label: domain,
+        register: registerId,
+        lang,
+      });
+    }
+  }
   return edges;
 }
 
+const EXTRACTORS = [extractReferences, extractDomains];
+
+function extractAllEdges(concept, registerId) {
+  return EXTRACTORS.flatMap(fn => fn(concept, registerId));
+}
+
+// --- Build ---
+
 function buildEdgesForDataset(datasetDir, registerId) {
   const conceptsDir = join(datasetDir, 'concepts');
   if (!existsSync(conceptsDir)) {
@@ -48,13 +81,20 @@ function buildEdgesForDataset(datasetDir, registerId) {
   console.log(`  Processing ${files.length} concepts...`);
 
   const allEdges = [];
+  const domainConceptCount = new Map();
   let processed = 0;
 
   for (const file of files) {
     try {
       const data = JSON.parse(readFileSync(join(conceptsDir, file), 'utf-8'));
-      const edges = extractEdgesFromConcept(data, registerId);
+      const edges = extractAllEdges(data, registerId);
       allEdges.push(...edges);
+
+      for (const edge of edges) {
+        if (edge.type === 'domain') {
+          domainConceptCount.set(edge.target, (domainConceptCount.get(edge.target) || 0) + 1);
+        }
+      }
     } catch (e) {
       console.error(`  Error processing ${file}: ${e.message}`);
     }
@@ -64,11 +104,11 @@ function buildEdgesForDataset(datasetDir, registerId) {
     }
   }
 
-  // Deduplicate edges by source+target pair
+  // Deduplicate edges by source+target+type+lang
   const seen = new Set();
   const deduped = [];
   for (const edge of allEdges) {
-    const key = `${edge.source}→${edge.target}`;
+    const key = `${edge.source}→${edge.target}→${edge.type}→${edge.lang || ''}`;
     if (!seen.has(key)) {
       seen.add(key);
       deduped.push(edge);
@@ -84,6 +124,31 @@ function buildEdgesForDataset(datasetDir, registerId) {
   const outputPath = join(datasetDir, 'edges.json');
   writeFileSync(outputPath, JSON.stringify(output, null, 2));
   console.log(`  Written ${deduped.length} edges to edges.json (${(JSON.stringify(output).length / 1024).toFixed(1)} KB)`);
+
+  // Build domain-nodes.json
+  const domainEdgeMap = new Map();
+  for (const edge of deduped) {
+    if (edge.type === 'domain') {
+      const existing = domainEdgeMap.get(edge.target);
+      if (existing) {
+        existing.labels.add(edge.label);
+      } else {
+        domainEdgeMap.set(edge.target, { uri: edge.target, labels: new Set([edge.label]), registerId });
+      }
+    }
+  }
+
+  const domainNodes = [...domainEdgeMap.values()].map(d => ({
+    uri: d.uri,
+    label: [...d.labels][0],
+    registerId: d.registerId,
+    conceptCount: domainConceptCount.get(d.uri) || 0,
+  })).sort((a, b) => b.conceptCount - a.conceptCount);
+
+  const domainOutput = { registerId, domainNodes };
+  const domainPath = join(datasetDir, 'domain-nodes.json');
+  writeFileSync(domainPath, JSON.stringify(domainOutput, null, 2));
+  console.log(`  Written ${domainNodes.length} domain nodes to domain-nodes.json`);
 }
 
 // Main
diff --git a/src/__tests__/dataset-adapter.test.ts b/src/__tests__/dataset-adapter.test.ts
index a0b8323..3e7e8c7 100644
--- a/src/__tests__/dataset-adapter.test.ts
+++ b/src/__tests__/dataset-adapter.test.ts
@@ -218,6 +218,24 @@ describe('DatasetAdapter', () => {
       expect(edges[0].label).toBe('functional');
     });
 
+    it('tags reference edges with language', () => {
+      const concept = {
+        '@id': 'https://glossarist.org/test/concept/1',
+        'gl:localizedConcept': {
+          eng: { 'gl:references': [
+            { '@id': 'https://glossarist.org/test/concept/2', 'gl:term': 'other' },
+          ]},
+          fra: { 'gl:references': [
+            { '@id': 'https://glossarist.org/test/concept/3', 'gl:term': 'autre' },
+          ]},
+        },
+      };
+      const edges = adapter.extractEdges(concept as any);
+      expect(edges.length).toBe(2);
+      expect(edges.find(e => e.lang === 'eng')?.target).toContain('/concept/2');
+      expect(edges.find(e => e.lang === 'fra')?.target).toContain('/concept/3');
+    });
+
     it('skips self-references', () => {
       const concept = {
         '@id': 'https://glossarist.org/test/concept/102-01-01',
@@ -318,6 +336,81 @@ describe('DatasetAdapter', () => {
     });
   });
 
+  describe('extractDomainEdges', () => {
+    it('extracts domain edges from gl:domain field per language', () => {
+      const concept = {
+        '@id': 'https://glossarist.org/test/concept/3',
+        'gl:localizedConcept': {
+          eng: { 'gl:domain': 'geometry' },
+          fra: { 'gl:domain': 'géométrie' },
+        },
+      };
+      const edges = adapter.extractDomainEdges(concept as any);
+      expect(edges.length).toBe(2);
+      expect(edges.every(e => e.type === 'domain')).toBe(true);
+      expect(edges.find(e => e.lang === 'eng')?.target).toContain('/domain/geometry');
+      expect(edges.find(e => e.lang === 'fra')?.target).toContain('/domain/gomtrie');
+      expect(edges.find(e => e.lang === 'eng')?.label).toBe('geometry');
+      expect(edges.find(e => e.lang === 'fra')?.label).toBe('géométrie');
+    });
+
+    it('handles same domain across languages', () => {
+      const concept = {
+        '@id': 'https://glossarist.org/test/concept/1',
+        'gl:localizedConcept': {
+          eng: { 'gl:domain': 'metadata' },
+          fra: { 'gl:domain': 'metadata' },
+        },
+      };
+      const edges = adapter.extractDomainEdges(concept as any);
+      expect(edges.length).toBe(2);
+      expect(edges[0].target).toBe(edges[1].target);
+      expect(edges[0].target).toContain('/domain/metadata');
+    });
+
+    it('skips concepts without gl:domain', () => {
+      const concept = {
+        '@id': 'https://glossarist.org/test/concept/1',
+        'gl:localizedConcept': { eng: {} },
+      };
+      const edges = adapter.extractDomainEdges(concept as any);
+      expect(edges.length).toBe(0);
+    });
+
+    it('handles empty localizedConcept', () => {
+      const concept = {
+        '@id': 'https://glossarist.org/test/concept/1',
+        'gl:localizedConcept': {},
+      };
+      const edges = adapter.extractDomainEdges(concept as any);
+      expect(edges.length).toBe(0);
+    });
+  });
+
+  describe('loadDomainNodes', () => {
+    it('loads domain nodes from domain-nodes.json', async () => {
+      mockFetch.mockReturnValue(mockJsonResponse({
+        registerId: 'test',
+        domainNodes: [
+          { uri: 'https://glossarist.org/test/domain/iso-19107', label: 'ISO 19107', registerId: 'test', conceptCount: 147 },
+        ],
+      }));
+      const nodes = await adapter.loadDomainNodes();
+      expect(nodes.length).toBe(1);
+      expect(nodes[0].nodeType).toBe('domain');
+      expect(nodes[0].status).toBe('domain');
+      expect(nodes[0].loaded).toBe(true);
+      expect(nodes[0].designations.eng).toBe('ISO 19107');
+      expect(mockFetch).toHaveBeenCalledWith('/data/test/domain-nodes.json');
+    });
+
+    it('returns empty array on fetch failure', async () => {
+      mockFetch.mockReturnValue(Promise.resolve({ ok: false, status: 404 } as Response));
+      const nodes = await adapter.loadDomainNodes();
+      expect(nodes).toEqual([]);
+    });
+  });
+
   describe('getLanguages', () => {
     it('returns languages from manifest', async () => {
       const manifest = {
diff --git a/src/__tests__/graph.test.ts b/src/__tests__/graph.test.ts
index fd9f832..59bb19f 100644
--- a/src/__tests__/graph.test.ts
+++ b/src/__tests__/graph.test.ts
@@ -91,6 +91,37 @@ describe('GraphEngine', () => {
       expect(g.edgeCount).toBe(1);
     });
 
+    it('keeps separate edges for different languages', () => {
+      const g = new GraphEngine();
+      g.addEdge({ source: 'uri:a', target: 'uri:b', type: 'references', register: 'test', lang: 'eng' });
+      g.addEdge({ source: 'uri:a', target: 'uri:b', type: 'references', register: 'test', lang: 'fra' });
+      expect(g.edgeCount).toBe(2);
+    });
+
+    it('deduplicates edges with same source+target+type+lang', () => {
+      const g = new GraphEngine();
+      g.addEdge({ source: 'uri:a', target: 'uri:b', type: 'references', register: 'test', lang: 'eng' });
+      g.addEdge({ source: 'uri:a', target: 'uri:b', type: 'references', register: 'test', lang: 'eng' });
+      expect(g.edgeCount).toBe(1);
+    });
+
+    it('creates domain stub with correct fields', () => {
+      const g = new GraphEngine();
+      g.addEdge({
+        source: 'https://glossarist.org/isotc211/concept/3',
+        target: 'https://glossarist.org/isotc211/domain/iso-19105',
+        type: 'domain',
+        label: 'ISO 19105',
+        register: 'isotc211',
+        lang: 'eng',
+      });
+      const domainNode = g.getNode('https://glossarist.org/isotc211/domain/iso-19105');
+      expect(domainNode?.register).toBe('isotc211');
+      expect(domainNode?.nodeType).toBe('domain');
+      expect(domainNode?.status).toBe('domain');
+      expect(domainNode?.loaded).toBe(false);
+    });
+
     it('extracts register from URI for stub nodes', () => {
       const g = new GraphEngine();
       g.addEdge({
@@ -172,6 +203,37 @@ describe('GraphEngine', () => {
       const sub = g.getSubgraph('uri:a', 5);
       expect(sub.nodes.length).toBe(2);
     });
+
+    it('does not traverse past domain nodes in getSubgraph', () => {
+      const g = new GraphEngine();
+      g.addNode(makeNode('https://glossarist.org/test/concept/a', 'a'));
+      g.addNode(makeNode('https://glossarist.org/test/concept/b', 'b'));
+      g.addNode(makeNode('https://glossarist.org/test/concept/c', 'c'));
+      g.addNode(makeNode('https://glossarist.org/test/concept/d', 'd'));
+
+      g.addEdge({
+        source: 'https://glossarist.org/test/concept/a',
+        target: 'https://glossarist.org/test/domain/iso-12345',
+        type: 'domain', register: 'test', label: 'ISO 12345', lang: 'eng',
+      });
+      g.addEdge({
+        source: 'https://glossarist.org/test/concept/b',
+        target: 'https://glossarist.org/test/domain/iso-12345',
+        type: 'domain', register: 'test', label: 'ISO 12345', lang: 'eng',
+      });
+      g.addEdge({
+        source: 'https://glossarist.org/test/concept/c',
+        target: 'https://glossarist.org/test/domain/iso-12345',
+        type: 'domain', register: 'test', label: 'ISO 12345', lang: 'eng',
+      });
+
+      const sub = g.getSubgraph('https://glossarist.org/test/concept/a', 3);
+      const nodeUris = sub.nodes.map(n => n.uri);
+      expect(nodeUris).toContain('https://glossarist.org/test/concept/a');
+      expect(nodeUris).toContain('https://glossarist.org/test/domain/iso-12345');
+      expect(nodeUris).not.toContain('https://glossarist.org/test/concept/b');
+      expect(nodeUris).not.toContain('https://glossarist.org/test/concept/c');
+    });
   });
 
   describe('getAllNodes', () => {
diff --git a/src/__tests__/test-helpers.ts b/src/__tests__/test-helpers.ts
index 3b5341e..1553f9f 100644
--- a/src/__tests__/test-helpers.ts
+++ b/src/__tests__/test-helpers.ts
@@ -43,6 +43,7 @@ export interface AdapterStubOptions {
   ensureChunksForRange?: () => Promise<void>;
   ensureAllChunksLoaded?: () => Promise<void>;
   extractEdges?: () => any[];
+  extractDomainEdges?: () => any[];
   getIndexEntry?: () => any;
 }
 
@@ -61,6 +62,7 @@ export function makeAdapterStub(options: AdapterStubOptions = {}): any {
     ensureChunksForRange: options.ensureChunksForRange ?? (() => Promise.resolve()),
     ensureAllChunksLoaded: options.ensureAllChunksLoaded ?? (() => Promise.resolve()),
     extractEdges: options.extractEdges ?? (() => []),
+    extractDomainEdges: options.extractDomainEdges ?? (() => []),
     getIndexEntry: options.getIndexEntry ?? (() => null),
   };
 }
diff --git a/src/adapters/DatasetAdapter.ts b/src/adapters/DatasetAdapter.ts
index 352b2fd..d4eedd1 100644
--- a/src/adapters/DatasetAdapter.ts
+++ b/src/adapters/DatasetAdapter.ts
@@ -6,9 +6,14 @@ import type {
   ConceptDocument,
   SearchHit,
   GraphEdge,
+  GraphNode,
 } from './types';
 import { UriRouter } from './UriRouter';
 
+function slugify(text: string): string {
+  return text.toLowerCase().replace(/[^\w\s-]/g, '').replace(/[\s/]+/g, '-');
+}
+
 export class DatasetAdapter {
   private positionIndex = new Map<string, number>();
   readonly registerId: string;
@@ -241,7 +246,7 @@ export class DatasetAdapter {
     const edges: GraphEdge[] = [];
     const sourceUri = concept['@id'];
 
-    for (const [_lang, lc] of Object.entries(concept['gl:localizedConcept'] || {})) {
+    for (const [lang, lc] of Object.entries(concept['gl:localizedConcept'] || {})) {
       if (lc['gl:references']) {
         for (const ref of lc['gl:references']) {
           if (ref['@id'] && ref['@id'] !== sourceUri) {
@@ -252,6 +257,7 @@ export class DatasetAdapter {
               type: 'references',
               label: ref['gl:term'],
               register: parsed?.registerId ?? this.registerId,
+              lang,
             });
           }
         }
@@ -261,6 +267,40 @@ export class DatasetAdapter {
     return edges;
   }
 
+  extractDomainEdges(concept: ConceptDocument): GraphEdge[] {
+    const edges: GraphEdge[] = [];
+    const sourceUri = concept['@id'];
+    for (const [lang, lc] of Object.entries(concept['gl:localizedConcept'] || {})) {
+      const domain = lc['gl:domain'];
+      if (domain) {
+        edges.push({
+          source: sourceUri,
+          target: `https://glossarist.org/${this.registerId}/domain/${slugify(domain)}`,
+          type: 'domain',
+          label: domain,
+          register: this.registerId,
+          lang,
+        });
+      }
+    }
+    return edges;
+  }
+
+  async loadDomainNodes(): Promise<GraphNode[]> {
+    const resp = await fetch(`${this.baseUrl}/domain-nodes.json`);
+    if (!resp.ok) return [];
+    const data = await resp.json();
+    return (data.domainNodes || []).map((dn: any) => ({
+      uri: dn.uri,
+      register: dn.registerId,
+      conceptId: dn.uri.split('/domain/')[1] || '',
+      designations: { eng: dn.label },
+      status: 'domain',
+      loaded: true,
+      nodeType: 'domain' as const,
+    }));
+  }
+
   async loadEdgeIndex(): Promise<GraphEdge[]> {
     const resp = await fetch(`${this.baseUrl}/edges.json`);
     if (!resp.ok) return [];
diff --git a/src/adapters/types.ts b/src/adapters/types.ts
index 53bcafa..89f05fb 100644
--- a/src/adapters/types.ts
+++ b/src/adapters/types.ts
@@ -63,12 +63,17 @@ export interface LocalizedConcept {
   '@type': string;
   'gl:languageCode': string;
   'gl:entryStatus'?: string;
+  'gl:classification'?: string;
+  'gl:reviewType'?: string;
+  'gl:script'?: string;
+  'gl:system'?: string;
   'gl:designation'?: Designation[];
   'gl:definition'?: DetailedDefinition[];
   'gl:notes'?: DetailedDefinition[];
   'gl:examples'?: DetailedDefinition[];
   'gl:source'?: ConceptSource[];
-  'gl:release'?: number;
+  'gl:release'?: string;
+  'gl:lineageSourceSimilarity'?: number;
   'gl:reviewDate'?: string;
   'gl:reviewDecisionDate'?: string;
   'gl:reviewDecisionEvent'?: string;
@@ -77,15 +82,37 @@ export interface LocalizedConcept {
   'gl:reviewDecisionNotes'?: string;
   'gl:dates'?: ConceptDate[];
   'gl:references'?: CrossReference[];
+  'gl:domain'?: string;
+}
+
+export interface GrammarInfo {
+  'gl:gender'?: string;
+  'gl:number'?: string;
+  'gl:noun'?: boolean;
+  'gl:verb'?: boolean;
+  'gl:adj'?: boolean;
+  'gl:adverb'?: boolean;
+  'gl:preposition'?: boolean;
+  'gl:participle'?: boolean;
 }
 
 export interface Designation {
   '@type': string;
   'gl:normativeStatus': string;
   'gl:term': string;
-  'gl:gender'?: string;
-  'gl:plurality'?: string;
+  'gl:grammarInfo'?: GrammarInfo[];
   'gl:international'?: boolean;
+  'gl:termType'?: string;
+  'gl:absent'?: boolean;
+  'gl:geographicalArea'?: string;
+  'gl:prefix'?: string;
+  'gl:usageInfo'?: string;
+  'gl:fieldOfApplication'?: string;
+  'gl:acronym'?: boolean;
+  'gl:initialism'?: boolean;
+  'gl:truncation'?: boolean;
+  'gl:text'?: string;
+  'gl:image'?: string;
 }
 
 export interface DetailedDefinition {
@@ -121,12 +148,18 @@ export interface DatasetRegistry {
   manifestUrl: string;
 }
 
+export const EDGE_TYPE = {
+  REFERENCES: 'references',
+  DOMAIN: 'domain',
+} as const;
+
 export interface GraphEdge {
-  source: string; // concept URI
-  target: string; // concept URI
+  source: string;
+  target: string;
   type: string;
   label?: string;
   register: string;
+  lang?: string;
 }
 
 export interface GraphNode {
@@ -136,6 +169,7 @@ export interface GraphNode {
   designations: Record<string, string>;
   status: string;
   loaded: boolean;
+  nodeType?: 'concept' | 'domain';
 }
 
 export interface SearchHit {
diff --git a/src/components/ConceptDetail.vue b/src/components/ConceptDetail.vue
index c9bd242..20bac54 100644
--- a/src/components/ConceptDetail.vue
+++ b/src/components/ConceptDetail.vue
@@ -277,6 +277,27 @@ function plainTruncate(html: string, max: number = 120): string {
   const text = cleanContent(html).replace(/<[^>]+>/g, '').replace(/\s+/g, ' ').trim();
   return text.length <= max ? text : text.slice(0, max).trimEnd() + '\u2026';
 }
+
+function slugify(text: string): string {
+  return text.toLowerCase().replace(/[^\w\s-]/g, '').replace(/[\s/]+/g, '-');
+}
+
+const conceptDomains = computed(() => {
+  const domainMap = new Map<string, { slug: string; label: string; langs: string[] }>();
+  for (const [lang, lc] of Object.entries(props.concept['gl:localizedConcept'] || {})) {
+    const domain = lc['gl:domain'];
+    if (domain) {
+      const slug = slugify(domain);
+      const existing = domainMap.get(slug);
+      if (existing) {
+        if (!existing.langs.includes(lang)) existing.langs.push(lang);
+      } else {
+        domainMap.set(slug, { slug, label: domain, langs: [lang] });
+      }
+    }
+  }
+  return [...domainMap.values()].sort((a, b) => b.langs.length - a.langs.length);
+});
 </script>
 
 <template>
@@ -434,11 +455,16 @@ function plainTruncate(html: string, max: number = 120): string {
               <div v-if="lc.sources.length" class="space-y-2">
                 <div v-for="(src, i) in lc.sources" :key="i" class="text-sm">
                   <div class="flex items-center gap-1.5 flex-wrap mb-1">
-                    <span v-if="src['gl:sourceType']" class="badge badge-blue text-[10px]">{{ src['gl:sourceType'] }}</span>
+                    <span v-if="src['gl:sourceType']" class="badge text-[10px]"
+                      :class="src['gl:sourceType'] === 'authoritative' ? 'badge-purple' : 'badge-blue'">
+                      {{ src['gl:sourceType'] }}
+                    </span>
                     <span v-if="src['gl:sourceStatus']" class="badge badge-gray text-[10px]">{{ src['gl:sourceStatus'] }}</span>
                   </div>
                   <div class="text-ink-700">
-                    <span v-if="src['gl:origin']?.['gl:ref']" class="font-medium">{{ src['gl:origin']['gl:ref'] }}</span>
+                    <span v-if="src['gl:origin']?.['gl:ref']" class="font-medium"
+                      :class="src['gl:sourceType'] === 'authoritative' ? 'text-ink-900' : ''"
+                    >{{ src['gl:origin']['gl:ref'] }}</span>
                     <span v-if="src['gl:origin']?.['gl:clause']">, {{ src['gl:origin']['gl:clause'] }}</span>
                     <a v-if="src['gl:origin']?.['gl:link']" :href="src['gl:origin']['gl:link']" target="_blank" class="concept-link ml-1">[link]</a>
                   </div>
@@ -492,6 +518,20 @@ function plainTruncate(html: string, max: number = 120): string {
             </div>
           </div>
 
+          <!-- Domains -->
+          <div v-if="conceptDomains.length" class="card p-5">
+            <div class="section-label">Domains</div>
+            <div class="space-y-1 mt-3">
+              <div v-for="domain in conceptDomains" :key="domain.slug" class="flex items-center gap-1.5 text-sm">
+                <span class="w-2 h-1.5 rounded inline-block flex-shrink-0" style="background: #8b5cf6;"></span>
+                <span class="font-medium text-ink-700">{{ domain.label }}</span>
+                <span v-if="domain.langs.length > 1" class="text-[10px] text-ink-300 ml-1">
+                  ({{ domain.langs.map(l => l.toUpperCase()).join(', ') }})
+                </span>
+              </div>
+            </div>
+          </div>
+
           <!-- Language quick-jump -->
           <div class="card p-5">
             <div class="section-label">Languages ({{ languages.length }})</div>
diff --git a/src/components/GraphPanel.vue b/src/components/GraphPanel.vue
index b876621..c804cda 100644
--- a/src/components/GraphPanel.vue
+++ b/src/components/GraphPanel.vue
@@ -3,6 +3,7 @@ import { ref, computed, watch, onMounted, onUnmounted, nextTick, reactive } from
 import type { GraphNode, GraphEdge } from '../adapters/types';
 import type { SimulationNodeDatum, SimulationLinkDatum } from 'd3';
 import { useDsStyle } from '../utils/dataset-style';
+import { useUiStore } from '../stores/ui';
 import {
   forceSimulation,
   forceLink,
@@ -51,6 +52,7 @@ watch(() => props.registers, (regs) => {
 });
 
 const { getColor } = useDsStyle();
+const uiStore = useUiStore();
 
 const STUB_COLOR = '#b8b9cc'; // ink-200
 const HIGHLIGHT_COLOR = '#1a1b2e'; // ink-800
@@ -81,7 +83,11 @@ const visibleNodeUris = computed(() => {
 
 const visibleEdges = computed(() => {
   const uris = visibleNodeUris.value;
-  return props.edges.filter(e => uris.has(e.source) && uris.has(e.target));
+  const lang = uiStore.selectedLang;
+  return props.edges.filter(e =>
+    uris.has(e.source) && uris.has(e.target) &&
+    (!lang || !e.lang || e.lang === lang)
+  );
 });
 
 const nodeCount = computed(() => visibleNodes.value.length);
@@ -110,6 +116,7 @@ interface SimNode extends SimulationNodeDatum {
   conceptId: string;
   designation: string;
   loaded: boolean;
+  nodeType?: 'concept' | 'domain';
 }
 
 interface SimLink extends SimulationLinkDatum<SimNode> {
@@ -117,6 +124,7 @@ interface SimLink extends SimulationLinkDatum<SimNode> {
   target: SimNode | string;
   type: string;
   label?: string;
+  lang?: string;
 }
 
 let simulation: ReturnType<typeof forceSimulation<SimNode>> | null = null;
@@ -172,6 +180,7 @@ function buildSimulation(width: number, height: number) {
     conceptId: n.conceptId,
     designation: Object.values(n.designations)[0] || n.conceptId,
     loaded: n.loaded,
+    nodeType: n.nodeType,
     x: width / 2 + (Math.random() - 0.5) * 200,
     y: height / 2 + (Math.random() - 0.5) * 200,
   }));
@@ -185,6 +194,7 @@ function buildSimulation(width: number, height: number) {
       target: e.target,
       type: e.type,
       label: e.label,
+      lang: e.lang,
     }));
 
   g.selectAll('*').remove();
@@ -194,9 +204,10 @@ function buildSimulation(width: number, height: number) {
     .selectAll('line')
     .data(simLinks)
     .join('line')
-    .attr('stroke', '#dddde6')
-    .attr('stroke-width', 0.8)
-    .attr('marker-end', 'url(#arrowhead)');
+    .attr('stroke', l => l.type === 'domain' ? '#c4b5fd' : '#dddde6')
+    .attr('stroke-width', l => l.type === 'domain' ? 0.6 : 0.8)
+    .attr('stroke-dasharray', l => l.type === 'domain' ? '3,2' : 'none')
+    .attr('marker-end', l => l.type === 'domain' ? null : 'url(#arrowhead)');
 
   const nodeSel = g.append('g')
     .attr('class', 'nodes')
@@ -206,13 +217,38 @@ function buildSimulation(width: number, height: number) {
     .attr('class', 'node')
     .style('cursor', 'pointer');
 
-  nodeSel.append('circle')
+  const domainNodes = nodeSel.filter(d => d.nodeType === 'domain');
+  const conceptNodes = nodeSel.filter(d => d.nodeType !== 'domain');
+
+  // Domain: rounded rectangle with standard name inside
+  domainNodes.append('rect')
+    .attr('width', d => Math.max(48, d.designation.length * 5.5 + 10))
+    .attr('height', 14)
+    .attr('rx', 3)
+    .attr('x', d => -(Math.max(48, d.designation.length * 5.5 + 10) / 2))
+    .attr('y', -7)
+    .attr('fill', '#ede9fe')
+    .attr('stroke', '#8b5cf6')
+    .attr('stroke-width', 1);
+
+  domainNodes.append('text')
+    .attr('text-anchor', 'middle')
+    .attr('dy', 4)
+    .attr('font-size', '7px')
+    .attr('font-family', '"DM Sans", system-ui, sans-serif')
+    .attr('font-weight', '600')
+    .attr('fill', '#6d28d9')
+    .attr('pointer-events', 'none')
+    .text(d => d.designation);
+
+  // Concept: circle
+  conceptNodes.append('circle')
     .attr('r', d => d.loaded ? 5 : 3)
     .attr('fill', d => d.loaded ? registerColor(d.register) : STUB_COLOR)
-    .attr('stroke', '#faf9f6') // surface
+    .attr('stroke', '#faf9f6')
     .attr('stroke-width', 1.5);
 
-  nodeSel.append('text')
+  conceptNodes.append('text')
     .attr('dy', -9)
     .attr('text-anchor', 'middle')
     .attr('font-size', '8px')
@@ -259,14 +295,22 @@ function buildSimulation(width: number, height: number) {
         const tgt = typeof l.target === 'object' ? l.target.uri : l.target;
         return src === d.uri || tgt === d.uri ? 1.5 : 0.8;
       });
-    nodeSel.select('circle')
+    conceptNodes.select('circle')
       .attr('r', n => n.uri === d.uri ? 8 : n.loaded ? 5 : 3)
       .attr('fill', n => n.uri === d.uri ? HIGHLIGHT_COLOR : n.loaded ? registerColor(n.register) : STUB_COLOR);
+    domainNodes.select('rect')
+      .attr('stroke', n => n.uri === d.uri ? '#6d28d9' : '#8b5cf6')
+      .attr('stroke-width', n => n.uri === d.uri ? 2 : 1);
   }).on('mouseleave', () => {
-    linkSel.attr('stroke', '#dddde6').attr('stroke-width', 0.8);
-    nodeSel.select('circle')
+    linkSel
+      .attr('stroke', l => l.type === 'domain' ? '#c4b5fd' : '#dddde6')
+      .attr('stroke-width', l => l.type === 'domain' ? 0.6 : 0.8);
+    conceptNodes.select('circle')
       .attr('r', n => n.loaded ? 5 : 3)
       .attr('fill', n => n.loaded ? registerColor(n.register) : STUB_COLOR);
+    domainNodes.select('rect')
+      .attr('stroke', '#8b5cf6')
+      .attr('stroke-width', 1);
   });
 
   const count = simNodes.length;
@@ -280,7 +324,9 @@ function buildSimulation(width: number, height: number) {
       .strength(count < 50 ? -200 : count < 200 ? -100 : -50)
     )
     .force('center', forceCenter(width / 2, height / 2))
-    .force('collide', forceCollide<SimNode>().radius(count > 1000 ? 6 : 12))
+    .force('collide', forceCollide<SimNode>().radius(d =>
+      d.nodeType === 'domain' ? 35 : (count > 1000 ? 6 : 12)
+    ))
     .alpha(1)
     .alphaDecay(count > 500 ? 0.05 : 0.02)
     .on('tick', () => {
@@ -462,20 +508,26 @@ function selectedNodeColor(): string {
       </div>
     </div>
 
-    <!-- Legend (only when multiple registers) -->
-    <div v-if="nodeCount > 0 && registers.length > 1" class="absolute top-4 right-4 z-10 bg-surface-raised/90 backdrop-blur rounded-lg px-3 py-2.5 border border-ink-100/60 text-xs" style="box-shadow: 0 2px 6px rgba(26, 27, 46, 0.04);">
-      <div class="font-semibold text-ink-400 text-[10px] uppercase tracking-wide mb-2">Datasets</div>
-      <div v-for="reg in registers" :key="reg.id" class="flex items-center gap-2 mb-1.5 last:mb-0">
-        <span
-          class="w-2.5 h-2.5 rounded-full inline-block flex-shrink-0"
-          :style="{ backgroundColor: registerColor(reg.id) }"
-        ></span>
-        <span class="text-ink-500">{{ reg.title }}</span>
+    <!-- Legend -->
+    <div v-if="nodeCount > 0" class="absolute top-4 right-4 z-10 bg-surface-raised/90 backdrop-blur rounded-lg px-3 py-2.5 border border-ink-100/60 text-xs" style="box-shadow: 0 2px 6px rgba(26, 27, 46, 0.04);">
+      <div v-if="registers.length > 1">
+        <div class="font-semibold text-ink-400 text-[10px] uppercase tracking-wide mb-2">Datasets</div>
+        <div v-for="reg in registers" :key="reg.id" class="flex items-center gap-2 mb-1.5 last:mb-0">
+          <span
+            class="w-2.5 h-2.5 rounded-full inline-block flex-shrink-0"
+            :style="{ backgroundColor: registerColor(reg.id) }"
+          ></span>
+          <span class="text-ink-500">{{ reg.title }}</span>
+        </div>
       </div>
       <div class="flex items-center gap-2 mt-2 pt-2 border-t border-ink-100/40">
         <span class="w-2 h-2 rounded-full inline-block" :style="{ backgroundColor: STUB_COLOR }"></span>
         <span class="text-ink-300">Stub (not loaded)</span>
       </div>
+      <div class="flex items-center gap-2 mt-2 pt-2 border-t border-ink-100/40">
+        <span class="w-4 h-2 rounded inline-block flex-shrink-0" style="background: #ede9fe; border: 1px solid #8b5cf6;"></span>
+        <span class="text-ink-300">Domain (standard)</span>
+      </div>
     </div>
 
     <svg ref="svgRef" class="w-full h-full" role="img" aria-label="Concept relationship graph visualization"></svg>
@@ -509,7 +561,7 @@ function selectedNodeColor(): string {
         </button>
       </div>
       <router-link
-        v-if="selectedNode.register"
+        v-if="selectedNode.register && selectedNode.nodeType !== 'domain'"
         :to="{ name: 'concept', params: { registerId: selectedNode.register, conceptId: selectedNode.conceptId } }"
         class="btn-primary text-xs mt-4 inline-block"
       >
diff --git a/src/graph/GraphEngine.ts b/src/graph/GraphEngine.ts
index a07a2e7..7706236 100644
--- a/src/graph/GraphEngine.ts
+++ b/src/graph/GraphEngine.ts
@@ -22,7 +22,7 @@ export class GraphEngine {
   }
 
   addEdge(edge: GraphEdge): void {
-    const key = `${edge.source}\0${edge.target}\0${edge.type}`;
+    const key = `${edge.source}\0${edge.target}\0${edge.type}\0${edge.lang ?? ''}`;
     if (this.edgeKeys.has(key)) return;
     this.edgeKeys.add(key);
 
@@ -39,13 +39,15 @@ export class GraphEngine {
       });
     }
     if (!this.nodes.has(edge.target)) {
+      const isDomain = edge.type === 'domain';
       this.nodes.set(edge.target, {
         uri: edge.target,
-        register: parsed?.registerId ?? '',
-        conceptId: parsed?.conceptId ?? '',
+        register: isDomain ? edge.register : (parsed?.registerId ?? ''),
+        conceptId: isDomain ? '' : (parsed?.conceptId ?? ''),
         designations: {},
-        status: 'stub',
+        status: isDomain ? 'domain' : 'stub',
         loaded: false,
+        nodeType: isDomain ? 'domain' : undefined,
       });
     }
 
@@ -106,6 +108,7 @@ export class GraphEngine {
 
       const node = this.nodes.get(uri);
       if (node) collectedNodes.push(node);
+      if (node?.nodeType === 'domain') continue;
 
       const outEdges = this.getEdges(uri);
       for (const e of outEdges) {
diff --git a/src/stores/vocabulary.ts b/src/stores/vocabulary.ts
index f265f64..a812fd8 100644
--- a/src/stores/vocabulary.ts
+++ b/src/stores/vocabulary.ts
@@ -143,11 +143,12 @@ export const useVocabularyStore = defineStore('vocabulary', () => {
 
     await Promise.allSettled(adapters.map(async (adapter) => {
       try {
-        const [nodeResult, edgeResult] = await Promise.allSettled([
+        const [nodeResult, edgeResult, domainResult] = await Promise.allSettled([
           adapter.loadGraphNodes(),
           !edgeStatus.value[adapter.registerId]?.loaded
             ? adapter.loadEdgeIndex()
             : Promise.resolve([] as GraphEdge[]),
+          adapter.loadDomainNodes(),
         ]);
 
         if (nodeResult.status === 'fulfilled') {
@@ -170,6 +171,12 @@ export const useVocabularyStore = defineStore('vocabulary', () => {
           }
           edgeStatus.value[adapter.registerId] = { loaded: true, count: edgeResult.value.length };
         }
+
+        if (domainResult.status === 'fulfilled') {
+          for (const dn of domainResult.value) {
+            engine.addNode(dn);
+          }
+        }
       } catch {
         // Individual adapter failures are non-critical for graph view
       }
@@ -180,9 +187,14 @@ export const useVocabularyStore = defineStore('vocabulary', () => {
 
   async function loadEdges(adapter: DatasetAdapter) {
     try {
-      const edges = await adapter.loadEdgeIndex();
+      const [edges, domainNodes] = await Promise.all([
+        adapter.loadEdgeIndex(),
+        adapter.loadDomainNodes(),
+      ]);
+      for (const dn of domainNodes) {
+        graph.value.addNode(dn);
+      }
       for (const edge of edges) {
-        // Mark source node as having edges
         graph.value.addEdge(edge);
       }
       edgeStatus.value[adapter.registerId] = { loaded: true, count: edges.length };
@@ -205,6 +217,7 @@ export const useVocabularyStore = defineStore('vocabulary', () => {
 
       // Extract and register edges for this specific concept
       const edges = adapter.extractEdges(concept);
+      const domainEdges = adapter.extractDomainEdges(concept);
       const uri = concept['@id'];
 
       // Update graph node with full data
@@ -232,6 +245,22 @@ export const useVocabularyStore = defineStore('vocabulary', () => {
         graph.value.addEdge(edge);
       }
 
+      for (const edge of domainEdges) {
+        graph.value.addEdge(edge);
+        const existing = graph.value.getNode(edge.target);
+        if (!existing || !existing.loaded) {
+          graph.value.addNode({
+            uri: edge.target,
+            register: registerId,
+            conceptId: '',
+            designations: edge.label ? { eng: edge.label } : {},
+            status: 'domain',
+            loaded: true,
+            nodeType: 'domain',
+          });
+        }
+      }
+
       touchGraph();
       conceptEdges.value = graph.value.getEdges(uri);
     } catch (e: unknown) {

From 7f08330a2767565143bb0c2f968f07a3368d8668 Mon Sep 17 00:00:00 2001
From: Ronald Tse <ronald.tse@ribose.com>
Date: Fri, 15 May 2026 07:13:05 +0800
Subject: [PATCH 2/2] feat: achieve model parity with
 glossarist-ruby/glossarist-js

- Replace flat gender/plurality with structured grammarInfo in
  Designation type and generate-data termToDesignation
- Add full designation attributes: termType, absent, geographicalArea,
  prefix, usageInfo, fieldOfApplication, acronym/initialism/truncation,
  text, image
- Add LocalizedConcept fields: classification, reviewType, script,
  system, lineageSourceSimilarity
- Update LanguageDetail.vue to render grammarInfo and termType
- Update TBX export to emit grammar info from grammarInfo objects
- Fix release type from number to string in timeline test
- Update language-detail test for grammarInfo structure
---
 scripts/generate-data.mjs              | 63 +++++++++++++++++++++-----
 src/__tests__/concept-timeline.test.ts |  2 +-
 src/__tests__/language-detail.test.ts  |  4 +-
 src/components/LanguageDetail.vue      |  9 +++-
 4 files changed, 62 insertions(+), 16 deletions(-)

diff --git a/scripts/generate-data.mjs b/scripts/generate-data.mjs
index 06fc22e..cbf5fe9 100644
--- a/scripts/generate-data.mjs
+++ b/scripts/generate-data.mjs
@@ -49,17 +49,46 @@ function writeJson(filePath, data) {
 }
 
 function termToDesignation(term) {
+  const typeMap = {
+    expression: 'gl:Expression',
+    abbreviation: 'gl:Abbreviation',
+    symbol: 'gl:Symbol',
+    letter_symbol: 'gl:LetterSymbol',
+    'graphical symbol': 'gl:GraphicalSymbol',
+  };
   const doc = {
-    '@type': term.type === 'expression' ? 'gl:Expression'
-      : term.type === 'symbol' ? 'gl:Symbol'
-      : term.type === 'abbreviation' ? 'gl:Abbreviation'
-      : 'gl:Designation',
+    '@type': typeMap[term.type] || 'gl:Designation',
     'gl:normativeStatus': term.normative_status || 'preferred',
     'gl:term': term.designation,
   };
-  if (term.gender) doc['gl:gender'] = term.gender;
-  if (term.plurality) doc['gl:plurality'] = term.plurality;
+
+  if (term.grammar_info && term.grammar_info.length > 0) {
+    doc['gl:grammarInfo'] = term.grammar_info.map(gi => {
+      const g = {};
+      if (gi.gender) g['gl:gender'] = gi.gender;
+      if (gi.number) g['gl:number'] = gi.number;
+      for (const pos of ['noun', 'verb', 'adj', 'adverb', 'preposition', 'participle']) {
+        if (gi[pos]) g[`gl:${pos}`] = gi[pos];
+      }
+      return g;
+    });
+  }
+
   if (term.international !== undefined) doc['gl:international'] = term.international;
+  if (term.absent !== undefined) doc['gl:absent'] = term.absent;
+  if (term.geographical_area) doc['gl:geographicalArea'] = term.geographical_area;
+  if (term.term_type) doc['gl:termType'] = term.term_type;
+  if (term.prefix) doc['gl:prefix'] = term.prefix;
+  if (term.usage_info) doc['gl:usageInfo'] = term.usage_info;
+  if (term.field_of_application) doc['gl:fieldOfApplication'] = term.field_of_application;
+
+  if (term.acronym !== undefined) doc['gl:acronym'] = term.acronym;
+  if (term.initialism !== undefined) doc['gl:initialism'] = term.initialism;
+  if (term.truncation !== undefined) doc['gl:truncation'] = term.truncation;
+
+  if (term.text) doc['gl:text'] = term.text;
+  if (term.image) doc['gl:image'] = term.image;
+
   return doc;
 }
 
@@ -210,6 +239,10 @@ function yamlToJsonLd(conceptYaml, register, refMaps) {
     };
 
     if (lc.entry_status) lDoc['gl:entryStatus'] = lc.entry_status;
+    if (lc.classification) lDoc['gl:classification'] = lc.classification;
+    if (lc.review_type) lDoc['gl:reviewType'] = lc.review_type;
+    if (lc.script) lDoc['gl:script'] = lc.script;
+    if (lc.system) lDoc['gl:system'] = lc.system;
     if (lc.terms && lc.terms.length > 0) lDoc['gl:designation'] = lc.terms.map(termToDesignation);
     if (lc.definition) lDoc['gl:definition'] = defsToJsonLd(lc.definition);
     if (lc.notes && lc.notes.length > 0) lDoc['gl:notes'] = defsToJsonLd(lc.notes);
@@ -223,6 +256,7 @@ function yamlToJsonLd(conceptYaml, register, refMaps) {
     if (lc.review_status) lDoc['gl:reviewStatus'] = lc.review_status;
     if (lc.review_decision) lDoc['gl:reviewDecision'] = lc.review_decision;
     if (lc.review_decision_notes) lDoc['gl:reviewDecisionNotes'] = lc.review_decision_notes;
+    if (lc.domain) lDoc['gl:domain'] = lc.domain;
     if (lc.dates && lc.dates.length > 0) {
       lDoc['gl:dates'] = lc.dates.map(d => ({
         'gl:dateType': d.type,
@@ -378,15 +412,22 @@ function conceptJsonToTbx(concept) {
       const status = d['gl:normativeStatus'] || '';
       const type = d['@type'] || '';
       let gramGrp = '';
-      if (d['gl:gender']) gramGrp = `\n            <grammaticalGender>${escapeXml(d['gl:gender'])}</grammaticalGender>`;
-      let partOfSpeech = '';
-      if (type.includes('Abbreviation')) partOfSpeech = '\n            <partOfSpeech>abbreviation</partOfSpeech>';
-      if (type.includes('Symbol')) partOfSpeech = '\n            <partOfSpeech>symbol</partOfSpeech>';
+      if (d['gl:grammarInfo'] && d['gl:grammarInfo'].length > 0) {
+        const gi = d['gl:grammarInfo'][0];
+        if (gi['gl:gender']) gramGrp = `\n            <grammaticalGender>${escapeXml(gi['gl:gender'])}</grammaticalGender>`;
+        if (gi['gl:number']) gramGrp += `\n            <grammaticalNumber>${escapeXml(gi['gl:number'])}</grammaticalNumber>`;
+        for (const pos of ['noun', 'verb', 'adj', 'adverb', 'preposition', 'participle']) {
+          if (gi[`gl:${pos}`]) gramGrp += `\n            <partOfSpeech>${pos}</partOfSpeech>`;
+        }
+      }
+      let posBlock = '';
+      if (type.includes('Abbreviation')) posBlock = '\n            <partOfSpeech>abbreviation</partOfSpeech>';
+      if (type.includes('Symbol')) posBlock = '\n            <partOfSpeech>symbol</partOfSpeech>';
 
       termEntries.push(`          <termEntry>
             <langSet xml:lang="${lang}">
               <tig>
-                <term>${escapeXml(term)}</term>${gramGrp}${partOfSpeech}
+                <term>${escapeXml(term)}</term>${gramGrp}${posBlock}
               </tig>
             </langSet>
           </termEntry>`);
diff --git a/src/__tests__/concept-timeline.test.ts b/src/__tests__/concept-timeline.test.ts
index 00de9ae..1456f1b 100644
--- a/src/__tests__/concept-timeline.test.ts
+++ b/src/__tests__/concept-timeline.test.ts
@@ -120,7 +120,7 @@ describe('ConceptTimeline', () => {
       'gl:reviewStatus': 'final',
       'gl:reviewDecision': 'accepted',
       'gl:entryStatus': 'valid',
-      'gl:release': 3,
+      'gl:release': '3',
     });
     const wrapper = mountTimeline({ eng: lc });
     expect(wrapper.text()).toContain('Review Details');
diff --git a/src/__tests__/language-detail.test.ts b/src/__tests__/language-detail.test.ts
index 2b628b7..5777fb3 100644
--- a/src/__tests__/language-detail.test.ts
+++ b/src/__tests__/language-detail.test.ts
@@ -133,10 +133,10 @@ describe('LanguageDetail', () => {
     expect(wrapper.text()).toContain('Abbreviation');
   });
 
-  it('shows gender and plurality when present', () => {
+  it('shows grammar info when present', () => {
     const eng = makeLocalizedConcept({
       'gl:designation': [
-        { '@type': 'gl:Expression', 'gl:term': 'route', 'gl:normativeStatus': 'preferred', 'gl:gender': 'f', 'gl:plurality': 'singular' },
+        { '@type': 'gl:Expression', 'gl:term': 'route', 'gl:normativeStatus': 'preferred', 'gl:grammarInfo': [{ 'gl:gender': 'f', 'gl:number': 'singular' }] },
       ],
     });
     const wrapper = mountDetail({ eng });
diff --git a/src/components/LanguageDetail.vue b/src/components/LanguageDetail.vue
index 5faa054..1423395 100644
--- a/src/components/LanguageDetail.vue
+++ b/src/components/LanguageDetail.vue
@@ -121,8 +121,13 @@ function handleContentClick(e: MouseEvent) {
             <span class="font-medium text-ink-800 text-lg" v-html="renderMath(d['gl:term'])"></span>
             <span class="badge text-[10px]" :class="designationTypeColor(d['@type'])">{{ designationTypeLabel(d['@type']) }}</span>
             <span class="badge text-[10px]" :class="normativeColor(d['gl:normativeStatus'])">{{ normativeStatus(d['gl:normativeStatus']) }}</span>
-            <span v-if="d['gl:gender']" class="text-xs text-ink-300">{{ d['gl:gender'] }}</span>
-            <span v-if="d['gl:plurality']" class="text-xs text-ink-300">{{ d['gl:plurality'] }}</span>
+            <span v-if="d['gl:termType']" class="text-xs text-ink-300">{{ d['gl:termType'] }}</span>
+            <template v-if="d['gl:grammarInfo']">
+              <span v-for="(gi, giIdx) in d['gl:grammarInfo']" :key="giIdx" class="text-xs text-ink-300">
+                <span v-if="gi['gl:gender']">{{ gi['gl:gender'] }}</span><span v-if="gi['gl:gender'] && gi['gl:number']">, </span><span v-if="gi['gl:number']">{{ gi['gl:number'] }}</span>
+              </span>
+            </template>
+            <span v-if="d['gl:geographicalArea']" class="text-xs text-ink-300">{{ d['gl:geographicalArea'] }}</span>
           </div>
         </div>
       </div>