@glossarist/concept-browser 0.2.8 → 0.2.10

package/package.json

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

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) => {
@@ -363,6 +364,10 @@ function selectOnly(registerId: string) {
   }
 }
 
+function registerTitle(id: string): string {
+  return props.registers.find(r => r.id === id)?.title ?? id;
+}
+
 function selectedNodeColor(): string {
   if (!selectedNode.value) return STUB_COLOR;
   if (!selectedNode.value.loaded) return STUB_COLOR;
@@ -434,6 +439,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>
@@ -441,15 +462,15 @@ function selectedNodeColor(): string {
       </div>
     </div>
 
-    <!-- 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);">
+    <!-- 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.id }}</span>
+        <span class="text-ink-500">{{ reg.title }}</span>
       </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>
@@ -478,7 +499,7 @@ function selectedNodeColor(): string {
               :style="{ backgroundColor: selectedNodeColor() }"
             ></span>
             <span class="text-[10px] text-ink-400 uppercase tracking-wide">
-              {{ selectedNode.register || 'unknown' }} &middot;
+              {{ registerTitle(selectedNode.register) }} &middot;
               {{ selectedNode.loaded ? 'loaded' : 'stub' }}
             </span>
           </div>