gavindiaz/PolyWeather
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add history model context and widen signal push window

Browse Source
This commit is contained in:
2569718930@qq.com
2026-04-17 19:49:01 +08:00
parent ce7a037b6d
commit 449eb48d8b
8 changed files with 380 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/dashboard/Dashboard.module.css
+101
View File
@@ -2769,6 +2769,14 @@
background: rgba(15, 23, 42, 0.42);
}
.root :global(.history-modal .history-model-reference) {
margin-top: 18px;
padding: 14px 16px;
border: 1px solid rgba(34, 211, 238, 0.18);
border-radius: 16px;
background: rgba(8, 47, 73, 0.2);
}
.root :global(.history-modal .history-peak-reference-title) {
color: var(--text-primary);
font-size: 14px;
@@ -2776,6 +2784,16 @@
margin-bottom: 10px;
}
.root :global(.history-modal .history-model-reference-scroll) {
display: grid;
gap: 8px;
max-height: 360px;
overflow-y: auto;
padding-right: 6px;
scrollbar-width: thin;
scrollbar-color: rgba(34, 211, 238, 0.5) rgba(15, 23, 42, 0.32);
}
.root :global(.history-modal .history-peak-reference-scroll) {
display: grid;
gap: 8px;
@@ -2820,12 +2838,69 @@
background: rgba(255, 255, 255, 0.03);
}
.root :global(.history-modal .history-model-reference-row) {
display: grid;
grid-template-columns: minmax(72px, 88px) 1fr;
gap: 10px;
padding: 10px 12px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.03);
}
.root :global(.history-modal .history-peak-reference-date) {
color: var(--text-secondary);
font-size: 12px;
font-weight: 700;
}
.root :global(.history-modal .history-model-reference-body) {
display: grid;
gap: 8px;
min-width: 0;
}
.root :global(.history-modal .history-model-reference-summary) {
display: flex;
flex-wrap: wrap;
gap: 10px 14px;
color: var(--text-secondary);
font-size: 12px;
}
.root :global(.history-modal .history-model-reference-summary strong) {
color: var(--text-primary);
}
.root :global(.history-modal .history-model-reference-models) {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
}
.root :global(.history-modal .history-model-reference-model) {
display: grid;
gap: 3px;
min-width: 0;
padding: 8px 10px;
border: 1px solid rgba(148, 163, 184, 0.12);
border-radius: 8px;
background: rgba(15, 23, 42, 0.38);
color: var(--text-secondary);
font-size: 11px;
}
.root :global(.history-modal .history-model-name) {
overflow: hidden;
color: var(--accent-cyan);
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
.root :global(.history-modal .history-model-error) {
color: var(--text-muted);
}
.root :global(.history-modal .history-peak-reference-meta) {
color: var(--text-secondary);
font-size: 12px;
@@ -2857,6 +2932,14 @@
.root :global(.history-modal .history-peak-reference-scroll) {
max-height: 320px;
}
.root :global(.history-modal .history-model-reference-scroll) {
max-height: 320px;
}
.root :global(.history-modal .history-model-reference-models) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
@@ -2921,15 +3004,33 @@
padding: 12px;
}
.root :global(.history-modal .history-model-reference) {
padding: 12px;
}
.root :global(.history-modal .history-peak-reference-scroll) {
max-height: 260px;
padding-right: 2px;
}
.root :global(.history-modal .history-model-reference-scroll) {
max-height: 260px;
padding-right: 2px;
}
.root :global(.history-modal .history-peak-reference-row) {
grid-template-columns: 1fr;
gap: 6px;
}
.root :global(.history-modal .history-model-reference-row) {
grid-template-columns: 1fr;
gap: 6px;
}
.root :global(.history-modal .history-model-reference-models) {
grid-template-columns: 1fr;
}
}
/* ── Info Button ── */
frontend/components/dashboard/HistoryModal.tsx
+88
View File
@@ -199,6 +199,19 @@ export function HistoryModal() {
.reverse(),
[summary.recentData],
);
const modelReferenceRows = useMemo(
() =>
summary.recentData
.filter(
(row) =>
row.actual != null &&
row.model_reference?.available &&
(row.model_reference.models?.length || 0) > 0,
)
.slice(-5)
.reverse(),
[summary.recentData],
);
if (!isOpen) return null;
@@ -383,6 +396,81 @@ export function HistoryModal() {
)}
</div>
{!error && <HistoryChart />}
{!error && modelReferenceRows.length > 0 && (
<div className="history-model-reference">
<div className="modal-section-heading">
<div className="modal-section-kicker">
{locale === "en-US" ? "Reference layer" : "参考层"}
</div>
<div className="history-peak-reference-title">
{locale === "en-US"
? "Model Reference at Cutoff"
: "当时模型参考"}
</div>
<div className="modal-section-note">
{locale === "en-US"
? "These are archived model snapshots used for audit context. Settlement truth still comes only from the finalized observation source."
: "这里展示当时归档的模型快照，仅用于解释判断背景；结算真值仍只来自最终实况来源。"}
</div>
</div>
<div className="history-model-reference-scroll">
{modelReferenceRows.map((row) => {
const models = (row.model_reference?.models || []).slice(0, 6);
return (
<div key={row.date} className="history-model-reference-row">
<div className="history-peak-reference-date">
{row.date}
</div>
<div className="history-model-reference-body">
<div className="history-model-reference-summary">
<span>
{locale === "en-US" ? "Actual" : "最终实测"}{" "}
<strong>
{row.actual}
{store.selectedDetail?.temp_symbol || "°C"}
</strong>
</span>
<span>
DEB{" "}
<strong>
{row.model_reference?.deb?.value ?? row.deb ?? "--"}
{store.selectedDetail?.temp_symbol || "°C"}
</strong>
{row.model_reference?.deb?.error != null
? ` / ${locale === "en-US" ? "err" : "误差"} ${row.model_reference.deb.error}${store.selectedDetail?.temp_symbol || "°C"}`
: ""}
</span>
</div>
<div className="history-model-reference-models">
{models.map((model) => (
<div
key={`${row.date}-${model.model}`}
className="history-model-reference-model"
>
<span className="history-model-name">
{model.model}
</span>
<span>
{model.value}
{store.selectedDetail?.temp_symbol || "°C"}
</span>
<span className="history-model-error">
{model.error != null
? `${locale === "en-US" ? "err" : "误差"} ${model.error}${store.selectedDetail?.temp_symbol || "°C"}`
: locale === "en-US"
? "pending"
: "待结算"}
</span>
</div>
))}
</div>
</div>
</div>
);
})}
</div>
</div>
)}
{!error && settledPeakRows.length > 0 && (
<div className="history-peak-reference">
<div className="modal-section-heading">