@manta-eu/react 0.1.9 → 0.1.10

package/src/routes/activity/detail/ActivityStepDetail.tsx

@@ -0,0 +1,166 @@
+import { compactUri } from "@manta-eu/client/shared/rdf-namespaces";
+import { humanCount } from "@manta-eu/lib/humanize";
+import { isPresent } from "@manta-eu/lib/present";
+import { isFullIri } from "@manta-eu/rdf-lib/namespaces";
+import { ArrowUpRight, Box, Clock, Diff, Network, PencilLine, Plus, Timer, Trash } from "lucide-react";
+import { useMemo } from "react";
+import type { ReactNode } from "react";
+import { Link } from "react-router";
+import { match } from "ts-pattern";
+import { DiffRow } from "../change-display";
+import { formatClock, formatStepDuration } from "../format";
+import { EntityNodeView, subsumesChangeRows } from "./EntityNodeView";
+import { Badge } from "#components/badge/index";
+import { useEntityNodes, type ActivityChangeGroup } from "#ldo-ui";
+import { cn } from "#lib/utils";
+import { entityPath } from "#routes/data-explorer/namespaces";
+
+function changeKindMeta(kind: ActivityChangeGroup["changeKind"]): { icon: ReactNode; label: string } {
+  return match(kind)
+    .with("created", () => ({ icon: <Plus className="size-3.5" />, label: "Created" }))
+    .with("deleted", () => ({ icon: <Trash className="size-3.5" />, label: "Deleted" }))
+    .with("updated", () => ({ icon: <PencilLine className="size-3.5" />, label: "Updated" }))
+    .exhaustive();
+}
+
+type MetaProps = { icon: ReactNode; children: ReactNode };
+
+function Meta(props: MetaProps) {
+  return (
+    <span className="inline-flex items-center gap-1.5 typography-caption text-muted-foreground">
+      {props.icon}
+      {props.children}
+    </span>
+  );
+}
+
+type SectionCardProps = {
+  icon: ReactNode;
+  title: string;
+  badge?: ReactNode;
+  className?: string;
+  children: ReactNode;
+};
+
+function SectionCard(props: SectionCardProps) {
+  return (
+    <section className={cn("overflow-hidden rounded-xl border border-muted-border bg-card", props.className)}>
+      <div className="flex flex-wrap items-center gap-2 border-b border-muted-border px-4 py-3">
+        {props.icon}
+        <h2 className="typography-small-medium text-default-foreground">{props.title}</h2>
+        {props.badge && <div className="ml-auto">{props.badge}</div>}
+      </div>
+      {props.children}
+    </section>
+  );
+}
+
+export type ActivityStepDetailProps = {
+  group: ActivityChangeGroup | null;
+};
+
+export function ActivityStepDetail(props: ActivityStepDetailProps) {
+  const { group } = props;
+
+  const iris = useMemo(() => (group ? [group.entityIri, ...group.generatedIris] : []), [group]);
+  const { nodesByIri, isLoading: nodesLoading } = useEntityNodes(iris);
+  const node = iris.map((iri) => nodesByIri.get(iri)).find(isPresent);
+
+  const typedCard = useMemo(
+    () => (group ? subsumesChangeRows(group.entityIri, node, group.triples) : false),
+    [group, node],
+  );
+
+  if (!group) {
+    return (
+      <div className="flex h-full items-center justify-center p-8">
+        <p className="typography-small text-muted-foreground">Select a change to inspect it.</p>
+      </div>
+    );
+  }
+
+  const startedAt = formatClock(group.startedAt);
+  const duration = formatStepDuration(group.startedAt, group.endedAt);
+  const kind = changeKindMeta(group.changeKind);
+
+  return (
+    <div className="flex w-full flex-col gap-4 p-5">
+      <section className="flex min-w-0 gap-4 px-1 py-1">
+        <div className="flex size-11 shrink-0 items-center justify-center rounded-lg bg-faint text-muted-foreground">
+          <Box className="size-5" />
+        </div>
+
+        <div className="min-w-0 flex-1 space-y-3">
+          <h2 className="truncate typography-large-body-semibold" title={group.entityLabel}>
+            {group.entityLabel}
+          </h2>
+
+          <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
+            <Meta icon={kind.icon}>{kind.label}</Meta>
+            {startedAt && <Meta icon={<Clock className="size-3.5" />}>{startedAt}</Meta>}
+            {duration && <Meta icon={<Timer className="size-3.5" />}>{duration}</Meta>}
+          </div>
+
+          {isFullIri(group.entityIri) ? (
+            <Link
+              to={entityPath(group.entityIri)}
+              title={group.entityIri}
+              className="flex w-fit max-w-full items-center gap-1 font-mono typography-caption text-muted-foreground hover:underline"
+            >
+              <span className="truncate">{compactUri(group.entityIri)}</span>
+              <ArrowUpRight className="size-3.5 shrink-0" />
+            </Link>
+          ) : (
+            <span className="block truncate font-mono typography-caption text-muted-foreground" title={group.entityIri}>
+              {compactUri(group.entityIri)}
+            </span>
+          )}
+        </div>
+      </section>
+
+      <div className="flex flex-col gap-4 md:flex-row md:items-start">
+        <SectionCard
+          icon={<Network className="size-4 shrink-0 text-muted-foreground" />}
+          title="Visualization"
+          className="md:w-max md:min-w-72 md:max-w-[65%] md:shrink-0"
+        >
+          <div className="overflow-x-auto p-4">
+            <EntityNodeView
+              entityIri={group.entityIri}
+              node={node}
+              triples={group.triples}
+              isLoading={nodesLoading}
+              changeKind={group.changeKind}
+              generatedIris={group.generatedIris}
+            />
+          </div>
+        </SectionCard>
+
+        {!typedCard && (
+          <SectionCard
+            icon={<Diff className="size-4 shrink-0 text-muted-foreground" />}
+            title="Changes"
+            badge={
+              isPresent(group.diffs) ? (
+                <Badge variant="secondary" size="sm">
+                  {humanCount(group.diffs.length, "change")}
+                </Badge>
+              ) : undefined
+            }
+            className="md:min-w-0 md:flex-1"
+          >
+            {isPresent(group.diffs) ? (
+              <div className="grid gap-1 p-4">
+                {group.diffs.map((diff) => (
+                  <DiffRow key={diff.predicate} diff={diff} />
+                ))}
+              </div>
+            ) : (
+              <p className="px-4 py-5 typography-small text-muted-foreground">No field-level changes recorded.</p>
+            )}
+          </SectionCard>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/routes/activity/detail/ActivityStepsRail.tsx

@@ -0,0 +1,83 @@
+import { humanCount } from "@manta-eu/lib/humanize";
+import { isPresent } from "@manta-eu/lib/present";
+import { formatStepTime } from "../format";
+import type { ActivityChangeGroup } from "#ldo-ui";
+import { cn } from "#lib/utils";
+
+export type ActivityStepsRailProps = {
+  groups: ActivityChangeGroup[];
+  activeIri: string | null;
+  onSelect: (entityIri: string) => void;
+};
+
+export function ActivityStepsRail(props: ActivityStepsRailProps) {
+  const { groups, activeIri, onSelect } = props;
+
+  if (!isPresent(groups)) {
+    return (
+      <div className="p-4">
+        <p className="typography-small text-muted-foreground">No recorded changes.</p>
+      </div>
+    );
+  }
+
+  return (
+    <ol className="flex flex-col py-2">
+      {groups.map((group, index) => {
+        const selected = group.entityIri === activeIri;
+        const last = index === groups.length - 1;
+
+        return (
+          <li key={group.entityIri}>
+            <button
+              type="button"
+              aria-current={selected}
+              onClick={() => onSelect(group.entityIri)}
+              className={cn(
+                "flex w-full items-start gap-3 px-4 py-3 text-left transition-colors",
+                selected ? "bg-accent/10" : "hover:bg-muted/30",
+              )}
+            >
+              <span className="relative flex flex-col items-center self-stretch pt-0.5">
+                <span
+                  className={cn(
+                    "size-2.5 shrink-0 rounded-full ring-2",
+                    selected
+                      ? "bg-accent-foreground ring-accent-foreground/30"
+                      : "bg-muted-foreground/50 ring-transparent",
+                  )}
+                />
+                {!last && <span className="mt-1 w-px flex-1 bg-muted-border" />}
+              </span>
+
+              <span className="grid min-w-0 gap-0.5">
+                <span className="flex items-center gap-2">
+                  <span
+                    className={cn(
+                      "typography-small-medium truncate",
+                      selected ? "text-default-foreground" : "text-default-foreground/90",
+                    )}
+                    title={group.entityLabel}
+                  >
+                    {group.entityLabel}
+                  </span>
+                </span>
+                <span className="typography-tiny text-muted-foreground flex items-center gap-1.5">
+                  <span className="tabular-nums">{formatStepTime(group.startedAt)}</span>
+                  <span aria-hidden>·</span>
+                  <span className="truncate">{group.changeKind}</span>
+                  {isPresent(group.diffs) && (
+                    <>
+                      <span aria-hidden>·</span>
+                      <span className="shrink-0">{humanCount(group.diffs.length, "change")}</span>
+                    </>
+                  )}
+                </span>
+              </span>
+            </button>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}

package/src/routes/activity/detail/ActivityTimeline.tsx

@@ -0,0 +1,115 @@
+import { isPresent } from "@manta-eu/lib/present";
+import { computeTimelineLayout, type TimelineItem } from "./timeline";
+import { cn } from "#lib/utils";
+
+export type ActivityTimelineProps = {
+  items: TimelineItem[];
+  runStartMs: number;
+  runEndMs: number | null;
+  // The active step: both the selection and the marker that tracks list scroll.
+  activeId: string | null;
+  onSelect: (id: string) => void;
+};
+
+const rowHeightPx = 28;
+const barHeightPx = 24;
+
+type TimelineMarkerProps = { leftPct: number; label: string; align?: "left" | "right" };
+
+function TimelineMarker(props: TimelineMarkerProps) {
+  const { leftPct, label, align = "right" } = props;
+
+  return (
+    <div className="pointer-events-none absolute inset-y-0 z-20" style={{ left: `${leftPct}%` }}>
+      <span
+        className={cn(
+          "typography-tiny-semibold absolute -top-5 whitespace-nowrap rounded bg-accent px-1.5 py-0.5 text-accent-foreground shadow-sm",
+          align === "left" ? "right-0.5" : "left-0.5",
+        )}
+      >
+        {label}
+      </span>
+      <span className="absolute inset-y-0 left-0 w-px bg-accent-foreground/70" />
+    </div>
+  );
+}
+
+export function ActivityTimeline(props: ActivityTimelineProps) {
+  const { items, runStartMs, runEndMs, activeId, onSelect } = props;
+
+  const minBarWidthPct = Math.max(1.5, Math.min(6, 60 / Math.max(items.length, 1)));
+  const { bars, ticks, laneCount } = computeTimelineLayout(items, runStartMs, runEndMs, minBarWidthPct);
+
+  if (!isPresent(bars)) {
+    return (
+      <div className="rounded-xl border border-muted-border bg-card px-5 py-4">
+        <p className="typography-small text-muted-foreground">No timestamps to plot.</p>
+      </div>
+    );
+  }
+
+  const active = bars.find((bar) => bar.id === activeId);
+  const activeStart = active?.leftPct ?? 0;
+  const activeEnd = active ? Math.min(active.leftPct + active.widthPct, 100) : 0;
+
+  // Track grows past the card width (one slot per change) and scrolls horizontally.
+  const trackMinWidthPx = items.length * 180;
+  const trackHeightPx = Math.max(laneCount, 1) * rowHeightPx;
+
+  return (
+    <div className="overflow-auto rounded-xl border border-muted-border bg-card">
+      <div className="px-5 pb-3 pt-3" style={{ minWidth: `${trackMinWidthPx}px` }}>
+        <div className="relative h-4">
+          {ticks.map((tick, index) => (
+            <span
+              key={index}
+              className="typography-tiny text-muted-foreground tabular-nums absolute -translate-x-1/2 whitespace-nowrap"
+              style={{ left: `${tick.leftPct}%` }}
+            >
+              {tick.label}
+            </span>
+          ))}
+        </div>
+
+        <div className="relative mt-7" style={{ height: `${trackHeightPx}px` }}>
+          {active && (
+            <>
+              <div
+                className="pointer-events-none absolute inset-y-0 z-10 rounded-sm bg-accent/15"
+                style={{ left: `${activeStart}%`, width: `${Math.max(activeEnd - activeStart, 0)}%` }}
+              />
+              <TimelineMarker
+                leftPct={activeStart}
+                label={active.atLabel}
+                align={activeStart < 12 ? "right" : "left"}
+              />
+              <TimelineMarker leftPct={activeEnd} label={active.endLabel} align={activeEnd > 88 ? "left" : "right"} />
+            </>
+          )}
+
+          {bars.map((bar) => (
+            <button
+              key={bar.id}
+              type="button"
+              title={`${bar.label} · ${bar.atLabel}`}
+              aria-pressed={bar.id === activeId}
+              onClick={() => onSelect(bar.id)}
+              className={cn(
+                "absolute flex items-center overflow-hidden rounded-md px-2 text-left text-accent-foreground shadow-sm transition-colors",
+                bar.id === activeId ? "bg-accent ring-2 ring-accent-foreground/50" : "bg-accent/55 hover:bg-accent/75",
+              )}
+              style={{
+                left: `${bar.leftPct}%`,
+                width: `${bar.widthPct}%`,
+                top: `${bar.lane * rowHeightPx}px`,
+                height: `${barHeightPx}px`,
+              }}
+            >
+              <span className="typography-tiny truncate">{bar.label}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/routes/activity/detail/EntityNodeView.tsx

@@ -0,0 +1,79 @@
+import { isQueryableTermIri } from "@manta-eu/datalog-parser";
+import { isFullIri } from "@manta-eu/rdf-lib/namespaces";
+import { useMemo } from "react";
+import { Loader } from "#components/loader/index";
+import {
+  diffSubsumingViewIris,
+  entityNodeFromChangeTriples,
+  GenericView,
+  getEntityView,
+  type ActivityChangeKind,
+  type ActivityChangeTriple,
+  type EntityNode,
+} from "#ldo-ui";
+
+type EmptyVisualizationProps = { changeKind?: ActivityChangeKind };
+
+function EmptyVisualization(props: EmptyVisualizationProps) {
+  const message =
+    props.changeKind === "deleted"
+      ? "This entity was deleted — no current data to visualize."
+      : "No visualization available for this entity.";
+
+  return <p className="typography-tiny text-muted-foreground">{message}</p>;
+}
+
+export type EntityNodeViewProps = {
+  entityIri: string;
+  node?: EntityNode;
+  triples?: ActivityChangeTriple[];
+  isLoading?: boolean;
+  changeKind?: ActivityChangeKind;
+  generatedIris?: string[];
+};
+
+function TypedView(props: { node: EntityNode }) {
+  const { data } = props.node;
+  const EntityView = getEntityView(data.type, data.actionShape) ?? GenericView;
+
+  return <EntityView data={data} />;
+}
+
+export function EntityNodeView(props: EntityNodeViewProps) {
+  const { entityIri, node, triples, isLoading, changeKind, generatedIris } = props;
+
+  const changeNode = useMemo(
+    () => (triples ? entityNodeFromChangeTriples(entityIri, triples) : undefined),
+    [triples, entityIri],
+  );
+
+  if (node) return <TypedView node={node} />;
+
+  // Wait for the full record rather than painting a partial view and swapping; an unnameable subject never arrives.
+  if (isLoading && [entityIri, ...(generatedIris ?? [])].some(isQueryableTermIri)) {
+    return (
+      <div className="flex justify-center py-6">
+        <Loader className="size-5" />
+      </div>
+    );
+  }
+
+  if (changeNode) return <TypedView node={changeNode} />;
+
+  if (!isFullIri(entityIri)) {
+    return <span className="typography-tiny text-muted-foreground">No preview</span>;
+  }
+
+  return <EmptyVisualization changeKind={changeKind} />;
+}
+
+// True only for cards that re-present the change's full content (the router's diffSubsumingViewIris) —
+// a lens-backed summary card shows current state, so its raw Changes rows must stay.
+export function subsumesChangeRows(entityIri: string, node?: EntityNode, triples?: ActivityChangeTriple[]): boolean {
+  const resolved = node ?? (triples ? entityNodeFromChangeTriples(entityIri, triples) : undefined);
+  if (resolved === undefined) return false;
+
+  return (
+    diffSubsumingViewIris.has(resolved.data.actionShape ?? "") || diffSubsumingViewIris.has(resolved.data.type ?? "")
+  );
+}

package/src/routes/activity/detail/LazyMount.tsx

@@ -0,0 +1,27 @@
+import type { ReactNode } from "react";
+import { useIntersectionObserver } from "usehooks-ts";
+import { cn } from "#lib/utils";
+
+export const viewportOverscan = "100% 0px";
+
+export type LazyMountProps = {
+  root: HTMLElement | null;
+  children: ReactNode;
+};
+
+export function LazyMount(props: LazyMountProps) {
+  const { root, children } = props;
+
+  const { ref, isIntersecting } = useIntersectionObserver({
+    root,
+    rootMargin: viewportOverscan,
+    freezeOnceVisible: true,
+    initialIsIntersecting: typeof IntersectionObserver === "undefined",
+  });
+
+  return (
+    <div ref={ref} className={cn(!isIntersecting && "min-h-55")}>
+      {isIntersecting && children}
+    </div>
+  );
+}

package/src/routes/activity/detail/timeline.ts

@@ -0,0 +1,101 @@
+import { isPresent } from "@manta-eu/lib/present";
+import { clamp } from "ramda";
+
+export type TimelineItem = {
+  id: string;
+  label: string;
+  kind: string;
+  startMs: number | null;
+  endMs: number | null;
+};
+
+export type TimelineBar = {
+  id: string;
+  label: string;
+  kind: string;
+  leftPct: number;
+  widthPct: number;
+  lane: number;
+  atLabel: string;
+  endLabel: string;
+};
+
+export type TimelineTick = {
+  label: string;
+  leftPct: number;
+};
+
+export type TimelineLayout = {
+  spanMs: number;
+  bars: TimelineBar[];
+  ticks: TimelineTick[];
+  laneCount: number;
+};
+
+const tickCount = 6;
+
+export function formatOffset(ms: number): string {
+  const totalSeconds = Math.max(0, Math.round(ms / 1000));
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+
+  return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+}
+
+export function computeTimelineLayout(
+  items: TimelineItem[],
+  runStartMs: number,
+  runEndMs: number | null,
+  minBarWidthPct: number,
+): TimelineLayout {
+  const placeable = items.filter((item): item is TimelineItem & { startMs: number } => item.startMs !== null);
+
+  const starts = placeable.map((item) => item.startMs);
+  const ends = placeable.map((item) => item.endMs ?? item.startMs);
+
+  // Axis starts at the first change so the earliest bar sits at the left edge.
+  const spanStartMs = isPresent(starts) ? Math.min(...starts) : runStartMs;
+  const maxEnd = isPresent(ends) ? Math.max(...ends) : spanStartMs;
+  const spanEndMs = Math.max(maxEnd, runEndMs ?? maxEnd);
+  const spanMs = Math.max(spanEndMs - spanStartMs, 1);
+
+  const bars: TimelineBar[] = placeable.map((item) => {
+    const endMs = item.endMs ?? item.startMs;
+    const offset = item.startMs - spanStartMs;
+    const endOffset = endMs - spanStartMs;
+    const leftPct = clamp(0, 100 - minBarWidthPct, (offset / spanMs) * 100);
+    const widthPct = clamp(minBarWidthPct, 100 - leftPct, ((endOffset - offset) / spanMs) * 100);
+
+    return {
+      id: item.id,
+      label: item.label,
+      kind: item.kind,
+      leftPct,
+      widthPct,
+      lane: 0,
+      atLabel: formatOffset(item.startMs - runStartMs),
+      endLabel: formatOffset(endMs - runStartMs),
+    };
+  });
+
+  const labelBaseMs = spanStartMs - runStartMs;
+  const ticks: TimelineTick[] = Array.from({ length: tickCount }, (_, index) => {
+    const at = (spanMs * index) / (tickCount - 1);
+
+    return { label: formatOffset(labelBaseMs + at), leftPct: (at / spanMs) * 100 };
+  });
+
+  // Overlapping bars stack into lanes rather than shifting sideways, which would misread as time.
+  const laneEnds: number[] = [];
+  const laidBars = [...bars]
+    .sort((left, right) => left.leftPct - right.leftPct)
+    .map((bar) => {
+      const openLane = laneEnds.findIndex((end) => bar.leftPct >= end);
+      const lane = openLane === -1 ? laneEnds.length : openLane;
+      laneEnds[lane] = bar.leftPct + bar.widthPct;
+
+      return { ...bar, lane };
+    });
+
+  return { spanMs, bars: laidBars, ticks, laneCount: laneEnds.length };
+}

package/src/routes/activity/format.ts

@@ -0,0 +1,45 @@
+import { formatDateTime } from "@manta-eu/lib/date";
+import { humanDuration } from "@manta-eu/lib/humanize";
+import { differenceInMilliseconds, differenceInSeconds, isValid, parseISO } from "date-fns";
+
+export function formatDuration(durationSeconds: number | null) {
+  if (durationSeconds == null) return "—";
+
+  return humanDuration({ start: 0, end: Math.round(durationSeconds * 1000) }) || "0 seconds";
+}
+
+export function formatStartedAt(value: string): string {
+  const date = parseISO(value);
+
+  return isValid(date) ? formatDateTime(date, "MMMM d, h:mm a") : value;
+}
+
+export function formatStepTime(startedAt: string | null): string {
+  if (!startedAt) return "—";
+
+  const date = parseISO(startedAt);
+
+  return isValid(date) ? formatDateTime(date, "HH:mm:ss") : "—";
+}
+
+export function formatClock(value: string | null): string | null {
+  if (!value) return null;
+
+  const date = parseISO(value);
+
+  return isValid(date) ? formatDateTime(date, "HH:mm:ss.S") : null;
+}
+
+// Sub-second precision the shared duration helpers can't express (humanDuration has no ms unit).
+export function formatStepDuration(startedAt: string | null, endedAt: string | null): string | null {
+  if (!startedAt || !endedAt) return null;
+
+  const start = parseISO(startedAt);
+  const end = parseISO(endedAt);
+
+  if (!isValid(start) || !isValid(end)) return null;
+
+  const milliseconds = differenceInMilliseconds(end, start);
+
+  return milliseconds < 1000 ? `${milliseconds}ms` : `${differenceInSeconds(end, start)}s`;
+}