SDK Guide

Rendering Product-Graph UIs

Use the presentation and shapes barrels to render UPG nodes consistently across every surface — dashboards, drawers, lists, graph canvases.

Human labels from type ids

Every node carries a machine type like 'value_proposition' or 'metric_quality_assessment'. Don’t hand-render these. UPG_TYPE_LABELS_MAP is the canonical lookup — it returns the human-readable label every UPG surface should use.

import { UPG_TYPE_LABELS_MAP } from '@unified-product-graph/core/presentation'

function renderTypeBadge(node: { type: string }) {
  const label = UPG_TYPE_LABELS_MAP.get(node.type)?.label ?? node.type
  return <span className="type-badge">{label}</span>
}

Narrowing nodes for rendering

When you render a node you usually need its typed properties, not the generic base shape. Use the UPGBaseNode + per-type property interfaces from /shapes to narrow correctly. The presentation barrel adds the lens / domain-ring metadata you need to colour and group nodes consistently across views.

import type { UPGBaseNode } from '@unified-product-graph/core/shapes'
import { UPG_TYPE_LABELS_MAP } from '@unified-product-graph/core/presentation'

type PersonaProperties = { archetype?: string; goals?: string[] }

function renderCard(node: UPGBaseNode) {
  if (node.type === 'persona') {
    const props = node.properties as PersonaProperties
    return <Persona name={node.title} archetype={props.archetype} />
  }
  return <Fallback type={UPG_TYPE_LABELS_MAP.get(node.type)?.label ?? node.type} />
}

SDK Guide

Rendering Product-Graph UIs

Use the presentation and shapes barrels to render UPG nodes consistently across every surface — dashboards, drawers, lists, graph canvases.

Human labels from type ids

import { UPG_TYPE_LABELS_MAP } from '@unified-product-graph/core/presentation'

function renderTypeBadge(node: { type: string }) {
  const label = UPG_TYPE_LABELS_MAP.get(node.type)?.label ?? node.type
  return <span className="type-badge">{label}</span>
}

Narrowing nodes for rendering

import type { UPGBaseNode } from '@unified-product-graph/core/shapes'
import { UPG_TYPE_LABELS_MAP } from '@unified-product-graph/core/presentation'

type PersonaProperties = { archetype?: string; goals?: string[] }

function renderCard(node: UPGBaseNode) {
  if (node.type === 'persona') {
    const props = node.properties as PersonaProperties
    return <Persona name={node.title} archetype={props.archetype} />
  }
  return <Fallback type={UPG_TYPE_LABELS_MAP.get(node.type)?.label ?? node.type} />
}