@manta-eu/react 0.2.0 → 0.2.1

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;

package/src/hooks/use-approve-anyway.ts

@@ -0,0 +1,100 @@
+import { useExecuteAgentActionAdditionMutation } from "@manta-eu/client";
+import { isPresent } from "@manta-eu/lib/present";
+import { isValidFullIri, namespaces } from "@manta-eu/rdf-lib/namespaces";
+import { useQueryClient } from "@tanstack/react-query";
+import { DataFactory } from "ldkit/rdf";
+import { sparql } from "ldkit/sparql";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
+import type { ManualAction } from "./use-manual-actions";
+import { useSparqlSelect } from "./use-sparql-construct";
+import { buildActionDocument, mintSubjectIri } from "#lib/action-document";
+import { useMantaClient } from "#providers/MantaClientProvider";
+import { invalidateActionPlanQueries } from "#shared/query-keys";
+
+const df = new DataFactory();
+const assetAnalysis = `${namespaces.brand}AssetAnalysis`;
+const assetDecision = `${namespaces.brand}AssetDecision`;
+const decideAssetShape = `${namespaces.brand}DecideAssetShape`;
+
+export type ApproveAnywayHandle = {
+  /** Sends the approval; `reviewKey` names the review it answers, so a later review of the same analysis asks again. */
+  approve: (analysisIri: string, reviewKey: string) => void;
+  approving: ReadonlySet<string>;
+  approved: ReadonlySet<string>;
+};
+
+/** Maps each manual action about a brand analysis to that analysis, the one a person can approve anyway. */
+export function useApprovableAnalyses(actions: readonly ManualAction[]): Map<string, string> {
+  const aboutIris = useMemo(() => {
+    const iris = actions.flatMap(({ aboutIri }) => (isPresent(aboutIri) && isValidFullIri(aboutIri) ? [aboutIri] : []));
+    return [...new Set(iris)].sort();
+  }, [actions]);
+
+  const values = aboutIris.map((iri) => sparql`${df.namedNode(iri)}`).join(" ");
+  const query = isPresent(aboutIris)
+    ? `SELECT ?about WHERE { VALUES ?about { ${values} } ?about a ${sparql`${df.namedNode(assetAnalysis)}`} . }`
+    : "";
+
+  const { data } = useSparqlSelect({
+    query,
+    queryKey: ["ldo-ui", "approvable-analyses", aboutIris],
+    enabled: isPresent(aboutIris),
+  });
+
+  return useMemo(() => {
+    const analyses = new Set((data ?? []).flatMap((row) => row.get("about")?.value ?? []));
+    const approvable = new Map<string, string>();
+    for (const action of actions) {
+      if (isPresent(action.aboutIri) && analyses.has(action.aboutIri)) {
+        approvable.set(action.subjectIri, action.aboutIri);
+      }
+    }
+    return approvable;
+  }, [actions, data]);
+}
+
+/** Records a person's approval of an analysis that was not confirmed on-brand, so the rules publish it anyway. */
+export function useApproveAnyway(planGraphIri: string): ApproveAnywayHandle {
+  const queryClient = useQueryClient();
+  const { mantaClient } = useMantaClient();
+  const { mutateAsync: startAddition } = useExecuteAgentActionAdditionMutation(mantaClient);
+  const inFlight = useRef(new Set<string>());
+  const [approving, setApproving] = useState<ReadonlySet<string>>(() => new Set());
+  const [approved, setApproved] = useState<ReadonlySet<string>>(() => new Set());
+
+  const approve = useCallback(
+    (analysisIri: string, reviewKey: string) => {
+      if (inFlight.current.has(analysisIri)) return;
+      inFlight.current.add(analysisIri);
+      setApproving(new Set(inFlight.current));
+      const subjectIri = mintSubjectIri(assetDecision);
+      const properties = buildActionDocument(
+        { subjectIri, rdfType: assetDecision },
+        {
+          [`${namespaces.brand}decisionOnAsset`]: { "@id": analysisIri },
+          [`${namespaces.brand}decision`]: "approved",
+        },
+      );
+      void startAddition({
+        input: { subjectIri, rdfType: assetDecision, actionShape: decideAssetShape, properties },
+      })
+        .then(({ executeActionAddition }) => {
+          if (!executeActionAddition.success) throw new Error(executeActionAddition.error ?? "The approval failed");
+          setApproved((previous) => new Set(previous).add(reviewKey));
+          toast.success("Approved. It is uploaded, and this review closes, when the plan next runs.");
+          void invalidateActionPlanQueries(queryClient, planGraphIri);
+        })
+        .catch((error: unknown) => {
+          toast.error(error instanceof Error ? error.message : "The approval failed");
+        })
+        .finally(() => {
+          inFlight.current.delete(analysisIri);
+          setApproving(new Set(inFlight.current));
+        });
+    },
+    [startAddition, queryClient, planGraphIri],
+  );
+
+  return { approve, approving, approved };
+}

package/src/ldo-ui.ts

@@ -268,6 +268,7 @@ export type {
   EntityView,
   EntityViewProps,
   LayoutDirection,
+  NodeRelation,
   OnNodeContextMenu,
   RDFNode,
   RDFNodeData,
@@ -275,6 +276,13 @@ export type {
   SampleInstance,
 } from "./graph/types";
 export { jsonLdToRdfGraph } from "./graph/jsonld-bridge";
+export {
+  EntityLinkProvider,
+  useEntityLink,
+  type EntityLinkComponent,
+  type EntityLinkProps,
+  type EntityLinkProviderProps,
+} from "./graph/entity-link";
 export { rdfGraphToNodesAndEdges, rdfGraphToSummaryNodesAndEdges } from "./graph/graph-model";
 export {
   applyDagreLayout,

package/src/lib/manual-actions.ts

@@ -16,6 +16,7 @@ export function getPendingManualActions(actions: readonly ManualAction[] | undef
   return (actions ?? []).filter(isPendingManualAction);
 }
 
-export function getResolvedManualActions(actions: readonly ManualAction[] | undefined): ManualAction[] {
-  return (actions ?? []).filter(isResolvedManualAction);
+/** Names the review an approval answers: the step, as of the analysis it currently reports. */
+export function approvalReviewKey(action: Pick<ManualAction, "subjectIri" | "observedValue">): string {
+  return `${action.subjectIri}|${action.observedValue ?? ""}`;
 }

package/src/providers/ActiveChatProvider.tsx

@@ -109,7 +109,9 @@ function ThinkChatSession(props: ThinkChatSessionProps) {
     sub: [{ agent: "ThinkChat", name: conversationId }],
     host,
     query: socketAuth.query,
-    ...("cacheTtl" in socketAuth ? { cacheTtl: socketAuth.cacheTtl } : {}),
+    ...("enabled" in socketAuth
+      ? { enabled: socketAuth.enabled, shouldReconnectOnClose: socketAuth.shouldReconnectOnClose }
+      : {}),
     onClose: handleAgentClose,
     onMessage: handleAgentMessage,
   });

package/src/providers/ChatManagerProvider.tsx

@@ -97,7 +97,9 @@ export function ChatManagerProvider(props: ChatManagerProviderProps) {
     basePath: chatManagerBasePath,
     host: mantaBaseUrl.host,
     query: socketAuth.query,
-    ...("cacheTtl" in socketAuth ? { cacheTtl: socketAuth.cacheTtl } : {}),
+    ...("enabled" in socketAuth
+      ? { enabled: socketAuth.enabled, shouldReconnectOnClose: socketAuth.shouldReconnectOnClose }
+      : {}),
   });
 
   const listConversations = useCallback(