-
-
-
- {t("sources.title", "참고 소스 설정")}
-
- {project && (
-
- {project.name}{" "}
-
- · {project.domain}
-
-
- )}
+ const sources = project?.sources ?? [];
+
+ const columns: ColumnDef
[] = [
+ {
+ id: "name",
+ header: t("sources.name", "이름"),
+ accessorFn: (row) => row.name,
+ cell: ({ row }) => (
+
+
+
+
+ {row.original.name}
-
-
+ ),
+ size: 240,
+ enablePinning: true,
+ },
+ {
+ id: "type",
+ header: t("sources.type", "타입"),
+ accessorFn: (row) => row.type,
+ cell: ({ row }) => (
+
+ {row.original.type}
+
+ ),
+ size: 120,
+ },
+ {
+ id: "base_url",
+ header: "Base URL",
+ accessorFn: (row) => row.base_url ?? "",
+ enableSorting: false,
+ cell: ({ row }) =>
+ row.original.base_url ? (
+
e.stopPropagation()}
+ className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground hover:underline"
+ >
+
+
+ {row.original.base_url}
+
+
+ ) : (
+
—
+ ),
+ size: 280,
+ },
+ {
+ id: "trust",
+ header: t("sources.trust", "신뢰도"),
+ accessorFn: (row) => toNumber(row.trust_level) ?? 0,
+ cell: ({ row }) => {
+ const n = toNumber(row.original.trust_level);
+ return n == null ? (
+
—
+ ) : (
+
+ );
+ },
+ size: 140,
+ meta: { align: "right" },
+ },
+ {
+ id: "rate",
+ header: t("sources.rateLimit", "rate/분"),
+ accessorFn: (row) => row.rate_limit_per_minute ?? 0,
+ cell: ({ row }) => (
+
+ {row.original.rate_limit_per_minute ?? "—"}
+
+ ),
+ size: 110,
+ meta: { align: "right" },
+ },
+ {
+ id: "actions",
+ header: "",
+ enableSorting: false,
+ enableHiding: false,
+ enableResizing: false,
+ cell: ({ row }) => (
+
+
+
+ ),
+ size: 60,
+ meta: { align: "right" },
+ },
+ ];
- {isError && (
-
-
-
-
-
{(error as Error).message}
-
- )}
+
+
+ }
+ />
-
-
-
-
- {t("sources.listTitle", "등록된 소스")}
-
- {t(
- "sources.listDesc",
- "프로젝트 온톨로지 구축에 사용할 참고 사이트 목록",
- )}
-
-
-
- {isLoading && (
-
- {Array.from({ length: 3 }).map((_, i) => (
-
- ))}
-
+
+ {isError && (
+
refetch()}
+ />
+ )}
+
+
+ tableId="sources"
+ columns={columns}
+ data={sources}
+ getRowId={(row) => row.id}
+ loading={isLoading}
+ loadingRows={4}
+ height={560}
+ empty={
+
- {t(
- "sources.empty",
- "아직 등록된 소스가 없습니다. 오른쪽 폼에서 추가하세요.",
- )}
-
- )}
-
- {project && project.sources.length > 0 && (
-
- {project.sources.map((s) => (
- -
-
-
- {s.name}
-
- {s.type}
-
- {typeof s.trust_level === "number" && (
-
- {t("sources.trust", "신뢰도")}{" "}
- {s.trust_level.toFixed(2)}
-
- )}
-
- {s.base_url && (
-
-
- {s.base_url}
-
- )}
-
- ))}
-
- )}
-
-
-
-
-
+ }
+ />
+ }
+ />
+
+
+ {value.toFixed(2)}
+
-
-
-
-
-
- Graph View
-
-
- {project?.name ?? projectName} relation graph, candidates, and edge evidence.
-
-
-
-
+ const selectNode = (node: VisualNode | VisualEdge) => {
+ setSelected(node);
+ setDrawerOpen(true);
+ };
- {graph.isError && (
-
-
+ const toggleType = (type: string) => {
+ setHiddenTypes((prev) => {
+ const next = new Set(prev);
+ if (next.has(type)) next.delete(type);
+ else next.add(type);
+ return next;
+ });
+ };
+
+ // Page-level shortcuts (disabled while drawer or overlay is open)
+ useKeyboardShortcuts(
+ {
+ l: () => setShowLegend((v) => !v),
+ m: () => setShowMinimap((v) => !v),
+ r: () => graph.refetch(),
+ "Shift+?": () => setShortcutsOpen(true),
+ Escape: () => {
+ if (drawerOpen) {
+ setDrawerOpen(false);
+ setSelected(null);
+ }
+ },
+ },
+ { disabled: shortcutsOpen },
+ );
+
+ const pageShortcutGroups: ShortcutGroup[] = [
+ {
+ title: "Graph View",
+ items: [
+ { keys: "l", label: "Toggle legend" },
+ { keys: "m", label: "Toggle minimap" },
+ { keys: "r", label: "Refresh graph" },
+ { keys: "Escape", label: "Close detail drawer" },
+ ],
+ },
+ {
+ title: "Global",
+ items: [
+ { keys: "Mod+K", label: "Command palette" },
+ { keys: "Shift+?", label: "Show this panel" },
+ { keys: "g g", label: "Jump to Graph View" },
+ ],
+ },
+ ];
+
+ return (
+ <>
+
+
+
+ }
+ />
+
+
+ {graph.isError && (
+
{(graph.error as Error).message}
-
-
- )}
+
+ )}
-
-
-
- setSearch(event.target.value)}
- className="pl-9"
- placeholder="Search node or type"
- />
-
-
-
-
-
-
+ {/* Filter bar — unified FilterPanel */}
+ {(() => {
+ const statusLabels: Record
= {
+ validated_claim: "Validated",
+ candidate_claim: "Candidate",
+ rule_candidate: "Rule candidate",
+ active: "Active",
+ all: "All statuses",
+ };
+ const chips: ActiveChip[] = [];
+ if (search)
+ chips.push({
+ id: "search",
+ label: "Search",
+ value: `"${search}"`,
+ onClear: () => setSearch(""),
+ });
+ if (entityType)
+ chips.push({
+ id: "type",
+ label: "Type",
+ value: entityType,
+ onClear: () => setEntityType(""),
+ });
+ if (predicate)
+ chips.push({
+ id: "predicate",
+ label: "Predicate",
+ value: predicate,
+ onClear: () => setPredicate(""),
+ });
+ if (statusScope !== "validated_claim")
+ chips.push({
+ id: "status",
+ label: "Status",
+ value: statusLabels[statusScope] ?? statusScope,
+ onClear: () => setStatusScope("validated_claim"),
+ });
+ if (minConfidence > 0)
+ chips.push({
+ id: "conf",
+ label: "Min confidence",
+ value: formatPercent(minConfidence),
+ onClear: () => setMinConfidence(0),
+ });
+ if (!includeCandidates && statusScope === "validated_claim")
+ chips.push({
+ id: "blend",
+ label: "Blend candidates",
+ value: "off",
+ onClear: () => setIncludeCandidates(true),
+ });
-
-
-
-
- Minimum confidence
-
- {formatPercent(minConfidence)}
-
-
setMinConfidence(Number(event.target.value))}
- className="w-full"
- />
-
-
-
-
-
- Ontology Network
-
- {visual.nodes.length} nodes / {visual.edges.length} edges shown
-
-
-
- {visual.types.slice(0, 8).map((type) => (
-
-
- {type}
-
- ))}
-
+ return (
+
0 ? : undefined}
+ onClearAll={chips.length > 0 ? clearAll : undefined}
+ >
+
+ ({
+ value: t,
+ label: t,
+ hint: typeCounts.get(t),
+ }))}
+ />
+ ({ value: p, label: p }))}
+ />
+ setStatusScope(v || "validated_claim")}
+ placeholder="Validated"
+ allowEmpty
+ options={Object.entries(statusLabels)
+ .filter(([k]) => k !== "validated_claim")
+ .map(([k, v]) => ({ value: k, label: v }))}
+ />
+ `${Math.round(v * 100)}%`}
+ />
+
+
+ );
+ })()}
+
+ {/* Canvas */}
+
+
+
+
+ Ontology Network
+
+
+ {visibleNodes.length} nodes / {visibleEdges.length} edges shown
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{graph.isLoading ? (
- ) : visual.nodes.length === 0 ? (
-
-
- No graph is available for the current filters.
-
+ ) : visibleNodes.length === 0 ? (
+
) : (
-
+
+ {/* Legend overlay (top-right) */}
+ {showLegend && (
+
+ )}
+
+ {/* Minimap overlay (bottom-right) */}
+ {showMinimap && visibleNodes.length > 0 && (
+
+ )}
+
)}
-
-
+
+
-
+
+
+
+
+
+
+
+ )}
+ {selected && !("predicate" in selected) && (
+
+
+
+
+
+
+
+ )}
+
+
+
+
+ );
+}
+
+/* ============================================================
+ * Legend Panel — overlay, toggle visibility per type
+ * ========================================================== */
+function LegendPanel({
+ types,
+ typeCounts,
+ hiddenTypes,
+ onToggle,
+}: {
+ types: string[];
+ typeCounts: Map;
+ hiddenTypes: Set;
+ onToggle: (type: string) => void;
+}) {
+ return (
+
+
+ Legend
+
+
+ {types.map((type) => {
+ const hidden = hiddenTypes.has(type);
+ const count = typeCounts.get(type) ?? 0;
+ return (
+ -
+
+
+ );
+ })}
+
+
+
+ Minimap
+
+ {nodes.length}·{edges.length}
+
+
+
-
{label}
-
{humanizeValue(value)}
+
+
+ {label}
+
+
+ {humanizeValue(value)}
+
);
}
@@ -559,7 +949,7 @@ function HealthRow({ label, value }: { label: string; value: number | string })
return (
{label}
-
+
{typeof value === "number" ? value.toLocaleString() : value}
diff --git a/ontology_platform/web/frontend/src/pages/ReviewPage.tsx b/ontology_platform/web/frontend/src/pages/ReviewPage.tsx
index 46487fc..6c2a54c 100644
--- a/ontology_platform/web/frontend/src/pages/ReviewPage.tsx
+++ b/ontology_platform/web/frontend/src/pages/ReviewPage.tsx
@@ -4,6 +4,7 @@ import { toast } from "sonner";
import {
AlertCircle,
ArrowLeft,
+ ArrowRight,
Check,
Eye,
Filter,
@@ -11,6 +12,7 @@ import {
Search,
X,
} from "lucide-react";
+import { cn } from "@/lib/utils";
import {
Card,
CardContent,
@@ -168,23 +170,23 @@ export default function ReviewPage() {
-
+
+
-
-
+
+
Review Queue
신뢰도, 출처, 생성 방식, 검증 결과를 함께 확인합니다.
-
+
setSearch(event.target.value)}
- className="w-56 pl-9"
+ className="w-48 pl-9 sm:w-56"
placeholder="Search claims"
/>
@@ -193,7 +195,7 @@ export default function ReviewPage() {