@glossarist/concept-browser 0.2.7 → 0.2.9

package/package.json

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

package/scripts/load-site-config.mjs

@@ -23,26 +23,13 @@ function findConfigFile(args = []) {
     return resolve(process.env.SITE_CONFIG);
   }
 
-  const siteId = process.env.SITE_ID || args.find(a => !a.startsWith('-')) || null;
-  if (siteId) {
-    // Check project configs/ dir first
-    const p = resolve(projectRoot, 'configs', `${siteId}.yml`);
-    if (existsSync(p)) return p;
-    // Check CWD (deployment repo may have configs locally)
-    for (const name of [`${siteId}.yml`, 'site-config.yml']) {
-      const cwdP = resolve(process.cwd(), name);
-      if (existsSync(cwdP)) return cwdP;
-    }
-    throw new Error(`Site config not found for '${siteId}'. Checked configs/${siteId}.yml, ${siteId}.yml, site-config.yml in CWD`);
-  }
-
   // Check CWD first (deployment repos), then project root
   for (const dir of [process.cwd(), projectRoot]) {
     const p = resolve(dir, 'site-config.yml');
     if (existsSync(p)) return p;
   }
 
-  throw new Error('No site config found. Set SITE_CONFIG, SITE_ID, or create site-config.yml');
+  throw new Error('No site config found. Set SITE_CONFIG or create site-config.yml');
 }
 
 export function loadSiteConfig(args = []) {

package/src/components/ConceptDetail.vue

@@ -204,6 +204,31 @@ function scrollToLang(lang: string) {
 const outgoingEdges = computed(() => props.edges.filter(e => e.source === props.concept['@id']));
 const incomingEdges = computed(() => props.edges.filter(e => e.target === props.concept['@id']));
 
+function isLocalRef(uri: string): boolean {
+  const resolution = factory.resolve(uri, props.registerId);
+  return resolution.type === 'internal' && resolution.registerId === props.registerId;
+}
+
+function edgeConceptId(uri: string): string {
+  const m = uri.match(/\/concept\/([^/]+)$/);
+  return m ? m[1] : uri.split('/').pop() || uri;
+}
+
+function edgeNodeData(uri: string) {
+  return store.graph.getNode(uri);
+}
+
+function edgeTooltip(uri: string): string {
+  const node = edgeNodeData(uri);
+  const lines: string[] = [uri];
+  if (node) {
+    for (const [lang, designation] of Object.entries(node.designations)) {
+      lines.push(`${langLabel(lang)}: ${designation}`);
+    }
+  }
+  return lines.join('\n');
+}
+
 function edgeDatasetBadge(uri: string): { id: string; title: string } | null {
   const resolution = factory.resolve(uri, props.registerId);
   if (resolution.type === 'internal' && resolution.registerId !== props.registerId) {
@@ -474,10 +499,14 @@ function plainTruncate(html: string, max: number = 120): string {
                   v-for="edge in outgoingEdges"
                   :key="edge.target"
                   @click="navigateEdge(edge)"
+                  :title="edgeTooltip(edge.target)"
                   class="text-sm concept-link block truncate w-full text-left flex items-center gap-1.5"
+                  :class="isLocalRef(edge.target) ? '' : 'xref-external'"
                 >
-                  {{ edge.label || edge.target.split('/').pop() }}
+                  {{ edgeConceptId(edge.target) }}
                   <span v-if="edgeDatasetBadge(edge.target)" class="badge badge-gray text-[9px] flex-shrink-0 truncate max-w-[100px]">{{ edgeDatasetBadge(edge.target)!.title }}</span>
+                  <span v-if="isLocalRef(edge.target)" class="text-[9px] text-ink-200 flex-shrink-0">local</span>
+                  <span v-else class="text-[9px] text-amber-500 flex-shrink-0">external</span>
                 </button>
               </div>
             </div>
@@ -488,10 +517,14 @@ function plainTruncate(html: string, max: number = 120): string {
                   v-for="edge in incomingEdges"
                   :key="edge.source"
                   @click="navigateEdge(edge)"
+                  :title="edgeTooltip(edge.source)"
                   class="text-sm concept-link block truncate w-full text-left flex items-center gap-1.5"
+                  :class="isLocalRef(edge.source) ? '' : 'xref-external'"
                 >
-                  {{ edge.label || edge.source.split('/').pop() }}
+                  {{ edgeConceptId(edge.source) }}
                   <span v-if="edgeDatasetBadge(edge.source)" class="badge badge-gray text-[9px] flex-shrink-0 truncate max-w-[100px]">{{ edgeDatasetBadge(edge.source)!.title }}</span>
+                  <span v-if="isLocalRef(edge.source)" class="text-[9px] text-ink-200 flex-shrink-0">local</span>
+                  <span v-else class="text-[9px] text-amber-500 flex-shrink-0">external</span>
                 </button>
               </div>
             </div>

package/src/components/GraphPanel.vue

@@ -27,6 +27,7 @@ const svgRef = ref<SVGSVGElement | null>(null);
 const containerRef = ref<HTMLDivElement | null>(null);
 const selectedNode = ref<GraphNode | null>(null);
 const detailCloseRef = ref<HTMLButtonElement | null>(null);
+const labelMode = ref<'designation' | 'identifier'>('designation');
 
 // Dataset enable/disable state
 const registerEnabled = reactive<Record<string, boolean>>({});
@@ -219,7 +220,7 @@ function buildSimulation(width: number, height: number) {
     .attr('font-weight', '500')
     .attr('fill', '#636588') // ink-400
     .attr('pointer-events', 'none')
-    .text(d => d.designation.slice(0, 18));
+    .text(d => (labelMode.value === 'identifier' ? d.conceptId : d.designation).slice(0, 18));
 
   const dragBehavior = drag<SVGGElement, SimNode>()
     .on('start', (event: D3DragEvent<SVGGElement, SimNode, SimNode>, d) => {
@@ -434,6 +435,22 @@ function selectedNodeColor(): string {
             <button @click="rebuildGraph" class="text-[10px] font-semibold text-ink-500 hover:text-ink-700 uppercase tracking-wide transition-colors">Re-layout</button>
           </div>
 
+          <div v-if="nodeCount > 0" class="mt-3 pt-3 border-t border-ink-100/40">
+            <div class="text-[10px] font-semibold text-ink-400 uppercase tracking-wide mb-2">Node labels</div>
+            <div class="flex gap-1">
+              <button
+                @click="labelMode = 'designation'; rebuildGraph()"
+                class="text-[10px] px-2 py-1 rounded font-medium transition-colors"
+                :class="labelMode === 'designation' ? 'bg-ink-800 text-white' : 'text-ink-500 hover:bg-ink-50'"
+              >Designation</button>
+              <button
+                @click="labelMode = 'identifier'; rebuildGraph()"
+                class="text-[10px] px-2 py-1 rounded font-medium transition-colors"
+                :class="labelMode === 'identifier' ? 'bg-ink-800 text-white' : 'text-ink-500 hover:bg-ink-50'"
+              >Identifier</button>
+            </div>
+          </div>
+
           <div v-if="nodeCount === 0" class="text-xs text-ink-300 mt-3 leading-relaxed">
             {{ props.edges.length > 0 ? 'Enable datasets to see their graph.' : 'Browse concepts with cross-references to populate the graph.' }}
           </div>