@glossarist/concept-browser 0.7.82 → 0.7.84

package/package.json

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

package/src/__tests__/components/PartitiveRelationDiagram.test.ts

@@ -166,4 +166,83 @@ describe('PartitiveRelationDiagram — ISO 704 rake rendering', () => {
       expect(w.emitted('navigate')).toBeTruthy();
     });
   });
+
+  describe('designation-aware sizing', () => {
+    it('uses MIN_NODE_W when labels are short', () => {
+      const w = mount(PartitiveRelationDiagram, {
+        props: {
+          comprehensiveLabel: '1.3',
+          partitives: members(2),
+          completeness: 'complete',
+          plurality: null,
+        },
+      });
+      const svg = w.find('svg');
+      // Short labels → MIN_NODE_W=110, total = 2*110 + 16 + 40 = 276
+      const viewBox = svg.attributes('viewBox') || '';
+      const width = Number(viewBox.split(' ')[2]);
+      expect(width).toBeLessThan(300);
+    });
+
+    it('grows nodes for long designations', () => {
+      const longMembers: PartitiveMemberLabeled[] = [
+        { uri: 'u1', label: 'system of quantities', certainty: 'confirmed' },
+        { uri: 'u2', label: 'International System of Units', certainty: 'confirmed' },
+        { uri: 'u3', label: 'base quantity dimension', certainty: 'confirmed' },
+      ];
+      const w = mount(PartitiveRelationDiagram, {
+        props: {
+          comprehensiveLabel: 'coordinate system of quantities',
+          partitives: longMembers,
+          completeness: 'complete',
+          plurality: null,
+        },
+      });
+      const svg = w.find('svg');
+      const viewBox = svg.attributes('viewBox') || '';
+      const width = Number(viewBox.split(' ')[2]);
+      // Each node wider than MIN_NODE_W → total > 3*110 = 330
+      expect(width).toBeGreaterThan(330);
+      // Capped: node width ≤ MAX_NODE_W=220 → total ≤ 3*220 + 2*16 + 40 = 732
+      expect(width).toBeLessThanOrEqual(732);
+    });
+
+    it('wraps long labels to 2 lines via tspan when needed', () => {
+      const longLabel = 'International System of Quantities and Units';
+      const w = mount(PartitiveRelationDiagram, {
+        props: {
+          comprehensiveLabel: longLabel,
+          partitives: [
+            { uri: 'u1', label: 'short', certainty: 'confirmed' },
+            { uri: 'u2', label: 'short', certainty: 'confirmed' },
+          ],
+          completeness: 'complete',
+          plurality: null,
+        },
+      });
+      // The comprehensive text should have ≥ 2 tspans (wrapped)
+      const texts = w.findAll('text');
+      const compText = texts[0]; // first text is the comprehensive
+      const tspans = compText.findAll('tspan');
+      expect(tspans.length).toBeGreaterThanOrEqual(2);
+    });
+
+    it('renders the designation (not the conceptId) as the label', () => {
+      const w = mount(PartitiveRelationDiagram, {
+        props: {
+          comprehensiveLabel: 'system of quantities',
+          partitives: [
+            { uri: 'u1', label: 'base quantity', certainty: 'confirmed' },
+            { uri: 'u2', label: 'derived quantity', certainty: 'confirmed' },
+          ],
+          completeness: 'complete',
+          plurality: null,
+        },
+      });
+      const allText = w.findAll('text').map(t => t.text());
+      expect(allText).toContain('system of quantities');
+      expect(allText).toContain('base quantity');
+      expect(allText).toContain('derived quantity');
+    });
+  });
 });

package/src/components/PartitiveRelationDiagram.vue

@@ -19,11 +19,12 @@
  *                                            on stem + spine (drops stay single)
  *   - plurality.isShared && isUncertain    : one solid + one DASHED line
  *   - completeness === 'partial'           : spine extends past the last
- *                                            tooth (continued backline —
- *                                            "more exist but aren't shown")
+ *                                            tooth (continued backline)
  *
- * The diagram is pure SVG — no JS layout engine. Coordinates are
- * computed from the partitive count.
+ * Node sizing is designation-aware: the longest label drives the node
+ * width (clamped to [MIN_NODE_W, MAX_NODE_W]); labels that don't fit
+ * wrap to a second line via tspan. This lets the rake show actual
+ * designations ('system of quantities') instead of bare IDs ('1.3').
  */
 import { computed } from 'vue';
 import type { TypeSharedPluralityWire } from '../adapters/types';
@@ -48,17 +49,21 @@ const emit = defineEmits<{
   (e: 'navigate', uri: string): void;
 }>();
 
-// Layout constants — chosen for readability at 100% zoom.
-const NODE_W = 120;
-const NODE_H = 32;
+// Layout constants
+const MIN_NODE_W = 110;
+const MAX_NODE_W = 220;
+const SINGLE_LINE_H = 32;
+const DOUBLE_LINE_H = 50;
 const STEM_LEN = 28;
 const SPINE_TO_NODE = 32;
 const GAP_X = 16;
-const PADDING_X = 24;
-const PADDING_Y = 16;
-const DOUBLE_GAP = 3;       // gap between the two lines of a close-set double
-const PARTIAL_TAIL = 32;    // how far the spine extends past the last tooth for partial
+const PADDING_X = 20;
+const PADDING_Y = 14;
+const DOUBLE_GAP = 3;
+const PARTIAL_TAIL = 32;
 const DASH_PATTERN = '4 3';
+const CHAR_W = 6.2;            // approx for 11px sans-serif
+const NODE_TEXT_PAD = 16;      // horizontal padding inside node rect
 
 type LineVariant = 'single' | 'double-solid' | 'solid-plus-dashed';
 
@@ -67,19 +72,67 @@ const lineVariant = computed<LineVariant>(() => {
   return props.plurality.isUncertain ? 'solid-plus-dashed' : 'double-solid';
 });
 
+/** Estimated pixel width of a string at 11px sans-serif. */
+function estimateTextWidth(text: string): number {
+  return text.length * CHAR_W;
+}
+
+/**
+ * Wrap a label to at most 2 lines, breaking on word boundaries.
+ * If a single word exceeds the limit, it stays on its own line and
+ * gets truncated with an ellipsis.
+ */
+function wrapLabel(text: string, maxCharsPerLine: number): string[] {
+  if (text.length <= maxCharsPerLine) return [text];
+  const words = text.split(/\s+/);
+  const lines: string[] = [];
+  let current = '';
+  for (const w of words) {
+    if (w.length > maxCharsPerLine) {
+      // word itself too long — flush current, push truncated word
+      if (current) { lines.push(current); current = ''; }
+      lines.push(w.slice(0, Math.max(1, maxCharsPerLine - 1)) + '…');
+      continue;
+    }
+    if (!current) {
+      current = w;
+    } else if ((current + ' ' + w).length <= maxCharsPerLine) {
+      current += ' ' + w;
+    } else {
+      lines.push(current);
+      current = w;
+    }
+  }
+  if (current) lines.push(current);
+  if (lines.length > 2) {
+    return [lines[0], lines.slice(1).join(' ').slice(0, maxCharsPerLine - 1) + '…'];
+  }
+  return lines;
+}
+
 const layout = computed(() => {
+  const allLabels = [props.comprehensiveLabel, ...props.partitives.map(p => p.label)];
+  const longestWidth = Math.max(...allLabels.map(estimateTextWidth));
+  const nodeW = Math.min(MAX_NODE_W, Math.max(MIN_NODE_W, Math.ceil(longestWidth) + NODE_TEXT_PAD));
+  const charsPerLine = Math.max(10, Math.floor((nodeW - NODE_TEXT_PAD) / CHAR_W));
+
+  const wrapped = allLabels.map(label => wrapLabel(label, charsPerLine));
+  const anyWrapped = wrapped.some(lines => lines.length > 1);
+  const nodeH = anyWrapped ? DOUBLE_LINE_H : SINGLE_LINE_H;
+
   const n = props.partitives.length;
-  const totalWidth = PADDING_X * 2 + n * NODE_W + (n - 1) * GAP_X;
-  const totalHeight = PADDING_Y * 2 + NODE_H + STEM_LEN + SPINE_TO_NODE + NODE_H;
+  const totalWidth = PADDING_X * 2 + n * nodeW + (n - 1) * GAP_X;
+  const totalHeight = PADDING_Y * 2 + nodeH + STEM_LEN + SPINE_TO_NODE + nodeH;
 
   const centerX = totalWidth / 2;
-  const compY = PADDING_Y + NODE_H / 2;
-  const spineY = compY + NODE_H / 2 + STEM_LEN;
+  const compY = PADDING_Y + nodeH / 2;
+  const spineY = compY + nodeH / 2 + STEM_LEN;
   const partY = spineY + SPINE_TO_NODE;
 
   const partitiveSlots = props.partitives.map((member, i) => {
-    const x = PADDING_X + NODE_W / 2 + i * (NODE_W + GAP_X);
-    return { member, x };
+    const x = PADDING_X + nodeW / 2 + i * (nodeW + GAP_X);
+    const labelLines = wrapped[i + 1]; // index 0 is comprehensive
+    return { member, x, labelLines };
   });
 
   const leftX = partitiveSlots[0]?.x ?? centerX;
@@ -89,6 +142,8 @@ const layout = computed(() => {
     : lastX;
 
   return {
+    nodeW,
+    nodeH,
     totalWidth,
     totalHeight,
     centerX,
@@ -96,16 +151,20 @@ const layout = computed(() => {
     spineY,
     partY,
     partitiveSlots,
+    comprehensiveLines: wrapped[0],
     leftX,
     spineEndX,
   };
 });
 
-function strokeAttr(variant: LineVariant, opacity = 1) {
-  if (variant === 'solid-plus-dashed') {
-    return { stroke: 'currentColor', 'stroke-width': 1.4, 'stroke-dasharray': DASH_PATTERN, opacity };
-  }
-  return { stroke: 'currentColor', 'stroke-width': 1.4, opacity };
+function strokeAttr(variant: LineVariant, opacity = 1, override?: 'dash') {
+  const useDash = override === 'dash' || variant === 'solid-plus-dashed';
+  return {
+    stroke: 'currentColor',
+    'stroke-width': 1.4,
+    opacity,
+    ...(useDash ? { 'stroke-dasharray': DASH_PATTERN } : {}),
+  };
 }
 
 function emitNav(uri: string) {
@@ -126,28 +185,29 @@ function emitNav(uri: string) {
     <!-- Comprehensive label -->
     <g>
       <rect
-        :x="layout.centerX - NODE_W / 2"
-        :y="layout.compY - NODE_H / 2"
-        :width="NODE_W"
-        :height="NODE_H"
+        :x="layout.centerX - layout.nodeW / 2"
+        :y="layout.compY - layout.nodeH / 2"
+        :width="layout.nodeW"
+        :height="layout.nodeH"
         rx="6"
         class="fill-emerald-50 dark:fill-emerald-900/30 stroke-current"
         stroke-width="1.2"
       />
-      <text
-        :x="layout.centerX"
-        :y="layout.compY"
-        text-anchor="middle"
-        dominant-baseline="middle"
-        class="text-[11px] fill-emerald-900 dark:fill-emerald-100"
-      >{{ comprehensiveLabel }}</text>
+      <text :x="layout.centerX" text-anchor="middle" class="text-[11px] fill-emerald-900 dark:fill-emerald-100">
+        <tspan
+          v-for="(line, i) in layout.comprehensiveLines"
+          :key="i"
+          :x="layout.centerX"
+          :y="layout.compY - (layout.comprehensiveLines.length - 1) * 7 + i * 14"
+        >{{ line }}</tspan>
+      </text>
     </g>
 
     <!-- Criterion italic under the comprehensive -->
     <text
       v-if="criterion"
       :x="layout.centerX"
-      :y="layout.compY + NODE_H / 2 + 10"
+      :y="layout.compY + layout.nodeH / 2 + 10"
       text-anchor="middle"
       class="text-[9px] italic fill-emerald-800 dark:fill-emerald-200/80"
     >{{ criterion }}</text>
@@ -155,20 +215,20 @@ function emitNav(uri: string) {
     <!-- Stem (vertical from comprehensive to spine) -->
     <line
       v-if="lineVariant === 'single'"
-      :x1="layout.centerX" :y1="layout.compY + NODE_H / 2"
+      :x1="layout.centerX" :y1="layout.compY + layout.nodeH / 2"
       :x2="layout.centerX" :y2="layout.spineY"
       v-bind="strokeAttr('single')"
     />
     <template v-else>
       <line
-        :x1="layout.centerX - DOUBLE_GAP / 2" :y1="layout.compY + NODE_H / 2"
+        :x1="layout.centerX - DOUBLE_GAP / 2" :y1="layout.compY + layout.nodeH / 2"
         :x2="layout.centerX - DOUBLE_GAP / 2" :y2="layout.spineY"
         v-bind="strokeAttr('double-solid')"
       />
       <line
-        :x1="layout.centerX + DOUBLE_GAP / 2" :y1="layout.compY + NODE_H / 2"
+        :x1="layout.centerX + DOUBLE_GAP / 2" :y1="layout.compY + layout.nodeH / 2"
         :x2="layout.centerX + DOUBLE_GAP / 2" :y2="layout.spineY"
-        v-bind="strokeAttr(lineVariant === 'solid-plus-dashed' ? 'solid-plus-dashed' : 'double-solid')"
+        v-bind="strokeAttr(lineVariant, 1, lineVariant === 'solid-plus-dashed' ? 'dash' : undefined)"
       />
     </template>
 
@@ -188,26 +248,23 @@ function emitNav(uri: string) {
       <line
         :x1="layout.leftX" :y1="layout.spineY + DOUBLE_GAP / 2"
         :x2="layout.spineEndX" :y2="layout.spineY + DOUBLE_GAP / 2"
-        v-bind="strokeAttr(lineVariant === 'solid-plus-dashed' ? 'solid-plus-dashed' : 'double-solid')"
+        v-bind="strokeAttr(lineVariant, 1, lineVariant === 'solid-plus-dashed' ? 'dash' : undefined)"
       />
     </template>
 
     <!-- Drops + partitive nodes -->
     <g v-for="(slot, i) in layout.partitiveSlots" :key="i">
-      <!-- drop from spine to node (always single line per ISO 704) -->
       <line
         :x1="slot.x" :y1="layout.spineY"
-        :x2="slot.x" :y2="layout.partY - NODE_H / 2"
-        v-bind="strokeAttr('single', slot.member.certainty === 'possible' ? 0.5 : 1)"
-        :stroke-dasharray="slot.member.certainty === 'possible' ? DASH_PATTERN : undefined"
+        :x2="slot.x" :y2="layout.partY - layout.nodeH / 2"
+        v-bind="strokeAttr('single', slot.member.certainty === 'possible' ? 0.5 : 1, slot.member.certainty === 'possible' ? 'dash' : undefined)"
       />
-      <!-- node -->
       <g class="cursor-pointer" @click="emitNav(slot.member.uri)">
         <rect
-          :x="slot.x - NODE_W / 2"
-          :y="layout.partY - NODE_H / 2"
-          :width="NODE_W"
-          :height="NODE_H"
+          :x="slot.x - layout.nodeW / 2"
+          :y="layout.partY - layout.nodeH / 2"
+          :width="layout.nodeW"
+          :height="layout.nodeH"
           rx="6"
           :class="slot.member.certainty === 'possible'
             ? 'fill-emerald-50/60 dark:fill-emerald-900/20 stroke-current'
@@ -217,13 +274,18 @@ function emitNav(uri: string) {
         />
         <text
           :x="slot.x"
-          :y="layout.partY"
           text-anchor="middle"
-          dominant-baseline="middle"
           :class="slot.member.certainty === 'possible'
             ? 'text-[11px] fill-emerald-700/70 dark:fill-emerald-200/60 italic'
             : 'text-[11px] fill-emerald-900 dark:fill-emerald-100'"
-        >{{ slot.member.label }}</text>
+        >
+          <tspan
+            v-for="(line, j) in slot.labelLines"
+            :key="j"
+            :x="slot.x"
+            :y="layout.partY - (slot.labelLines.length - 1) * 7 + j * 14"
+          >{{ line }}</tspan>
+        </text>
       </g>
     </g>
   </svg>

package/src/components/PartitiveRelationList.vue

@@ -15,7 +15,7 @@ import type { PartitiveRelationWire, Manifest } from '../adapters/types';
 import { useRouter } from 'vue-router';
 import { useVocabularyStore } from '../stores/vocabulary';
 import { getFactory } from '../adapters/factory';
-import { useI18n } from '../i18n';
+import { useI18n, locale } from '../i18n';
 import {
   completenessLabel,
   certaintyLabel,
@@ -35,12 +35,26 @@ const store = useVocabularyStore();
 const factory = getFactory();
 const { t } = useI18n();
 
-function labelFor(uri: string): string {
-  const parsed = factory.resolve(uri);
-  if (parsed.type === 'internal') {
-    return parsed.conceptId || uri;
+function designationFor(uri: string): string {
+  const node = store.graph.getNode(uri);
+  if (node) {
+    const des = node.designations[locale.value]
+      || node.designations.eng
+      || Object.values(node.designations)[0];
+    if (des) return des;
+  }
+  const resolution = factory.resolve(uri);
+  if (resolution.type === 'internal') {
+    const adapter = store.datasets.get(resolution.registerId);
+    const entry = adapter?.getIndexEntry(resolution.conceptId);
+    if (entry) {
+      const des = entry.designations[locale.value]
+        || entry.designations.eng
+        || Object.values(entry.designations)[0];
+      if (des) return des;
+    }
   }
-  return uri;
+  return resolution.type === 'internal' ? resolution.conceptId : uri;
 }
 
 function navigate(uri: string) {
@@ -78,7 +92,7 @@ function pluralityBadge(plurality: NonNullable<PartitiveRelationWire['plurality'
 function labeledMembers(rel: PartitiveRelationWire): PartitiveMemberLabeled[] {
   return rel.partitives.map(m => ({
     uri: m.uri,
-    label: labelFor(m.uri),
+    label: designationFor(m.uri),
     certainty: m.certainty,
   }));
 }
@@ -110,7 +124,7 @@ function labeledMembers(rel: PartitiveRelationWire): PartitiveMemberLabeled[] {
           @click="navigate(rel.comprehensive)"
           class="ml-auto text-sm font-medium text-emerald-900 dark:text-emerald-100 hover:underline truncate"
         >
-          {{ labelFor(rel.comprehensive) }}
+          {{ designationFor(rel.comprehensive) }}
         </button>
       </div>
       <div
@@ -122,7 +136,7 @@ function labeledMembers(rel: PartitiveRelationWire): PartitiveMemberLabeled[] {
       <!-- Rake diagram (ISO 704 partitive-relation convention) -->
       <div class="px-3 py-3 overflow-x-auto">
         <PartitiveRelationDiagram
-          :comprehensive-label="labelFor(rel.comprehensive)"
+          :comprehensive-label="designationFor(rel.comprehensive)"
           :partitives="labeledMembers(rel)"
           :completeness="rel.completeness"
           :plurality="rel.plurality"

package/src/components/RelationSphere.vue

@@ -25,7 +25,7 @@ import { hashSeed, expandParams, portSide, portPoint, idToUriGet } from '../util
 import { useI18n } from '../i18n';
 
 const { t, locale } = useI18n();
-import type { Concept, Manifest, GraphEdge } from '../adapters/types';
+import type { Concept, Manifest, GraphEdge, PartitiveRelationWire } from '../adapters/types';
 import { conceptUri } from '../adapters/model-bridge';
 
 const props = defineProps<{
@@ -33,6 +33,7 @@ const props = defineProps<{
   manifest: Manifest;
   registerId: string;
   edges: GraphEdge[];
+  partitiveRelations?: PartitiveRelationWire[];
 }>();
 
 const emit = defineEmits<{
@@ -390,6 +391,38 @@ function buildGraph() {
 
   nodes = Array.from(nodeMap.values());
   links = resultLinks;
+
+  /* Ensure every PartitiveRelation member is present in the graph
+     so the rake bundle can render. The comprehensive is normally the
+     focus; partitives may need to be added as depth-1 neighbors. */
+  for (const rel of props.partitiveRelations ?? []) {
+    const compParsed = UriRouter.parseUri(rel.comprehensive);
+    if (!compParsed) continue;
+    const compNodeId = `${compParsed.registerId}/${compParsed.conceptId}`;
+    if (!nodeMap.has(compNodeId)) continue;
+
+    for (const member of rel.partitives) {
+      const parsed = UriRouter.parseUri(member.uri);
+      if (!parsed) continue;
+      const nid = `${parsed.registerId}/${parsed.conceptId}`;
+      if (nodeMap.has(nid)) continue;
+      if (nodeMap.size >= MAX_NODES) break;
+      const pos = fibonacciSpherePosition(1, nodeMap.size, MAX_NODES, hashSeed(parsed.conceptId));
+      nodeMap.set(nid, {
+        id: nid,
+        term: parsed.conceptId,
+        ref: parsed.registerId,
+        register: parsed.registerId,
+        conceptId: parsed.conceptId,
+        depth: 1,
+        x: pos.x, y: pos.y, z: pos.z,
+        vx: 0, vy: 0, vz: 0,
+      });
+      idToUri.set(nid, member.uri);
+      nodes = Array.from(nodeMap.values());
+    }
+  }
+
   graphVersion.value++;
 }
 
@@ -597,8 +630,10 @@ function drawEdges(cx: number, cy: number) {
   svg.setAttribute('height', String(h));
   svg.setAttribute('viewBox', `0 0 ${w} ${h}`);
   svg.setAttribute('preserveAspectRatio', 'none');
-  /* Remove only path + text + rect (edges), keep defs (markers) */
-  svg.querySelectorAll('path:not(defs path), text.edge-label, rect.edge-label-bg').forEach(el => el.remove());
+  /* Remove only path + text + rect (edges), keep defs (markers).
+     Also remove <line> elements (rake-bundle segments) and <circle>
+     (rake junction markers). */
+  svg.querySelectorAll('path:not(defs path), line.rake-seg, circle.rake-junction, text.edge-label, rect.edge-label-bg').forEach(el => el.remove());
   if (!svg.querySelector('defs')) ensureMarkers(svg);
 
   /* Compute visible node positions */
@@ -712,6 +747,182 @@ function drawEdges(cx: number, cy: number) {
     label.textContent = labelText;
     svg.appendChild(label);
   }
+
+  drawRakeBundles(svg, pos, cx, cy);
+}
+
+/**
+ * Render PartitiveRelations as ISO 704 rake/bracket bundles in the sphere.
+ *
+ * Each relation renders as a real bracket:
+ *
+ *     [comprehensive]
+ *            |
+ *            |          ← single stem (vertical/radial)
+ *            |
+ *        +---•---+      ← spine midpoint (junction)
+ *        |   |   |
+ *        |   |   |      ← N branches from spine midpoint
+ *      [p1] [p2] [p3]      (one per partitive)
+ *
+ * In 3D the bracket's "vertical" direction is along the line from
+ * comprehensive to the centroid of partitives. The branches fan out
+ * from the spine midpoint to each partitive. Right angles are not
+ * enforceable in a force-directed layout; instead we use a single
+ * shared junction point so the eye reads "ONE relation, N branches".
+ *
+ * ISO 704 line conventions applied (each segment: stem + spine + branches):
+ *   - default                              : single solid line
+ *   - plurality.isShared && !isUncertain   : two parallel solid lines
+ *                                            (close-set; offset ±DOUBLE_GAP/2)
+ *   - plurality.isShared && isUncertain    : one solid + one dashed line
+ *
+ * Per-member certainty:
+ *   - confirmed : branch is solid (with the plurality style above)
+ *   - possible  : branch is dashed + reduced opacity (overrides plurality
+ *                 on that branch only; the stem + spine keep the relation
+ *                 style)
+ *
+ * A diamond marker at the comprehensive end signals the hyperedge origin.
+ */
+function drawRakeBundles(
+  svg: SVGSVGElement,
+  pos: Map<string, {x: number; y: number}>,
+  _cx: number,
+  _cy: number,
+) {
+  const color = uiStore.isDark ? '#2dd4bf' : '#0d9488';
+  const DOUBLE_GAP = 4;
+  const DASH = '4 3';
+
+  for (const rel of props.partitiveRelations ?? []) {
+    const compParsed = UriRouter.parseUri(rel.comprehensive);
+    if (!compParsed) continue;
+    const compNodeId = `${compParsed.registerId}/${compParsed.conceptId}`;
+    const compPos = pos.get(compNodeId);
+    if (!compPos) continue;
+
+    const memberPositions = rel.partitives
+      .map(member => {
+        const parsed = UriRouter.parseUri(member.uri);
+        if (!parsed) return null;
+        const nid = `${parsed.registerId}/${parsed.conceptId}`;
+        const p = pos.get(nid);
+        return p ? { member, pos: p } : null;
+      })
+      .filter((x): x is { member: { uri: string; certainty: 'confirmed' | 'possible' }; pos: {x: number; y: number} } => x !== null);
+
+    if (memberPositions.length === 0) continue;
+
+    // Spine midpoint = centroid of comprehensive + all partitives.
+    // This is the junction where the stem meets the branches.
+    const cx_part = (compPos.x + memberPositions.reduce((s, m) => s + m.pos.x, 0)) / (memberPositions.length + 1);
+    const cy_part = (compPos.y + memberPositions.reduce((s, m) => s + m.pos.y, 0)) / (memberPositions.length + 1);
+
+    const isShared = !!rel.plurality?.isShared;
+    const isUncertain = !!rel.plurality?.isUncertain;
+
+    /**
+     * Draw a single straight line segment with optional parallel offset
+     * and dash style. Used for both stem and branches.
+     */
+    const drawSegment = (
+      ax: number, ay: number, bx: number, by: number,
+      opts: { offset?: number; dashed?: boolean; opacity?: number } = {},
+    ) => {
+      const offset = opts.offset ?? 0;
+      const dashed = opts.dashed ?? false;
+      const opacity = opts.opacity ?? 0.85;
+      if (offset === 0) {
+        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+        line.setAttribute('class', 'rake-seg');
+        line.setAttribute('x1', String(ax));
+        line.setAttribute('y1', String(ay));
+        line.setAttribute('x2', String(bx));
+        line.setAttribute('y2', String(by));
+        line.setAttribute('stroke', color);
+        line.setAttribute('stroke-width', '1.6');
+        line.setAttribute('opacity', String(opacity));
+        line.setAttribute('stroke-linecap', 'round');
+        if (dashed) line.setAttribute('stroke-dasharray', DASH);
+        svg.appendChild(line);
+      } else {
+        // Compute perpendicular unit vector for parallel offset
+        const dx = bx - ax, dy = by - ay;
+        const len = Math.hypot(dx, dy) || 1;
+        const px = -dy / len, py = dx / len;
+        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+        line.setAttribute('class', 'rake-seg');
+        line.setAttribute('x1', String(ax + px * offset));
+        line.setAttribute('y1', String(ay + py * offset));
+        line.setAttribute('x2', String(bx + px * offset));
+        line.setAttribute('y2', String(by + py * offset));
+        line.setAttribute('stroke', color);
+        line.setAttribute('stroke-width', '1.6');
+        line.setAttribute('opacity', String(opacity));
+        line.setAttribute('stroke-linecap', 'round');
+        if (dashed) line.setAttribute('stroke-dasharray', DASH);
+        svg.appendChild(line);
+      }
+    };
+
+    /**
+     * Draw a segment with the relation's plurality style:
+     * single solid (default), double solid (isShared),
+     * or solid + dashed (isShared + isUncertain).
+     */
+    const drawSegmentWithPlurality = (
+      ax: number, ay: number, bx: number, by: number,
+      opts: { opacity?: number; perMemberPossible?: boolean } = {},
+    ) => {
+      const opacity = opts.opacity ?? 0.85;
+      if (!isShared) {
+        drawSegment(ax, ay, bx, by, { opacity, dashed: opts.perMemberPossible });
+      } else {
+        // Close-set double: two parallel lines offset ±DOUBLE_GAP/2
+        drawSegment(ax, ay, bx, by, { offset: -DOUBLE_GAP / 2, opacity });
+        drawSegment(ax, ay, bx, by, {
+          offset: DOUBLE_GAP / 2,
+          opacity,
+          dashed: isUncertain || opts.perMemberPossible,
+        });
+      }
+    };
+
+    // 1. Stem: comprehensive → spine midpoint
+    drawSegmentWithPlurality(compPos.x, compPos.y, cx_part, cy_part);
+
+    // 2. Branches: spine midpoint → each partitive
+    for (const { member, pos: pPos } of memberPositions) {
+      drawSegmentWithPlurality(cx_part, cy_part, pPos.x, pPos.y, {
+        opacity: member.certainty === 'possible' ? 0.45 : 0.85,
+        perMemberPossible: member.certainty === 'possible',
+      });
+    }
+
+    // 3. Junction marker at spine midpoint (small filled circle)
+    const junction = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+    junction.setAttribute('class', 'rake-junction');
+    junction.setAttribute('cx', String(cx_part));
+    junction.setAttribute('cy', String(cy_part));
+    junction.setAttribute('r', '3');
+    junction.setAttribute('fill', color);
+    junction.setAttribute('opacity', '0.85');
+    junction.setAttribute('stroke', uiStore.isDark ? '#0a1f1c' : '#ffffff');
+    junction.setAttribute('stroke-width', '1');
+    svg.appendChild(junction);
+
+    // 4. Diamond marker at comprehensive end (hyperedge origin signal)
+    const diamond = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    const dsize = 5;
+    diamond.setAttribute('d',
+      `M ${compPos.x} ${compPos.y - dsize} L ${compPos.x + dsize} ${compPos.y} L ${compPos.x} ${compPos.y + dsize} L ${compPos.x - dsize} ${compPos.y} Z`);
+    diamond.setAttribute('fill', color);
+    diamond.setAttribute('opacity', '0.9');
+    diamond.setAttribute('stroke', uiStore.isDark ? '#0a1f1c' : '#ffffff');
+    diamond.setAttribute('stroke-width', '1');
+    svg.appendChild(diamond);
+  }
 }
 
 function ensureMarkers(svg: SVGSVGElement) {

package/src/composables/use-concept-edges.ts

@@ -97,6 +97,41 @@ export function useConceptEdges(
     return edgeDisplayCache.value.get(uri) ?? { uri, conceptId: uri, designation: '', tooltip: uri, isLocal: false, badge: null };
   }
 
+  /**
+   * Resolve a concept's designation in the current UI locale.
+   * Fallback chain: locale → eng → any available.
+   *
+   * Sources tried in order:
+   *   1. BFS graph node (already loaded as a neighbor)
+   *   2. Dataset adapter index entry (every concept in the dataset)
+   *   3. conceptId as last-resort fallback
+   *
+   * Used by PartitiveRelationList (sidebar rake diagram) so the rake
+   * shows designations like 'system of quantities' instead of bare
+   * IDs like '1.3'.
+   */
+  function designationFor(uri: string): string {
+    const node = store.graph.getNode(uri);
+    if (node) {
+      const des = node.designations[locale.value]
+        || node.designations.eng
+        || Object.values(node.designations)[0];
+      if (des) return des;
+    }
+    const resolution = factory.resolve(uri);
+    if (resolution.type === 'internal') {
+      const adapter = store.datasets.get(resolution.registerId);
+      const entry = adapter?.getIndexEntry(resolution.conceptId);
+      if (entry) {
+        const des = entry.designations[locale.value]
+          || entry.designations.eng
+          || Object.values(entry.designations)[0];
+        if (des) return des;
+      }
+    }
+    return resolution.type === 'internal' ? resolution.conceptId : uri;
+  }
+
   function edgeBadgeColor(type: string, direction: 'out' | 'in'): string {
     if (type === 'supersedes' || type === 'superseded_by') {
       return direction === 'out' ? 'text-orange-700 bg-orange-50' : 'text-red-700 bg-red-50';
@@ -262,6 +297,7 @@ export function useConceptEdges(
     incomingEdges,
     edgeDisplayCache,
     getEdgeDisplay,
+    designationFor,
     edgeBadgeColor,
     inverseEdgeType,
     conceptRelated,

package/src/views/ConceptView.vue

@@ -3,6 +3,8 @@ import { computed, watch, ref, onMounted, onUnmounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { useVocabularyStore } from '../stores/vocabulary';
 import { conceptUri } from '../adapters/model-bridge';
+import { UriRouter } from '../adapters/UriRouter';
+import type { PartitiveRelationWire, PartitiveMemberWire } from '../adapters/types';
 import ConceptDetail from '../components/ConceptDetail.vue';
 import RelationSphere from '../components/RelationSphere.vue';
 import ShortcutsModal from '../components/ShortcutsModal.vue';
@@ -58,6 +60,55 @@ const manifest = computed(() => store.currentManifest);
 const edges = computed(() => store.conceptEdges);
 const activeRegisterId = computed(() => sphereFocusPayload.value?.registerId ?? props.registerId);
 const adjacent = ref({ prev: null as string | null, next: null as string | null });
+
+/**
+ * Project concept.partitiveRelations (glossarist-js v2 model) into the
+ * URI-resolved wire shape the sphere consumes. Mirrors the projection
+ * in use-concept-edges.ts but inline here so the sphere can render rake
+ * bundles without a full composable setup.
+ */
+const partitiveRelationsForSphere = computed<PartitiveRelationWire[]>(() => {
+  const c = concept.value;
+  const m = manifest.value;
+  if (!c || !m) return [];
+  const sourceUri = conceptUri(c, activeRegisterId.value, m.uriBase);
+  const out: PartitiveRelationWire[] = [];
+  for (const rel of c.partitiveRelations ?? []) {
+    const compRef = rel.comprehensive;
+    const compTarget = store.manifests.get(activeRegisterId.value)
+      ? UriRouter.buildConceptUri(m.uriBase, activeRegisterId.value, compRef.id ?? '')
+      : null;
+    if (!compRef.id || !compTarget) continue;
+    const partitives: PartitiveMemberWire[] = rel.partitives
+      .map(member => {
+        const ref = member.ref;
+        if (!ref?.id) return null;
+        const targetRegister = store.manifests.has(activeRegisterId.value)
+          ? activeRegisterId.value
+          : activeRegisterId.value;
+        const uri = UriRouter.buildConceptUri(m.uriBase, targetRegister, ref.id);
+        if (uri === sourceUri) return null;
+        return { uri, certainty: member.certainty };
+      })
+      .filter((x): x is PartitiveMemberWire => x !== null);
+    if (partitives.length === 0) continue;
+    out.push({
+      source: sourceUri,
+      comprehensive: compTarget,
+      partitives,
+      completeness: rel.completeness,
+      plurality: rel.plurality
+        ? {
+            isShared: rel.plurality.isShared,
+            isUncertain: rel.plurality.isUncertain,
+            sharedType: null,
+          }
+        : null,
+      register: activeRegisterId.value,
+    });
+  }
+  return out;
+});
 const viewMode = ref<'detail' | 'sphere'>(
   router.currentRoute.value.query.view === 'sphere' ? 'sphere' : 'detail'
 );
@@ -280,6 +331,7 @@ onUnmounted(() => window.removeEventListener('keydown', onKeydown));
           :manifest="manifest"
           :register-id="activeRegisterId"
           :edges="edges"
+          :partitive-relations="partitiveRelationsForSphere"
           @navigate="onSphereNavigate"
         />
         <!-- Detail mode -->