@manta-eu/react 0.1.10 → 0.2.1

package/src/graph/special-nodes/GenericView.tsx

@@ -1,47 +1,24 @@
-import { isPresent } from "@manta-eu/lib/present";
-import { expandPrefix } from "@manta-eu/rdf-lib/namespaces";
 import { ChevronRight } from "lucide-react";
 import { memo, useCallback, useMemo } from "react";
-import {
-  getCurrencyCode,
-  isDisplayablePreviewKey,
-  selectPriorityPreviewFields,
-  type PreviewFieldHints,
-} from "../graph-list-utils";
-import { ontologyTermIrisForProperties, withOntologyLabels } from "../ontology-labels";
-import { rdfTypeColors } from "../rdf-type-colors";
-import { statusColors } from "../status-utils";
-import { useGraphTheme } from "../themes";
-import type { EntityViewProps } from "../types";
+import type { PreviewFieldHints } from "../graph-list-utils";
+import { statusBadgeVariant } from "../status-utils";
+import type { EntityViewProps, NodeProperty } from "../types";
+import { AttributeList, useAttributeFacts } from "./AttributeList";
+import { typeColor } from "./card-facts";
 import { getStatus } from "./node-data";
-import { useOntologyTerms } from "#hooks/use-ontology-terms";
+import { Badge } from "#components/badge/index";
 import { cn } from "#style";
 
-const defaultColor = "#6b7280";
-const explainCardMaxFacts = 5;
-
-type CardFact = { label: string; value: string; highlighted: boolean };
-
-function getNodeColor(type?: string): string {
-  if (!type) return defaultColor;
-  return rdfTypeColors[type] ?? rdfTypeColors[expandPrefix(type)] ?? defaultColor;
-}
-
-function getStatusStyle(status: string): { bg: string; text: string } {
-  return statusColors[status.toLowerCase()] ?? { bg: "#94a3b8", text: "#ffffff" };
-}
-
 export type GenericViewProps = EntityViewProps & {
   previewHints?: PreviewFieldHints;
   onToggleCollapse?: () => void;
+  defaultExpanded?: boolean;
 };
 
 export const GenericView = memo(function GenericView(props: GenericViewProps) {
-  const { data, selected = false, onContextMenu, previewHints, onToggleCollapse } = props;
-
-  const theme = useGraphTheme();
+  const { data, selected = false, onContextMenu, previewHints, onToggleCollapse, defaultExpanded } = props;
 
-  const color = useMemo(() => getNodeColor(data.type), [data.type]);
+  const color = useMemo(() => typeColor(data.type), [data.type]);
   const hasChildren = data.hasChildren;
   const isCollapsed = data.isCollapsed;
 
@@ -55,137 +32,70 @@ export const GenericView = memo(function GenericView(props: GenericViewProps) {
 
   const status = useMemo(() => getStatus(data), [data]);
 
-  const ontologyTerms = useOntologyTerms(
-    useMemo(() => ontologyTermIrisForProperties(data.properties), [data.properties]),
-  );
-
-  const labeledProperties = useMemo(
-    () => withOntologyLabels(data.properties, ontologyTerms),
-    [data.properties, ontologyTerms],
-  );
-
-  const { displayProperties, hiddenPropertiesCount } = useMemo(() => {
-    const properties = status ? labeledProperties.filter((prop) => prop.key !== status.key) : labeledProperties;
-
-    if (previewHints) {
-      const fields = selectPriorityPreviewFields(properties, previewHints, getCurrencyCode([], properties), {
-        limit: explainCardMaxFacts,
-        keepUnmatched: true,
-      });
-
-      const total = properties.filter((prop) => isDisplayablePreviewKey(prop.key)).length;
-
-      const facts: CardFact[] = fields.map((field) => ({
-        label: field.label,
-        value: field.value,
-        highlighted: field.isHighlighted ?? false,
-      }));
-
-      return { displayProperties: facts, hiddenPropertiesCount: Math.max(0, total - facts.length) };
-    }
-
-    const importantKeys = ["name", "title", "label", "description", "id"];
-    const important: typeof properties = [];
-    const other: typeof properties = [];
-
-    for (const prop of properties) {
-      const keyLower = prop.key.toLowerCase();
-      if (importantKeys.some((k) => keyLower.includes(k))) {
-        important.push(prop);
-      } else {
-        other.push(prop);
-      }
-    }
-
-    const maxProperties = 4;
-    const allDisplayed: CardFact[] = [...important, ...other]
-      .slice(0, maxProperties)
-      .map((prop) => ({ label: prop.label ?? prop.key, value: prop.value, highlighted: false }));
-
-    return {
-      displayProperties: allDisplayed,
-      hiddenPropertiesCount: Math.max(0, important.length + other.length - maxProperties),
-    };
-  }, [labeledProperties, status, previewHints]);
+  const include = useCallback((property: NodeProperty) => !status || property.key !== status.key, [status]);
+  // The header badge shows the status, so an IRI-valued one must not come back as a relation row either.
+  const relations = useMemo(() => {
+    const statusIri = status ? data.properties.find((property) => property.key === status.key)?.iri : undefined;
+    return statusIri ? data.relations?.filter((relation) => relation.predicate !== statusIri) : data.relations;
+  }, [status, data.properties, data.relations]);
+
+  const { facts, previewCount } = useAttributeFacts({
+    properties: data.properties,
+    relations,
+    jsonLd: data.jsonLd,
+    title: data.label,
+    type: data.type,
+    prefixLabels: true,
+    previewHints,
+    include,
+  });
 
   return (
     <div
-      className="rounded-lg shadow-md min-w-60 max-w-80 transition-all duration-200 overflow-hidden"
-      style={{
-        backgroundColor: theme.node.background,
-        borderColor: color,
-        borderWidth: 2,
-        borderStyle: "solid",
-        ...(selected && { boxShadow: `0 0 0 2px ${theme.node.selectedRing}` }),
-      }}
+      className={cn(
+        "min-w-60 max-w-80 overflow-hidden rounded-md-v4 border border-muted-border bg-muted text-default-foreground transition-shadow duration-200",
+        selected && "ring-2 ring-active-border",
+      )}
       onContextMenu={onContextMenu}
     >
-      <div className="px-3 py-2 flex items-center justify-between gap-2" style={{ backgroundColor: `${color}20` }}>
-        <div className="flex items-center gap-2 min-w-0">
+      <div className="flex items-center justify-between gap-2 border-b border-muted-border px-3 py-2">
+        <div className="flex min-w-0 items-center gap-2">
           {hasChildren && onToggleCollapse && (
             <button
+              type="button"
               onClick={handleToggleClick}
-              className={cn(
-                "w-5 h-5 rounded flex items-center justify-center shrink-0",
-                "bg-muted",
-                "hover:bg-muted transition-all duration-200",
-              )}
-              style={{ color: theme.node.text }}
+              className="nodrag flex size-5 shrink-0 items-center justify-center rounded bg-accent text-muted-foreground transition-colors hover:text-default-foreground"
               title={isCollapsed ? "Expand" : "Collapse"}
             >
-              <ChevronRight className={cn("w-3 h-3 transition-transform duration-200", !isCollapsed && "rotate-90")} />
+              <ChevronRight className={cn("size-3 transition-transform duration-200", !isCollapsed && "rotate-90")} />
             </button>
           )}
-          <div className="typography-small truncate" style={{ color: theme.node.text }} title={data.label}>
+          <span aria-hidden className="size-2 shrink-0 rounded-full" style={{ backgroundColor: color }} />
+          <div className="typography-small-medium truncate" title={data.label}>
             {data.label}
           </div>
         </div>
-        <div className="flex items-center gap-1.5 shrink-0">
+        <div className="flex shrink-0 items-center gap-1.5">
           {status && (
-            <span
-              className="px-1.5 py-0.5 rounded typography-tiny"
-              style={{ backgroundColor: getStatusStyle(status.value).bg, color: getStatusStyle(status.value).text }}
-            >
+            <Badge size="sm" variant={statusBadgeVariant(status.value)}>
               {status.value.toLowerCase()}
-            </span>
+            </Badge>
           )}
           {hasChildren && isCollapsed && (
-            <span
-              className="px-1.5 py-0.5 rounded typography-tiny text-primary-foreground"
-              style={{ backgroundColor: color }}
-            >
+            <Badge size="sm" variant="secondary">
               +{data.childIds.length}
-            </span>
+            </Badge>
           )}
         </div>
       </div>
 
-      {isPresent(displayProperties) && (
-        <div className="px-3 py-2 space-y-1">
-          {displayProperties.map(({ label, value, highlighted }, index) => (
-            <div key={index} className="flex justify-between typography-tiny gap-2">
-              <span style={{ color: theme.node.textMuted }} className="shrink-0">
-                {label}:
-              </span>
-              <span
-                style={{
-                  color: highlighted ? theme.node.selectedRing : theme.node.text,
-                  fontWeight: highlighted ? 600 : undefined,
-                }}
-                className="truncate text-right tabular-nums"
-                title={value}
-              >
-                {value}
-              </span>
-            </div>
-          ))}
-          {hiddenPropertiesCount > 0 && (
-            <div className="typography-tiny italic" style={{ color: theme.node.textMuted }}>
-              +{hiddenPropertiesCount} more
-            </div>
-          )}
-        </div>
-      )}
+      <AttributeList
+        facts={facts}
+        previewCount={previewCount}
+        defaultExpanded={defaultExpanded}
+        searchClassName="px-3"
+        bodyClassName="px-3 py-2"
+      />
     </div>
   );
 });

package/src/graph/special-nodes/card-facts.ts

@@ -0,0 +1,278 @@
+import { isFullIri } from "@manta-eu/client/shared/rdf-namespaces";
+import { isPresent } from "@manta-eu/lib/present";
+import { compactUri, expandPrefix } from "@manta-eu/rdf-lib/namespaces";
+import type { LucideIcon } from "lucide-react";
+import { groupBy, isNotNil, uniq } from "ramda";
+import {
+  getCurrencyCode,
+  isDisplayablePreviewKey,
+  normalizePredicateKey,
+  selectPriorityPreviewFields,
+  type PreviewFieldHints,
+} from "../graph-list-utils";
+import { classifyPropertyDisplay, type PropertyDisplay } from "../nodes/node-property-display";
+import { ontologyPropertyIri } from "../ontology-labels";
+import { formatDisplayValue, isIsoDateTime, parseNumeric } from "../property-formatters";
+import { rdfTypeColors } from "../rdf-type-colors";
+import type { NodeProperty, NodeRelation } from "../types";
+import { getChannelFromId } from "./node-data";
+import { propertyIcon, relationIcon } from "./property-icons";
+import type { Channel } from "#components/channel-icon/index";
+import { formatPropertyLabel } from "#lib/iri-labels";
+import type { OntologyTerm } from "#lib/ontology-terms";
+import { searchItems } from "#lib/search";
+
+export const explainCardMaxFacts = 5;
+export const defaultCardMaxFacts = 4;
+export const attributeSearchThreshold = 8;
+export const collapsedChipLimit = 3;
+
+const defaultColor = "#6b7280";
+const importantKeys = new Set(["name", "title", "label", "description", "id", "identifier"]);
+
+export type CardFact = {
+  key: string;
+  predicate?: string;
+  label: string;
+  value: string;
+  display: PropertyDisplay;
+  icon: LucideIcon;
+  entityIris: string[];
+  entityColor?: string;
+  highlighted: boolean;
+  channel?: Channel;
+};
+
+export function typeColor(type?: string): string {
+  if (!type) return defaultColor;
+  return rdfTypeColors[type] ?? rdfTypeColors[expandPrefix(type)] ?? defaultColor;
+}
+
+// Only numbers and timestamps are reformatted; text such as "FR" stays as stored.
+export function formatFactValue(property: NodeProperty): string {
+  if (parseNumeric(property.value) === null && !isIsoDateTime(property.value)) return property.value;
+
+  return formatDisplayValue(property.value, {
+    predicate: property.iri ?? property.key,
+    predicateLabel: property.label ?? property.key,
+    valueScale: property.valueScale,
+  });
+}
+
+function looksRaw(label: string): boolean {
+  return !/\s/.test(label) && (/^[a-z]/.test(label) || /[a-z][A-Z]/.test(label) || /[:/#]/.test(label));
+}
+
+export function readableLabel(property: NodeProperty): string {
+  const raw = property.label || property.iri || property.key;
+
+  // Only a raw property name or IRI is re-cased; a real label like "ROAS" stays as written.
+  return looksRaw(raw) ? formatPropertyLabel(raw) : raw;
+}
+
+export function iriChannel(iri: string | undefined): Channel | undefined {
+  return iri ? getChannelFromId(compactUri(iri)) : undefined;
+}
+
+function vocabularyPrefix(iri: string): string | undefined {
+  const compact = compactUri(iri);
+  return compact === iri ? undefined : /^([A-Za-z][\w-]*):/.exec(compact)?.[1];
+}
+
+// A platform with a logo shows it next to the label; another vocabulary than schema.org or the card's own type
+// keeps its prefix as text.
+export function sourcedLabel(label: string, predicate: string | undefined, type?: string): string {
+  if (!predicate || isPresent(iriChannel(predicate))) return label;
+
+  const prefix = vocabularyPrefix(predicate);
+  if (!prefix || prefix === "schema" || (type && prefix === vocabularyPrefix(expandPrefix(type)))) return label;
+
+  return `${prefix.charAt(0).toUpperCase()}${prefix.slice(1)}:${label}`;
+}
+
+type LabelSource = (label: string, predicate: string | undefined) => string;
+
+const plainLabel: LabelSource = (label) => label;
+
+function termFor(terms: Map<string, OntologyTerm>, predicate: string | undefined): OntologyTerm | undefined {
+  const iri = ontologyPropertyIri(predicate);
+  return iri ? terms.get(iri) : undefined;
+}
+
+// Whole words, so "confidence" or "width" never pass for an "id".
+export function keyWords(key: string): string[] {
+  return key
+    .split(/[^A-Za-z0-9]+|(?<=[a-z0-9])(?=[A-Z])/)
+    .filter(Boolean)
+    .map((word) => word.toLowerCase());
+}
+
+export function relationFacts(
+  relations: NodeRelation[],
+  terms: Map<string, OntologyTerm>,
+  labelFor: LabelSource = plainLabel,
+): CardFact[] {
+  const byPredicate = groupBy(
+    (relation: NodeRelation) => relation.predicate,
+    relations.filter((relation) => isFullIri(relation.target)),
+  );
+
+  return Object.entries(byPredicate).map(([predicate, group]) => {
+    const targets = uniq((group ?? []).map((relation) => relation.target));
+    const term = termFor(terms, predicate);
+    const range = term?.rangeIncludes[0];
+    const allOntologyTerms = targets.every((target) => isPresent(termFor(terms, target)?.label));
+
+    return {
+      key: `${predicate} entities`,
+      predicate,
+      label: labelFor(readableLabel({ key: predicate, value: "", iri: predicate, label: term?.label }), predicate),
+      value: targets.join(", "),
+      display: { kind: "text", text: targets.join(", ") },
+      icon: allOntologyTerms ? propertyIcon({ range, display: { kind: "text", text: "" } }) : relationIcon(range),
+      entityIris: targets,
+      entityColor: typeColor(range),
+      highlighted: false,
+      channel: iriChannel(predicate),
+    };
+  });
+}
+
+function propertyFact(
+  property: NodeProperty,
+  jsonLd: Record<string, unknown>,
+  terms: Map<string, OntologyTerm>,
+  labelFor: LabelSource,
+) {
+  const label = readableLabel(property);
+  const value = formatFactValue(property);
+  const raw = jsonLd[property.iri ?? ""] ?? property.value;
+  const display = classifyPropertyDisplay({ label, formatted: value, raw });
+  const range = termFor(terms, property.iri)?.rangeIncludes[0];
+
+  return {
+    key: property.iri ?? property.key,
+    label: labelFor(label, property.iri),
+    value,
+    display,
+    icon: propertyIcon({ range, display, isDate: isIsoDateTime(property.value) }),
+    entityIris: [],
+    highlighted: false,
+    channel: iriChannel(property.iri),
+  } satisfies CardFact;
+}
+
+// graph-model records each IRI value as a relation, rendered as a chip; the property keeps only its other values.
+function withoutRelationValues(
+  property: NodeProperty,
+  relations: NodeRelation[],
+  jsonLd: Record<string, unknown>,
+): NodeProperty[] {
+  const targets = new Set(
+    relations.filter((relation) => relation.predicate === property.iri).map((relation) => relation.target),
+  );
+  if (targets.size === 0) return [property];
+
+  const raw = jsonLd[property.iri ?? ""];
+  const values = (Array.isArray(raw) ? raw : [raw]).filter(
+    (value): value is string | number | boolean => isNotNil(value) && typeof value !== "object",
+  );
+  const rest = values.map(String).filter((value) => !targets.has(value));
+
+  return isPresent(rest) ? [{ ...property, value: rest.join(" | ") }] : [];
+}
+
+export type BuildCardFactsArgs = {
+  properties: NodeProperty[];
+  relations: NodeRelation[];
+  jsonLd: Record<string, unknown>;
+  terms: Map<string, OntologyTerm>;
+  title?: string;
+  type?: string;
+  // Only the fallback card names a foreign vocabulary; typed cards keep their labels as written.
+  prefixLabels?: boolean;
+  previewHints?: PreviewFieldHints;
+};
+
+export function buildCardFacts(args: BuildCardFactsArgs): { facts: CardFact[]; previewCount: number } {
+  const { relations, jsonLd, terms, title, type, prefixLabels = false, previewHints } = args;
+  const labelFor: LabelSource = prefixLabels ? (label, predicate) => sourcedLabel(label, predicate, type) : plainLabel;
+
+  const properties = args.properties.flatMap((property) => withoutRelationValues(property, relations, jsonLd));
+  const linkedFacts = relationFacts(relations, terms, labelFor);
+  function notTitle(fact: CardFact) {
+    return title === undefined || fact.value !== title;
+  }
+
+  if (previewHints) {
+    const displayable = properties
+      .filter((property) => isDisplayablePreviewKey(property.key))
+      .map((property) => ({ ...property, label: readableLabel(property) }));
+    const fields = selectPriorityPreviewFields(displayable, previewHints, getCurrencyCode([], properties), {
+      limit: displayable.length,
+      keepUnmatched: true,
+    });
+
+    const explainFacts = fields.map((field): CardFact => {
+      const display = classifyPropertyDisplay({ label: field.label, formatted: field.value, raw: field.rawValue });
+
+      return {
+        key: field.id,
+        label: labelFor(field.label, field.predicate),
+        value: field.value,
+        display,
+        icon: propertyIcon({ display, isDate: isIsoDateTime(field.rawValue ?? "") }),
+        entityIris: [],
+        highlighted: field.isHighlighted ?? false,
+        channel: iriChannel(field.predicate),
+      };
+    });
+
+    const highlight = previewHints.highlightPredicate
+      ? normalizePredicateKey(previewHints.highlightPredicate)
+      : undefined;
+    function isHighlighted(fact: CardFact) {
+      return isPresent(highlight) && isPresent(fact.predicate) && normalizePredicateKey(fact.predicate) === highlight;
+    }
+    const linked = linkedFacts.map((fact) => (isHighlighted(fact) ? { ...fact, highlighted: true } : fact));
+
+    return {
+      facts: [
+        ...linked.filter(isHighlighted),
+        ...explainFacts,
+        ...linked.filter((fact) => !isHighlighted(fact)),
+      ].filter(notTitle),
+      previewCount: explainCardMaxFacts,
+    };
+  }
+
+  function isImportant(property: NodeProperty) {
+    return keyWords(property.key).some((word) => importantKeys.has(word));
+  }
+  const important = properties.filter(isImportant).map((property) => propertyFact(property, jsonLd, terms, labelFor));
+  const other = properties
+    .filter((property) => !isImportant(property))
+    .map((property) => propertyFact(property, jsonLd, terms, labelFor));
+
+  return { facts: [...important, ...linkedFacts, ...other].filter(notTitle), previewCount: defaultCardMaxFacts };
+}
+
+export function isAttributeSearchable(expanded: boolean, factCount: number): boolean {
+  return expanded && factCount > attributeSearchThreshold;
+}
+
+export function visibleChips(iris: string[], expanded: boolean): { shown: string[]; hiddenCount: number } {
+  const shown = expanded ? iris : iris.slice(0, collapsedChipLimit);
+
+  return { shown, hiddenCount: iris.length - shown.length };
+}
+
+// A linked-entity row is found by its label: its value is the targets' IRIs, which say nothing a reader sees.
+export function searchFacts(facts: CardFact[], query: string): CardFact[] {
+  const documents = facts.map((fact) => ({
+    fact,
+    text: isPresent(fact.entityIris) ? fact.label : `${fact.label} ${fact.value}`,
+  }));
+
+  return searchItems(documents, query, { keys: ["text"], threshold: 0.35 }).map((document) => document.fact);
+}

package/src/graph/special-nodes/property-icons.ts

@@ -0,0 +1,59 @@
+import { RangeKind, rangeKind } from "@manta-eu/ldo/range-kinds";
+import { expandPrefix } from "@manta-eu/rdf-lib/namespaces";
+import {
+  AlignLeft,
+  Building2,
+  Calendar,
+  CircleDollarSign,
+  Hash,
+  Link2,
+  type LucideIcon,
+  Palette,
+  Percent,
+  Tags,
+  ToggleLeft,
+  Type,
+  User,
+} from "lucide-react";
+import { match } from "ts-pattern";
+import type { PropertyDisplay } from "../nodes/node-property-display";
+
+const kindIcons: Record<RangeKind, LucideIcon> = {
+  [RangeKind.Text]: Type,
+  [RangeKind.Number]: Hash,
+  [RangeKind.Boolean]: ToggleLeft,
+  [RangeKind.Date]: Calendar,
+  [RangeKind.Url]: Link2,
+  [RangeKind.Money]: CircleDollarSign,
+  [RangeKind.Person]: User,
+  [RangeKind.Organization]: Building2,
+};
+
+function displayIcon(display: PropertyDisplay): LucideIcon {
+  return match(display)
+    .with({ kind: "number" }, () => Hash)
+    .with({ kind: "boolean" }, () => ToggleLeft)
+    .with({ kind: "color" }, () => Palette)
+    .with({ kind: "ratio" }, () => Percent)
+    .with({ kind: "tags" }, () => Tags)
+    .with({ kind: "prose" }, () => AlignLeft)
+    .with({ kind: "text" }, () => Type)
+    .exhaustive();
+}
+
+export function propertyIcon(args: { range?: string; display?: PropertyDisplay; isDate?: boolean }): LucideIcon {
+  const { range, display, isDate = false } = args;
+
+  const kind = range ? rangeKind(expandPrefix(range)) : undefined;
+  if (kind) return kindIcons[kind];
+
+  if (isDate) return Calendar;
+
+  return display ? displayIcon(display) : Type;
+}
+
+export function relationIcon(range?: string): LucideIcon {
+  const kind = range ? rangeKind(expandPrefix(range)) : undefined;
+
+  return kind === RangeKind.Person || kind === RangeKind.Organization ? kindIcons[kind] : Link2;
+}

package/src/graph/status-utils.ts

@@ -1,4 +1,5 @@
 import type { NodeProperty } from "./types";
+import type { BadgeVariant } from "#components/badge/index";
 
 export function titleCase(s: string): string {
   return s.replace(/\b\w/g, (c) => c.toUpperCase());
@@ -18,6 +19,45 @@ export const statusColors: Record<string, { bg: string; text: string }> = {
   deleted: { bg: "#ef4444", text: "#ffffff" },
 };
 
+export enum NodeStatus {
+  Active = "active",
+  Enabled = "enabled",
+  Serving = "serving",
+  Paused = "paused",
+  Pending = "pending",
+  Draft = "draft",
+  Archived = "archived",
+  Disabled = "disabled",
+  Removed = "removed",
+  Error = "error",
+  Deleted = "deleted",
+}
+
+const knownStatuses: ReadonlySet<string> = new Set(Object.values(NodeStatus));
+
+export function isNodeStatus(value: string): value is NodeStatus {
+  return knownStatuses.has(value);
+}
+
+const statusBadgeVariants: Record<NodeStatus, BadgeVariant> = {
+  [NodeStatus.Active]: "success",
+  [NodeStatus.Serving]: "success",
+  [NodeStatus.Enabled]: "copy",
+  [NodeStatus.Draft]: "copy",
+  [NodeStatus.Paused]: "warning",
+  [NodeStatus.Pending]: "warning",
+  [NodeStatus.Archived]: "copy",
+  [NodeStatus.Disabled]: "copy",
+  [NodeStatus.Removed]: "destructive",
+  [NodeStatus.Error]: "destructive",
+  [NodeStatus.Deleted]: "destructive",
+};
+
+export function statusBadgeVariant(status: string): BadgeVariant {
+  const normalized = status.trim().toLowerCase();
+  return isNodeStatus(normalized) ? statusBadgeVariants[normalized] : "copy";
+}
+
 export function getStatusFromProperties(properties: NodeProperty[]): string | undefined {
   return properties.find((p) => {
     const key = p.key.toLowerCase().trim();

package/src/graph/types.ts

@@ -10,6 +10,9 @@ export type NodeProperty = {
   valueScale?: number;
 };
 
+// A property whose value is another entity in the graph; the canvas draws it as an edge instead.
+export type NodeRelation = { predicate: string; target: string };
+
 export type RDFNodeData = {
   label: string;
   type?: string;
@@ -17,6 +20,7 @@ export type RDFNodeData = {
   isHub: boolean;
   jsonLd: Record<string, unknown>;
   properties: NodeProperty[];
+  relations?: NodeRelation[];
   childIds: string[];
   parentId?: string;
   isCollapsed: boolean;