[crawler_platform 삭제]
This commit is contained in:
LASTA_DEV01\lasta
402
ontology_platform/web/frontend/src/pages/ExportApiPage.tsx
Normal file
402
ontology_platform/web/frontend/src/pages/ExportApiPage.tsx
Normal file
@@ -0,0 +1,402 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user