@manta-eu/react 0.8.0 → 0.9.0

package/src/routes/data-explorer/components/record-detail/RecordActions.tsx

@@ -1,5 +1,9 @@
+import { Button } from "#components/button/index";
+import { DeleteConfirmationDialog } from "#components/layouts/DeleteConfirmationDialog";
+import { useExecuteAction, type ExecuteActionResult } from "#hooks/useExecuteAction";
+import { useTriples, type TripleRow } from "#routes/data-explorer/triples";
 import { GQLExecuteActionErrorCode } from "@manta-eu/client";
-import { compactUri } from "@manta-eu/client/shared/rdf-namespaces";
+import { compactUri, wellKnownPredicates } from "@manta-eu/client/shared/rdf-namespaces";
 import { useState } from "react";
 import { toast } from "sonner";
 import type { PropertyMap } from "./action-properties";
@@ -7,10 +11,7 @@ import { useRecordActionShapes, type RecordActionShape } from "./action-shapes";
 import { ActionFormDialog } from "./ActionFormDialog";
 import { CreateAction } from "./CreateAction";
 import { RecordActionFeedback } from "./RecordActionFeedback";
-import { Button } from "#components/button/index";
-import { DeleteConfirmationDialog } from "#components/layouts/DeleteConfirmationDialog";
-import { useExecuteAction, type ExecuteActionResult } from "#hooks/useExecuteAction";
-import { useTriples, type TripleRow } from "#routes/data-explorer/triples";
+import { RecordRefresh } from "./RecordRefresh";
 
 type RecordActionsProps = { iri: string; typeIris: string[] };
 
@@ -20,20 +21,25 @@ export function RecordActions(props: RecordActionsProps) {
   const { shapes, error } = useRecordActionShapes(typeIris);
   const { triples, isLoading: triplesLoading } = useTriples(iri);
 
-  if (error) return <span className="typography-tiny text-muted-foreground">Actions unavailable</span>;
+  const recordTypes = triples
+    .filter((row) => row.predicate === wellKnownPredicates.type && row.objectIsIri)
+    .map((row) => row.object);
 
   return (
     <>
-      {shapes.map((shape) => (
-        <ShapeActions
-          key={`${iri}|${shape.actionShape}`}
-          subjectIri={iri}
-          shape={shape}
-          triples={triples}
-          triplesLoading={triplesLoading}
-          qualifyLabels={shapes.length > 1}
-        />
-      ))}
+      <RecordRefresh iri={iri} typeIris={recordTypes} />
+      {error && <span className="typography-tiny text-muted-foreground">Actions unavailable</span>}
+      {!error &&
+        shapes.map((shape) => (
+          <ShapeActions
+            key={`${iri}|${shape.actionShape}`}
+            subjectIri={iri}
+            shape={shape}
+            triples={triples}
+            triplesLoading={triplesLoading}
+            qualifyLabels={shapes.length > 1}
+          />
+        ))}
     </>
   );
 }

package/src/routes/data-explorer/components/record-detail/RecordRefresh.tsx

@@ -0,0 +1,150 @@
+import { Button } from "#components/button/index";
+import { InstanceLabelsContext } from "#hooks/use-instance-labels";
+import { useMantaClient } from "#providers/MantaClientProvider";
+import {
+  GQLRefreshResourceStatus,
+  GQLRefreshWorkflowStatus,
+  RefreshResourcesDocument,
+  RefreshResourcesStatusDocument,
+  type GQLRefreshResourceInput,
+  type GQLRefreshResourcesMutation,
+  type GQLRefreshResourcesMutationVariables,
+  type GQLRefreshResourcesStatusQuery,
+  type GQLRefreshResourcesStatusQueryVariables,
+  useRefreshResourceCapabilitiesQuery,
+} from "@manta-eu/client";
+import { isPresent } from "@manta-eu/lib/present";
+import { sleep } from "@manta-eu/lib/sleep";
+import { useIsMutating, useMutation, useQueryClient } from "@tanstack/react-query";
+import type { GraphQLClient } from "graphql-request";
+import { useContext } from "react";
+import { toast } from "sonner";
+import { match } from "ts-pattern";
+
+type RecordRefreshProps = { iri: string; typeIris: string[] };
+
+export function RecordRefresh(props: RecordRefreshProps) {
+  const { iri, typeIris } = props;
+  const { mantaClient } = useMantaClient();
+  const { data } = useRefreshResourceCapabilitiesQuery(
+    mantaClient,
+    { rdfTypes: typeIris },
+    { enabled: isPresent(typeIris) },
+  );
+  const rdfType = data?.refreshResourceCapabilities.capabilities.find((type) => type.supportsRefresh)?.rdfType;
+
+  return rdfType ? <RefreshButton key={`${iri}|${rdfType}`} iri={iri} rdfType={rdfType} /> : null;
+}
+
+type RefreshButtonProps = { iri: string; rdfType: string };
+
+type RefreshResult = GQLRefreshResourcesStatusQuery["refreshResourcesStatus"];
+
+class RefreshError extends Error {
+  constructor(
+    readonly phase: "start" | "status" | "timeout",
+    cause: unknown,
+  ) {
+    super("Unable to complete source refresh", { cause });
+  }
+}
+
+async function refreshResource(client: GraphQLClient, resource: GQLRefreshResourceInput): Promise<RefreshResult> {
+  const controller = new AbortController();
+  const timeoutMs = 5 * 60 * 1000;
+  const deadline = Date.now() + timeoutMs;
+  const timer = setTimeout(() => controller.abort(), timeoutMs);
+  let phase: "start" | "status" = "start";
+
+  try {
+    const { refreshResources } = await client.request<
+      GQLRefreshResourcesMutation,
+      GQLRefreshResourcesMutationVariables
+    >({
+      document: RefreshResourcesDocument,
+      variables: { resources: [resource] },
+      signal: controller.signal,
+    });
+    phase = "status";
+
+    while (true) {
+      controller.signal.throwIfAborted();
+      const { refreshResourcesStatus } = await client.request<
+        GQLRefreshResourcesStatusQuery,
+        GQLRefreshResourcesStatusQueryVariables
+      >({
+        document: RefreshResourcesStatusDocument,
+        variables: { workflowId: refreshResources.workflowId },
+        signal: controller.signal,
+      });
+      controller.signal.throwIfAborted();
+      if (refreshResourcesStatus.status !== GQLRefreshWorkflowStatus.Running) return refreshResourcesStatus;
+
+      await sleep(Math.min(2000, Math.max(0, deadline - Date.now())));
+    }
+  } catch (error) {
+    throw new RefreshError(controller.signal.aborted ? "timeout" : phase, error);
+  } finally {
+    clearTimeout(timer);
+  }
+}
+
+function RefreshButton(props: RefreshButtonProps) {
+  const { iri, rdfType } = props;
+  const { mantaClient, datastoreId } = useMantaClient();
+  const queryClient = useQueryClient();
+  const labels = useContext(InstanceLabelsContext);
+  const refreshLabels = labels?.refresh;
+  const pendingFilter = { mutationKey: ["RefreshResource", datastoreId, iri], exact: true };
+  const refreshing = useIsMutating(pendingFilter) > 0;
+  const { mutate } = useMutation<RefreshResult, RefreshError>({
+    mutationKey: pendingFilter.mutationKey,
+    mutationFn: () => refreshResource(mantaClient, { iri, type: rdfType }),
+    retry: false,
+    onSuccess: (result) => {
+      if (result.status === GQLRefreshWorkflowStatus.Failed) {
+        toast.error("Refresh failed", { description: result.error ?? undefined });
+        return;
+      }
+
+      const status = result.results?.find(
+        (resource) => resource.iri === iri && resource.type === rdfType,
+      )?.refreshStatus;
+      match(status)
+        .with(GQLRefreshResourceStatus.Synced, () => {
+          void queryClient.invalidateQueries({ queryKey: ["data-explorer"] });
+          refreshLabels?.([iri]);
+          toast.success("Refreshed from source");
+        })
+        .with(GQLRefreshResourceStatus.NotReadable, () => toast.error("This entity does not support refresh"))
+        .with(GQLRefreshResourceStatus.NotSynced, () =>
+          toast.error("The entity could not be refreshed from its source"),
+        )
+        .with(undefined, () => toast.error("Refresh returned no result for this entity"))
+        .exhaustive();
+    },
+    onError: (error) => {
+      match(error.phase)
+        .with("start", () => toast.error("Could not start refresh"))
+        .with("status", () =>
+          toast.error("Could not check refresh status", { description: "The refresh may still be running." }),
+        )
+        .with("timeout", () =>
+          toast.warning("Refresh is taking longer than expected", {
+            description: "It may still finish in the background.",
+          }),
+        )
+        .exhaustive();
+    },
+  });
+
+  function startRefresh() {
+    if (queryClient.isMutating(pendingFilter) === 0) mutate();
+  }
+
+  return (
+    <Button variant="secondary" size="sm" disabled={refreshing} aria-busy={refreshing} onClick={startRefresh}>
+      {refreshing ? "Refreshing…" : "Refresh from source"}
+    </Button>
+  );
+}

package/src/routes/data-explorer/components/uploads/IngestRunsList.tsx

@@ -0,0 +1,63 @@
+import { Link } from "react-router";
+import { entityPath } from "../../namespaces";
+import type { IngestRun, UploadedFile } from "../../uploads";
+import { ArrowLinkIcon, arrowLinkClass } from "../ArrowLink";
+import { ModifiedAgo } from "../ModifiedAgo";
+import { EntityName, LinkList } from "../RawTriples";
+import { IngestStateStatus } from "./IngestStateStatus";
+import { TruncateTooltip } from "#components/tooltip/index";
+import { cn } from "#lib/utils";
+
+type IngestRunRowProps = { run: IngestRun; file: UploadedFile | undefined };
+
+function IngestRunRow(props: IngestRunRowProps) {
+  const { run, file } = props;
+
+  return (
+    <div className="flex flex-col gap-2 px-4 py-3 sm:flex-row sm:items-center sm:gap-3">
+      <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+        <Link to={entityPath(run.file)} className="min-w-0 hover:underline">
+          {file ? (
+            <TruncateTooltip
+              text={file.fileName}
+              className="typography-small-medium block truncate text-default-foreground"
+            />
+          ) : (
+            <EntityName iri={run.file} />
+          )}
+        </Link>
+
+        <div className="typography-tiny flex flex-wrap items-center gap-x-2 text-muted-foreground">
+          {run.endedAt && <ModifiedAgo modified={run.endedAt} />}
+          <Link to={entityPath(run.iri)} className="hover:underline">
+            Run details
+          </Link>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-3">
+        <IngestStateStatus state={{ kind: "run", run }} />
+        {run.dataset && (
+          <Link to={entityPath(run.dataset)} className={cn("typography-small", arrowLinkClass)}>
+            Dataset
+            <ArrowLinkIcon />
+          </Link>
+        )}
+      </div>
+    </div>
+  );
+}
+
+type IngestRunsListProps = { runs: readonly IngestRun[]; fileByIri: ReadonlyMap<string, UploadedFile> };
+
+export function IngestRunsList(props: IngestRunsListProps) {
+  const { runs, fileByIri } = props;
+
+  return (
+    <LinkList>
+      {runs.map((run) => (
+        <IngestRunRow key={run.iri} run={run} file={fileByIri.get(run.file)} />
+      ))}
+    </LinkList>
+  );
+}

package/src/routes/data-explorer/components/uploads/IngestStateStatus.tsx

@@ -0,0 +1,45 @@
+import { match } from "ts-pattern";
+import type { FileIngestState, IngestRun } from "../../uploads";
+import { Status, type StatusVariant } from "#components/status/index";
+
+type StatusDisplay = { label: string; variant: StatusVariant };
+
+const countFormat = new Intl.NumberFormat("en-US");
+
+function recordCount(count: number): string {
+  return `${countFormat.format(count)} ${count === 1 ? "record" : "records"}`;
+}
+
+function ingestedDisplay(run: IngestRun): StatusDisplay {
+  const read = run.recordsRead === undefined ? "Ingested" : `Ingested ${recordCount(run.recordsRead)}`;
+  const dropped = run.recordsDropped ? `, ${countFormat.format(run.recordsDropped)} dropped` : "";
+
+  return { label: `${read}${dropped}`, variant: run.recordsDropped ? "warning" : "success" };
+}
+
+function runDisplay(run: IngestRun): StatusDisplay {
+  return match(run.status)
+    .with("ingested", () => ingestedDisplay(run))
+    .with("unparsable", (): StatusDisplay => ({ label: "Could not be read", variant: "error" }))
+    .with("too_large", (): StatusDisplay => ({ label: "Too large to ingest", variant: "warning" }))
+    .with("gone", (): StatusDisplay => ({ label: "Removed before ingest", variant: "neutral" }))
+    .exhaustive();
+}
+
+export function ingestStateDisplay(state: FileIngestState): StatusDisplay {
+  return match(state)
+    .with({ kind: "waiting" }, (): StatusDisplay => ({ label: "Waiting for ingest", variant: "neutral" }))
+    .with({ kind: "stored" }, (): StatusDisplay => ({ label: "Stored", variant: "neutral" }))
+    .with({ kind: "run" }, ({ run }) => runDisplay(run))
+    .exhaustive();
+}
+
+type IngestStateStatusProps = { state: FileIngestState; className?: string };
+
+export function IngestStateStatus(props: IngestStateStatusProps) {
+  const { state, className } = props;
+
+  const { label, variant } = ingestStateDisplay(state);
+
+  return <Status label={label} variant={variant} className={className} />;
+}

package/src/routes/data-explorer/components/uploads/UploadedFilesList.tsx

@@ -0,0 +1,93 @@
+import { userIriPrefix } from "@manta-eu/client/shared/stakeholder-iri";
+import { redirectPath } from "@manta-eu/ldo/redirect-queries";
+import { humanBytes } from "@manta-eu/lib/humanize";
+import { isPresent } from "@manta-eu/lib/present";
+import { Download, FileText } from "lucide-react";
+import { Link } from "react-router";
+import { entityPath } from "../../namespaces";
+import type { UploadedFileWithState } from "../../uploads";
+import { ModifiedAgo } from "../ModifiedAgo";
+import { EntityName, LinkList } from "../RawTriples";
+import { IngestStateStatus } from "./IngestStateStatus";
+import { Button } from "#components/button/index";
+import { TruncateTooltip } from "#components/tooltip/index";
+import { useRedirectEndpoint } from "#ldo-ui";
+
+type UploaderProps = { iri: string | undefined; currentUserIri: string | undefined };
+
+function Uploader(props: UploaderProps) {
+  const { iri, currentUserIri } = props;
+
+  if (!iri) return null;
+
+  if (iri === currentUserIri) return <span>by you</span>;
+
+  if (iri.startsWith(userIriPrefix)) return <span>by a teammate</span>;
+
+  return (
+    <span className="flex min-w-0 items-center gap-1">
+      by <EntityName iri={iri} />
+    </span>
+  );
+}
+
+type UploadedFileRowProps = { file: UploadedFileWithState; currentUserIri: string | undefined };
+
+function UploadedFileRow(props: UploadedFileRowProps) {
+  const { file, currentUserIri } = props;
+
+  const redirectEndpoint = useRedirectEndpoint();
+
+  return (
+    <div className="flex flex-col gap-2 px-4 py-3 sm:flex-row sm:items-center sm:gap-3">
+      <div className="flex min-w-0 flex-1 items-center gap-3">
+        <FileText className="size-4 shrink-0 text-muted-foreground" />
+
+        <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+          <Link to={entityPath(file.iri)} className="min-w-0 hover:underline">
+            <TruncateTooltip
+              text={file.fileName}
+              className="typography-small-medium block truncate text-default-foreground"
+            />
+          </Link>
+
+          <div className="typography-tiny flex min-w-0 flex-wrap items-center gap-x-2 text-muted-foreground">
+            {file.byteSize !== undefined && <span>{humanBytes(file.byteSize)}</span>}
+            {isPresent(file.extension) && <span title={file.mediaType}>{file.extension.toUpperCase()}</span>}
+            {file.uploadedAt && <ModifiedAgo modified={file.uploadedAt} />}
+            <Uploader iri={file.uploader} currentUserIri={currentUserIri} />
+          </div>
+        </div>
+      </div>
+
+      <div className="flex items-center justify-between gap-3 pl-7 sm:pl-0">
+        <IngestStateStatus state={file.state} />
+
+        <Button asChild variant="ghost" size="xs" className="size-7 shrink-0 p-0">
+          <a
+            href={redirectPath(file.iri, redirectEndpoint)}
+            target="_blank"
+            rel="noreferrer"
+            aria-label={`Download ${file.fileName}`}
+          >
+            <Download className="size-4" />
+          </a>
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+type UploadedFilesListProps = { files: readonly UploadedFileWithState[]; currentUserIri?: string };
+
+export function UploadedFilesList(props: UploadedFilesListProps) {
+  const { files, currentUserIri } = props;
+
+  return (
+    <LinkList>
+      {files.map((file) => (
+        <UploadedFileRow key={file.iri} file={file} currentUserIri={currentUserIri} />
+      ))}
+    </LinkList>
+  );
+}

package/src/routes/data-explorer/components/uploads/UploadsPages.tsx

@@ -0,0 +1,80 @@
+import { getUserIri } from "@manta-eu/client/shared/stakeholder-iri";
+import { isPresent } from "@manta-eu/lib/present";
+import { explorerCrumb } from "../../namespaces";
+import { uploadsLimit, useUploads } from "../../uploads";
+import { Breadcrumbs } from "../Breadcrumbs";
+import { DetailHeader } from "../DetailHeader";
+import { LoadingRows, StatusText } from "../RawTriples";
+import { IngestRunsList } from "./IngestRunsList";
+import { UploadedFilesList } from "./UploadedFilesList";
+import { useAuthContext } from "#providers/AuthContext";
+
+export type UploadedFilesSectionProps = { emptyText?: string };
+
+export function UploadedFilesSection(props: UploadedFilesSectionProps) {
+  const { emptyText = "No files uploaded yet." } = props;
+
+  const { isOperator, user } = useAuthContext();
+  const { files, isLoading, error } = useUploads({ includeAllFiles: isOperator });
+
+  if (isLoading) return <LoadingRows />;
+
+  if (error) return <StatusText role="alert">Failed to load files.</StatusText>;
+
+  if (!isPresent(files)) return <StatusText>{emptyText}</StatusText>;
+
+  return (
+    <div className="flex flex-col gap-2">
+      <UploadedFilesList files={files} currentUserIri={getUserIri(user.id)} />
+      {files.length >= uploadsLimit && (
+        <p className="typography-caption text-muted-foreground">Showing the newest {uploadsLimit} files.</p>
+      )}
+    </div>
+  );
+}
+
+export function UploadedFilesPage() {
+  const { isOperator } = useAuthContext();
+
+  return (
+    <div className="flex max-w-5xl flex-col gap-6">
+      <Breadcrumbs trail={[explorerCrumb, { label: "Files" }]} />
+
+      <DetailHeader title="Files" />
+
+      <p className="typography-small -mt-3 max-w-prose text-muted-foreground">
+        {isOperator
+          ? "Every file in this datastore, newest first, with how its ingest into the knowledge graph ended."
+          : "Files uploaded to this datastore, newest first, with how their ingest into the knowledge graph ended."}{" "}
+        CSV, Parquet, Turtle and N-Triples files are ingested automatically; other files are stored.
+      </p>
+
+      <UploadedFilesSection />
+    </div>
+  );
+}
+
+export function IngestRunsPage() {
+  const { isOperator } = useAuthContext();
+  const { runs, fileByIri, isLoading, error } = useUploads({ includeAllFiles: isOperator });
+
+  return (
+    <div className="flex max-w-5xl flex-col gap-6">
+      <Breadcrumbs trail={[explorerCrumb, { label: "Ingest runs" }]} />
+
+      <DetailHeader title="Ingest runs" />
+
+      <p className="typography-small -mt-3 max-w-prose text-muted-foreground">
+        Each attempt to add an uploaded file to the knowledge graph, newest first.
+      </p>
+
+      {isLoading && <LoadingRows />}
+
+      {error && <StatusText role="alert">Failed to load ingest runs.</StatusText>}
+
+      {!isLoading && !error && !isPresent(runs) && <StatusText>No file has been ingested yet.</StatusText>}
+
+      {isPresent(runs) && <IngestRunsList runs={runs} fileByIri={fileByIri} />}
+    </div>
+  );
+}

package/src/routes/data-explorer/index.tsx

@@ -9,6 +9,12 @@ export { DataExplorerLayout } from "./components/DataExplorerLayout";
 export { ExplorerEmptyState as DataExplorerIndexRoute } from "./components/ExplorerEmptyState";
 export { CoverageOverview as DataExplorerCoverageRoute } from "./components/ontology-coverage";
 export { RecentTypes as DataExplorerRecentRoute } from "./components/RecentTypes";
+export {
+  IngestRunsPage as DataExplorerIngestRoute,
+  UploadedFilesPage as DataExplorerFilesRoute,
+  UploadedFilesSection,
+  type UploadedFilesSectionProps,
+} from "./components/uploads/UploadsPages";
 
 export function DataExplorerPrefixRoute() {
   const { prefix } = useParams<{ prefix: string }>();

package/src/routes/data-explorer/namespaces.ts

@@ -96,8 +96,12 @@ export function localName(iri: string, prefix: string): string {
 export { entityPath, entitySegment, explorerPath };
 export const recentSegment = "recent";
 export const coverageSegment = "coverage";
+export const filesSegment = "files";
+export const ingestRunsSegment = "ingest-runs";
 export const recentPath = `${explorerPath}/${recentSegment}`;
 export const coveragePath = `${explorerPath}/${coverageSegment}`;
+export const filesPath = `${explorerPath}/${filesSegment}`;
+export const ingestRunsPath = `${explorerPath}/${ingestRunsSegment}`;
 export const explorerCrumb = { label: "Data", to: explorerPath };
 
 export function isExplorerPrefix(value: string | undefined): value is string {
@@ -105,7 +109,9 @@ export function isExplorerPrefix(value: string | undefined): value is string {
 }
 
 export function isNamespaceSegment(segment: string | undefined): segment is string {
-  return isPresent(segment) && ![recentSegment, coverageSegment, entitySegment].includes(segment);
+  const reserved = [recentSegment, coverageSegment, filesSegment, ingestRunsSegment, entitySegment];
+
+  return isPresent(segment) && !reserved.includes(segment);
 }
 
 export function namespacePath(key: string): string {