fix(node-ui): align context graph label fallbacks (#611)

* fix(node-ui): align context graph label fallbacks

* fix(node-ui): preserve path-style context graph labels

---------

Co-authored-by: Jurij Skornik <jurij.skornik@gmail.com>

Author: Jurij89

packages/node-ui/src/ui/hooks/useMemoryEntities.ts

@@ -1,6 +1,7 @@
 import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
 import { authHeaders } from '../api.js';
 import { useMemoryGraphEvents } from './useNodeEvents.js';
+import { MEMORY_LABEL_PREDICATES } from '../lib/memoryLabels.js';
 
 export type TrustLevel = 'working' | 'shared' | 'verified';
 export type MemoryLayerKey = 'wm' | 'swm' | 'vm';
@@ -48,13 +49,6 @@ export interface MemoryData {
 }
 
 const RDF_TYPE = 'http://www.w3.org/1999/02/22-rdf-syntax-ns#type';
-const NAME_PREDS = [
-  'http://schema.org/name',
-  'http://www.w3.org/2000/01/rdf-schema#label',
-  'http://purl.org/dc/terms/title',
-  'http://purl.org/dc/elements/1.1/title',
-  'http://xmlns.com/foaf/0.1/name',
-];
 
 function bv(v: unknown): string | undefined {
   if (v == null) return undefined;
@@ -106,6 +100,10 @@ function isRawExtractionLabel(label: string, uri: string): boolean {
   return label === uri && /^urn:dkg:extraction:[^\s]+$/i.test(uri);
 }
 
+function isUnreadableDefaultUriLabel(label: string, uri: string): boolean {
+  return label === uri && (uri.startsWith('urn:') || uri.startsWith('did:'));
+}
+
 function readableFallbackLabel(entity: MemoryEntity): string {
   const tail = readableTail(entity.uri);
   const type = entity.types
@@ -119,13 +117,18 @@ function readableFallbackLabel(entity: MemoryEntity): string {
 }
 
 function deriveEntityLabel(entity: MemoryEntity): string {
-  for (const pred of NAME_PREDS) {
+  for (const pred of MEMORY_LABEL_PREDICATES) {
     const vals = entity.properties.get(pred);
     const name = vals?.find(v => v.trim().length > 0);
     if (name) return name;
   }
 
-  if (entity.label && !isRawExtractionLabel(entity.label, entity.uri)) {
+  const defaultUriLabel = shortLabel(entity.uri);
+  if (
+    entity.label &&
+    (entity.label !== defaultUriLabel || !isUnreadableDefaultUriLabel(entity.label, entity.uri)) &&
+    !isRawExtractionLabel(entity.label, entity.uri)
+  ) {
     return entity.label;
   }
 

packages/node-ui/src/ui/lib/memoryLabels.ts

@@ -0,0 +1,20 @@
+export const MEMORY_LABEL_PREDICATES = [
+  'http://schema.org/name',
+  'http://www.w3.org/2000/01/rdf-schema#label',
+  'http://purl.org/dc/terms/title',
+  'http://purl.org/dc/elements/1.1/title',
+  'http://xmlns.com/foaf/0.1/name',
+] as const;
+
+export function memoryGraphLabels(opts: {
+  minZoomForLabels?: number;
+  extraPredicates?: readonly string[];
+} = {}) {
+  const labels: { predicates: string[]; minZoomForLabels?: number } = {
+    predicates: [...(opts.extraPredicates ?? []), ...MEMORY_LABEL_PREDICATES],
+  };
+  if (opts.minZoomForLabels !== undefined) {
+    labels.minZoomForLabels = opts.minZoomForLabels;
+  }
+  return labels;
+}

packages/node-ui/src/ui/views/MemoryLayerView.tsx

@@ -3,6 +3,7 @@ import { useFetch } from '../hooks.js';
 import { executeQuery, listAssertions, promoteAssertion, publishSharedMemory, listSwmEntities, type AssertionInfo, type PublishResult, type SwmRootEntity } from '../api.js';
 import { FilePreviewModal } from '../components/Modals/FilePreviewModal.js';
 import { useMemoryGraphEvents } from '../hooks/useNodeEvents.js';
+import { memoryGraphLabels } from '../lib/memoryLabels.js';
 
 const RdfGraph = lazy(() =>
   import('@origintrail-official/dkg-graph-viz/react').then(m => ({ default: m.RdfGraph }))
@@ -23,14 +24,7 @@ const LAYER_META: Record<MemoryLayer, { label: string; color: string; icon: stri
 const GRAPH_OPTIONS = {
   labelMode: 'humanized' as const,
   renderer: '2d' as const,
-  labels: {
-    predicates: [
-      'http://schema.org/text',
-      'http://schema.org/name',
-      'http://www.w3.org/2000/01/rdf-schema#label',
-      'http://purl.org/dc/terms/title',
-    ],
-  },
+  labels: memoryGraphLabels({ extraPredicates: ['http://schema.org/text'] }),
   style: {
     classColors: {
       'http://schema.org/Person': '#f472b6',

packages/node-ui/src/ui/views/project/components.tsx

@@ -30,6 +30,7 @@ import { ActivityFeed } from '../../components/ActivityFeed.js';
 import { VerifiedIdentityBanner } from '../../components/VerifiedIdentityBanner.js';
 import { SubGraphBar } from '../../components/SubGraphBar.js';
 import { GenUIEntityPanel } from '../../genui/index.js';
+import { memoryGraphLabels } from '../../lib/memoryLabels.js';
 import { useTabsStore } from '../../stores/tabs.js';
 import {
   useVerifiedMemoryAnchors,
@@ -2266,10 +2267,7 @@ export function KADetailView({ entity, allEntities, allTriples, onNavigate, onCl
   const graphOptions = useMemo(() => ({
     labelMode: 'humanized' as const,
     renderer: '2d' as const,
-    labels: {
-      predicates: ['http://schema.org/name', 'http://www.w3.org/2000/01/rdf-schema#label'],
-      minZoomForLabels: 0.2,
-    },
+    labels: memoryGraphLabels({ minZoomForLabels: 0.2 }),
     style: {
       defaultNodeColor: TRUST_COLORS[entity.trustLevel],
       defaultEdgeColor: '#475569',
@@ -2753,14 +2751,7 @@ export function SubGraphMiniCard({
   const graphOptions = useMemo(() => ({
     labelMode: 'humanized' as const,
     renderer: '2d' as const,
-    labels: {
-      predicates: [
-        'http://schema.org/name',
-        'http://www.w3.org/2000/01/rdf-schema#label',
-        'http://purl.org/dc/terms/title',
-      ],
-      minZoomForLabels: 0.8, // Keep labels out of the way in the mini view.
-    },
+    labels: memoryGraphLabels({ minZoomForLabels: 0.8 }), // Keep labels out of the way in the mini view.
     style: {
       classColors: CODE_CLASS_COLORS,
       predicateColors: CODE_PREDICATE_COLORS,

packages/node-ui/src/ui/views/project/helpers.ts

@@ -9,6 +9,7 @@ import {
   VIZ_ANCHOR_TYPE, VIZ_AGENT_TYPE,
   VIZ_PRED_ANCHORED_IN, VIZ_PRED_SIGNED_BY, VIZ_PRED_CONSENSUS,
 } from '../../hooks/useVerifiedMemoryAnchors.js';
+import { memoryGraphLabels } from '../../lib/memoryLabels.js';
 
 export type LayerView = 'overview' | 'graph-overview' | 'query' | 'wm' | 'swm' | 'vm';
 export type LayerContentTab = 'items' | 'assertions' | 'graph' | 'docs';
@@ -234,14 +235,7 @@ export function buildLayerGraphOptions(
   return {
     labelMode: 'humanized' as const,
     renderer: '2d' as const,
-    labels: {
-      predicates: [
-        'http://schema.org/name',
-        'http://www.w3.org/2000/01/rdf-schema#label',
-        'http://purl.org/dc/terms/title',
-      ],
-      minZoomForLabels: isVM ? 0.2 : 0.3,
-    },
+    labels: memoryGraphLabels({ minZoomForLabels: isVM ? 0.2 : 0.3 }),
     style: {
       classColors: CODE_CLASS_COLORS,
       predicateColors: CODE_PREDICATE_COLORS,

packages/node-ui/test/graph-label-predicates.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from 'vitest';
+import { MEMORY_LABEL_PREDICATES, memoryGraphLabels } from '../src/ui/lib/memoryLabels.js';
+import { buildLayerGraphOptions } from '../src/ui/views/project/helpers.js';
+
+describe('graph label predicates', () => {
+  it('builds graph label options from the shared predicate list', () => {
+    expect(memoryGraphLabels({ minZoomForLabels: 0.4 })).toEqual({
+      predicates: [...MEMORY_LABEL_PREDICATES],
+      minZoomForLabels: 0.4,
+    });
+
+    expect(memoryGraphLabels({ extraPredicates: ['http://schema.org/text'] }).predicates).toEqual([
+      'http://schema.org/text',
+      ...MEMORY_LABEL_PREDICATES,
+    ]);
+  });
+
+  it('uses the shared memory label predicate list for layer graphs', () => {
+    const options = buildLayerGraphOptions('wm');
+
+    expect(options.labels.predicates).toEqual([...MEMORY_LABEL_PREDICATES]);
+    expect(options.labels.predicates).toContain('http://purl.org/dc/elements/1.1/title');
+  });
+});

packages/node-ui/test/ui-compat.test.ts

@@ -342,6 +342,7 @@ describe('listAssertions query path', () => {
 
 describe('useMemoryEntities hook', () => {
   const hook = readFileSync(resolve(UI_DIR, 'hooks', 'useMemoryEntities.ts'), 'utf-8');
+  const memoryLabels = readFileSync(resolve(UI_DIR, 'lib', 'memoryLabels.ts'), 'utf-8');
   const nodeEventsHook = readFileSync(resolve(UI_DIR, 'hooks', 'useNodeEvents.ts'), 'utf-8');
 
   it('exports TrustLevel type with three levels', () => {
@@ -372,8 +373,9 @@ describe('useMemoryEntities hook', () => {
   });
 
   it('resolves entity labels from name predicates', () => {
-    expect(hook).toContain('schema.org/name');
-    expect(hook).toContain('rdf-schema#label');
+    expect(hook).toContain('MEMORY_LABEL_PREDICATES');
+    expect(memoryLabels).toContain('schema.org/name');
+    expect(memoryLabels).toContain('rdf-schema#label');
   });
 
   it('deduplicates triples across layers for graph data', () => {

packages/node-ui/test/use-memory-entities-labels.test.ts

@@ -73,6 +73,8 @@ describe('useMemoryEntities readable labels', () => {
             binding('urn:test:named', SCHEMA_NAME, 'Friendly title', graph),
             binding('urn:test:source', RDF_TYPE, 'http://schema.org/Thing', graph),
             binding('urn:test:source', MENTIONS, extraction, graph),
+            binding('urn:dkg:code:file:demo/project/src/file.ts', RDF_TYPE, 'http://dkg.io/ontology/code/File', graph),
+            binding('did:dkg:agent:12D3KooWExample', RDF_TYPE, 'http://schema.org/Person', graph),
           ];
       return {
         ok: true,
@@ -99,8 +101,14 @@ describe('useMemoryEntities readable labels', () => {
 
     expect(el.getAttribute('data-loading')).toBe('false');
     expect(labels).toContain('urn:test:named=Friendly title');
+    expect(labels).toContain('urn:test:source=source');
+    expect(labels).toContain('urn:dkg:code:file:demo/project/src/file.ts=file.ts');
+    expect(labels).toContain('did:dkg:agent:12D3KooWExample=Person 12D3KooWExample');
     expect(labels).toContain('urn:dkg:extraction:123e4567-e89b-12d3-a456-426614174000=Extraction 123e4567e89b');
     expect(labels).not.toContain('urn:dkg:extraction:123e4567-e89b-12d3-a456-426614174000=urn:dkg:extraction');
+    expect(labels).not.toContain('urn:test:source=urn:test:source');
+    expect(labels).not.toContain('urn:dkg:code:file:demo/project/src/file.ts=File file.ts');
+    expect(labels).not.toContain('did:dkg:agent:12D3KooWExample=did:dkg:agent:12D3KooWExample');
     expect(targets).toContain('urn:dkg:extraction:123e4567-e89b-12d3-a456-426614174000=Extraction 123e4567e89b');
   });
 });