@manta-eu/react 0.2.0 → 0.2.1

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>
+  );
+}

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>
   );
 });