403 lines
13 KiB
TypeScript
403 lines
13 KiB
TypeScript
|
import { useMemo, useState } from "react";
|
||
|
|
import { useNavigate, useParams } from "react-router-dom";
|
||
|
|
import {
|
||
|
|
AlertCircle,
|
||
|
|
ArrowLeft,
|
||
|
|
Braces,
|
||
|
|
Clipboard,
|
||
|
|
Code2,
|
||
|
|
FileJson,
|
||
|
|
FileSpreadsheet,
|
||
|
|
FileText,
|
||
|
|
RefreshCw,
|
||
|
|
} from "lucide-react";
|
||
|
|
import {
|
||
|
|
Card,
|
||
|
|
CardContent,
|
||
|
|
CardDescription,
|
||
|
|
CardHeader,
|
||
|
|
CardTitle,
|
||
|
|
} from "@/components/ui/card";
|
||
|
|
import { Badge } from "@/components/ui/badge";
|
||
|
|
import { buttonVariants } from "@/components/ui/button";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { Input } from "@/components/ui/input";
|
||
|
|
import { Select } from "@/components/ui/select";
|
||
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
||
|
|
import { useExportJson } from "@/hooks/usePlatform";
|
||
|
|
import { useProject } from "@/hooks/useProjects";
|
||
|
|
import { platformApi } from "@/lib/api/platform";
|
||
|
|
import { formatDateTime, formatPercent, humanizeValue } from "@/lib/display";
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
|
||
|
|
const statusOptions = [
|
||
|
|
{ value: "validated_claim", label: "Validated claims" },
|
||
|
|
{ value: "active", label: "Active claims" },
|
||
|
|
{ value: "candidate_claim", label: "Candidate claims" },
|
||
|
|
{ value: "rule_candidate", label: "Rule candidates" },
|
||
|
|
{ value: "rejected", label: "Rejected claims" },
|
||
|
|
{ value: "all", label: "All statuses" },
|
||
|
|
];
|
||
|
|
|
||
|
|
function valueFrom(row: Record<string, unknown>, key: string): string {
|
||
|
|
return humanizeValue(row[key]);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function ExportApiPage() {
|
||
|
|
const navigate = useNavigate();
|
||
|
|
const { projectId } = useParams<{ projectId: string }>();
|
||
|
|
const projectName = projectId ?? "";
|
||
|
|
const { data: project } = useProject(projectName);
|
||
|
|
const [status, setStatus] = useState("validated_claim");
|
||
|
|
const [includeEvidence, setIncludeEvidence] = useState(true);
|
||
|
|
const [limit, setLimit] = useState(1000);
|
||
|
|
const [copied, setCopied] = useState<string | null>(null);
|
||
|
|
const exportData = useExportJson(projectName, {
|
||
|
|
status,
|
||
|
|
includeEvidence,
|
||
|
|
limit,
|
||
|
|
});
|
||
|
|
|
||
|
|
const urls = useMemo(
|
||
|
|
() => ({
|
||
|
|
json: platformApi.exportUrl(
|
||
|
|
projectName,
|
||
|
|
"json",
|
||
|
|
status,
|
||
|
|
includeEvidence,
|
||
|
|
limit,
|
||
|
|
),
|
||
|
|
csv: platformApi.exportUrl(
|
||
|
|
projectName,
|
||
|
|
"csv",
|
||
|
|
status,
|
||
|
|
includeEvidence,
|
||
|
|
limit,
|
||
|
|
),
|
||
|
|
turtle: platformApi.exportUrl(
|
||
|
|
projectName,
|
||
|
|
"turtle",
|
||
|
|
status,
|
||
|
|
includeEvidence,
|
||
|
|
limit,
|
||
|
|
),
|
||
|
|
}),
|
||
|
|
[includeEvidence, limit, projectName, status],
|
||
|
|
);
|
||
|
|
const origin =
|
||
|
|
typeof window !== "undefined" && window.location?.origin
|
||
|
|
? window.location.origin
|
||
|
|
: "";
|
||
|
|
const absoluteJsonUrl = `${origin}${urls.json}`;
|
||
|
|
const curlSnippet = `curl -L "${absoluteJsonUrl}"`;
|
||
|
|
const fetchSnippet = `const response = await fetch("${urls.json}");\nconst ontology = await response.json();`;
|
||
|
|
const previewRows = exportData.data?.claims.slice(0, 8) ?? [];
|
||
|
|
const avgConfidence = exportData.data?.claims.length
|
||
|
|
? exportData.data.claims.reduce((sum, row) => {
|
||
|
|
const confidence = row.confidence;
|
||
|
|
return sum + (typeof confidence === "number" ? confidence : 0);
|
||
|
|
}, 0) / exportData.data.claims.length
|
||
|
|
: 0;
|
||
|
|
|
||
|
|
async function copy(text: string, key: string) {
|
||
|
|
try {
|
||
|
|
await navigator.clipboard.writeText(text);
|
||
|
|
setCopied(key);
|
||
|
|
window.setTimeout(() => setCopied(null), 1600);
|
||
|
|
} catch {
|
||
|
|
setCopied("failed");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="mx-auto max-w-7xl px-6 py-8">
|
||
|
|
<div className="mb-6 flex items-center gap-3">
|
||
|
|
<Button
|
||
|
|
variant="ghost"
|
||
|
|
size="icon"
|
||
|
|
onClick={() => navigate(`/graph/${projectName}`)}
|
||
|
|
aria-label="Back"
|
||
|
|
>
|
||
|
|
<ArrowLeft className="h-4 w-4" />
|
||
|
|
</Button>
|
||
|
|
<div className="flex-1">
|
||
|
|
<h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight">
|
||
|
|
<Code2 className="h-6 w-6 text-primary" />
|
||
|
|
Export / API Center
|
||
|
|
</h1>
|
||
|
|
<p className="text-sm text-muted-foreground">
|
||
|
|
{project?.name ?? projectName} exports, endpoint settings, and integration snippets.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<Button variant="outline" onClick={() => exportData.refetch()}>
|
||
|
|
<RefreshCw className="h-4 w-4" />
|
||
|
|
Refresh
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{exportData.isError && (
|
||
|
|
<Card className="mb-6 border-destructive">
|
||
|
|
<CardContent className="flex items-center gap-2 py-4 text-sm text-destructive">
|
||
|
|
<AlertCircle className="h-4 w-4" />
|
||
|
|
{(exportData.error as Error).message}
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<div className="mb-6 grid gap-3 lg:grid-cols-[220px_180px_1fr_180px]">
|
||
|
|
<Select value={status} onChange={(event) => setStatus(event.target.value)}>
|
||
|
|
{statusOptions.map((option) => (
|
||
|
|
<option key={option.value} value={option.value}>
|
||
|
|
{option.label}
|
||
|
|
</option>
|
||
|
|
))}
|
||
|
|
</Select>
|
||
|
|
<Input
|
||
|
|
type="number"
|
||
|
|
min={1}
|
||
|
|
max={5000}
|
||
|
|
value={limit}
|
||
|
|
onChange={(event) =>
|
||
|
|
setLimit(Math.max(1, Math.min(5000, Number(event.target.value) || 1)))
|
||
|
|
}
|
||
|
|
aria-label="Export row limit"
|
||
|
|
/>
|
||
|
|
<label className="flex items-center gap-2 rounded-md border px-3 text-sm">
|
||
|
|
<input
|
||
|
|
type="checkbox"
|
||
|
|
checked={includeEvidence}
|
||
|
|
onChange={(event) => setIncludeEvidence(event.target.checked)}
|
||
|
|
/>
|
||
|
|
Include evidence text
|
||
|
|
</label>
|
||
|
|
<Badge variant="outline" className="justify-center py-2">
|
||
|
|
{exportData.data?.count ?? 0} rows
|
||
|
|
</Badge>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="mb-6 grid gap-4 md:grid-cols-3">
|
||
|
|
<Card>
|
||
|
|
<CardContent className="py-4">
|
||
|
|
<div className="text-xs text-muted-foreground">Export rows</div>
|
||
|
|
<div className="mt-1 text-3xl font-semibold">
|
||
|
|
{(exportData.data?.count ?? 0).toLocaleString()}
|
||
|
|
</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
<Card>
|
||
|
|
<CardContent className="py-4">
|
||
|
|
<div className="text-xs text-muted-foreground">Status scope</div>
|
||
|
|
<div className="mt-1 text-lg font-semibold">
|
||
|
|
{statusOptions.find((option) => option.value === status)?.label}
|
||
|
|
</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
<Card>
|
||
|
|
<CardContent className="py-4">
|
||
|
|
<div className="text-xs text-muted-foreground">Avg confidence</div>
|
||
|
|
<div className="mt-1 text-3xl font-semibold">
|
||
|
|
{formatPercent(avgConfidence)}
|
||
|
|
</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid gap-6 xl:grid-cols-[1fr_380px]">
|
||
|
|
<Card>
|
||
|
|
<CardHeader>
|
||
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
||
|
|
<div>
|
||
|
|
<CardTitle>Export Preview</CardTitle>
|
||
|
|
<CardDescription>
|
||
|
|
First rows from the JSON export endpoint.
|
||
|
|
</CardDescription>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-wrap gap-2">
|
||
|
|
<DownloadLink href={urls.json} icon={FileJson} label="JSON" />
|
||
|
|
<DownloadLink href={urls.csv} icon={FileSpreadsheet} label="CSV" />
|
||
|
|
<DownloadLink href={urls.turtle} icon={FileText} label="Turtle" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
{exportData.isLoading ? (
|
||
|
|
<div className="space-y-3">
|
||
|
|
{Array.from({ length: 5 }).map((_, index) => (
|
||
|
|
<Skeleton key={index} className="h-16" />
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
) : previewRows.length === 0 ? (
|
||
|
|
<div className="py-12 text-center text-sm text-muted-foreground">
|
||
|
|
No export rows match the current settings.
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div className="overflow-x-auto">
|
||
|
|
<table className="w-full text-left text-sm">
|
||
|
|
<thead className="border-b text-xs text-muted-foreground">
|
||
|
|
<tr>
|
||
|
|
<th className="py-2 pr-3">Claim</th>
|
||
|
|
<th className="py-2 pr-3">Subject</th>
|
||
|
|
<th className="py-2 pr-3">Predicate</th>
|
||
|
|
<th className="py-2 pr-3">Object</th>
|
||
|
|
<th className="py-2 pr-3">Confidence</th>
|
||
|
|
<th className="py-2 pr-3">Last seen</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody className="divide-y">
|
||
|
|
{previewRows.map((row, index) => (
|
||
|
|
<tr key={`${valueFrom(row, "claim_id")}-${index}`}>
|
||
|
|
<td className="py-3 pr-3 font-medium">
|
||
|
|
#{valueFrom(row, "claim_id")}
|
||
|
|
</td>
|
||
|
|
<td className="max-w-[180px] truncate py-3 pr-3">
|
||
|
|
{valueFrom(row, "subject")}
|
||
|
|
</td>
|
||
|
|
<td className="py-3 pr-3">
|
||
|
|
<Badge variant="secondary">
|
||
|
|
{valueFrom(row, "predicate")}
|
||
|
|
</Badge>
|
||
|
|
</td>
|
||
|
|
<td className="max-w-[220px] truncate py-3 pr-3">
|
||
|
|
{valueFrom(row, "object")}
|
||
|
|
</td>
|
||
|
|
<td className="py-3 pr-3">
|
||
|
|
{typeof row.confidence === "number"
|
||
|
|
? formatPercent(row.confidence)
|
||
|
|
: "-"}
|
||
|
|
</td>
|
||
|
|
<td className="py-3 pr-3">
|
||
|
|
{formatDateTime(
|
||
|
|
typeof row.last_seen_at === "string"
|
||
|
|
? row.last_seen_at
|
||
|
|
: undefined,
|
||
|
|
)}
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
))}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
<aside className="space-y-6">
|
||
|
|
<Card>
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle className="flex items-center gap-2">
|
||
|
|
<Braces className="h-5 w-5" />
|
||
|
|
API Endpoint
|
||
|
|
</CardTitle>
|
||
|
|
<CardDescription>Same settings as the preview.</CardDescription>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent className="space-y-3">
|
||
|
|
<CodeBlock value={absoluteJsonUrl} />
|
||
|
|
<Button
|
||
|
|
variant="outline"
|
||
|
|
className="w-full"
|
||
|
|
onClick={() => copy(absoluteJsonUrl, "endpoint")}
|
||
|
|
>
|
||
|
|
<Clipboard className="h-4 w-4" />
|
||
|
|
{copied === "endpoint" ? "Copied" : "Copy endpoint"}
|
||
|
|
</Button>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
<Card>
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle>Integration Snippets</CardTitle>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent className="space-y-4">
|
||
|
|
<Snippet
|
||
|
|
title="cURL"
|
||
|
|
value={curlSnippet}
|
||
|
|
copied={copied === "curl"}
|
||
|
|
onCopy={() => copy(curlSnippet, "curl")}
|
||
|
|
/>
|
||
|
|
<Snippet
|
||
|
|
title="JavaScript"
|
||
|
|
value={fetchSnippet}
|
||
|
|
copied={copied === "fetch"}
|
||
|
|
onCopy={() => copy(fetchSnippet, "fetch")}
|
||
|
|
/>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
<Card>
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle>Formats</CardTitle>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent className="space-y-2 text-sm">
|
||
|
|
<FormatRow label="JSON" detail="API-first claim objects with evidence." />
|
||
|
|
<FormatRow label="CSV" detail="Spreadsheet-friendly rows for review." />
|
||
|
|
<FormatRow label="Turtle" detail="RDF triples for semantic graph tools." />
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
</aside>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
function DownloadLink({
|
||
|
|
href,
|
||
|
|
icon: Icon,
|
||
|
|
label,
|
||
|
|
}: {
|
||
|
|
href: string;
|
||
|
|
icon: React.ComponentType<{ className?: string }>;
|
||
|
|
label: string;
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<a
|
||
|
|
href={href}
|
||
|
|
className={cn(buttonVariants({ variant: "outline", size: "sm" }))}
|
||
|
|
>
|
||
|
|
<Icon className="h-4 w-4" />
|
||
|
|
{label}
|
||
|
|
</a>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
function CodeBlock({ value }: { value: string }) {
|
||
|
|
return (
|
||
|
|
<pre className="max-h-40 overflow-auto rounded-md bg-secondary/40 p-3 text-xs">
|
||
|
|
<code>{value}</code>
|
||
|
|
</pre>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
function Snippet({
|
||
|
|
title,
|
||
|
|
value,
|
||
|
|
copied,
|
||
|
|
onCopy,
|
||
|
|
}: {
|
||
|
|
title: string;
|
||
|
|
value: string;
|
||
|
|
copied: boolean;
|
||
|
|
onCopy: () => void;
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<div className="rounded-md border p-3">
|
||
|
|
<div className="mb-2 flex items-center justify-between gap-2">
|
||
|
|
<span className="text-sm font-medium">{title}</span>
|
||
|
|
<Button variant="ghost" size="sm" onClick={onCopy}>
|
||
|
|
<Clipboard className="h-4 w-4" />
|
||
|
|
{copied ? "Copied" : "Copy"}
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
<CodeBlock value={value} />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
function FormatRow({ label, detail }: { label: string; detail: string }) {
|
||
|
|
return (
|
||
|
|
<div className="rounded-md border px-3 py-2">
|
||
|
|
<div className="font-medium">{label}</div>
|
||
|
|
<div className="text-xs text-muted-foreground">{detail}</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|