Add overview K rank display switch

app.js

@@ -28,6 +28,7 @@ const state = {
 	collapsedFilters: new Set(),
 	recordsReady: false,
 	view: "overview",
+	overviewMode: "rank",
 	sort: { key: "overall", asc: true },
 	metric: { tier: "tier1", key: null, detail: "__all__", frequency: "__all__", sort: { key: "rank", asc: true } },
 	strength: { tier: "tier1", mode: "k" }
@@ -185,12 +186,22 @@ function tierStats(records = includedRecords()) {
 	return [...stats.values()].map((row) => ({ ...row, overall: row.pointwise + row.ic + row.portfolio }));
 }
 function sortedOverview() {
-	const rows = state.recordsReady ? tierStats() : [...(state.data?.overall || [])];
+	const rows = (state.recordsReady ? tierStats() : [...(state.data?.overall || [])]).map((row) => ({
+		...row,
+		overall_k: geometricMean([row.pointwise_k, row.ic_k, row.portfolio_k])
+	}));
 	const s = state.sort;
+	const valueForSort = (row, key) => {
+		if (key === "pos" || key === "overall") return state.overviewMode === "k" ? row.overall_k : row.overall;
+		if (state.overviewMode === "k" && key === "pointwise") return row.pointwise_k;
+		if (state.overviewMode === "k" && key === "ic") return row.ic_k;
+		if (state.overviewMode === "k" && key === "portfolio") return row.portfolio_k;
+		return row[key];
+	};
 	rows.sort((a, b) => {
 		if (s.key === "model") return s.asc ? a.model.localeCompare(b.model) : b.model.localeCompare(a.model);
-		const av = s.key === "pos" ? a.overall : a[s.key];
-		const bv = s.key === "pos" ? b.overall : b[s.key];
+		const av = valueForSort(a, s.key);
+		const bv = valueForSort(b, s.key);
 		return s.asc ? av - bv : bv - av;
 	});
 	return rows;
@@ -457,21 +468,35 @@ function fillHowtoFrequencies() {
 }
 function renderOverview() {
 	const rows = sortedOverview();
-	const best = Math.min(...rows.map((r) => r.overall));
+	const isKMode = state.overviewMode === "k";
+	const best = Math.min(...rows.map((r) => isKMode ? r.overall_k : r.overall).filter(finite));
 	const leader = [...(state.recordsReady ? tierStats() : (state.data?.overall || []))]
 		.sort((a, b) => a.overall - b.overall || a.model.localeCompare(b.model))[0];
 	const strip = $("winner-strip");
 	if (strip && leader) {
 		strip.innerHTML = `<span>Overall #1</span><b>${isExaone(leader.model) ? "★ " : ""}${displayName(leader.model)}</b><strong>Rank sum ${fmt(leader.overall, leader.overall % 1 ? 1 : 0)}</strong>`;
 	}
+	$("overview-mode-toggle").checked = !isKMode;
+	document.querySelector('#overview-table th[data-sort="pointwise"]').textContent = isKMode ? "Point K ↓" : "Point rank";
+	document.querySelector('#overview-table th[data-sort="ic"]').textContent = isKMode ? "Ranking K ↓" : "Ranking rank";
+	document.querySelector('#overview-table th[data-sort="portfolio"]').textContent = isKMode ? "Decision K ↓" : "Decision rank";
+	document.querySelector('#overview-table th[data-sort="overall"]').textContent = isKMode ? "Overall K ↓" : "Rank sum ↓";
+	const tierCell = (row, tier, value) => finite(value)
+		? `<td class="num tier-rank" data-model="${row.model}" data-tier="${tier}">${isKMode ? fmt(value) : rankBadge(value)}</td>`
+		: `<td class="num">${fmt(value)}</td>`;
+	const overallCell = (row) => {
+		const value = isKMode ? row.overall_k : row.overall;
+		const text = isKMode ? fmt(value) : fmt(value, value % 1 ? 1 : 0);
+		return `<td class="num ${value === best ? "val-best" : ""}"><b>${text}</b></td>`;
+	};
 	$("overview-body").innerHTML = rows.map((row, index) => `
 		<tr class="model-row ${isExaone(row.model) ? "exaone-row" : ""}">
 			<td class="num">${rankBadge(index + 1)}</td>
 			<td class="model-name" data-model="${row.model}">${isExaone(row.model) ? "★ " : ""}${displayName(row.model)}</td>
-			<td class="num tier-rank" data-model="${row.model}" data-tier="tier1">${rankBadge(row.pointwise)}</td>
-			<td class="num tier-rank" data-model="${row.model}" data-tier="tier2">${rankBadge(row.ic)}</td>
-			<td class="num tier-rank" data-model="${row.model}" data-tier="tier3">${rankBadge(row.portfolio)}</td>
-			<td class="num ${row.overall === best ? "val-best" : ""}"><b>${fmt(row.overall, row.overall % 1 ? 1 : 0)}</b></td>
+			${tierCell(row, "tier1", isKMode ? row.pointwise_k : row.pointwise)}
+			${tierCell(row, "tier2", isKMode ? row.ic_k : row.ic)}
+			${tierCell(row, "tier3", isKMode ? row.portfolio_k : row.portfolio)}
+			${overallCell(row)}
 			<td class="num"><small>${row.count.toLocaleString()}</small></td>
 		</tr>
 	`).join("");
@@ -738,6 +763,10 @@ async function boot() {
 	$("detail-close").onclick = closeDrawer;
 	$("detail2-close").onclick = closeDrawer2;
 	$("drawer-scrim").onclick = closeDrawer;
+	$("overview-mode-toggle").onchange = (event) => {
+		state.overviewMode = event.target.checked ? "rank" : "k";
+		renderOverview();
+	};
 	setupTabs();
 	setupCollapsibles();
 	buildSpecToggles();

index.html

@@ -74,6 +74,14 @@
 						<b>Rank sum이 낮을수록 우수</b>합니다.
 					</p>
 					<div id="winner-strip" class="winner-strip"></div>
+					<div class="overview-toolbar">
+						<label class="mode-switch" title="Overview table display mode">
+							<span>K</span>
+							<input id="overview-mode-toggle" type="checkbox" checked />
+							<i aria-hidden="true"></i>
+							<span>Rank</span>
+						</label>
+					</div>
 					<div class="table-wrap">
 						<table id="overview-table" class="board">
 							<thead>

style.css

@@ -125,6 +125,47 @@ main { flex: 1 1 auto; min-width: 0; padding: 22px 32px 60px; }
 }
 .hint code, code { background: #fff; padding: 1px 5px; border-radius: 5px; font-size: 12px; }
 
+.overview-toolbar {
+	display: flex;
+	justify-content: flex-end;
+	margin: -4px 0 10px;
+}
+.mode-switch {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	color: var(--ink-soft);
+	font-size: 12px;
+	font-weight: 700;
+}
+.mode-switch input { position: absolute; opacity: 0; pointer-events: none; }
+.mode-switch i {
+	position: relative;
+	width: 48px;
+	height: 24px;
+	border-radius: 999px;
+	background: var(--line);
+	border: 1px solid #d4dae5;
+	transition: background .15s ease, border-color .15s ease;
+}
+.mode-switch i::after {
+	content: "";
+	position: absolute;
+	top: 3px;
+	left: 3px;
+	width: 16px;
+	height: 16px;
+	border-radius: 50%;
+	background: #fff;
+	box-shadow: 0 1px 3px rgba(20, 30, 60, .22);
+	transition: transform .15s ease;
+}
+.mode-switch input:checked + i {
+	background: var(--accent);
+	border-color: var(--accent);
+}
+.mode-switch input:checked + i::after { transform: translateX(24px); }
+
 .specbar, .filters, .table-wrap {
 	background: var(--card);
 	border: 1px solid var(--line);