@manta-eu/react 0.2.0 → 0.3.0

package/src/components/planning/ManualActionCard.tsx

@@ -1,6 +1,7 @@
 import { isPresent } from "@manta-eu/lib/present";
 import { addAll } from "@manta-eu/lib/set";
-import { CircleCheck, Clock, Hand, MessageSquareWarning, RotateCcw, type LucideIcon } from "lucide-react";
+import { BadgeCheck, CircleCheck, Clock, Hand, MessageSquareWarning, RotateCcw, type LucideIcon } from "lucide-react";
+import { Fragment } from "react";
 import { match } from "ts-pattern";
 import { Badge, type BadgeVariant } from "#components/badge/index";
 import { Button } from "#components/button/index";
@@ -30,10 +31,25 @@ export type ManualActionCardProps = {
   onResolve: (resolution: ManualActionResolution) => void;
   canResolve?: boolean;
   disabledReason?: string;
+  /** Offered when the action is about something a person can approve despite the checks, such as a creative. */
+  onApproveAnyway?: () => void;
+  approvingAnyway?: boolean;
+  approvedAnyway?: boolean;
 };
 
 export function ManualActionCard(props: ManualActionCardProps) {
-  const { manualAction, entities = [], description, resolving, onResolve, canResolve = true, disabledReason } = props;
+  const {
+    manualAction,
+    entities = [],
+    description,
+    resolving,
+    onResolve,
+    canResolve = true,
+    disabledReason,
+    onApproveAnyway,
+    approvingAnyway = false,
+    approvedAnyway = false,
+  } = props;
 
   const instruction = description ?? manualAction.description ?? null;
   const title = manualAction.label ?? instruction ?? buildManualActionTitle(manualAction);
@@ -67,6 +83,9 @@ export function ManualActionCard(props: ManualActionCardProps) {
             onResolve={onResolve}
             canResolve={canResolve}
             disabledReason={disabledReason}
+            onApproveAnyway={onApproveAnyway}
+            approvingAnyway={approvingAnyway}
+            approvedAnyway={approvedAnyway}
           />
         )}
 
@@ -274,28 +293,61 @@ type CardFooterProps = {
   onResolve: (resolution: ManualActionResolution) => void;
   canResolve: boolean;
   disabledReason?: string;
+  onApproveAnyway?: () => void;
+  approvingAnyway: boolean;
+  approvedAnyway: boolean;
 };
 
 function CardFooter(props: CardFooterProps) {
-  const { isResolving, resolvingChoice, retryable, defaultResolution, onResolve, canResolve, disabledReason } = props;
+  const {
+    isResolving,
+    resolvingChoice,
+    retryable,
+    defaultResolution,
+    onResolve,
+    canResolve,
+    disabledReason,
+    onApproveAnyway,
+    approvingAnyway,
+    approvedAnyway,
+  } = props;
   const choices = resolutionChoices(retryable, defaultResolution);
+  const busy = isResolving || approvingAnyway || approvedAnyway;
 
   return (
     <div className="flex items-center bg-muted px-3 py-3">
       <DisabledActionTooltip reason={canResolve ? undefined : disabledReason}>
         <div className="flex flex-wrap items-center gap-2">
           {choices.map((choice, index) => (
-            <Button
-              key={choice}
-              size="sm"
-              rounded="lg"
-              variant={index === 0 ? "primary" : "tertiary"}
-              icon={choiceIcons[choice]}
-              label={choiceLabels[choice]}
-              disabled={!canResolve || isResolving}
-              isLoading={isResolving && resolvingChoice === choice}
-              onClick={() => onResolve(choice)}
-            />
+            <Fragment key={choice}>
+              {choice === "REJECTED" && approvedAnyway && (
+                <span className="typography-tiny text-muted-foreground">
+                  Approved. This review closes when the plan next runs.
+                </span>
+              )}
+              {choice === "REJECTED" && onApproveAnyway && !approvedAnyway && (
+                <Button
+                  size="sm"
+                  rounded="lg"
+                  variant="secondary"
+                  icon={BadgeCheck}
+                  label="Approve anyway"
+                  disabled={!canResolve || busy}
+                  isLoading={approvingAnyway}
+                  onClick={onApproveAnyway}
+                />
+              )}
+              <Button
+                size="sm"
+                rounded="lg"
+                variant={index === 0 ? "primary" : "tertiary"}
+                icon={choiceIcons[choice]}
+                label={choiceLabels[choice]}
+                disabled={!canResolve || busy}
+                isLoading={isResolving && resolvingChoice === choice}
+                onClick={() => onResolve(choice)}
+              />
+            </Fragment>
           ))}
         </div>
       </DisabledActionTooltip>

package/src/components/planning/ManualActionList.tsx

@@ -8,6 +8,7 @@ import {
   type ManualActionResolution,
   type ManualActionResolving,
 } from "#hooks/use-manual-actions";
+import { approvalReviewKey } from "#lib/manual-actions";
 
 export type ManualActionListViewProps = {
   actions: ManualAction[];
@@ -19,6 +20,10 @@ export type ManualActionListViewProps = {
   isLoading?: boolean;
   failed?: boolean;
   emptyFallback?: ReactNode;
+  approvableAnalyses?: Map<string, string>;
+  onApproveAnyway?: (analysisIri: string, reviewKey: string) => void;
+  approvingAnyway?: ReadonlySet<string>;
+  approvedAnyway?: ReadonlySet<string>;
 };
 
 const skeletonShapes = [
@@ -38,6 +43,10 @@ export function ManualActionListView(props: ManualActionListViewProps) {
     isLoading = false,
     failed = false,
     emptyFallback,
+    approvableAnalyses,
+    onApproveAnyway,
+    approvingAnyway,
+    approvedAnyway,
   } = props;
 
   if (isLoading) {
@@ -75,17 +84,27 @@ export function ManualActionListView(props: ManualActionListViewProps) {
 
   return (
     <div className="flex flex-col">
-      {actions.map((action) => (
-        <ManualActionCard
-          key={action.subjectIri}
-          manualAction={action}
-          entities={targetsBySubject?.get(action.subjectIri) ?? []}
-          resolving={resolving}
-          onResolve={(resolution) => onResolve(action, resolution)}
-          canResolve={canResolve}
-          disabledReason={disabledReason}
-        />
-      ))}
+      {actions.map((action) => {
+        const analysisIri = approvableAnalyses?.get(action.subjectIri);
+        return (
+          <ManualActionCard
+            key={action.subjectIri}
+            manualAction={action}
+            entities={targetsBySubject?.get(action.subjectIri) ?? []}
+            resolving={resolving}
+            onResolve={(resolution) => onResolve(action, resolution)}
+            canResolve={canResolve}
+            disabledReason={disabledReason}
+            onApproveAnyway={
+              isPresent(analysisIri) && onApproveAnyway
+                ? () => onApproveAnyway(analysisIri, approvalReviewKey(action))
+                : undefined
+            }
+            approvingAnyway={isPresent(analysisIri) && (approvingAnyway?.has(analysisIri) ?? false)}
+            approvedAnyway={approvedAnyway?.has(approvalReviewKey(action)) ?? false}
+          />
+        );
+      })}
     </div>
   );
 }

package/src/components/planning/actioning-view-utils.ts

@@ -1,9 +1,35 @@
 import { GQLActionPlanState } from "@manta-eu/client";
+import { isPresent } from "@manta-eu/lib/present";
 import { match } from "ts-pattern";
-import { parseTimestampMs } from "./execution-section-model";
+
+export function parseTimestampMs(timestamp: string | null | undefined): number | null {
+  if (!timestamp) return null;
+  const value = new Date(timestamp).getTime();
+  return Number.isFinite(value) ? value : null;
+}
 
 export type ExecutionStatus = "idle" | "running" | "completed" | "failed" | "needs-approval";
 
+export type RunSurface = "completed-changes" | "run" | "starting-run" | "loading" | "none";
+
+export type DeriveRunSurfaceArgs = {
+  executionStatus: ExecutionStatus;
+  runIri: string | null;
+  hasCompletedChangesSlot: boolean;
+  isLoading: boolean;
+};
+
+export function deriveRunSurface(args: DeriveRunSurfaceArgs): RunSurface {
+  const { executionStatus, runIri, hasCompletedChangesSlot, isLoading } = args;
+
+  if (executionStatus === "completed" && hasCompletedChangesSlot) return "completed-changes";
+  if (isPresent(runIri)) return "run";
+  if (executionStatus === "running" || executionStatus === "needs-approval") return "starting-run";
+  if (isLoading) return "loading";
+
+  return "none";
+}
+
 export type DeriveExecutionStatusArgs = {
   provenance: {
     planErrorMessage: string | null;

package/src/components/planning/plan-detail-utils.tsx

@@ -108,6 +108,7 @@ export function formatIntegration(integration: GQLIntegration | null): string {
     .with(GQLIntegration.Slack, () => "Slack")
     .with(GQLIntegration.Figma, () => "Figma")
     .with(GQLIntegration.Dash, () => "Dash")
+    .with(GQLIntegration.Canva, () => "Canva")
     .exhaustive();
 }
 
@@ -123,6 +124,7 @@ export function integrationToChannel(integration: GQLIntegration): Channel | nul
     [GQLIntegration.Slack]: null,
     [GQLIntegration.Figma]: null,
     [GQLIntegration.Dash]: null,
+    [GQLIntegration.Canva]: null,
   } as const satisfies Record<GQLIntegration, Channel | null>;
 
   return integrationChannelMap[integration];

package/src/components/tool-invocation-card/ListRulesResultDisplay.tsx

@@ -1,7 +1,7 @@
-import type { GetRDFoxRulesToolResult } from "./types";
+import type { GetRulesToolResult } from "./types";
 
 type ListRulesResultDisplayProps = {
-  result: GetRDFoxRulesToolResult;
+  result: GetRulesToolResult;
 };
 
 export function ListRulesResultDisplay(_props: ListRulesResultDisplayProps) {

package/src/components/tool-invocation-card/ToolOutputRenderer.tsx

@@ -1,3 +1,4 @@
+import { withDatastoreQueryParam } from "@manta-eu/client/shared/datastore-path";
 import { isShowEntitiesResult } from "@manta-eu/client/shared/tools";
 import {
   isWorkspaceArtifactInlineMediaType,
@@ -17,7 +18,7 @@ import type {
   ChartToolResult,
   ErrorToolResult,
   ExplainFactToolResult,
-  GetRDFoxRulesToolResult,
+  GetRulesToolResult,
   ManageRulesResult,
   ShowcaseToolResult,
   ShowEntitiesToolResult,
@@ -26,8 +27,8 @@ import type {
 import {
   isChartToolResult,
   isErrorToolResult,
-  isExplainRDFoxRulesResult,
-  isGetRDFoxRulesToolResult,
+  isExplainFactToolResult,
+  isGetRulesToolResult,
   isManageRulesResult,
   isShowcaseToolResult,
   isWorkspaceArtifactResult,
@@ -45,6 +46,7 @@ import {
 import { decodeChartEntities } from "#lib/decode-chart-entities";
 import { cn } from "#lib/utils";
 import { useChatManagerConnection } from "#providers/ChatManagerProvider";
+import { useMantaClient } from "#providers/MantaClientProvider";
 
 type ErrorResultDisplayProps = {
   result: ErrorToolResult;
@@ -126,11 +128,13 @@ type WorkspaceArtifactResultDisplayProps = {
 function WorkspaceArtifactResultDisplay(props: WorkspaceArtifactResultDisplayProps) {
   const { result } = props;
 
+  const { datastoreId } = useMantaClient();
+
   return (
     <FileMessagePart
       part={{
         type: "file",
-        url: result.url,
+        url: withDatastoreQueryParam(result.url, datastoreId),
         mediaType: result.mediaType,
         filename: result.filename,
       }}
@@ -151,10 +155,8 @@ export function ToolOutputRenderer(props: ToolOutputRendererProps) {
     .when(isErrorToolResult, (errorResult: ErrorToolResult) => <ErrorResultDisplay result={errorResult} />)
     .when(isChartToolResult, (chartResult: ChartToolResult) => <ChartResultDisplay result={chartResult} />)
     .when(isManageRulesResult, (rulesResult: ManageRulesResult) => <ManageRulesResultDisplay result={rulesResult} />)
-    .when(isGetRDFoxRulesToolResult, (rulesResult: GetRDFoxRulesToolResult) => (
-      <ListRulesResultDisplay result={rulesResult} />
-    ))
-    .when(isExplainRDFoxRulesResult, (explainResult: ExplainFactToolResult) => (
+    .when(isGetRulesToolResult, (rulesResult: GetRulesToolResult) => <ListRulesResultDisplay result={rulesResult} />)
+    .when(isExplainFactToolResult, (explainResult: ExplainFactToolResult) => (
       <ExplainFactResultDisplay result={explainResult} toolUIPart={toolUIPart} />
     ))
     .when(isShowcaseToolResult, (showcaseResult: ShowcaseToolResult) => (

package/src/components/tool-invocation-card/types.ts

@@ -3,7 +3,7 @@ import {
   type ActionPlanShowcaseOutput,
   type ShowEntitiesOutput,
 } from "@manta-eu/client/shared/tools";
-import type { GetRDFoxRulesOutputSuccess } from "@manta-eu/client/shared/tools/types";
+import type { GetRulesOutputSuccess } from "@manta-eu/client/shared/tools/types";
 import { workspaceArtifactSchema, type WorkspaceArtifact } from "@manta-eu/client/shared/workspace-artifacts";
 import { isJsonLdDocument } from "@manta-eu/client/types/jsonld";
 import type { DatalogRule, InferenceVerificationResult } from "@manta-eu/datalog-parser";
@@ -45,7 +45,7 @@ export type StagedManageRulesResult = ManageRulesResult & {
 
 export type ShowcaseToolResult = Extract<ActionPlanShowcaseOutput, { planIri: string }>;
 export type ShowEntitiesToolResult = Extract<ShowEntitiesOutput, { entityIris: string[] }>;
-export type GetRDFoxRulesToolResult = GetRDFoxRulesOutputSuccess;
+export type GetRulesToolResult = GetRulesOutputSuccess;
 export type ExplainFactToolResult = ExplainFactOutput;
 
 export type ToolResult =
@@ -54,7 +54,7 @@ export type ToolResult =
   | ManageRulesResult
   | ShowcaseToolResult
   | ShowEntitiesToolResult
-  | GetRDFoxRulesToolResult
+  | GetRulesToolResult
   | ExplainFactToolResult
   | WorkspaceArtifact
   | { content: Array<{ type: string; text: string }> }
@@ -95,11 +95,11 @@ export function isShowcaseToolResult(result: unknown): result is ShowcaseToolRes
   return isObjectWithProps(result, ["planIri"]);
 }
 
-export function isGetRDFoxRulesToolResult(result: unknown): result is GetRDFoxRulesOutputSuccess {
+export function isGetRulesToolResult(result: unknown): result is GetRulesOutputSuccess {
   return isObjectWithProps(result, ["rules"]) && Array.isArray(result.rules);
 }
 
-export function isExplainRDFoxRulesResult(result: unknown): result is ExplainFactToolResult {
+export function isExplainFactToolResult(result: unknown): result is ExplainFactToolResult {
   if (typeof result !== "object" || result === null || Array.isArray(result)) return false;
   if ("is_error" in result || "rules" in result || "type" in result) return false;
 
@@ -120,8 +120,8 @@ export function hasVisualOutput(output: unknown): boolean {
       isManageRulesResult(output) ||
       isShowcaseToolResult(output) ||
       isShowEntitiesResult(output) ||
-      isGetRDFoxRulesToolResult(output) ||
-      isExplainRDFoxRulesResult(output) ||
+      isGetRulesToolResult(output) ||
+      isExplainFactToolResult(output) ||
       isWorkspaceArtifactResult(output))
   );
 }
@@ -129,7 +129,7 @@ export function hasVisualOutput(output: unknown): boolean {
 export function hasInlineVisualOutput(output: unknown): boolean {
   return (
     isChartToolResult(output) ||
-    isExplainRDFoxRulesResult(output) ||
+    isExplainFactToolResult(output) ||
     isShowEntitiesResult(output) ||
     isWorkspaceArtifactResult(output)
   );

package/src/components/tooltip/index.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import type { ComponentPropsWithoutRef, ElementRef } from "react";
-import { forwardRef } from "react";
+import type { ComponentPropsWithoutRef, ElementRef, ReactNode } from "react";
+import { forwardRef, useState } from "react";
 import { cn } from "#style";
 
 export const TooltipProvider = TooltipPrimitive.Provider;
@@ -43,3 +43,36 @@ export const TooltipContent = forwardRef<ElementRef<typeof TooltipPrimitive.Cont
   ),
 );
 TooltipContent.displayName = "TooltipContent";
+
+export type TruncateTooltipProps = { text: string; className: string; children?: ReactNode };
+
+export function TruncateTooltip(props: TruncateTooltipProps) {
+  const { text, className, children } = props;
+
+  const [isTruncated, setIsTruncated] = useState(false);
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span
+          className={className}
+          onMouseEnter={(event) => {
+            const element = event.currentTarget;
+            // Line height can round a single line 1px taller than its box, so only a real clamp counts.
+            setIsTruncated(
+              element.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight + 1,
+            );
+          }}
+        >
+          {children ?? text}
+        </span>
+      </TooltipTrigger>
+
+      {isTruncated && (
+        <TooltipContent showArrow={false} className="max-h-64 max-w-sm overflow-y-auto break-words text-left">
+          <p className="typography-tiny">{text}</p>
+        </TooltipContent>
+      )}
+    </Tooltip>
+  );
+}

package/src/explain-fact/rule-presentation.ts

@@ -362,7 +362,7 @@ function ruleNameTermFromHeadText(headText: string): string {
   return predicate.trim();
 }
 
-// Explain payloads echo RDFox-serialized rules (bare ON, atom-free aggregates),
+// Explain payloads echo rules as the datastore serializes them (bare ON, atom-free aggregates),
 // so authored text falls through to the expanded grammar when the strict parse fails.
 function explainRuleAst(rule: string): DatalogRule | undefined {
   return parseDatalogRuleCached(rule).ast ?? parseGroundedDatalogRuleCached(rule).ast ?? undefined;
@@ -415,7 +415,7 @@ function collectFormulaBindings(
     .with({ type: "aggregate" }, (aggregate) => {
       if (groundedFormula?.type !== "aggregate") return;
 
-      // AS targets first, then the aggregate's inner atoms — RDFox grounds those too
+      // AS targets first, then the aggregate's inner atoms — the datastore grounds those too
       // (e.g. `:clicks[?c, ?x]` → `:clicks[:C_1, 10]`), and first-wins keeps a head binding.
       if (groundedFormula.bindings?.length === aggregate.bindings?.length) {
         aggregate.bindings?.forEach((binding, index) => {

package/src/explain-fact/tree-model.ts

@@ -380,7 +380,7 @@ function flattenFacts(output: ExplainFactOutput): FactEntry[] {
     const values = Array.isArray(value) ? value : [value];
 
     return values.flatMap((fact, index) => {
-      if (!isRDFoxFact(fact)) return [];
+      if (!isExplainedFact(fact)) return [];
 
       return [
         {
@@ -393,7 +393,7 @@ function flattenFacts(output: ExplainFactOutput): FactEntry[] {
   });
 }
 
-function isRDFoxFact(value: unknown): value is ExplainedFact {
+function isExplainedFact(value: unknown): value is ExplainedFact {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 

package/src/graph/entity-link.tsx

@@ -0,0 +1,20 @@
+import { type ComponentType, createContext, type ReactNode, useContext } from "react";
+
+export type EntityLinkProps = { iri: string; className?: string; children: ReactNode };
+
+export type EntityLinkComponent = ComponentType<EntityLinkProps>;
+
+// The host app supplies how an entity opens (its router and record route); without one, entities render unlinked.
+const EntityLinkContext = createContext<EntityLinkComponent | undefined>(undefined);
+
+export type EntityLinkProviderProps = { component: EntityLinkComponent; children: ReactNode };
+
+export function EntityLinkProvider(props: EntityLinkProviderProps) {
+  const { component, children } = props;
+
+  return <EntityLinkContext.Provider value={component}>{children}</EntityLinkContext.Provider>;
+}
+
+export function useEntityLink(): EntityLinkComponent | undefined {
+  return useContext(EntityLinkContext);
+}

package/src/graph/graph-list-utils.ts

@@ -87,6 +87,7 @@ export type NodePropertyChange = {
 
 export type NodePropertyPreview = {
   id: string;
+  predicate?: string;
   label: string;
   value: string;
   changeType?: PropertyChangeType;
@@ -162,6 +163,7 @@ export function selectPriorityPreviewFields(
 
       return {
         id: `${property.key}-${index}`,
+        predicate: property.iri,
         label: property.label ?? propertyLabelFromKey(property.key),
         value,
         rawValue: String(property.value),

package/src/graph/graph-model.ts

@@ -1,3 +1,4 @@
+import { isFullIri } from "@manta-eu/client/shared/rdf-namespaces";
 import { labelPredicateSuffixes } from "@manta-eu/rdf-lib/detail-view-types";
 import { expandPrefix, wellKnownPredicates } from "@manta-eu/rdf-lib/namespaces";
 import type { RdfGraph } from "../lib/rdf-helpers";
@@ -10,7 +11,7 @@ import {
 import { humanizePredicateName, type NodesAndEdges, type RDFEdge, shortenUri } from "./graph-utils";
 import { readVocabValue } from "./nodes/typed-node-helpers";
 import { mantaLightTheme } from "./themes";
-import type { LayoutDirection, NodeProperty, RDFNode } from "./types";
+import type { LayoutDirection, NodeProperty, NodeRelation, RDFNode } from "./types";
 
 const labelPredicate = wellKnownPredicates.label;
 const rdfType = wellKnownPredicates.type;
@@ -44,6 +45,7 @@ type NodeAccumulator = {
   label?: string;
   type?: string;
   data: Record<string, unknown>;
+  relations: NodeRelation[];
 };
 
 type GraphEdgeRecord = {
@@ -60,7 +62,7 @@ function createOrGetNodeAccumulator(
 ): NodeAccumulator {
   let node = nodeData.get(subjectId);
   if (!node) {
-    node = { data: {} };
+    node = { data: {}, relations: [] };
     nodeData.set(subjectId, node);
     connectionCounts.set(subjectId, 0);
   }
@@ -159,7 +161,7 @@ function buildNodesAndEdges(
   const allNodeIds = new Set(nodeData.keys());
   const hubThreshold = computeHubThreshold(connectionCounts);
 
-  const graphNodes: RDFNode[] = Array.from(nodeData).map(([id, { label, type, data }]) => {
+  const graphNodes: RDFNode[] = Array.from(nodeData).map(([id, { label, type, data, relations }]) => {
     const childIds = (parentChildMap.get(id) || []).filter((childId) => allNodeIds.has(childId));
     const parentId = childParentMap.get(id);
     const depth = nodeDepths.get(id) || 0;
@@ -193,6 +195,7 @@ function buildNodesAndEdges(
         isHub: connCount >= hubThreshold,
         jsonLd: { "@id": id, "@type": type, ...data },
         properties,
+        relations,
         childIds,
         parentId,
         isCollapsed: false,
@@ -334,11 +337,15 @@ export function rdfGraphToNodesAndEdges(
   const longNumericPattern = /\d{10,}/;
   const leafValueSchemes = ["http://", "https://", "s3://"];
 
+  // A stored file or web address is a value to render, not a neighbor (without `s3:`, a long digit run reads as a ref).
+  function isLeafValue(targetId: string): boolean {
+    const isNamespacedIri = targetId.includes("#") || targetId.includes("vocab");
+    return !isNamespacedIri && leafValueSchemes.some((scheme) => targetId.startsWith(scheme));
+  }
+
   function isEnumLikeRef(targetId: string): boolean {
     if (definedSubjects.has(targetId)) return false;
-    const isNamespacedIri = targetId.includes("#") || targetId.includes("vocab");
-    // A stored file is a value to render, not a neighbor: without `s3:` a key with a long digit run reads as a ref.
-    if (!isNamespacedIri && leafValueSchemes.some((scheme) => targetId.startsWith(scheme))) return true;
+    if (isLeafValue(targetId)) return true;
     const localName = targetId.split(/[#/]/).pop() ?? targetId;
     if (uuidPattern.test(localName) || longNumericPattern.test(localName)) return false;
     return true;
@@ -379,10 +386,12 @@ export function rdfGraphToNodesAndEdges(
 
           if (isEnumLikeRef(targetId)) {
             mergeNodeValue(node.data, predicate, targetId);
+            if (!isLeafValue(targetId) && isFullIri(targetId)) node.relations.push({ predicate, target: targetId });
             continue;
           }
 
           createOrGetNodeAccumulator(nodeData, connectionCounts, targetId);
+          if (isFullIri(targetId)) node.relations.push({ predicate, target: targetId });
           connectionCounts.set(subjectId, (connectionCounts.get(subjectId) || 0) + 1);
           connectionCounts.set(targetId, (connectionCounts.get(targetId) || 0) + 1);
 

package/src/graph/nodes/BrandAssetAnalysisView.tsx

@@ -13,6 +13,7 @@ import { useRedirectEndpoint } from "#hooks/use-redirect-endpoint";
 const filePredicate = `${namespaces.brand}file`;
 const mimePredicate = `${namespaces.nmo}contentMimeType`;
 const descriptionPredicate = `${namespaces.brand}assetDescription`;
+const listedElsewhere = [filePredicate, mimePredicate, descriptionPredicate];
 
 // The generated schema requires `m:file`, which only the planned request carries, so a lens read never matches.
 export const BrandAssetAnalysisView = memo(function BrandAssetAnalysisView(props: EntityViewProps) {
@@ -46,8 +47,9 @@ export const BrandAssetAnalysisView = memo(function BrandAssetAnalysisView(props
 
         <NodePropertyTable
           properties={data.properties}
+          relations={data.relations}
           jsonLd={data.jsonLd}
-          omitPredicates={[filePredicate, mimePredicate, descriptionPredicate]}
+          omitPredicates={listedElsewhere}
         />
       </BrandNodeBody>
     </EntityCardShell>

package/src/graph/nodes/BrandFontSuggestionView.tsx

@@ -23,6 +23,7 @@ import { useFontFace } from "#hooks/use-font-face";
 import { useRedirectEndpoint } from "#hooks/use-redirect-endpoint";
 
 const weightPredicate = `${namespaces.brand}hasSuggestedWeight`;
+const listedElsewhere = [weightPredicate];
 const specimenText = "Aa Bb Cc Qq Rr 0123456789 — The quick brown fox jumps over the lazy dog";
 
 function useSuggestedWeights(iris: string[]): SuggestedWeight[] {
@@ -118,7 +119,12 @@ export const BrandFontSuggestionView = memo(function BrandFontSuggestionView(pro
           </ul>
         )}
 
-        <NodePropertyTable properties={data.properties} jsonLd={data.jsonLd} omitPredicates={[weightPredicate]} />
+        <NodePropertyTable
+          properties={data.properties}
+          jsonLd={data.jsonLd}
+          relations={data.relations}
+          omitPredicates={listedElsewhere}
+        />
       </BrandNodeBody>
     </EntityCardShell>
   );

package/src/graph/nodes/BrandGuidelinesView.tsx

@@ -18,7 +18,7 @@ export const BrandGuidelinesView = memo(function BrandGuidelinesView(props: Enti
       onContextMenu={onContextMenu}
     >
       <BrandNodeBody>
-        <NodePropertyTable properties={data.properties} jsonLd={data.jsonLd} />
+        <NodePropertyTable properties={data.properties} jsonLd={data.jsonLd} relations={data.relations} />
       </BrandNodeBody>
     </EntityCardShell>
   );