@manta-eu/react 0.12.0 → 0.13.0

package/src/routes/memories/schemas/SchemaDetailPage.tsx

@@ -0,0 +1,373 @@
+import {
+  GQLMemorySchemaRulePosition,
+  GQLMemorySchemaStatus,
+  GQLMemorySchemaTemplateStatus,
+  GQLMemorySchemaValueType,
+  type GQLMemorySchemaFieldsFragment,
+  type GQLMemorySchemaPropertyFieldsFragment,
+  type GQLMemorySchemaUsageQuery,
+} from "@manta-eu/client";
+import { compactUri } from "@manta-eu/client/shared/rdf-namespaces";
+import { humanCount } from "@manta-eu/lib/humanize";
+import { isPresent } from "@manta-eu/lib/present";
+import { format } from "date-fns";
+import { FileCode2, Layers } from "lucide-react";
+import { Fragment, type ReactNode } from "react";
+import { Link } from "react-router";
+import { importanceLabel } from "../components/ImportanceSlider";
+import { kindLabels, scopeLabels, valueTypeLabels, volatilityLabels } from "./schema-form";
+import { Badge } from "#components/badge/index";
+import { Banner } from "#components/banner/index";
+import { Button } from "#components/button/index";
+import { EmptyState } from "#components/empty-state/index";
+import { PageBody } from "#components/layouts/page/index";
+import { Loader } from "#components/loader/index";
+import { getRuleDisplayName, getRuleHref } from "#routes/rules/components/rules.utils";
+
+export type MemorySchemaUsage = NonNullable<GQLMemorySchemaUsageQuery["memorySchemaUsage"]["usage"]>;
+
+const unsetLabel = "Not set";
+
+function constraintSummary(property: GQLMemorySchemaPropertyFieldsFragment): string[] {
+  const range =
+    property.minValue != null && property.maxValue != null
+      ? `${property.minValue} to ${property.maxValue}`
+      : property.minValue != null
+        ? `at least ${property.minValue}`
+        : property.maxValue != null
+          ? `at most ${property.maxValue}`
+          : null;
+  return [
+    range,
+    property.maxLength != null ? `up to ${humanCount(property.maxLength, "character")}` : null,
+    property.pattern != null ? `matches ${property.pattern}` : null,
+    property.defaultValue != null ? `defaults to ${property.defaultValue}` : null,
+    property.valueType === GQLMemorySchemaValueType.Entity && property.entityClass != null
+      ? `a ${compactUri(property.entityClass)}`
+      : null,
+  ].filter((constraint): constraint is string => constraint !== null);
+}
+
+type FactProps = { label: string; children: ReactNode };
+
+function Fact(props: FactProps) {
+  const { label, children } = props;
+  return (
+    <div className="flex flex-col gap-0.5">
+      <dt className="typography-tiny text-muted-foreground">{label}</dt>
+      <dd className="typography-small text-default-foreground">{children}</dd>
+    </div>
+  );
+}
+
+export function derivingRuleIris(usage: MemorySchemaUsage | null | undefined, path: string): string[] {
+  const derived = (usage?.rules ?? []).filter(
+    (reference) => reference.term === path && reference.position === GQLMemorySchemaRulePosition.Head,
+  );
+  return [...new Set(derived.map((reference) => reference.ruleIri))];
+}
+
+type PropertyRowProps = {
+  property: GQLMemorySchemaPropertyFieldsFragment;
+  memoryCount: number | null;
+  derivedBy: string[];
+  onWriteRule?: () => void;
+};
+
+function PropertyRow(props: PropertyRowProps) {
+  const { property, memoryCount, derivedBy, onWriteRule } = props;
+  const constraints = constraintSummary(property);
+
+  return (
+    <tr className="border-b border-muted-border align-top last:border-0">
+      <td className="px-4 py-3">
+        <div className="flex min-w-0 flex-col gap-0.5">
+          <span className="typography-small-medium text-default-foreground">{property.label}</span>
+          {property.description && (
+            <span className="typography-tiny text-muted-foreground">{property.description}</span>
+          )}
+          <span className="break-all font-mono typography-tiny text-muted-foreground">{compactUri(property.path)}</span>
+        </div>
+      </td>
+      <td className="px-4 py-3">
+        <div className="flex flex-col gap-1">
+          <span className="typography-small text-default-foreground">
+            {valueTypeLabels[property.valueType]}
+            {property.unit ? ` (${property.unit})` : ""}
+          </span>
+          {property.multiValued && <span className="typography-tiny text-muted-foreground">List of values</span>}
+        </div>
+      </td>
+      <td className="px-4 py-3">
+        <div className="flex flex-wrap gap-1">
+          {property.required && (
+            <Badge variant="secondary" size="sm">
+              Required
+            </Badge>
+          )}
+          {property.keyProperty && (
+            <Badge variant="secondary" size="sm">
+              Key
+            </Badge>
+          )}
+          {property.computed && (
+            <Badge variant="info" size="sm">
+              Computed by a rule
+            </Badge>
+          )}
+        </div>
+        {property.computed && isPresent(derivedBy) && (
+          <p className="mt-1 typography-tiny text-muted-foreground">
+            Computed by{" "}
+            {derivedBy.map((ruleIri, index) => (
+              <Fragment key={ruleIri}>
+                {index > 0 && ", "}
+                <Link to={getRuleHref({ ruleIri })} className="hover:underline">
+                  {getRuleDisplayName(ruleIri)}
+                </Link>
+              </Fragment>
+            ))}
+          </p>
+        )}
+        {property.computed && !isPresent(derivedBy) && onWriteRule && (
+          <p className="mt-1 typography-tiny text-muted-foreground">
+            Not computed by any rule yet.{" "}
+            <button type="button" className="text-accent-foreground hover:underline" onClick={onWriteRule}>
+              Write the rule
+            </button>
+          </p>
+        )}
+      </td>
+      <td className="px-4 py-3">
+        <div className="flex flex-col gap-1.5">
+          {isPresent(property.options) && (
+            <div className="flex flex-wrap gap-1">
+              {property.options.map((option) => (
+                <span
+                  key={option.value}
+                  title={option.description ?? undefined}
+                  className="rounded-full bg-muted px-2 py-0.5 typography-tiny text-default-foreground"
+                >
+                  {option.label && option.label !== option.value ? `${option.label} (${option.value})` : option.value}
+                </span>
+              ))}
+            </div>
+          )}
+          {constraints.map((constraint) => (
+            <span key={constraint} className="typography-tiny text-muted-foreground">
+              {constraint}
+            </span>
+          ))}
+        </div>
+      </td>
+      {memoryCount !== null && (
+        <td className="px-4 py-3 text-right">
+          <span className="typography-small tabular-nums text-muted-foreground">{memoryCount}</span>
+        </td>
+      )}
+    </tr>
+  );
+}
+
+type TemplateNoticeProps = {
+  schema: GQLMemorySchemaFieldsFragment;
+  onReviewTemplate?: () => void;
+  onDismissTemplate?: () => void;
+  isBusy: boolean;
+};
+
+function TemplateNotice(props: TemplateNoticeProps) {
+  const { schema, onReviewTemplate, onDismissTemplate, isBusy } = props;
+  if (schema.templateStatus === GQLMemorySchemaTemplateStatus.Updated && onReviewTemplate && onDismissTemplate) {
+    return (
+      <Banner
+        type="info"
+        size="loose"
+        label="Manta updated the default this schema is based on"
+        description="Your version stays as it is until you choose. Review the update to see what it would change for stored memories."
+      >
+        <Button variant="tertiary" size="sm" disabled={isBusy} onClick={onDismissTemplate}>
+          Keep my version
+        </Button>
+        <Button variant="secondary" size="sm" disabled={isBusy} onClick={onReviewTemplate}>
+          Review update
+        </Button>
+      </Banner>
+    );
+  }
+  if (schema.templateStatus === GQLMemorySchemaTemplateStatus.Removed) {
+    return (
+      <Banner
+        type="muted"
+        label="Manta no longer ships the default this schema is based on. This copy stays as it is."
+      />
+    );
+  }
+  return null;
+}
+
+export type SchemaDetailPageProps = {
+  schema: GQLMemorySchemaFieldsFragment | null;
+  isLoading: boolean;
+  errorMessage?: string | null;
+  usage?: MemorySchemaUsage | null;
+  isBusy?: boolean;
+  onReviewTemplate?: () => void;
+  onDismissTemplate?: () => void;
+  onWriteComputingRule?: (property: GQLMemorySchemaPropertyFieldsFragment) => void;
+};
+
+export function SchemaDetailPage(props: SchemaDetailPageProps) {
+  const {
+    schema,
+    isLoading,
+    errorMessage,
+    usage,
+    isBusy = false,
+    onReviewTemplate,
+    onDismissTemplate,
+    onWriteComputingRule,
+  } = props;
+
+  if (isLoading) {
+    return (
+      <PageBody>
+        <div className="flex min-h-64 items-center justify-center">
+          <Loader className="size-8" />
+        </div>
+      </PageBody>
+    );
+  }
+
+  if (schema === null) {
+    return (
+      <PageBody>
+        {errorMessage && <Banner label={errorMessage} />}
+        <EmptyState icon={Layers} title="Schema not found" description="It may have been deleted." />
+      </PageBody>
+    );
+  }
+
+  const usageByPath = new Map(usage?.properties.map((entry) => [entry.path, entry.memoryCount]) ?? []);
+  const showUsage = usage != null;
+  const properties = [...schema.properties].sort((a, b) => a.order - b.order);
+
+  return (
+    <PageBody>
+      <div className="mx-auto flex w-full max-w-5xl flex-col gap-4">
+        {errorMessage && <Banner label={errorMessage} />}
+
+        <section className="flex min-w-0 gap-4 px-1 py-2">
+          <div className="flex size-11 shrink-0 items-center justify-center rounded-lg bg-faint text-muted-foreground">
+            <Layers className="size-5" />
+          </div>
+          <div className="flex min-w-0 flex-1 flex-col gap-2">
+            <div className="flex min-w-0 flex-wrap items-center gap-2">
+              <h2 className="truncate typography-large-body-semibold">{schema.label}</h2>
+              {schema.status === GQLMemorySchemaStatus.Archived && <Badge variant="secondary">Archived</Badge>}
+              {schema.templateStatus !== GQLMemorySchemaTemplateStatus.None && (
+                <Badge variant="copy">{schema.customized ? "Customized" : "Manta default"}</Badge>
+              )}
+            </div>
+            <span className="truncate font-mono typography-caption text-muted-foreground" title={schema.iri}>
+              {compactUri(schema.iri)}
+            </span>
+            {schema.description && <p className="typography-small text-muted-foreground">{schema.description}</p>}
+          </div>
+        </section>
+
+        <TemplateNotice
+          schema={schema}
+          onReviewTemplate={onReviewTemplate}
+          onDismissTemplate={onDismissTemplate}
+          isBusy={isBusy}
+        />
+
+        {schema.status === GQLMemorySchemaStatus.Archived && (
+          <Banner
+            type="muted"
+            label="Archived: no new memory can use this schema. Memories that already use it keep it and stay editable."
+          />
+        )}
+
+        <section className="rounded-xl border border-muted-border bg-card p-5">
+          <dl className="grid grid-cols-2 gap-x-6 gap-y-4 sm:grid-cols-4">
+            <Fact label="Default kind">
+              {schema.defaultMemoryKind ? kindLabels[schema.defaultMemoryKind] : unsetLabel}
+            </Fact>
+            <Fact label="Default importance">
+              {schema.defaultImportance != null ? importanceLabel(schema.defaultImportance) : unsetLabel}
+            </Fact>
+            <Fact label="Default volatility">
+              {schema.defaultVolatility ? volatilityLabels[schema.defaultVolatility] : unsetLabel}
+            </Fact>
+            <Fact label="Default scope">{schema.defaultScope ? scopeLabels[schema.defaultScope] : unsetLabel}</Fact>
+            <Fact label="Chat extraction">
+              {schema.extractionEnabled ? "Can record memories of this type" : "Set by hand only"}
+            </Fact>
+            {schema.memoryCount != null && <Fact label="In use">{humanCount(schema.memoryCount, "memory")}</Fact>}
+            {schema.updatedAt && <Fact label="Last changed">{format(new Date(schema.updatedAt), "MMM d, yyyy")}</Fact>}
+          </dl>
+          {schema.extractionEnabled && schema.extractionGuidance && (
+            <div className="mt-4 flex flex-col gap-0.5">
+              <span className="typography-tiny text-muted-foreground">When to use it</span>
+              <p className="typography-small text-default-foreground">{schema.extractionGuidance}</p>
+            </div>
+          )}
+        </section>
+
+        <section className="overflow-hidden rounded-xl border border-muted-border bg-card">
+          <h3 className="border-b border-muted-border px-4 py-3 typography-small-medium text-default-foreground">
+            {humanCount(properties.length, "property")}
+          </h3>
+          {isPresent(properties) ? (
+            <div className="overflow-x-auto">
+              <table className="w-full min-w-[44rem] table-auto text-left">
+                <thead>
+                  <tr className="border-b border-muted-border text-left text-muted-foreground">
+                    <th className="px-4 py-2 typography-tiny">Property</th>
+                    <th className="px-4 py-2 typography-tiny">Type</th>
+                    <th className="px-4 py-2 typography-tiny">Rules</th>
+                    <th className="px-4 py-2 typography-tiny">Values</th>
+                    {showUsage && <th className="px-4 py-2 text-right typography-tiny">Memories</th>}
+                  </tr>
+                </thead>
+                <tbody>
+                  {properties.map((property) => (
+                    <PropertyRow
+                      key={property.path}
+                      property={property}
+                      memoryCount={showUsage ? (usageByPath.get(property.path) ?? 0) : null}
+                      derivedBy={derivingRuleIris(usage, property.path)}
+                      onWriteRule={onWriteComputingRule && showUsage ? () => onWriteComputingRule(property) : undefined}
+                    />
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          ) : (
+            <p className="px-4 py-6 typography-small text-muted-foreground">This schema has no properties yet.</p>
+          )}
+        </section>
+
+        {isPresent(usage?.rules) && (
+          <section className="rounded-xl border border-muted-border bg-card">
+            <h3 className="border-b border-muted-border px-4 py-3 typography-small-medium text-default-foreground">
+              Rules that read this schema
+            </h3>
+            <ul className="divide-y divide-muted-border">
+              {[...new Set(usage.rules.map((reference) => reference.ruleIri))].map((ruleIri) => (
+                <li key={ruleIri} className="flex items-center gap-2 px-4 py-2.5">
+                  <FileCode2 className="size-4 shrink-0 text-muted-foreground" />
+                  <Link to={getRuleHref({ ruleIri })} className="truncate typography-small hover:underline">
+                    {getRuleDisplayName(ruleIri)}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </section>
+        )}
+      </div>
+    </PageBody>
+  );
+}