@manta-eu/react 0.1.10 → 0.2.1

package/src/graph/nodes/node-property-row.tsx

@@ -0,0 +1,154 @@
+import { Check, ChevronDown, ChevronRight, type LucideIcon, X } from "lucide-react";
+import type { ReactNode } from "react";
+import { match, P } from "ts-pattern";
+import type { PropertyDisplay } from "./node-property-display";
+import { TruncateTooltip } from "#components/tooltip/index";
+import { cn } from "#style";
+
+function Tag(props: { children: string }) {
+  return (
+    <span className="rounded bg-faint px-1.5 py-[1px] typography-tiny text-default-foreground">{props.children}</span>
+  );
+}
+
+export function PropertyValue(props: { display: PropertyDisplay }) {
+  return match(props.display)
+    .with({ kind: "tags" }, ({ values }) => (
+      <div className="flex flex-wrap gap-1">
+        {values.map((value) => (
+          <Tag key={value}>{value}</Tag>
+        ))}
+      </div>
+    ))
+    .with({ kind: "color" }, ({ hex }) => (
+      <span className="flex items-center gap-1.5">
+        <span
+          aria-hidden
+          className="size-3.5 shrink-0 rounded-sm border border-default-border"
+          style={{ backgroundColor: hex }}
+        />
+        <span className="tabular-nums">{hex}</span>
+      </span>
+    ))
+    .with({ kind: "ratio" }, ({ fraction, text }) => (
+      <span className="flex items-center gap-1.5">
+        <span aria-hidden className="h-1 w-12 shrink-0 overflow-hidden rounded-full bg-faint">
+          <span className="block h-full rounded-full bg-accent-foreground" style={{ width: `${fraction * 100}%` }} />
+        </span>
+        <span className="tabular-nums">{text}</span>
+      </span>
+    ))
+    .with({ kind: "number" }, ({ text }) => <span className="tabular-nums">{text}</span>)
+    .with({ kind: "boolean" }, ({ value }) =>
+      value ? (
+        <span className="flex items-center gap-1">
+          <Check aria-hidden className="size-3.5 shrink-0 text-success-foreground" />
+          true
+        </span>
+      ) : (
+        <span className="flex items-center gap-1">
+          <X aria-hidden className="size-3.5 shrink-0 text-muted-foreground" />
+          false
+        </span>
+      ),
+    )
+    .with(P.union({ kind: "prose" }, { kind: "text" }), ({ text }) => <span>{text}</span>)
+    .exhaustive();
+}
+
+export function NodePropertyList(props: { children: ReactNode }) {
+  return <dl className="flex flex-col">{props.children}</dl>;
+}
+
+export type NodePropertyRowProps = {
+  label: string;
+  icon?: LucideIcon;
+  labelPrefix?: ReactNode;
+  children: ReactNode;
+  fullWidth?: boolean;
+  overflow?: "wrap" | "truncate" | "clamp";
+  valueTitle?: string;
+  divided?: boolean;
+  wideLabel?: boolean;
+  emphasized?: boolean;
+  valueClassName?: string;
+};
+
+// Render inside NodePropertyList so the dt/dd pairs sit in a dl.
+export function NodePropertyRow(props: NodePropertyRowProps) {
+  const {
+    label,
+    icon: Icon,
+    labelPrefix,
+    children,
+    fullWidth = false,
+    overflow = "wrap",
+    valueTitle,
+    divided = true,
+    wideLabel = false,
+    emphasized = false,
+    valueClassName,
+  } = props;
+
+  const clipped = overflow !== "wrap";
+  const spansRow = fullWidth || overflow === "clamp";
+
+  return (
+    <div
+      className={cn(
+        "grid items-baseline gap-x-3 gap-y-1",
+        // The wide label column grows with the card, never with the rows shown, so Show all never shifts it.
+        wideLabel ? "grid-cols-[minmax(8rem,40%)_minmax(0,1fr)]" : "grid-cols-[minmax(0,7rem)_minmax(0,1fr)]",
+        divided ? "border-t border-muted-border/50 py-1.5 first:border-t-0" : "py-1",
+      )}
+    >
+      <dt className={cn("flex min-w-0 items-baseline gap-1.5 text-muted-foreground", spansRow && "col-span-2")}>
+        {Icon && <Icon aria-hidden className="size-3 shrink-0 self-center" />}
+        {labelPrefix}
+        {overflow === "truncate" ? (
+          <TruncateTooltip text={label} className="typography-tiny min-w-0 truncate first-letter:uppercase" />
+        ) : (
+          <span className="typography-tiny min-w-0 break-words first-letter:uppercase">{label}</span>
+        )}
+      </dt>
+      <dd
+        className={cn(
+          emphasized ? "typography-tiny-medium" : "typography-tiny",
+          "min-w-0 text-default-foreground",
+          overflow === "wrap" && "break-words",
+          spansRow && "col-span-2",
+          valueClassName,
+        )}
+      >
+        {clipped && valueTitle !== undefined ? (
+          <TruncateTooltip
+            text={valueTitle}
+            className={cn("block min-w-0", overflow === "truncate" ? "truncate" : "line-clamp-4 break-words")}
+          >
+            {children}
+          </TruncateTooltip>
+        ) : (
+          children
+        )}
+      </dd>
+    </div>
+  );
+}
+
+export type NodePropertyExpanderProps = { expanded: boolean; collapsedLabel: string; onToggle: () => void };
+
+export function NodePropertyExpander(props: NodePropertyExpanderProps) {
+  const { expanded, collapsedLabel, onToggle } = props;
+
+  return (
+    <button
+      type="button"
+      onClick={onToggle}
+      aria-expanded={expanded}
+      className="nodrag flex items-center gap-1 pt-1.5 typography-tiny-medium text-muted-foreground hover:text-default-foreground"
+    >
+      {expanded ? <ChevronDown size={11} className="shrink-0" /> : <ChevronRight size={11} className="shrink-0" />}
+      {expanded ? "Show less" : collapsedLabel}
+    </button>
+  );
+}

package/src/graph/property-formatters.ts

@@ -135,6 +135,10 @@ function humanizeToken(value: string): string {
   return value;
 }
 
+export function isIsoDateTime(value: string): boolean {
+  return /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/.test(value);
+}
+
 export function formatDisplayValue(
   value: string,
   options?: {
@@ -162,7 +166,7 @@ export function formatDisplayValue(
 
   if (combinedLabel.includes("currency")) return value;
 
-  if (/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/.test(value)) {
+  if (isIsoDateTime(value)) {
     const date = parseISO(value);
 
     if (isValid(date)) return format(date, "MMM d, yyyy");

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

@@ -0,0 +1,177 @@
+import { isFullIri } from "@manta-eu/client/shared/rdf-namespaces";
+import { isPresent } from "@manta-eu/lib/present";
+import { Search } from "lucide-react";
+import { useMemo, useState } from "react";
+import type { PreviewFieldHints } from "../graph-list-utils";
+import { NodePropertyExpander, NodePropertyList, NodePropertyRow, PropertyValue } from "../nodes/node-property-row";
+import { ontologyTermIrisForProperties, withOntologyLabels } from "../ontology-labels";
+import type { NodeProperty, NodeRelation } from "../types";
+import { buildCardFacts, type CardFact, isAttributeSearchable, searchFacts, visibleChips } from "./card-facts";
+import { EntityValueChip } from "./EntityValueChip";
+import { ChannelIcon, channelDisplayName } from "#components/channel-icon/index";
+import { useOntologyTerms } from "#hooks/use-ontology-terms";
+import { cn } from "#style";
+
+export type UseAttributeFactsArgs = {
+  properties: NodeProperty[];
+  relations?: NodeRelation[];
+  jsonLd: Record<string, unknown>;
+  title?: string;
+  type?: string;
+  prefixLabels?: boolean;
+  previewHints?: PreviewFieldHints;
+  // Applied after ontology labels resolve, so a filter can match on the label too. Keep it stable (useCallback).
+  include?: (property: NodeProperty) => boolean;
+};
+
+export function useAttributeFacts(args: UseAttributeFactsArgs): { facts: CardFact[]; previewCount: number } {
+  const { properties, jsonLd, title, type, prefixLabels, previewHints, include } = args;
+
+  const relations = useMemo(() => args.relations ?? [], [args.relations]);
+
+  const terms = useOntologyTerms(
+    useMemo(
+      () => [
+        ...ontologyTermIrisForProperties(properties),
+        ...relations.flatMap((relation) => [relation.predicate, relation.target]).filter(isFullIri),
+      ],
+      [properties, relations],
+    ),
+  );
+
+  return useMemo(() => {
+    const labeled = withOntologyLabels(properties, terms);
+
+    return buildCardFacts({
+      properties: include ? labeled.filter(include) : labeled,
+      relations,
+      jsonLd,
+      terms,
+      title,
+      type,
+      prefixLabels,
+      previewHints,
+    });
+  }, [properties, terms, include, relations, jsonLd, title, type, prefixLabels, previewHints]);
+}
+
+type EntityChipsProps = { iris: string[]; color?: string; expanded: boolean };
+
+function EntityChips(props: EntityChipsProps) {
+  const { iris, color, expanded } = props;
+
+  const { shown, hiddenCount } = visibleChips(iris, expanded);
+
+  return (
+    <span className="flex min-w-0 flex-wrap items-center gap-1">
+      {shown.map((iri) => (
+        <EntityValueChip key={iri} iri={iri} color={color} />
+      ))}
+      {hiddenCount > 0 && <span className="typography-tiny text-muted-foreground">+{hiddenCount}</span>}
+    </span>
+  );
+}
+
+export type AttributeListProps = {
+  facts: CardFact[];
+  previewCount: number;
+  searchClassName?: string;
+  bodyClassName?: string;
+  // Lists every attribute with no preview, so a card that promises the whole record keeps that promise.
+  showAll?: boolean;
+  defaultExpanded?: boolean;
+};
+
+export function AttributeList(props: AttributeListProps) {
+  const { facts, previewCount, searchClassName, bodyClassName, showAll = false, defaultExpanded = false } = props;
+
+  const [expandedByUser, setExpanded] = useState(defaultExpanded);
+  const expanded = showAll || expandedByUser;
+  const [query, setQuery] = useState("");
+
+  const searchable = isAttributeSearchable(expanded, facts.length);
+  const searching = searchable && isPresent(query.trim());
+  const matchingFacts = useMemo(
+    () => (searching ? searchFacts(facts, query.trim()) : facts),
+    [searching, facts, query],
+  );
+
+  const visibleFacts = searching || expanded ? matchingFacts : facts.slice(0, previewCount);
+  const hasHiddenChips = visibleFacts.some((fact) => visibleChips(fact.entityIris, expanded).hiddenCount > 0);
+  const hiddenCount = facts.length - previewCount;
+
+  if (!isPresent(facts)) return null;
+
+  return (
+    <div className="flex flex-col">
+      {searchable && (
+        <label
+          className={cn(
+            "nodrag nopan flex items-center gap-2 border-b border-muted-border py-2 text-muted-foreground",
+            searchClassName,
+          )}
+        >
+          <Search aria-hidden className="size-3.5 shrink-0" />
+          <input
+            type="search"
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            onKeyDown={(event) => event.stopPropagation()}
+            placeholder="Search attributes…"
+            aria-label="Search attributes"
+            className="typography-tiny min-w-0 flex-1 bg-transparent text-default-foreground outline-none placeholder:text-muted-foreground"
+          />
+        </label>
+      )}
+
+      <div className={cn("flex flex-col", bodyClassName)}>
+        <NodePropertyList>
+          {visibleFacts.map(({ key, label, value, display, icon, entityIris, entityColor, highlighted, channel }) => (
+            <NodePropertyRow
+              key={key}
+              label={label}
+              icon={channel ? undefined : icon}
+              labelPrefix={
+                channel && (
+                  <span
+                    role="img"
+                    aria-label={channelDisplayName[channel]}
+                    title={channelDisplayName[channel]}
+                    className="shrink-0 self-center"
+                  >
+                    <ChannelIcon channel={channel} iconClassName="size-3" />
+                  </span>
+                )
+              }
+              overflow={isPresent(entityIris) ? "wrap" : expanded && display.kind === "prose" ? "clamp" : "truncate"}
+              valueTitle={value}
+              divided={false}
+              wideLabel
+              emphasized={highlighted}
+              valueClassName={cn("tabular-nums", highlighted && "text-primary")}
+            >
+              {isPresent(entityIris) ? (
+                <EntityChips iris={entityIris} color={entityColor} expanded={expanded} />
+              ) : (
+                <PropertyValue display={display} />
+              )}
+            </NodePropertyRow>
+          ))}
+        </NodePropertyList>
+        {searching && !isPresent(visibleFacts) && (
+          <span className="typography-tiny py-1 text-muted-foreground">No matching attributes.</span>
+        )}
+        {!showAll && (hiddenCount > 0 || hasHiddenChips || expanded) && (
+          <NodePropertyExpander
+            expanded={expanded}
+            collapsedLabel={hiddenCount > 0 ? `Show all ${facts.length}` : "Show all"}
+            onToggle={() => {
+              setExpanded((value) => !value);
+              setQuery("");
+            }}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,27 @@
+import { useMemo } from "react";
+import { stubNodeData } from "../stub-node";
+import { InsideEntityPreview } from "./EntityValueChip";
+import { GenericView } from "./GenericView";
+import { getEntityView } from "./router";
+import { useEntityNodes } from "#hooks/use-entity-nodes";
+
+export type EntityPreviewProps = { iri: string };
+
+// Loaded lazily from EntityValueChip: a static import would cycle through the node router back to GenericView.
+export function EntityPreview(props: EntityPreviewProps) {
+  const { iri } = props;
+
+  const iris = useMemo(() => [iri], [iri]);
+  const { nodesByIri, isLoading } = useEntityNodes(iris);
+
+  if (isLoading) return <div className="typography-tiny px-3 py-2 text-muted-foreground">Loading…</div>;
+
+  const node = nodesByIri.get(iri);
+  const View = (node && getEntityView(node.data.type, node.data.actionShape)) ?? GenericView;
+
+  return (
+    <InsideEntityPreview.Provider value={true}>
+      <View data={node?.data ?? stubNodeData(iri)} />
+    </InsideEntityPreview.Provider>
+  );
+}

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

@@ -0,0 +1,85 @@
+import { humanizeEntityName } from "@manta-eu/client/shared/agent-mode";
+import { iriLocalName } from "@manta-eu/client/shared/rdf-namespaces";
+import { isPresent } from "@manta-eu/lib/present";
+import { createContext, lazy, Suspense, useContext } from "react";
+import { useEntityLink } from "../entity-link";
+import { iriChannel } from "./card-facts";
+import { ChannelIcon, channelDisplayName } from "#components/channel-icon/index";
+import { Tooltip, TooltipContent, TooltipTrigger } from "#components/tooltip/index";
+import { useInstanceLabel } from "#hooks/use-instance-labels";
+import { useOntologyTerm } from "#hooks/use-ontology-terms";
+import { cn } from "#style";
+
+const EntityPreview = lazy(() => import("./EntityPreview").then((module) => ({ default: module.EntityPreview })));
+
+// A preview already shows one entity card; its own chips skip the hover so previews never stack.
+export const InsideEntityPreview = createContext(false);
+
+// An ontology term (e.g. an enum concept) has a label but no record of its own to open or preview.
+export function useEntityValueLabel(iri: string): { label: string; isOntologyTerm: boolean } {
+  const term = useOntologyTerm(iri);
+  const instanceLabel = useInstanceLabel(term?.label ? undefined : iri);
+
+  return {
+    label: term?.label ?? instanceLabel ?? humanizeEntityName(iriLocalName(iri)),
+    isOntologyTerm: isPresent(term?.label),
+  };
+}
+
+export type EntityValueChipProps = { iri: string; color?: string };
+
+export function EntityValueChip(props: EntityValueChipProps) {
+  const { iri, color } = props;
+
+  const { label, isOntologyTerm } = useEntityValueLabel(iri);
+  const EntityLink = useEntityLink();
+  const insidePreview = useContext(InsideEntityPreview);
+  const channel = iriChannel(iri);
+
+  if (isOntologyTerm) return <span className="min-w-0 truncate">{label}</span>;
+
+  const chipClassName = cn(
+    "nodrag inline-flex min-w-0 max-w-full items-center gap-1.5 rounded bg-faint px-1.5 py-px text-default-foreground",
+    EntityLink && "transition-colors hover:bg-accent hover:text-primary",
+  );
+  const content = (
+    <>
+      {channel ? (
+        <span role="img" aria-label={channelDisplayName[channel]} className="shrink-0">
+          <ChannelIcon channel={channel} iconClassName="size-3" />
+        </span>
+      ) : (
+        color && <span aria-hidden className="size-1.5 shrink-0 rounded-full" style={{ backgroundColor: color }} />
+      )}
+      <span className="min-w-0 truncate">{label}</span>
+    </>
+  );
+  const chip = EntityLink ? (
+    <EntityLink iri={iri} className={chipClassName}>
+      {content}
+    </EntityLink>
+  ) : (
+    <span className={chipClassName}>{content}</span>
+  );
+
+  if (insidePreview) return chip;
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span className="inline-flex min-w-0 max-w-full">{chip}</span>
+      </TooltipTrigger>
+      <TooltipContent
+        side="bottom"
+        align="start"
+        collisionPadding={8}
+        showArrow={false}
+        className="rounded-lg-v4 border border-default-border bg-card p-1.5 shadow-v4"
+      >
+        <Suspense fallback={null}>
+          <EntityPreview iri={iri} />
+        </Suspense>
+      </TooltipContent>
+    </Tooltip>
+  );
+}