Use usable recent DEB training rankings

This commit is contained in:
2569718930@qq.com
2026-06-08 13:37:20 +08:00
parent 721173aea3
commit 956cb8a8e3
6 changed files with 236 additions and 21 deletions
@@ -11,6 +11,7 @@ import {
YAxis,
} from "recharts";
import { TrendingUp, Target, Thermometer, Hash, BarChart3, Crosshair } from "lucide-react";
import { buildDebRecentRankingRows } from "@/lib/deb-training-ranking";
type MetricPayload = {
hit_rate: number;
@@ -178,6 +179,11 @@ export function TrainingDashboard({ isEn }: { isEn: boolean }) {
const data = payload?.accuracy ?? null;
const debSummary = payload?.deb_summary;
const debSorted = useMemo(() => (data || []).filter((c) => c.deb).sort((a, b) => (b.deb?.hit_rate ?? 0) - (a.deb?.hit_rate ?? 0)), [data]);
const debRecentRanked = useMemo(() => buildDebRecentRankingRows(data || []), [data]);
const debRecentRankIndex = useMemo(
() => new Map(debRecentRanked.map((row, index) => [row.cityId, index])),
[debRecentRanked],
);
const muSorted = useMemo(() => (data || []).filter((c) => c.mu).sort((a, b) => (b.mu?.hit_rate ?? 0) - (a.mu?.hit_rate ?? 0)), [data]);
const debStats = useMemo(() => {
@@ -206,12 +212,19 @@ export function TrainingDashboard({ isEn }: { isEn: boolean }) {
}, [muSorted]);
const debHitChart = useMemo(
() => debSorted.slice(0, 18).map((c) => ({ name: c.name, value: Number((c.deb?.hit_rate ?? 0).toFixed(1)) })),
[debSorted],
() => debRecentRanked.slice(0, 18).map((c) => ({ name: c.name, value: c.hitRate })),
[debRecentRanked],
);
const debMaeChart = useMemo(
() => [...debSorted].sort((a, b) => (a.deb?.mae ?? 99) - (b.deb?.mae ?? 99)).slice(0, 18).map((c) => ({ name: c.name, value: Number((c.deb?.mae ?? 0).toFixed(2)) })),
[debSorted],
() => [...debRecentRanked]
.sort((a, b) => {
if (a.usableScore !== b.usableScore) return b.usableScore - a.usableScore;
if (a.trustScore !== b.trustScore) return b.trustScore - a.trustScore;
return a.mae - b.mae;
})
.slice(0, 18)
.map((c) => ({ name: c.name, value: c.mae })),
[debRecentRanked],
);
const muHitChart = useMemo(
() => muSorted.slice(0, 18).map((c) => ({ name: c.name, value: Number((c.mu?.hit_rate ?? 0).toFixed(1)) })),
@@ -296,7 +309,7 @@ export function TrainingDashboard({ isEn }: { isEn: boolean }) {
</div>
) : null}
<div className="grid grid-cols-2 gap-3 mb-4">
<ChartCard title={isEn ? "Forecast Hit Rate by City" : "预报命中率 by 城市"}>
<ChartCard title={isEn ? "Usable Recent Hit Rate by City" : "可用近期命中率 by 城市"}>
<ResponsiveContainer width="100%" height="100%">
<BarChart data={debHitChart} layout="vertical" margin={{ top: 0, right: 16, left: 48, bottom: 0 }}>
<CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" horizontal={false} />
@@ -307,7 +320,7 @@ export function TrainingDashboard({ isEn }: { isEn: boolean }) {
</BarChart>
</ResponsiveContainer>
</ChartCard>
<ChartCard title={isEn ? "Forecast Error by City (lower = better)" : "预报误差 by 城市(越低越好)"}>
<ChartCard title={isEn ? "Usable Recent Error by City (lower = better)" : "可用近期误差 by 城市(越低越好)"}>
<ResponsiveContainer width="100%" height="100%">
<BarChart data={debMaeChart} layout="vertical" margin={{ top: 0, right: 16, left: 48, bottom: 0 }}>
<CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" horizontal={false} />
@@ -401,6 +414,9 @@ export function TrainingDashboard({ isEn }: { isEn: boolean }) {
}
const merged = [...cities.entries()]
.sort((a, b) => {
const aDebRank = debRecentRankIndex.get(a[0]) ?? 9999;
const bDebRank = debRecentRankIndex.get(b[0]) ?? 9999;
if (aDebRank !== bDebRank) return aDebRank - bDebRank;
const aMax = Math.max(a[1].deb?.hit_rate ?? 0, a[1].mu?.hit_rate ?? 0);
const bMax = Math.max(b[1].deb?.hit_rate ?? 0, b[1].mu?.hit_rate ?? 0);
return bMax - aMax;
@@ -0,0 +1,49 @@
import { buildDebRecentRankingRows } from "@/lib/deb-training-ranking";
function assert(condition: unknown, message: string) {
if (!condition) throw new Error(message);
}
export function runTests() {
const rows = buildDebRecentRankingRows([
{
city_id: "legacy",
name: "Legacy Good",
deb: { hit_rate: 95, mae: 0.9, total_days: 40 },
deb_recent: {
recent_7d: { hit_rate: 0, mae: 2.5, samples: 4 },
recent_14d: { hit_rate: 15, mae: 2.1, samples: 8 },
trust_tier: "low",
recommendation: "context_only",
},
},
{
city_id: "usable",
name: "Usable Recent",
deb: { hit_rate: 40, mae: 1.4, total_days: 20 },
deb_recent: {
recent_7d: { hit_rate: 75, mae: 0.7, samples: 4 },
recent_14d: { hit_rate: 70, mae: 0.8, samples: 8 },
trust_tier: "high",
recommendation: "primary",
},
},
{
city_id: "support",
name: "Support Recent",
deb: { hit_rate: 35, mae: 1.5, total_days: 20 },
deb_recent: {
recent_7d: { hit_rate: 50, mae: 1.2, samples: 4 },
recent_14d: { hit_rate: 50, mae: 1.2, samples: 8 },
trust_tier: "medium",
recommendation: "supporting",
},
},
] as any);
assert(rows[0].cityId === "usable", "high-trust recent DEB city should rank first");
assert(rows[1].cityId === "support", "supporting recent DEB city should rank before low-trust legacy hit rate");
assert(rows[2].cityId === "legacy", "low-trust historical performer should rank after usable recent cities");
assert(rows[0].hitRate === 75, "ranking rows should use recent hit rate for chart value");
assert(rows[0].mae === 0.7, "ranking rows should use recent MAE for chart value");
}
@@ -0,0 +1,49 @@
import assert from "node:assert/strict";
import fs from "node:fs";
import path from "node:path";
function readFrontend(...parts: string[]) {
return fs.readFileSync(path.join(process.cwd(), ...parts), "utf8");
}
export function runTests() {
const trainingPage = readFrontend("components", "ops", "training", "TrainingPageClient.tsx");
const charts = readFrontend("components", "ops", "training", "TrainingAccuracyCharts.tsx");
assert.match(
trainingPage,
/buildDebRecentRankingRows/,
"ops training page should share the DEB usable-recent ranking helper with the terminal dashboard",
);
assert.match(
trainingPage,
/debRecentRanked/,
"ops training page should build chart rows from the usable-recent DEB ranking",
);
assert.match(
trainingPage,
/debRecentRankIndex/,
"ops training detail table should follow the same usable-recent DEB order before falling back to historical scores",
);
assert.doesNotMatch(
trainingPage,
/sort\(\s*\(a,\s*b\)\s*=>\s*\(\(b\.deb\?\.hit_rate/,
"ops training DEB chart must not regress to sorting by long-term historical hit rate",
);
assert.match(
charts,
/DEB 可用近期命中率 by 城市/,
"ops DEB hit-rate chart should label the metric as usable recent accuracy",
);
assert.match(
charts,
/DEB 可用近期 MAE by 城市/,
"ops DEB MAE chart should label the metric as usable recent MAE",
);
assert.match(
charts,
/可用近期命中率/,
"ops DEB hit-rate tooltip should describe the usable recent metric",
);
}
@@ -68,7 +68,7 @@ export function TrainingAccuracyCharts({
{debChartData.length > 0 ? (
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<Card>
<CardHeader><CardTitle>DEB by </CardTitle></CardHeader>
<CardHeader><CardTitle>DEB by </CardTitle></CardHeader>
<CardContent>
<div className="h-[400px]">
<ResponsiveContainer>
@@ -78,7 +78,7 @@ export function TrainingAccuracyCharts({
<YAxis domain={[0, 100]} tick={{ fill: "#94a3b8", fontSize: 11 }} unit="%" />
<Tooltip
contentStyle={CHART_TOOLTIP_STYLE}
formatter={(value: unknown) => [`${Number(value).toFixed(1)}%`, "命中率"]}
formatter={(value: unknown) => [`${Number(value).toFixed(1)}%`, "可用近期命中率"]}
/>
<Bar dataKey="hitRate" radius={[4, 4, 0, 0]} maxBarSize={36}>
{debChartData.map((entry, i) => (
@@ -93,7 +93,7 @@ export function TrainingAccuracyCharts({
</Card>
<Card>
<CardHeader><CardTitle>DEB MAE by </CardTitle></CardHeader>
<CardHeader><CardTitle>DEB MAE by </CardTitle></CardHeader>
<CardContent>
<div className="h-[400px]">
<ResponsiveContainer>
@@ -103,7 +103,7 @@ export function TrainingAccuracyCharts({
<YAxis tick={{ fill: "#94a3b8", fontSize: 11 }} unit="°" />
<Tooltip
contentStyle={CHART_TOOLTIP_STYLE}
formatter={(value: unknown) => [`${Number(value).toFixed(1)}°`, "MAE"]}
formatter={(value: unknown) => [`${Number(value).toFixed(1)}°`, "可用近期 MAE"]}
/>
<Bar dataKey="mae" radius={[4, 4, 0, 0]} maxBarSize={36}>
{debChartData.map((entry, i) => (
@@ -6,6 +6,7 @@ import { RefreshCcw, TrendingUp, TrendingDown, Target, Activity } from "lucide-r
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { buildDebRecentRankingRows } from "@/lib/deb-training-ranking";
import { opsApi } from "@/lib/ops-api";
import type { SystemStatusPayload } from "@/types/ops";
import Link from "next/link";
@@ -183,19 +184,23 @@ export function TrainingPageClient() {
const usableWindowLabel = (window?: string) =>
window === "recent_14d" ? "DEB 可用近 14 天命中" : "DEB 可用近 7 天命中";
const debRecentRanked = useMemo(() => buildDebRecentRankingRows(accuracy || []), [accuracy]);
const debRecentRankIndex = useMemo(
() => new Map(debRecentRanked.map((row, index) => [row.cityId, index])),
[debRecentRanked],
);
const debChartData = useMemo(() => {
if (!accuracy?.length) return [];
return accuracy
.filter((c) => c.deb && c.deb.total_days >= 5)
.sort((a, b) => (b.deb?.hit_rate ?? 0) - (a.deb?.hit_rate ?? 0))
return debRecentRanked
.slice(0, 24)
.map((c) => ({
name: c.name,
cityId: c.city_id,
hitRate: Number((c.deb?.hit_rate ?? 0).toFixed(1)),
mae: Number((c.deb?.mae ?? 0).toFixed(1)),
days: c.deb?.total_days ?? 0,
cityId: c.cityId,
hitRate: c.hitRate,
mae: c.mae,
days: c.samples,
}));
}, [accuracy]);
}, [debRecentRanked]);
const muChartData = useMemo(() => {
if (!accuracy?.length) return [];
@@ -212,6 +217,18 @@ export function TrainingPageClient() {
}));
}, [accuracy]);
const sortedAccuracy = useMemo(() => {
if (!accuracy?.length) return [];
return [...accuracy].sort((a, b) => {
const aDebRank = debRecentRankIndex.get(a.city_id) ?? 9999;
const bDebRank = debRecentRankIndex.get(b.city_id) ?? 9999;
if (aDebRank !== bDebRank) return aDebRank - bDebRank;
const aMax = Math.max(a.deb?.hit_rate ?? 0, a.mu?.hit_rate ?? 0);
const bMax = Math.max(b.deb?.hit_rate ?? 0, b.mu?.hit_rate ?? 0);
return bMax - aMax;
});
}, [accuracy, debRecentRankIndex]);
if (loading) return <div className="text-slate-400 animate-pulse">...</div>;
if (!status) return <div className="text-red-400"></div>;
@@ -350,8 +367,8 @@ export function TrainingPageClient() {
</tr>
</thead>
<tbody className="divide-y divide-white/5">
{accuracy && accuracy.length > 0 ? (
accuracy.map((row) => (
{sortedAccuracy.length > 0 ? (
sortedAccuracy.map((row) => (
<tr key={row.city_id} className="hover:bg-white/5 transition-colors">
<td className="px-4 py-3 font-medium text-white capitalize">
{row.name}
+84
View File
@@ -0,0 +1,84 @@
export type DebTrainingMetric = {
hit_rate?: number | null;
mae?: number | null;
total_days?: number;
};
export type DebTrainingWindow = {
hit_rate?: number | null;
mae?: number | null;
samples?: number;
};
export type DebTrainingRecent = {
recent_7d?: DebTrainingWindow | null;
recent_14d?: DebTrainingWindow | null;
trust_tier?: string | null;
recommendation?: string | null;
};
export type DebTrainingCity = {
city_id: string;
name: string;
deb?: DebTrainingMetric | null;
deb_recent?: DebTrainingRecent | null;
};
export type DebRecentRankingRow = {
cityId: string;
name: string;
hitRate: number;
mae: number;
samples: number;
trustScore: number;
usableScore: number;
};
function trustScore(tier?: string | null) {
if (tier === "high") return 3;
if (tier === "medium") return 2;
if (tier === "low") return 1;
return 0;
}
function usableScore(recommendation?: string | null) {
if (recommendation === "primary") return 2;
if (recommendation === "supporting") return 1;
return 0;
}
function selectRecentWindow(recent?: DebTrainingRecent | null): DebTrainingWindow | null {
const recent7 = recent?.recent_7d || null;
if (Number(recent7?.samples || 0) > 0) return recent7;
const recent14 = recent?.recent_14d || null;
if (Number(recent14?.samples || 0) > 0) return recent14;
return null;
}
export function buildDebRecentRankingRows(cities: DebTrainingCity[]): DebRecentRankingRow[] {
return (cities || [])
.filter((city) => city.deb)
.map((city) => {
const recentWindow = selectRecentWindow(city.deb_recent);
return {
cityId: city.city_id,
name: city.name,
hitRate: Number(
(recentWindow?.hit_rate ?? city.deb?.hit_rate ?? 0).toFixed(1),
),
mae: Number(
(recentWindow?.mae ?? city.deb?.mae ?? 0).toFixed(2),
),
samples: Number(recentWindow?.samples || 0),
trustScore: trustScore(city.deb_recent?.trust_tier),
usableScore: usableScore(city.deb_recent?.recommendation),
};
})
.sort((a, b) => {
if (a.usableScore !== b.usableScore) return b.usableScore - a.usableScore;
if (a.trustScore !== b.trustScore) return b.trustScore - a.trustScore;
if (a.hitRate !== b.hitRate) return b.hitRate - a.hitRate;
if (a.samples !== b.samples) return b.samples - a.samples;
return a.name.localeCompare(b.name);
});
}