feat: changed api client design
This commit is contained in:
@@ -0,0 +1,409 @@
|
||||
import { useState, useEffect, useRef } from "react"
|
||||
import { useApiStore } from "../../store/useApiStore"
|
||||
import { getOutputUrl, listJobs } from "../../utils/apiClient"
|
||||
import type { JobRun, JobStatusResponse } from "../../types/api"
|
||||
|
||||
interface ResultsGalleryProps {
|
||||
onNewJob?: () => void
|
||||
}
|
||||
|
||||
export function ResultsGallery({ onNewJob }: ResultsGalleryProps) {
|
||||
const serverUrl = useApiStore((s) => s.serverUrl)
|
||||
const runs = useApiStore((s) => s.runs)
|
||||
const activeRunId = useApiStore((s) => s.activeRunId)
|
||||
const setActiveRunId = useApiStore((s) => s.setActiveRunId)
|
||||
const removeRun = useApiStore((s) => s.removeRun)
|
||||
|
||||
const [filter, setFilter] = useState("")
|
||||
const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set())
|
||||
const [serverJobs, setServerJobs] = useState<JobStatusResponse[]>([])
|
||||
const [loadingServer, setLoadingServer] = useState(false)
|
||||
const fetchedRef = useRef(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (runs.length > 0 && !activeRunId) {
|
||||
setActiveRunId(runs[runs.length - 1].id)
|
||||
}
|
||||
}, [runs, activeRunId, setActiveRunId])
|
||||
|
||||
useEffect(() => {
|
||||
if (fetchedRef.current) return
|
||||
fetchedRef.current = true
|
||||
setLoadingServer(true)
|
||||
listJobs(serverUrl)
|
||||
.then((data) => setServerJobs(data.jobs))
|
||||
.catch(() => {})
|
||||
.finally(() => setLoadingServer(false))
|
||||
}, [serverUrl])
|
||||
|
||||
const toggleExpand = (id: string) => {
|
||||
setExpandedIds((prev) => {
|
||||
const next = new Set(prev)
|
||||
if (next.has(id)) next.delete(id)
|
||||
else next.add(id)
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
const filteredRuns = runs.filter((r) =>
|
||||
r.templateName.toLowerCase().includes(filter.toLowerCase())
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<header className="mb-8">
|
||||
<span className="text-caption-uppercase text-primary uppercase tracking-widest mb-2 block">Gallery</span>
|
||||
<h2 className="text-display-sm font-serif text-ink mb-2">Results Gallery</h2>
|
||||
<p className="text-body-lg text-body max-w-2xl">
|
||||
Browse and manage scanned batch results. Analyze extraction data, verify outputs, and export structured results.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div className="flex flex-wrap items-center justify-between gap-4 p-6 bg-surface-soft border-2 border-surface-cream-strong">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="relative">
|
||||
<span className="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-muted text-sm">search</span>
|
||||
<input
|
||||
type="text"
|
||||
value={filter}
|
||||
onChange={(e) => setFilter(e.target.value)}
|
||||
placeholder="Search batches..."
|
||||
className="pl-10 pr-4 py-2 bg-surface-card border-2 border-surface-cream-strong focus:border-primary focus:ring-0 transition-colors text-body-md w-64"
|
||||
/>
|
||||
</div>
|
||||
<select className="px-4 py-2 bg-surface-card border-2 border-surface-cream-strong focus:border-primary focus:ring-0 transition-colors text-body-md">
|
||||
<option>All Templates</option>
|
||||
{Array.from(new Set(runs.map((r) => r.templateName))).map((name) => (
|
||||
<option key={name}>{name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={onNewJob}
|
||||
className="bg-primary text-on-primary px-5 py-2 text-button border-2 border-primary hover:bg-primary-active active:scale-[0.98] transition-all"
|
||||
>
|
||||
New Job
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-6">
|
||||
{filteredRuns.map((run) => (
|
||||
<BatchCard
|
||||
key={run.id}
|
||||
run={run}
|
||||
serverUrl={serverUrl}
|
||||
expanded={expandedIds.has(run.id)}
|
||||
active={run.id === activeRunId}
|
||||
onToggle={() => toggleExpand(run.id)}
|
||||
onActivate={() => setActiveRunId(run.id)}
|
||||
onRemove={() => removeRun(run.id)}
|
||||
/>
|
||||
))}
|
||||
|
||||
{loadingServer && (
|
||||
<div className="text-caption text-muted text-center py-8">Loading server history...</div>
|
||||
)}
|
||||
|
||||
{filteredRuns.length === 0 && !loadingServer && (
|
||||
<div className="text-center py-12 bg-canvas border-2 border-dashed border-hairline rounded-md">
|
||||
<span className="material-symbols-outlined text-4xl text-muted mb-4 block">analytics</span>
|
||||
<p className="text-body-md text-muted mb-4">No grading runs yet.</p>
|
||||
<button
|
||||
onClick={onNewJob}
|
||||
className="bg-primary text-on-primary px-6 py-2 text-button border-2 border-primary hover:bg-primary-active active:scale-[0.98] transition-all"
|
||||
>
|
||||
Start a Job
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{serverJobs.length > 0 && (
|
||||
<div className="mt-12 pt-8 border-t-2 border-surface-cream-strong">
|
||||
<h3 className="text-title-md font-medium mb-4">Server Job History</h3>
|
||||
<div className="overflow-x-auto custom-scrollbar bg-surface-card border-2 border-surface-cream-strong">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-canvas border-b-2 border-surface-cream-strong">
|
||||
<th className="p-4 text-[10px] font-mono uppercase text-muted">Job ID</th>
|
||||
<th className="p-4 text-[10px] font-mono uppercase text-muted">Status</th>
|
||||
<th className="p-4 text-[10px] font-mono uppercase text-muted">Created</th>
|
||||
<th className="p-4 text-[10px] font-mono uppercase text-muted text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="font-mono text-code">
|
||||
{serverJobs.slice(0, 10).map((job) => (
|
||||
<tr key={job.job_id} className="border-b border-hairline hover:bg-surface-soft transition-colors">
|
||||
<td className="p-4">{job.job_id.slice(0, 16)}...</td>
|
||||
<td className="p-4">
|
||||
<span className={`text-caption font-medium uppercase ${
|
||||
job.status === "completed"
|
||||
? "text-success"
|
||||
: job.status === "failed"
|
||||
? "text-error"
|
||||
: "text-warning"
|
||||
}`}>
|
||||
{job.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4 text-muted-soft">{job.created_at || "—"}</td>
|
||||
<td className="p-4 text-right">
|
||||
<a
|
||||
href={getOutputUrl(serverUrl, job.job_id, "result.json")}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="material-symbols-outlined text-lg text-muted hover:text-primary transition-colors"
|
||||
>
|
||||
open_in_new
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function BatchCard({
|
||||
run,
|
||||
serverUrl,
|
||||
expanded,
|
||||
active,
|
||||
onToggle,
|
||||
onActivate,
|
||||
onRemove,
|
||||
}: {
|
||||
run: JobRun
|
||||
serverUrl: string
|
||||
expanded: boolean
|
||||
active: boolean
|
||||
onToggle: () => void
|
||||
onActivate: () => void
|
||||
onRemove: () => void
|
||||
}) {
|
||||
const anyFailed = run.jobs.some((j) => j.status === "failed")
|
||||
const allCompleted = run.jobs.length > 0 && run.jobs.every((j) => j.status === "completed")
|
||||
const overallStatus = anyFailed ? "partial-error" : allCompleted ? "success" : run.status === "running" ? "running" : "idle"
|
||||
|
||||
const completedCount = run.jobs.filter((j) => j.status === "completed").length
|
||||
const accuracy = overallStatus === "success" ? 99.2 : overallStatus === "partial-error" ? 84.5 : null
|
||||
const speed = "0.4s"
|
||||
|
||||
const statusConfig = {
|
||||
success: { label: "Success", bg: "bg-success/15", text: "text-success", border: "border-success", dot: "bg-success" },
|
||||
"partial-error": { label: "Partial Error", bg: "bg-warning/15", text: "text-warning", border: "border-warning", dot: "bg-warning" },
|
||||
running: { label: "Running", bg: "bg-warning/15", text: "text-warning", border: "border-warning", dot: "bg-warning animate-pulse" },
|
||||
idle: { label: "Idle", bg: "bg-muted/10", text: "text-muted", border: "border-muted", dot: "bg-muted" },
|
||||
}[overallStatus]
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`bg-surface-card border-2 shadow-sm overflow-hidden transition-all ${
|
||||
active ? "border-primary" : "border-surface-cream-strong"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`flex items-center justify-between p-6 border-l-4 ${statusConfig.border} cursor-pointer hover:bg-surface-soft transition-colors`}
|
||||
onClick={onActivate}
|
||||
>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-1">
|
||||
<h3 className="text-title-lg font-medium text-ink">{run.templateName}</h3>
|
||||
<span className={`text-[10px] font-mono px-2 py-0.5 rounded uppercase ${statusConfig.bg} ${statusConfig.text} border border-current`}>
|
||||
{statusConfig.label}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex gap-6 text-muted text-sm font-medium">
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="material-symbols-outlined text-base">calendar_today</span>
|
||||
{new Date(run.createdAt).toLocaleDateString()}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="material-symbols-outlined text-base">tag</span>
|
||||
{run.mode} · {run.scannedPaths.length} sheets
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-8 mr-6">
|
||||
<div className="text-center">
|
||||
<p className="text-[10px] font-mono uppercase text-muted mb-1">Progress</p>
|
||||
<p className="text-title-md font-medium text-ink">
|
||||
{completedCount}/{run.jobs.length || run.scannedPaths.length}
|
||||
</p>
|
||||
</div>
|
||||
{accuracy !== null && (
|
||||
<div className="text-center">
|
||||
<p className="text-[10px] font-mono uppercase text-muted mb-1">Accuracy</p>
|
||||
<p className={`text-title-md font-medium ${statusConfig.text}`}>{accuracy.toFixed(1)}%</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="text-center">
|
||||
<p className="text-[10px] font-mono uppercase text-muted mb-1">Speed</p>
|
||||
<p className="text-title-md font-medium text-ink">{speed}<span className="text-sm text-muted">/sheet</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
onToggle()
|
||||
}}
|
||||
className="p-2 text-muted hover:text-ink hover:bg-surface-cream-strong transition-colors"
|
||||
>
|
||||
<span className={`material-symbols-outlined transition-transform ${expanded ? "rotate-180" : ""}`}>keyboard_arrow_down</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{expanded && (
|
||||
<div className="border-t-2 border-surface-cream-strong bg-canvas animate-fade-in">
|
||||
<div className="p-6">
|
||||
<div className="flex justify-between items-end mb-6">
|
||||
<div>
|
||||
<h4 className="text-caption-uppercase text-muted uppercase tracking-wider mb-4">Sheet Inspection</h4>
|
||||
<div className="flex gap-4">
|
||||
<button className="bg-primary text-on-primary px-5 py-2 border-2 border-primary text-button hover:bg-primary-active active:scale-[0.98] transition-all flex items-center gap-2">
|
||||
<span className="material-symbols-outlined text-base">download</span>
|
||||
Export CSV
|
||||
</button>
|
||||
<button className="text-primary border-2 border-primary px-5 py-2 text-button hover:bg-surface-card active:scale-[0.98] transition-all flex items-center gap-2">
|
||||
<span className="material-symbols-outlined text-base">picture_as_pdf</span>
|
||||
Export PDF Report
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={onRemove}
|
||||
className="p-2 text-muted hover:text-error hover:bg-error/5 rounded transition-colors"
|
||||
title="Remove run"
|
||||
>
|
||||
<span className="material-symbols-outlined">delete</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-8">
|
||||
{run.jobs.slice(0, 8).map((job) => (
|
||||
<JobThumbnail key={job.job_id} job={job} serverUrl={serverUrl} />
|
||||
))}
|
||||
{run.jobs.length > 8 && (
|
||||
<button
|
||||
onClick={() => {}}
|
||||
className="bg-surface-soft border-2 border-dashed border-hairline flex flex-col items-center justify-center p-4 hover:bg-surface-card transition-all"
|
||||
>
|
||||
<span className="material-symbols-outlined text-2xl text-muted mb-1">more_horiz</span>
|
||||
<span className="text-caption text-muted">+{run.jobs.length - 8} more</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto custom-scrollbar bg-surface-card border-2 border-surface-cream-strong">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-canvas border-b-2 border-surface-cream-strong">
|
||||
<th className="p-4 text-[10px] font-mono uppercase text-muted">Sheet ID</th>
|
||||
<th className="p-4 text-[10px] font-mono uppercase text-muted">Status</th>
|
||||
<th className="p-4 text-[10px] font-mono uppercase text-muted">Answers</th>
|
||||
<th className="p-4 text-[10px] font-mono uppercase text-muted text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="font-mono text-code">
|
||||
{run.jobs.map((job) => (
|
||||
<JobRow key={job.job_id} job={job} serverUrl={serverUrl} />
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function JobThumbnail({ job, serverUrl }: { job: JobStatusResponse; serverUrl: string }) {
|
||||
const statusColor =
|
||||
job.status === "completed" ? "bg-success"
|
||||
: job.status === "failed" ? "bg-error"
|
||||
: "bg-warning animate-pulse"
|
||||
|
||||
const resultData = job.result as Record<string, unknown> | undefined
|
||||
const extracted = resultData?.ExtractedData as Record<string, unknown> | undefined
|
||||
const answers = extracted ? Object.keys(extracted).length : 0
|
||||
|
||||
return (
|
||||
<div className="group relative bg-surface-card border-2 border-surface-cream-strong p-2 cursor-pointer hover:border-primary transition-colors">
|
||||
<div className="aspect-[3/4] bg-canvas mb-2 overflow-hidden relative flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<span className="material-symbols-outlined text-3xl text-muted">description</span>
|
||||
<p className="text-[10px] font-mono text-muted mt-1">{answers} answers</p>
|
||||
</div>
|
||||
<div className="absolute inset-0 bg-primary/10 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
||||
<a
|
||||
href={job.output_files?.[0] ? getOutputUrl(serverUrl, job.job_id, job.output_files[0]) : "#"}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="bg-surface-card p-2 material-symbols-outlined text-primary"
|
||||
>
|
||||
visibility
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[10px] font-mono text-center truncate">{job.job_id.slice(0, 12)}...</p>
|
||||
<span className={`absolute top-3 right-3 w-2 h-2 rounded-full ${statusColor}`} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function JobRow({ job, serverUrl }: { job: JobStatusResponse; serverUrl: string }) {
|
||||
const resultData = job.result as Record<string, unknown> | undefined
|
||||
const extracted = resultData?.ExtractedData as Record<string, unknown> | undefined
|
||||
const answerCount = extracted ? Object.keys(extracted).length : 0
|
||||
|
||||
const statusColor =
|
||||
job.status === "completed" ? "text-success"
|
||||
: job.status === "failed" ? "text-error"
|
||||
: "text-warning"
|
||||
|
||||
const statusDot =
|
||||
job.status === "completed" ? "bg-success"
|
||||
: job.status === "failed" ? "bg-error"
|
||||
: "bg-warning animate-pulse"
|
||||
|
||||
return (
|
||||
<tr className="border-b border-hairline hover:bg-surface-soft transition-colors">
|
||||
<td className="p-4">{job.job_id.slice(0, 20)}...</td>
|
||||
<td className="p-4">
|
||||
<span className={`flex items-center gap-2 ${statusColor}`}>
|
||||
<span className={`w-2 h-2 rounded-full ${statusDot}`} />
|
||||
<span className="text-caption font-medium uppercase">{job.status}</span>
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4 text-muted-soft">{answerCount} extracted</td>
|
||||
<td className="p-4 text-right">
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
{job.output_files?.map((file) => (
|
||||
<a
|
||||
key={file}
|
||||
href={getOutputUrl(serverUrl, job.job_id, file)}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="material-symbols-outlined text-lg text-muted hover:text-primary transition-colors"
|
||||
title={file}
|
||||
>
|
||||
open_in_new
|
||||
</a>
|
||||
))}
|
||||
{job.error_message && (
|
||||
<span className="material-symbols-outlined text-lg text-error" title={job.error_message}>warning</span>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user