You've already forked DataMate
399 lines
13 KiB
TypeScript
399 lines
13 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
import { Card, Button, Table, message, Modal, Tabs } from "antd";
|
|
import {
|
|
PlusOutlined,
|
|
EditOutlined,
|
|
DeleteOutlined,
|
|
SyncOutlined,
|
|
} from "@ant-design/icons";
|
|
import { SearchControls } from "@/components/SearchControls";
|
|
import CardView from "@/components/CardView";
|
|
import type { AnnotationTask } from "../annotation.model";
|
|
import useFetchData from "@/hooks/useFetchData";
|
|
import {
|
|
deleteAnnotationTaskByIdUsingDelete, loginAnnotationUsingGet,
|
|
queryAnnotationTasksUsingGet,
|
|
syncAnnotationTaskUsingPost,
|
|
} from "../annotation.api";
|
|
import { mapAnnotationTask } from "../annotation.const";
|
|
import CreateAnnotationTask from "../Create/components/CreateAnnotationTaskDialog";
|
|
import { ColumnType } from "antd/es/table";
|
|
import { TemplateList } from "../Template";
|
|
// Note: DevelopmentInProgress intentionally not used here
|
|
|
|
export default function DataAnnotation() {
|
|
// return <DevelopmentInProgress showTime="2025.10.30" />;
|
|
const [activeTab, setActiveTab] = useState("tasks");
|
|
const [viewMode, setViewMode] = useState<"list" | "card">("list");
|
|
const [showCreateDialog, setShowCreateDialog] = useState(false);
|
|
|
|
const {
|
|
loading,
|
|
tableData,
|
|
pagination,
|
|
searchParams,
|
|
fetchData,
|
|
handleFiltersChange,
|
|
handleKeywordChange,
|
|
} = useFetchData(queryAnnotationTasksUsingGet, mapAnnotationTask, 30000, true, [], 0);
|
|
|
|
const [labelStudioBase, setLabelStudioBase] = useState<string | null>(null);
|
|
const [selectedRowKeys, setSelectedRowKeys] = useState<(string | number)[]>([]);
|
|
const [selectedRows, setSelectedRows] = useState<any[]>([]);
|
|
|
|
// prefetch config on mount so clicking annotate is fast and we know whether base URL exists
|
|
// useEffect ensures this runs once
|
|
useEffect(() => {
|
|
let mounted = true;
|
|
(async () => {
|
|
try {
|
|
const baseUrl = `http://${window.location.hostname}:${parseInt(window.location.port) + 1}`;
|
|
if (mounted) setLabelStudioBase(baseUrl);
|
|
} catch (e) {
|
|
if (mounted) setLabelStudioBase(null);
|
|
}
|
|
})();
|
|
return () => {
|
|
mounted = false;
|
|
};
|
|
}, []);
|
|
|
|
const handleAnnotate = (task: AnnotationTask) => {
|
|
// Open Label Studio project page in a new tab
|
|
(async () => {
|
|
try {
|
|
// prefer using labeling project id already present on the task
|
|
// `mapAnnotationTask` normalizes upstream fields into `labelingProjId`/`projId`,
|
|
// so prefer those and fall back to the task id if necessary.
|
|
let labelingProjId = (task as any).labelingProjId || (task as any).projId || undefined;
|
|
|
|
// no fallback external mapping lookup; rely on normalized fields from mapAnnotationTask
|
|
|
|
// use prefetched base if available
|
|
const base = labelStudioBase;
|
|
|
|
// no debug logging in production
|
|
|
|
if (labelingProjId) {
|
|
// only open external Label Studio when we have a configured base url
|
|
await loginAnnotationUsingGet(labelingProjId)
|
|
if (base) {
|
|
const target = `${base}/projects/${labelingProjId}/data`;
|
|
window.open(target, "_blank");
|
|
} else {
|
|
// no external Label Studio URL configured — do not perform internal redirect in this version
|
|
message.error("无法跳转到 Label Studio：未配置 Label Studio 基础 URL");
|
|
return;
|
|
}
|
|
} else {
|
|
// no labeling project id available — do not attempt internal redirect in this version
|
|
message.error("无法跳转到 Label Studio：该映射未绑定标注项目");
|
|
return;
|
|
}
|
|
} catch (error) {
|
|
// on error, surface a user-friendly message instead of redirecting
|
|
message.error("无法跳转到 Label Studio：发生错误，请检查配置或控制台日志");
|
|
return;
|
|
}
|
|
})();
|
|
};
|
|
|
|
const handleDelete = (task: AnnotationTask) => {
|
|
Modal.confirm({
|
|
title: `确认删除标注任务「${task.name}」吗？`,
|
|
content: (
|
|
<div>
|
|
<div>删除标注任务不会删除对应数据集。</div>
|
|
<div>如需保留当前标注结果，请在同步后再删除。</div>
|
|
</div>
|
|
),
|
|
okText: "删除",
|
|
okType: "danger",
|
|
cancelText: "取消",
|
|
onOk: async () => {
|
|
try {
|
|
await deleteAnnotationTaskByIdUsingDelete(task.id);
|
|
message.success("映射删除成功");
|
|
fetchData();
|
|
// clear selection if deleted item was selected
|
|
setSelectedRowKeys((keys) => keys.filter((k) => k !== task.id));
|
|
setSelectedRows((rows) => rows.filter((r) => r.id !== task.id));
|
|
} catch (e) {
|
|
console.error(e);
|
|
message.error("删除失败，请稍后重试");
|
|
}
|
|
},
|
|
});
|
|
};
|
|
|
|
const handleSync = (task: AnnotationTask, batchSize: number = 50) => {
|
|
Modal.confirm({
|
|
title: `确认同步标注任务「${task.name}」吗？`,
|
|
content: (
|
|
<div>
|
|
<div>标注工程中文件列表将与数据集保持一致，差异项将会被修正。</div>
|
|
<div>标注工程中的标签与数据集中标签将进行合并，冲突项将以最新一次内容为准。</div>
|
|
</div>
|
|
),
|
|
okText: "同步",
|
|
cancelText: "取消",
|
|
onOk: async () => {
|
|
try {
|
|
await syncAnnotationTaskUsingPost({ id: task.id, batchSize });
|
|
message.success("任务同步请求已发送");
|
|
// optional: refresh list/status
|
|
fetchData();
|
|
// clear selection for the task
|
|
setSelectedRowKeys((keys) => keys.filter((k) => k !== task.id));
|
|
setSelectedRows((rows) => rows.filter((r) => r.id !== task.id));
|
|
} catch (e) {
|
|
console.error(e);
|
|
message.error("同步失败，请稍后重试");
|
|
}
|
|
},
|
|
});
|
|
};
|
|
|
|
const handleBatchSync = (batchSize: number = 50) => {
|
|
if (!selectedRows || selectedRows.length === 0) return;
|
|
Modal.confirm({
|
|
title: `确认同步所选 ${selectedRows.length} 个标注任务吗？`,
|
|
content: (
|
|
<div>
|
|
<div>标注工程中文件列表将与数据集保持一致，差异项将会被修正。</div>
|
|
<div>标注工程中的标签与数据集中标签将进行合并，冲突项将以最新一次内容为准。</div>
|
|
</div>
|
|
),
|
|
okText: "同步",
|
|
cancelText: "取消",
|
|
onOk: async () => {
|
|
try {
|
|
await Promise.all(
|
|
selectedRows.map((r) => syncAnnotationTaskUsingPost({ id: r.id, batchSize }))
|
|
);
|
|
message.success("批量同步请求已发送");
|
|
fetchData();
|
|
setSelectedRowKeys([]);
|
|
setSelectedRows([]);
|
|
} catch (e) {
|
|
console.error(e);
|
|
message.error("批量同步失败，请稍后重试");
|
|
}
|
|
},
|
|
});
|
|
};
|
|
|
|
const handleBatchDelete = () => {
|
|
if (!selectedRows || selectedRows.length === 0) return;
|
|
Modal.confirm({
|
|
title: `确认删除所选 ${selectedRows.length} 个标注任务吗？`,
|
|
content: (
|
|
<div>
|
|
<div>删除标注任务不会删除对应数据集。</div>
|
|
<div>如需保留当前标注结果，请在同步后再删除。</div>
|
|
</div>
|
|
),
|
|
okText: "删除",
|
|
okType: "danger",
|
|
cancelText: "取消",
|
|
onOk: async () => {
|
|
try {
|
|
await Promise.all(
|
|
selectedRows.map((r) => deleteAnnotationTaskByIdUsingDelete(r.id))
|
|
);
|
|
message.success("批量删除已完成");
|
|
fetchData();
|
|
setSelectedRowKeys([]);
|
|
setSelectedRows([]);
|
|
} catch (e) {
|
|
console.error(e);
|
|
message.error("批量删除失败，请稍后重试");
|
|
}
|
|
},
|
|
});
|
|
};
|
|
|
|
const operations = [
|
|
{
|
|
key: "annotate",
|
|
label: "标注",
|
|
icon: (
|
|
<EditOutlined
|
|
className="w-4 h-4 text-green-400"
|
|
style={{ color: "#52c41a" }}
|
|
/>
|
|
),
|
|
onClick: handleAnnotate,
|
|
},
|
|
{
|
|
key: "sync",
|
|
label: "同步",
|
|
icon: <SyncOutlined className="w-4 h-4" style={{ color: "#722ed1" }} />,
|
|
onClick: handleSync,
|
|
},
|
|
{
|
|
key: "delete",
|
|
label: "删除",
|
|
icon: <DeleteOutlined style={{ color: "#f5222d" }} />,
|
|
onClick: handleDelete,
|
|
},
|
|
];
|
|
|
|
const columns: ColumnType<any>[] = [
|
|
{
|
|
title: "任务名称",
|
|
dataIndex: "name",
|
|
key: "name",
|
|
fixed: "left" as const,
|
|
},
|
|
{
|
|
title: "任务ID",
|
|
dataIndex: "id",
|
|
key: "id",
|
|
},
|
|
{
|
|
title: "数据集",
|
|
dataIndex: "datasetName",
|
|
key: "datasetName",
|
|
width: 180,
|
|
},
|
|
{
|
|
title: "创建时间",
|
|
dataIndex: "createdAt",
|
|
key: "createdAt",
|
|
width: 180,
|
|
},
|
|
{
|
|
title: "更新时间",
|
|
dataIndex: "updatedAt",
|
|
key: "updatedAt",
|
|
width: 180,
|
|
},
|
|
{
|
|
title: "操作",
|
|
key: "actions",
|
|
fixed: "right" as const,
|
|
width: 150,
|
|
dataIndex: "actions",
|
|
render: (_: any, task: any) => (
|
|
<div className="flex items-center justify-center space-x-1">
|
|
{operations.map((operation) => (
|
|
<Button
|
|
key={operation.key}
|
|
type="text"
|
|
icon={operation.icon}
|
|
onClick={() => (operation?.onClick as any)?.(task)}
|
|
title={operation.label}
|
|
/>
|
|
))}
|
|
</div>
|
|
),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="flex flex-col h-full gap-4">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<h1 className="text-xl font-bold">数据标注</h1>
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<Tabs
|
|
activeKey={activeTab}
|
|
onChange={setActiveTab}
|
|
items={[
|
|
{
|
|
key: "tasks",
|
|
label: "标注任务",
|
|
children: (
|
|
<div className="flex flex-col gap-4">
|
|
{/* Search, Filters and Buttons in one row */}
|
|
<div className="flex items-center justify-between gap-2">
|
|
{/* Left side: Search and view controls */}
|
|
<div className="flex items-center gap-2">
|
|
<SearchControls
|
|
searchTerm={searchParams.keyword}
|
|
onSearchChange={handleKeywordChange}
|
|
searchPlaceholder="搜索任务名称、描述"
|
|
onFiltersChange={handleFiltersChange}
|
|
viewMode={viewMode}
|
|
onViewModeChange={setViewMode}
|
|
showViewToggle={true}
|
|
onReload={fetchData}
|
|
/>
|
|
</div>
|
|
|
|
{/* Right side: All action buttons */}
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
onClick={() => handleBatchSync(50)}
|
|
disabled={selectedRowKeys.length === 0}
|
|
>
|
|
批量同步
|
|
</Button>
|
|
<Button
|
|
danger
|
|
onClick={handleBatchDelete}
|
|
disabled={selectedRowKeys.length === 0}
|
|
>
|
|
批量删除
|
|
</Button>
|
|
<Button
|
|
type="primary"
|
|
icon={<PlusOutlined />}
|
|
onClick={() => setShowCreateDialog(true)}
|
|
>
|
|
创建标注任务
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Task List/Card */}
|
|
{viewMode === "list" ? (
|
|
<Card>
|
|
<Table
|
|
key="id"
|
|
rowKey="id"
|
|
loading={loading}
|
|
columns={columns}
|
|
dataSource={tableData}
|
|
pagination={pagination}
|
|
rowSelection={{
|
|
selectedRowKeys,
|
|
onChange: (keys, rows) => {
|
|
setSelectedRowKeys(keys as (string | number)[]);
|
|
setSelectedRows(rows as any[]);
|
|
},
|
|
}}
|
|
scroll={{ x: "max-content", y: "calc(100vh - 24rem)" }}
|
|
/>
|
|
</Card>
|
|
) : (
|
|
<CardView
|
|
data={tableData}
|
|
operations={operations as any}
|
|
pagination={pagination}
|
|
loading={loading}
|
|
/>
|
|
)}
|
|
|
|
<CreateAnnotationTask
|
|
open={showCreateDialog}
|
|
onClose={() => setShowCreateDialog(false)}
|
|
onRefresh={fetchData}
|
|
/>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
key: "templates",
|
|
label: "标注模板",
|
|
children: <TemplateList />,
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|