@manta-eu/react 0.1.9 → 0.1.10

package/src/routes/data-explorer/components/SegmentBuilder.tsx

@@ -0,0 +1,354 @@
+import { isPresent } from "@manta-eu/lib/present";
+import { Plus, X } from "lucide-react";
+import { useState } from "react";
+import { propertyDisplayLabel, useFilterableProperties, usePropertyValues } from "../filter-hooks";
+import {
+  operatorsForKind,
+  valueFreeOperators,
+  valueInputType,
+  withProperty,
+  type Condition,
+  type ConditionGroup,
+  type FilterableProperty,
+  type Operator,
+  type SegmentFilter,
+} from "../filter-query";
+import { Button } from "#components/button/index";
+import { Input } from "#components/input/index";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "#components/select/index";
+import { sectionLabelClass } from "#ldo-ui";
+import { cn } from "#lib/utils";
+
+const operatorLabels: Record<Operator, string> = {
+  contains: "contains",
+  startsWith: "starts with",
+  endsWith: "ends with",
+  equals: "is",
+  oneOf: "is one of",
+  isEmpty: "is empty",
+  isNotEmpty: "is not empty",
+  eq: "equals",
+  neq: "not equal",
+  gt: "greater than",
+  gte: "at least",
+  lt: "less than",
+  lte: "at most",
+  between: "between",
+  isTrue: "is true",
+  isFalse: "is false",
+  before: "before",
+  after: "after",
+  hasAny: "has any",
+  hasNone: "has none",
+};
+
+const microLabelClass = cn(sectionLabelClass, "text-muted-foreground");
+
+function emptyCondition(): Condition {
+  return { id: crypto.randomUUID(), propertyIri: "", kind: "string", operator: "contains" };
+}
+
+type SegmentBuilderProps = {
+  anchor: string;
+  classIri?: string;
+  filter: SegmentFilter;
+  onChange: (filter: SegmentFilter) => void;
+};
+
+export function SegmentBuilder(props: SegmentBuilderProps) {
+  const { anchor, classIri, filter, onChange } = props;
+
+  const [propertiesRequested, setPropertiesRequested] = useState(isPresent(filter.groups));
+
+  const { properties, isLoading: propertiesLoading } = useFilterableProperties(
+    propertiesRequested ? anchor : undefined,
+    classIri,
+  );
+
+  function updateGroup(groupId: string, next: ConditionGroup) {
+    onChange({ groups: filter.groups.map((group) => (group.id === groupId ? next : group)) });
+  }
+
+  function removeGroup(groupId: string) {
+    onChange({ groups: filter.groups.filter((group) => group.id !== groupId) });
+  }
+
+  function addGroup() {
+    setPropertiesRequested(true);
+    onChange({ groups: [...filter.groups, { id: crypto.randomUUID(), conditions: [emptyCondition()] }] });
+  }
+
+  return (
+    <div className="flex flex-col gap-3 rounded-xl border border-muted-border bg-muted/20 p-3">
+      {filter.groups.map((group, index) => (
+        <div key={group.id} className="flex flex-col gap-3">
+          {index > 0 && <span className={microLabelClass}>or</span>}
+
+          <ConditionGroupRow
+            anchor={anchor}
+            group={group}
+            properties={properties}
+            propertiesLoading={propertiesLoading}
+            onChange={(next) => updateGroup(group.id, next)}
+            onRemove={() => removeGroup(group.id)}
+          />
+        </div>
+      ))}
+
+      <Button variant="ghost" size="xs" icon={Plus} className={cn("w-fit", microLabelClass)} onClick={addGroup}>
+        {isPresent(filter.groups) ? "Or" : "Add filter"}
+      </Button>
+    </div>
+  );
+}
+
+type ConditionGroupRowProps = {
+  anchor: string;
+  group: ConditionGroup;
+  properties: FilterableProperty[];
+  propertiesLoading: boolean;
+  onChange: (group: ConditionGroup) => void;
+  onRemove: () => void;
+};
+
+function ConditionGroupRow(props: ConditionGroupRowProps) {
+  const { anchor, group, properties, propertiesLoading, onChange, onRemove } = props;
+
+  function updateCondition(next: Condition) {
+    onChange({
+      ...group,
+      conditions: group.conditions.map((condition) => (condition.id === next.id ? next : condition)),
+    });
+  }
+
+  function removeCondition(conditionId: string) {
+    const conditions = group.conditions.filter((condition) => condition.id !== conditionId);
+
+    if (!isPresent(conditions)) {
+      onRemove();
+
+      return;
+    }
+
+    onChange({ ...group, conditions });
+  }
+
+  function addCondition() {
+    onChange({ ...group, conditions: [...group.conditions, emptyCondition()] });
+  }
+
+  return (
+    <div className="flex flex-col gap-2 rounded-xl border border-muted-border/60 bg-background p-3">
+      {group.conditions.map((condition, index) => (
+        <ConditionRow
+          key={condition.id}
+          anchor={anchor}
+          condition={condition}
+          properties={properties}
+          propertiesLoading={propertiesLoading}
+          leadLabel={index === 0 ? "if" : "and"}
+          onChange={updateCondition}
+          onRemove={() => removeCondition(condition.id)}
+        />
+      ))}
+
+      <Button variant="ghost" size="xs" icon={Plus} className={cn("w-fit", microLabelClass)} onClick={addCondition}>
+        And
+      </Button>
+    </div>
+  );
+}
+
+type ConditionRowProps = {
+  anchor: string;
+  condition: Condition;
+  properties: FilterableProperty[];
+  propertiesLoading: boolean;
+  leadLabel: string;
+  onChange: (condition: Condition) => void;
+  onRemove: () => void;
+};
+
+function ConditionRow(props: ConditionRowProps) {
+  const { anchor, condition, properties, propertiesLoading, leadLabel, onChange, onRemove } = props;
+
+  const { values: enumValues, isEnum } = usePropertyValues(anchor, condition.propertyIri, condition.kind === "string");
+
+  const operators = operatorsForKind(condition.kind).filter((operator) => operator !== "oneOf" || isEnum);
+
+  function selectProperty(iri: string) {
+    const property = properties.find((entry) => entry.iri === iri);
+
+    if (!property) return;
+
+    onChange(withProperty(condition, property));
+  }
+
+  function selectOperator(operator: Operator) {
+    onChange({ ...condition, operator, value: undefined, value2: undefined, values: undefined });
+  }
+
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <span className={cn("w-8 shrink-0", microLabelClass)}>{leadLabel}</span>
+
+      <div className="w-52">
+        <Select value={condition.propertyIri} onValueChange={selectProperty}>
+          <SelectTrigger label="Field" id={`${condition.id}-field`} hiddenLabel size="sm" disabled={propertiesLoading}>
+            <SelectValue placeholder={propertiesLoading ? "loading…" : "field…"} />
+          </SelectTrigger>
+          <SelectContent>
+            {properties.map((property) => (
+              <SelectItem key={property.iri} value={property.iri}>
+                {propertyDisplayLabel(property)}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="w-40">
+        <Select value={condition.operator} onValueChange={(value) => selectOperator(value as Operator)}>
+          <SelectTrigger label="Operator" id={`${condition.id}-operator`} hiddenLabel size="sm">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {operators.map((operator) => (
+              <SelectItem key={operator} value={operator}>
+                {operatorLabels[operator]}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      <ValueEditor condition={condition} enumValues={enumValues} isEnum={isEnum} onChange={onChange} />
+
+      <Button
+        variant="ghost"
+        size="xs"
+        iconOnly
+        icon={X}
+        aria-label="Remove condition"
+        className="ml-auto shrink-0 text-muted-foreground/60"
+        onClick={onRemove}
+      />
+    </div>
+  );
+}
+
+type ValueEditorProps = {
+  condition: Condition;
+  enumValues: string[];
+  isEnum: boolean;
+  onChange: (condition: Condition) => void;
+};
+
+function ValueEditor(props: ValueEditorProps) {
+  const { condition, enumValues, isEnum, onChange } = props;
+
+  if (valueFreeOperators.has(condition.operator)) return null;
+
+  if (condition.operator === "oneOf" && isEnum) {
+    return <EnumToggleChips condition={condition} enumValues={enumValues} onChange={onChange} />;
+  }
+
+  if (condition.operator === "equals" && isEnum) {
+    return <EnumValueSelect condition={condition} enumValues={enumValues} onChange={onChange} />;
+  }
+
+  return <FreeValueInputs condition={condition} onChange={onChange} />;
+}
+
+type ConditionValueProps = {
+  condition: Condition;
+  onChange: (condition: Condition) => void;
+};
+
+type EnumValueProps = ConditionValueProps & { enumValues: string[] };
+
+function EnumToggleChips(props: EnumValueProps) {
+  const { condition, enumValues, onChange } = props;
+
+  const selected = condition.values ?? [];
+
+  function toggleValue(value: string) {
+    const next = selected.includes(value) ? selected.filter((entry) => entry !== value) : [...selected, value];
+
+    onChange({ ...condition, values: next });
+  }
+
+  return (
+    <div className="flex max-w-md flex-wrap gap-1">
+      {enumValues.map((value) => (
+        <Button
+          key={value}
+          variant={selected.includes(value) ? "secondary" : "ghost"}
+          size="xs"
+          aria-pressed={selected.includes(value)}
+          className="h-6"
+          onClick={() => toggleValue(value)}
+        >
+          {value}
+        </Button>
+      ))}
+    </div>
+  );
+}
+
+function EnumValueSelect(props: EnumValueProps) {
+  const { condition, enumValues, onChange } = props;
+
+  return (
+    <div className="w-52">
+      <Select value={condition.value ?? ""} onValueChange={(next) => onChange({ ...condition, value: next })}>
+        <SelectTrigger label="Value" id={`${condition.id}-value`} hiddenLabel size="sm">
+          <SelectValue placeholder="select…" />
+        </SelectTrigger>
+        <SelectContent>
+          {enumValues.map((value) => (
+            <SelectItem key={value} value={value}>
+              {value}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}
+
+function FreeValueInputs(props: ConditionValueProps) {
+  const { condition, onChange } = props;
+
+  const inputType = valueInputType(condition.kind);
+
+  return (
+    <div className="flex items-center gap-2">
+      <Input
+        type={inputType}
+        size="sm"
+        aria-label="Filter value"
+        value={condition.value ?? ""}
+        onChange={(event) => onChange({ ...condition, value: event.target.value })}
+        className="w-36 rounded-md-v4 border-input-border"
+        placeholder="value"
+      />
+
+      {condition.operator === "between" && (
+        <>
+          <span className={microLabelClass}>and</span>
+
+          <Input
+            type={inputType}
+            size="sm"
+            aria-label="Filter upper bound"
+            value={condition.value2 ?? ""}
+            onChange={(event) => onChange({ ...condition, value2: event.target.value })}
+            className="w-36 rounded-md-v4 border-input-border"
+            placeholder="value"
+          />
+        </>
+      )}
+    </div>
+  );
+}

package/src/routes/data-explorer/components/SelectionProvider.tsx

@@ -0,0 +1,31 @@
+import { createContext, useContext, useEffect, useMemo, useState, type ReactNode } from "react";
+
+type SelectionValue = { activeClassIri?: string; setActiveClassIri: (iri?: string) => void };
+
+const SelectionContext = createContext<SelectionValue | undefined>(undefined);
+
+type SelectionProviderProps = { children: ReactNode };
+
+export function SelectionProvider(props: SelectionProviderProps) {
+  const { children } = props;
+
+  const [activeClassIri, setActiveClassIri] = useState<string>();
+
+  const value = useMemo(() => ({ activeClassIri, setActiveClassIri }), [activeClassIri]);
+
+  return <SelectionContext.Provider value={value}>{children}</SelectionContext.Provider>;
+}
+
+export function useSelectedClassIri(): string | undefined {
+  return useContext(SelectionContext)?.activeClassIri;
+}
+
+export function useActiveClass(classIri: string | undefined): void {
+  const setActiveClassIri = useContext(SelectionContext)?.setActiveClassIri;
+
+  useEffect(() => {
+    setActiveClassIri?.(classIri);
+
+    return () => setActiveClassIri?.(undefined);
+  }, [setActiveClassIri, classIri]);
+}

package/src/routes/data-explorer/components/TruncateTooltip.tsx

@@ -0,0 +1,25 @@
+import { useState } from "react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "#components/tooltip/index";
+
+type TruncateTooltipProps = { text: string; className: string };
+
+export function TruncateTooltip(props: TruncateTooltipProps) {
+  const { text, className } = props;
+
+  const [isTruncated, setIsTruncated] = useState(false);
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span
+          className={className}
+          onMouseEnter={(event) => setIsTruncated(event.currentTarget.scrollWidth > event.currentTarget.clientWidth)}
+        >
+          {text}
+        </span>
+      </TooltipTrigger>
+
+      {isTruncated && <TooltipContent>{text}</TooltipContent>}
+    </Tooltip>
+  );
+}

package/src/routes/data-explorer/components/TypeNotice.tsx

@@ -0,0 +1,53 @@
+import { Info, TriangleAlert, type LucideIcon } from "lucide-react";
+import { cn } from "#lib/utils";
+
+type NoticeStatus = "attention" | "info";
+
+type NoticeStyle = { icon: LucideIcon; card: string; circle: string };
+
+const noticeStyles: Record<NoticeStatus, NoticeStyle> = {
+  attention: {
+    icon: TriangleAlert,
+    card: "border-warning-foreground/20 bg-warning/40",
+    circle: "bg-warning-foreground/15 text-warning-foreground",
+  },
+  info: {
+    icon: Info,
+    card: "border-muted-border bg-muted/30",
+    circle: "bg-muted text-muted-foreground",
+  },
+};
+
+type TypeNoticeProps = {
+  status: NoticeStatus;
+  title: string;
+  description: string;
+  fix?: string;
+};
+
+export function TypeNotice(props: TypeNoticeProps) {
+  const { status, title, description, fix } = props;
+
+  const style = noticeStyles[status];
+  const Icon = style.icon;
+
+  return (
+    <div className={cn("flex gap-3 rounded-xl border p-4", style.card)}>
+      <span className={cn("mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full", style.circle)}>
+        <Icon className="size-4" />
+      </span>
+
+      <div className="flex min-w-0 flex-col gap-1">
+        <p className="typography-small-medium text-default-foreground">{title}</p>
+        <p className="typography-small max-w-prose text-muted-foreground">{description}</p>
+
+        {fix && (
+          <span className="mt-1.5 inline-flex w-fit items-center gap-1.5 rounded-md border border-dashed border-muted-border px-2 py-1 typography-tiny text-muted-foreground">
+            <span className="typography-tiny-semibold text-default-foreground">Fix</span>
+            {fix}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/routes/data-explorer/components/class-detail/Checks.tsx

@@ -0,0 +1,156 @@
+import { useRulesQuery } from "@manta-eu/client";
+import { humanCount } from "@manta-eu/lib/humanize";
+import { Check, Minus, TriangleAlert, type LucideIcon } from "lucide-react";
+import { LoadingRows, StatusText } from "../RawTriples";
+import { Badge } from "#components/badge/index";
+import { useOntologyTerm } from "#ldo-ui";
+import { cn } from "#lib/utils";
+import { useMantaClient } from "#providers/index";
+import { useClassProperties } from "#routes/data-explorer/class-properties";
+import { useInstanceCounts } from "#routes/data-explorer/classes";
+import { useHasIdentifiers } from "#routes/data-explorer/records";
+
+type CheckStatus = "pass" | "attention" | "info";
+
+type ClassCheck = { key: string; label: string; detail: string; status: CheckStatus };
+
+type CheckStatusMeta = { icon: LucideIcon; circle: string; badge: "success" | "warning" | "info"; badgeLabel: string };
+
+const checkStatusMeta: Record<CheckStatus, CheckStatusMeta> = {
+  pass: {
+    icon: Check,
+    circle: "bg-success-foreground/15 text-success-foreground",
+    badge: "success",
+    badgeLabel: "Pass",
+  },
+  attention: {
+    icon: TriangleAlert,
+    circle: "bg-warning-foreground/15 text-warning-foreground",
+    badge: "warning",
+    badgeLabel: "Attention",
+  },
+  info: { icon: Minus, circle: "bg-muted-foreground/15 text-muted-foreground", badge: "info", badgeLabel: "Info" },
+};
+
+function definitionCheck(comment: string | undefined): ClassCheck {
+  return comment
+    ? { key: "definition", label: "Definition", detail: "Has an rdfs:comment.", status: "pass" }
+    : { key: "definition", label: "Definition", detail: "No rdfs:comment on this type.", status: "attention" };
+}
+
+function browsableCheck(recordCount: number, hasIdentifiers: boolean): ClassCheck {
+  if (recordCount === 0) {
+    return { key: "browsable", label: "Stable identifiers", detail: "No records of this type yet.", status: "info" };
+  }
+
+  if (!hasIdentifiers) {
+    return {
+      key: "browsable",
+      label: "Stable identifiers",
+      detail: "Records are browsable by IRI but carry no schema:identifier for stable addressing.",
+      status: "info",
+    };
+  }
+
+  return {
+    key: "browsable",
+    label: "Stable identifiers",
+    detail: "Records carry a schema:identifier.",
+    status: "pass",
+  };
+}
+
+function propertyCheck(count: number): ClassCheck {
+  return count > 0
+    ? {
+        key: "properties",
+        label: "Property docs",
+        detail: `${humanCount(count, "property")} defined on this type.`,
+        status: "pass",
+      }
+    : { key: "properties", label: "Property docs", detail: "No properties defined on this type.", status: "info" };
+}
+
+function ruleCheck(count: number): ClassCheck {
+  return count > 0
+    ? {
+        key: "rules",
+        label: "Rule coverage",
+        detail: `Referenced by ${humanCount(count, "rule")}.`,
+        status: "pass",
+      }
+    : { key: "rules", label: "Rule coverage", detail: "Not referenced by any rules.", status: "info" };
+}
+
+type ChecksProps = { classIri: string };
+
+export function Checks(props: ChecksProps) {
+  const { classIri } = props;
+
+  const term = useOntologyTerm(classIri);
+  const { counts, isLoading: countsLoading } = useInstanceCounts();
+  const { hasIdentifiers, isLoading: identifiersLoading, error: identifiersError } = useHasIdentifiers(classIri);
+  const { properties, isLoading: propertiesLoading, error: propertiesError } = useClassProperties(classIri);
+  const { mantaClient } = useMantaClient();
+  const { data: rulesData, isLoading: rulesLoading, error: rulesError } = useRulesQuery(mantaClient, {});
+
+  if (countsLoading || identifiersLoading || propertiesLoading || rulesLoading) return <LoadingRows rows={4} />;
+
+  if (identifiersError || propertiesError || rulesError) return <StatusText>Failed to load checks.</StatusText>;
+
+  const recordCount = counts.get(classIri) ?? 0;
+  const ruleCount = (rulesData?.rules.rules ?? []).filter((rule) => rule.mentionedTypes.includes(classIri)).length;
+
+  const checks = [
+    definitionCheck(term?.comment),
+    browsableCheck(recordCount, hasIdentifiers),
+    propertyCheck(properties.length),
+    ruleCheck(ruleCount),
+  ];
+
+  const issues = checks.filter((check) => check.status === "attention").length;
+
+  const summary = issues > 0 ? `${humanCount(issues, "issue")} to resolve.` : "Nothing to resolve on this type.";
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div
+        className={cn(
+          "rounded-xl border px-4 py-3 typography-small-medium",
+          issues > 0
+            ? "border-warning-foreground/20 bg-warning/40 text-warning-foreground"
+            : "border-success-foreground/20 bg-success/40 text-success-foreground",
+        )}
+      >
+        {summary}
+      </div>
+
+      <div className="overflow-hidden rounded-xl border border-muted-border">
+        {checks.map((check, index) => {
+          const meta = checkStatusMeta[check.status];
+          const Icon = meta.icon;
+
+          return (
+            <div
+              key={check.key}
+              className={cn("flex items-start gap-3 px-4 py-3.5", index > 0 && "border-t border-muted-border/50")}
+            >
+              <span className={cn("mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full", meta.circle)}>
+                <Icon className="size-3.5" />
+              </span>
+
+              <div className="min-w-0 flex-1">
+                <p className="typography-small-medium text-default-foreground">{check.label}</p>
+                <p className="typography-small text-muted-foreground">{check.detail}</p>
+              </div>
+
+              <Badge variant={meta.badge} size="sm">
+                {meta.badgeLabel}
+              </Badge>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}