Remove probability hub page
This commit is contained in:
2569718930@qq.com
@@ -1,11 +0,0 @@
|
||||
import type { Metadata } from "next";
|
||||
import { ProbabilityHubPage } from "@/components/probability-hub/ProbabilityHubPage";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "PolyWeather - 概率判断总览",
|
||||
description: "集中查看 52 个城市的 EMOS 概率判断与市场合约桶对比。",
|
||||
};
|
||||
|
||||
export default function ProbabilitiesPage() {
|
||||
return <ProbabilityHubPage />;
|
||||
}
|
||||
@@ -9,7 +9,6 @@ import {
|
||||
RotateCw,
|
||||
BookOpen,
|
||||
Sparkles,
|
||||
BarChart3,
|
||||
House,
|
||||
} from "lucide-react";
|
||||
import { useDashboardStore } from "@/hooks/useDashboardStore";
|
||||
@@ -44,8 +43,6 @@ export function HeaderBar({
|
||||
const docsActive = pathname?.startsWith("/docs");
|
||||
const homeHref = "/";
|
||||
const homeActive = pathname === "/";
|
||||
const probabilityHubHref = "/probabilities";
|
||||
const probabilityHubActive = pathname?.startsWith("/probabilities");
|
||||
const trialPromoLabel =
|
||||
locale === "en-US"
|
||||
? "New users get 3-day Pro trial"
|
||||
@@ -154,16 +151,6 @@ export function HeaderBar({
|
||||
{t("header.docs")}
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href={probabilityHubHref}
|
||||
className={clsx("info-btn", probabilityHubActive && "active")}
|
||||
title={t("header.probabilityHubAria")}
|
||||
aria-label={t("header.probabilityHubAria")}
|
||||
>
|
||||
<BarChart3 size={14} strokeWidth={2} />
|
||||
{t("header.probabilityHub")}
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/account"
|
||||
className="trial-promo-badge"
|
||||
|
||||
@@ -1,261 +0,0 @@
|
||||
.pageRoot {
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.pageBody {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 72px 20px 24px;
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.heroCard {
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 14px;
|
||||
padding: 16px 18px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.heroText {
|
||||
margin-top: 8px;
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.heroMeta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.heroPill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-height: 30px;
|
||||
padding: 6px 10px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(34, 211, 238, 0.18);
|
||||
background: rgba(8, 47, 73, 0.24);
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.heroPill strong {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.errorCard {
|
||||
border: 1px solid rgba(239, 68, 68, 0.24);
|
||||
border-radius: 12px;
|
||||
padding: 12px 14px;
|
||||
background: rgba(127, 29, 29, 0.16);
|
||||
color: #fecaca;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.toolbarGroup {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.toolbarLabel {
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.toolbarButton {
|
||||
min-height: 30px;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.16);
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
border-color 0.18s ease,
|
||||
background 0.18s ease,
|
||||
color 0.18s ease;
|
||||
}
|
||||
|
||||
.toolbarButton:hover {
|
||||
border-color: rgba(34, 211, 238, 0.28);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.toolbarButton.active {
|
||||
border-color: rgba(34, 211, 238, 0.42);
|
||||
background: rgba(8, 47, 73, 0.28);
|
||||
color: #e0fbff;
|
||||
}
|
||||
|
||||
.toolbarSummary {
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 16px;
|
||||
padding: 14px;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
.cardHead {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.cardTitleBlock {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.cardTitle {
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.cardSubTitle {
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.cardMeta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.metaChip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
min-height: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.metaChip + .metaChip::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 10px;
|
||||
margin-right: 6px;
|
||||
background: rgba(148, 163, 184, 0.22);
|
||||
}
|
||||
|
||||
.metaChip strong {
|
||||
color: var(--text-primary);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.loadingGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.loadingCard {
|
||||
height: 280px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
background:
|
||||
linear-gradient(
|
||||
90deg,
|
||||
rgba(255, 255, 255, 0.02) 0%,
|
||||
rgba(255, 255, 255, 0.05) 50%,
|
||||
rgba(255, 255, 255, 0.02) 100%
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
animation: probabilityHubShimmer 1.6s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes probabilityHubShimmer {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.grid,
|
||||
.loadingGrid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.pageBody {
|
||||
padding: 68px 12px 18px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.heroCard,
|
||||
.card {
|
||||
border-radius: 12px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
@@ -1,674 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import clsx from "clsx";
|
||||
import dashboardStyles from "@/components/dashboard/Dashboard.module.css";
|
||||
import { HeaderBar } from "@/components/dashboard/HeaderBar";
|
||||
import { ProbabilityDistribution } from "@/components/dashboard/PanelSections";
|
||||
import { dashboardClient } from "@/lib/dashboard-client";
|
||||
import type { CityDetail, CityListItem } from "@/lib/dashboard-types";
|
||||
import { I18nProvider, useI18n } from "@/hooks/useI18n";
|
||||
import { DashboardStoreProvider } from "@/hooks/useDashboardStore";
|
||||
import styles from "./ProbabilityHubPage.module.css";
|
||||
|
||||
const DETAIL_BATCH_SIZE = 6;
|
||||
const FULL_REFRESH_INTERVAL_MS = 60_000;
|
||||
const MARKET_REFRESH_INTERVAL_MS = 20_000;
|
||||
|
||||
type FilterMode = "all" | "market" | "high-risk";
|
||||
type SortMode = "risk" | "edge" | "probability" | "updated";
|
||||
|
||||
function sortCities(cities: CityListItem[]) {
|
||||
const riskOrder: Record<string, number> = {
|
||||
high: 0,
|
||||
medium: 1,
|
||||
low: 2,
|
||||
};
|
||||
|
||||
return [...cities].sort((a, b) => {
|
||||
const riskDelta =
|
||||
(riskOrder[String(a.risk_level || "").toLowerCase()] ?? 9) -
|
||||
(riskOrder[String(b.risk_level || "").toLowerCase()] ?? 9);
|
||||
if (riskDelta !== 0) return riskDelta;
|
||||
return String(a.display_name || a.name).localeCompare(
|
||||
String(b.display_name || b.name),
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
function getRiskRank(level?: string | null) {
|
||||
const riskOrder: Record<string, number> = {
|
||||
high: 0,
|
||||
medium: 1,
|
||||
low: 2,
|
||||
};
|
||||
return riskOrder[String(level || "").toLowerCase()] ?? 9;
|
||||
}
|
||||
|
||||
function getProbabilityPeak(detail?: CityDetail | null) {
|
||||
const buckets = Array.isArray(detail?.probabilities?.distribution_all)
|
||||
? detail.probabilities?.distribution_all
|
||||
: Array.isArray(detail?.probabilities?.distribution)
|
||||
? detail.probabilities?.distribution
|
||||
: [];
|
||||
return buckets.reduce((best, bucket) => {
|
||||
const next = Number(bucket?.probability ?? -1);
|
||||
return next > best ? next : best;
|
||||
}, -1);
|
||||
}
|
||||
|
||||
function getPositiveEdge(detail?: CityDetail | null) {
|
||||
const analysis = detail?.market_scan?.price_analysis;
|
||||
const yesEdge = Number(analysis?.yes?.edge ?? Number.NEGATIVE_INFINITY);
|
||||
const noEdge = Number(analysis?.no?.edge ?? Number.NEGATIVE_INFINITY);
|
||||
return Math.max(yesEdge, noEdge, Number.NEGATIVE_INFINITY);
|
||||
}
|
||||
|
||||
function isActiveMarketScan(detail?: CityDetail | null) {
|
||||
const scan = detail?.market_scan;
|
||||
if (!scan?.available) return false;
|
||||
const primary = scan.primary_market as
|
||||
| ({
|
||||
active?: boolean | null;
|
||||
closed?: boolean | null;
|
||||
accepting_orders?: boolean | null;
|
||||
tradable?: boolean | null;
|
||||
ended_at_utc?: string | null;
|
||||
} & Record<string, unknown>)
|
||||
| null
|
||||
| undefined;
|
||||
if (!primary) return false;
|
||||
if (primary.closed === true) return false;
|
||||
if (primary.active === false) return false;
|
||||
if (primary.accepting_orders === false) return false;
|
||||
if (primary.tradable === false) return false;
|
||||
if (primary.ended_at_utc) {
|
||||
const endedAt = new Date(String(primary.ended_at_utc)).getTime();
|
||||
if (Number.isFinite(endedAt) && endedAt <= Date.now()) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function hasMarket(detail?: CityDetail | null) {
|
||||
const scan = detail?.market_scan;
|
||||
return Boolean(
|
||||
isActiveMarketScan(detail) &&
|
||||
scan &&
|
||||
((Array.isArray(scan.all_buckets) && scan.all_buckets.length > 0) ||
|
||||
(Array.isArray(scan.top_buckets) && scan.top_buckets.length > 0)),
|
||||
);
|
||||
}
|
||||
|
||||
function ProbabilityHubScreen() {
|
||||
const { locale } = useI18n();
|
||||
const [cities, setCities] = useState<CityListItem[]>([]);
|
||||
const [detailsByName, setDetailsByName] = useState<Record<string, CityDetail>>({});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [lastUpdatedAt, setLastUpdatedAt] = useState<string | null>(null);
|
||||
const [lastMarketUpdatedAt, setLastMarketUpdatedAt] = useState<string | null>(null);
|
||||
const [filterMode, setFilterMode] = useState<FilterMode>("all");
|
||||
const [sortMode, setSortMode] = useState<SortMode>("risk");
|
||||
const [visibleCityNames, setVisibleCityNames] = useState<Set<string>>(new Set());
|
||||
const cardNodesRef = useRef(new Map<string, HTMLElement>());
|
||||
const initialMarketRequestsRef = useRef(new Set<string>());
|
||||
const marketRefreshInFlightRef = useRef(false);
|
||||
const detailsByNameRef = useRef(detailsByName);
|
||||
const citiesRef = useRef(cities);
|
||||
|
||||
useEffect(() => {
|
||||
detailsByNameRef.current = detailsByName;
|
||||
}, [detailsByName]);
|
||||
|
||||
useEffect(() => {
|
||||
citiesRef.current = cities;
|
||||
}, [cities]);
|
||||
|
||||
const fetchCityDetails = useCallback(
|
||||
async (cityList: CityListItem[], force: boolean) => {
|
||||
const fetched: Record<string, CityDetail> = {};
|
||||
|
||||
for (let index = 0; index < cityList.length; index += DETAIL_BATCH_SIZE) {
|
||||
const batch = cityList.slice(index, index + DETAIL_BATCH_SIZE);
|
||||
const results = await Promise.allSettled(
|
||||
batch.map((city) =>
|
||||
dashboardClient.getCityDetail(city.name, {
|
||||
depth: "panel",
|
||||
force,
|
||||
}),
|
||||
),
|
||||
);
|
||||
|
||||
const patch: Record<string, CityDetail> = {};
|
||||
results.forEach((result, batchIndex) => {
|
||||
if (result.status !== "fulfilled") return;
|
||||
const detail = result.value;
|
||||
fetched[batch[batchIndex].name] = detail;
|
||||
patch[batch[batchIndex].name] = detail;
|
||||
});
|
||||
|
||||
if (Object.keys(patch).length) {
|
||||
setDetailsByName((previous) => ({
|
||||
...previous,
|
||||
...patch,
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
return fetched;
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const refreshMarketScans = useCallback(async (
|
||||
sourceDetails?: Record<string, CityDetail>,
|
||||
sourceCities?: CityListItem[],
|
||||
) => {
|
||||
if (marketRefreshInFlightRef.current) return;
|
||||
const detailMap = sourceDetails ? { ...sourceDetails } : { ...detailsByName };
|
||||
const cityList = sourceCities || cities;
|
||||
const loadedCities = cityList.filter((city) => detailMap[city.name]);
|
||||
if (!loadedCities.length) return;
|
||||
|
||||
let touched = false;
|
||||
marketRefreshInFlightRef.current = true;
|
||||
|
||||
try {
|
||||
for (let index = 0; index < loadedCities.length; index += DETAIL_BATCH_SIZE) {
|
||||
const batch = loadedCities.slice(index, index + DETAIL_BATCH_SIZE);
|
||||
const results = await Promise.allSettled(
|
||||
batch.map((city) =>
|
||||
dashboardClient.getCityMarketScan(city.name, {
|
||||
force: false,
|
||||
targetDate: detailMap[city.name]?.local_date || null,
|
||||
marketSlug: detailMap[city.name]?.market_scan?.selected_slug || null,
|
||||
}),
|
||||
),
|
||||
);
|
||||
|
||||
const patch: Record<string, CityDetail> = {};
|
||||
results.forEach((result, batchIndex) => {
|
||||
if (result.status !== "fulfilled") return;
|
||||
const city = batch[batchIndex];
|
||||
const previous = detailMap[city.name] || detailsByName[city.name];
|
||||
if (!previous) return;
|
||||
const nextMarketScan = result.value.market_scan || previous.market_scan;
|
||||
if (!nextMarketScan) return;
|
||||
patch[city.name] = {
|
||||
...previous,
|
||||
market_scan: nextMarketScan,
|
||||
};
|
||||
});
|
||||
|
||||
if (Object.keys(patch).length) {
|
||||
touched = true;
|
||||
Object.assign(detailMap, patch);
|
||||
setDetailsByName((previous) => ({
|
||||
...previous,
|
||||
...patch,
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
if (touched) {
|
||||
setLastMarketUpdatedAt(new Date().toISOString());
|
||||
}
|
||||
} finally {
|
||||
marketRefreshInFlightRef.current = false;
|
||||
}
|
||||
}, [cities, detailsByName]);
|
||||
|
||||
const loadAll = useCallback(async (force = false) => {
|
||||
setError(null);
|
||||
setRefreshing(true);
|
||||
if (!citiesRef.current.length || force) {
|
||||
setLoading(true);
|
||||
}
|
||||
if (force) {
|
||||
initialMarketRequestsRef.current.clear();
|
||||
}
|
||||
try {
|
||||
const cityList = sortCities(await dashboardClient.getCities());
|
||||
setCities(cityList);
|
||||
await fetchCityDetails(cityList, force);
|
||||
setLastUpdatedAt(new Date().toISOString());
|
||||
} catch (loadError) {
|
||||
if (!Object.keys(detailsByNameRef.current).length && !citiesRef.current.length) {
|
||||
setError(
|
||||
loadError instanceof Error
|
||||
? loadError.message
|
||||
: locale === "en-US"
|
||||
? "Failed to load probability hub"
|
||||
: "加载概率页失败",
|
||||
);
|
||||
} else {
|
||||
console.warn("probability hub refresh failed", loadError);
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setRefreshing(false);
|
||||
}
|
||||
}, [fetchCityDetails, locale]);
|
||||
|
||||
const retryMissingCities = useCallback(async () => {
|
||||
if (!cities.length) return;
|
||||
const missingCities = cities.filter((city) => !detailsByName[city.name]);
|
||||
if (!missingCities.length) return;
|
||||
|
||||
try {
|
||||
const fetched = await fetchCityDetails(missingCities, true);
|
||||
setLastUpdatedAt(new Date().toISOString());
|
||||
const visibleMissing = missingCities.filter((city) => visibleCityNames.has(city.name));
|
||||
if (visibleMissing.length) {
|
||||
await refreshMarketScans(fetched, visibleMissing);
|
||||
}
|
||||
} catch {
|
||||
// keep silent; page-level retry should not override the main error banner
|
||||
}
|
||||
}, [cities, detailsByName, fetchCityDetails, refreshMarketScans, visibleCityNames]);
|
||||
|
||||
useEffect(() => {
|
||||
void loadAll(false);
|
||||
}, [loadAll]);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = window.setInterval(() => {
|
||||
if (document.visibilityState === "hidden") return;
|
||||
void retryMissingCities();
|
||||
}, 20_000);
|
||||
|
||||
return () => window.clearInterval(timer);
|
||||
}, [retryMissingCities]);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = window.setInterval(() => {
|
||||
if (document.visibilityState === "hidden") return;
|
||||
void loadAll(false);
|
||||
}, FULL_REFRESH_INTERVAL_MS);
|
||||
|
||||
return () => window.clearInterval(timer);
|
||||
}, [loadAll]);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = window.setInterval(() => {
|
||||
if (document.visibilityState === "hidden") return;
|
||||
const visibleCitiesForRefresh = cities.filter((city) => visibleCityNames.has(city.name));
|
||||
if (!visibleCitiesForRefresh.length) return;
|
||||
void refreshMarketScans(undefined, visibleCitiesForRefresh);
|
||||
}, MARKET_REFRESH_INTERVAL_MS);
|
||||
|
||||
return () => window.clearInterval(timer);
|
||||
}, [cities, refreshMarketScans, visibleCityNames]);
|
||||
|
||||
const loadedCount = Object.keys(detailsByName).length;
|
||||
const cityCount = cities.length;
|
||||
const readyCards = useMemo(
|
||||
() => cities.filter((city) => detailsByName[city.name]).length,
|
||||
[cities, detailsByName],
|
||||
);
|
||||
const marketReadyCount = useMemo(
|
||||
() => cities.filter((city) => hasMarket(detailsByName[city.name])).length,
|
||||
[cities, detailsByName],
|
||||
);
|
||||
const positiveEdgeCount = useMemo(
|
||||
() =>
|
||||
cities.filter((city) => {
|
||||
const edge = getPositiveEdge(detailsByName[city.name]);
|
||||
return Number.isFinite(edge) && edge > 0;
|
||||
}).length,
|
||||
[cities, detailsByName],
|
||||
);
|
||||
const visibleCities = useMemo(() => {
|
||||
const filtered = cities.filter((city) => {
|
||||
const detail = detailsByName[city.name];
|
||||
if (filterMode === "market") return hasMarket(detail);
|
||||
if (filterMode === "high-risk") {
|
||||
return String(detail?.risk?.level || city.risk_level || "").toLowerCase() === "high";
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
return [...filtered].sort((a, b) => {
|
||||
const detailA = detailsByName[a.name];
|
||||
const detailB = detailsByName[b.name];
|
||||
|
||||
if (sortMode === "edge") {
|
||||
const edgeDelta = getPositiveEdge(detailB) - getPositiveEdge(detailA);
|
||||
if (Number.isFinite(edgeDelta) && edgeDelta !== 0) return edgeDelta;
|
||||
}
|
||||
|
||||
if (sortMode === "probability") {
|
||||
const probabilityDelta = getProbabilityPeak(detailB) - getProbabilityPeak(detailA);
|
||||
if (Number.isFinite(probabilityDelta) && probabilityDelta !== 0) return probabilityDelta;
|
||||
}
|
||||
|
||||
if (sortMode === "updated") {
|
||||
const updatedDelta =
|
||||
new Date(detailB?.updated_at || 0).getTime() -
|
||||
new Date(detailA?.updated_at || 0).getTime();
|
||||
if (updatedDelta !== 0) return updatedDelta;
|
||||
}
|
||||
|
||||
const riskDelta =
|
||||
getRiskRank(detailA?.risk?.level || a.risk_level) -
|
||||
getRiskRank(detailB?.risk?.level || b.risk_level);
|
||||
if (riskDelta !== 0) return riskDelta;
|
||||
|
||||
return String(a.display_name || a.name).localeCompare(
|
||||
String(b.display_name || b.name),
|
||||
);
|
||||
});
|
||||
}, [cities, detailsByName, filterMode, sortMode]);
|
||||
|
||||
const visibleCitiesKey = useMemo(
|
||||
() => visibleCities.map((city) => city.name).join("|"),
|
||||
[visibleCities],
|
||||
);
|
||||
|
||||
const setCardNode = useCallback((cityName: string, node: HTMLElement | null) => {
|
||||
if (node) {
|
||||
cardNodesRef.current.set(cityName, node);
|
||||
} else {
|
||||
cardNodesRef.current.delete(cityName);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof IntersectionObserver === "undefined") {
|
||||
setVisibleCityNames(new Set(visibleCities.slice(0, DETAIL_BATCH_SIZE).map((city) => city.name)));
|
||||
return;
|
||||
}
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
setVisibleCityNames((previous) => {
|
||||
const next = new Set(previous);
|
||||
for (const entry of entries) {
|
||||
const cityName = (entry.target as HTMLElement).dataset.cityName;
|
||||
if (!cityName) continue;
|
||||
if (entry.isIntersecting) {
|
||||
next.add(cityName);
|
||||
} else {
|
||||
next.delete(cityName);
|
||||
}
|
||||
}
|
||||
return next;
|
||||
});
|
||||
},
|
||||
{
|
||||
root: null,
|
||||
rootMargin: "900px 0px",
|
||||
threshold: 0.01,
|
||||
},
|
||||
);
|
||||
|
||||
const namesInView = new Set(visibleCities.map((city) => city.name));
|
||||
for (const [cityName, node] of cardNodesRef.current.entries()) {
|
||||
if (namesInView.has(cityName)) {
|
||||
observer.observe(node);
|
||||
}
|
||||
}
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, [visibleCitiesKey, visibleCities]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!visibleCityNames.size) return;
|
||||
const citiesToWarm = cities.filter((city) => {
|
||||
if (!visibleCityNames.has(city.name)) return false;
|
||||
if (!detailsByName[city.name]) return false;
|
||||
if (initialMarketRequestsRef.current.has(city.name)) return false;
|
||||
return true;
|
||||
});
|
||||
if (!citiesToWarm.length) return;
|
||||
citiesToWarm.forEach((city) => initialMarketRequestsRef.current.add(city.name));
|
||||
void refreshMarketScans(undefined, citiesToWarm);
|
||||
}, [cities, detailsByName, refreshMarketScans, visibleCityNames]);
|
||||
|
||||
return (
|
||||
<div className={clsx(dashboardStyles.root, styles.pageRoot)}>
|
||||
<HeaderBar
|
||||
refreshAction={() => loadAll(true)}
|
||||
refreshSpinning={refreshing}
|
||||
/>
|
||||
<main className={styles.pageBody}>
|
||||
<section className={styles.hero}>
|
||||
<div className={styles.heroCard}>
|
||||
<div className={styles.heroTitle}>
|
||||
{locale === "en-US"
|
||||
? "52-city probability hub"
|
||||
: "52 城市概率判断总览"}
|
||||
</div>
|
||||
<div className={styles.heroText}>
|
||||
{locale === "en-US"
|
||||
? "This page centralizes the intraday probability block for all monitored cities. The goal is fast scanning: see calibrated EMOS probabilities, market bucket alignment, and price comparison without opening each city modal one by one."
|
||||
: "这里把 52 个监控城市的概率判断板块集中到一个页面，方便直接横向扫一遍，不用逐个打开城市弹窗。重点看 EMOS 校准概率、市场合约桶聚合，以及价格对比。"}
|
||||
</div>
|
||||
<div className={styles.heroMeta}>
|
||||
<span className={styles.heroPill}>
|
||||
{locale === "en-US" ? "Cities" : "城市数"} <strong>{cityCount || "--"}</strong>
|
||||
</span>
|
||||
<span className={styles.heroPill}>
|
||||
{locale === "en-US" ? "Ready" : "已加载"} <strong>{readyCards}</strong>
|
||||
</span>
|
||||
<span className={styles.heroPill}>
|
||||
{locale === "en-US" ? "Market" : "有市场"} <strong>{marketReadyCount}</strong>
|
||||
</span>
|
||||
<span className={styles.heroPill}>
|
||||
{locale === "en-US" ? "Positive edge" : "有优势"} <strong>{positiveEdgeCount}</strong>
|
||||
</span>
|
||||
<span className={styles.heroPill}>
|
||||
{locale === "en-US" ? "Updated" : "更新时间"}{" "}
|
||||
<strong>
|
||||
{lastUpdatedAt
|
||||
? new Date(lastUpdatedAt).toLocaleTimeString(
|
||||
locale === "en-US" ? "en-US" : "zh-CN",
|
||||
{
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
second: "2-digit",
|
||||
},
|
||||
)
|
||||
: "--"}
|
||||
</strong>
|
||||
</span>
|
||||
<span className={styles.heroPill}>
|
||||
{locale === "en-US" ? "Market tick" : "价格更新"}{" "}
|
||||
<strong>
|
||||
{lastMarketUpdatedAt
|
||||
? new Date(lastMarketUpdatedAt).toLocaleTimeString(
|
||||
locale === "en-US" ? "en-US" : "zh-CN",
|
||||
{
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
second: "2-digit",
|
||||
},
|
||||
)
|
||||
: "--"}
|
||||
</strong>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error ? <div className={styles.errorCard}>{error}</div> : null}
|
||||
</section>
|
||||
|
||||
<section className={styles.toolbar}>
|
||||
<div className={styles.toolbarGroup}>
|
||||
<span className={styles.toolbarLabel}>
|
||||
{locale === "en-US" ? "Filter" : "筛选"}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
className={clsx(styles.toolbarButton, filterMode === "all" && styles.active)}
|
||||
onClick={() => setFilterMode("all")}
|
||||
>
|
||||
{locale === "en-US" ? "All" : "全部"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={clsx(styles.toolbarButton, filterMode === "market" && styles.active)}
|
||||
onClick={() => setFilterMode("market")}
|
||||
>
|
||||
{locale === "en-US" ? "With market" : "仅看有市场"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={clsx(styles.toolbarButton, filterMode === "high-risk" && styles.active)}
|
||||
onClick={() => setFilterMode("high-risk")}
|
||||
>
|
||||
{locale === "en-US" ? "High risk" : "仅看高风险"}
|
||||
</button>
|
||||
</div>
|
||||
<div className={styles.toolbarGroup}>
|
||||
<span className={styles.toolbarLabel}>
|
||||
{locale === "en-US" ? "Sort" : "排序"}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
className={clsx(styles.toolbarButton, sortMode === "risk" && styles.active)}
|
||||
onClick={() => setSortMode("risk")}
|
||||
>
|
||||
{locale === "en-US" ? "Risk" : "风险"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={clsx(styles.toolbarButton, sortMode === "edge" && styles.active)}
|
||||
onClick={() => setSortMode("edge")}
|
||||
>
|
||||
{locale === "en-US" ? "Edge" : "优势"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={clsx(styles.toolbarButton, sortMode === "probability" && styles.active)}
|
||||
onClick={() => setSortMode("probability")}
|
||||
>
|
||||
{locale === "en-US" ? "Probability" : "概率"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={clsx(styles.toolbarButton, sortMode === "updated" && styles.active)}
|
||||
onClick={() => setSortMode("updated")}
|
||||
>
|
||||
{locale === "en-US" ? "Updated" : "更新时间"}
|
||||
</button>
|
||||
</div>
|
||||
<div className={styles.toolbarSummary}>
|
||||
{locale === "en-US"
|
||||
? `${visibleCities.length} cards in view`
|
||||
: `当前显示 ${visibleCities.length} 张卡片`}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{loading && loadedCount === 0 ? (
|
||||
<div className={styles.loadingGrid}>
|
||||
{Array.from({ length: 6 }).map((_, index) => (
|
||||
<div key={index} className={styles.loadingCard} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className={styles.grid}>
|
||||
{visibleCities.map((city) => {
|
||||
const detail = detailsByName[city.name];
|
||||
if (!detail) {
|
||||
return (
|
||||
<section
|
||||
key={city.name}
|
||||
ref={(node) => setCardNode(city.name, node)}
|
||||
data-city-name={city.name}
|
||||
className={styles.card}
|
||||
>
|
||||
<div className={styles.cardHead}>
|
||||
<div className={styles.cardTitleBlock}>
|
||||
<div className={styles.cardTitle}>{city.display_name}</div>
|
||||
<div className={styles.cardSubTitle}>
|
||||
{city.airport} ({city.icao})
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.cardSubTitle}>
|
||||
{locale === "en-US"
|
||||
? "Probability block is syncing..."
|
||||
: "概率板块同步中..."}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<section
|
||||
key={city.name}
|
||||
ref={(node) => setCardNode(city.name, node)}
|
||||
data-city-name={city.name}
|
||||
className={styles.card}
|
||||
>
|
||||
<div className={styles.cardHead}>
|
||||
<div className={styles.cardTitleBlock}>
|
||||
<div className={styles.cardTitle}>{detail.display_name}</div>
|
||||
<div className={styles.cardSubTitle}>
|
||||
{detail.risk?.airport || city.airport} ({detail.risk?.icao || city.icao})
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.cardMeta}>
|
||||
<span className={styles.metaChip}>
|
||||
{locale === "en-US" ? "Current" : "当前"}{" "}
|
||||
<strong>
|
||||
{detail.current?.temp != null
|
||||
? `${detail.current.temp}${detail.temp_symbol}`
|
||||
: "--"}
|
||||
</strong>
|
||||
</span>
|
||||
<span className={styles.metaChip}>
|
||||
{locale === "en-US" ? "Obs" : "观测"}{" "}
|
||||
<strong>{detail.current?.obs_time || "--"}</strong>
|
||||
</span>
|
||||
<span className={styles.metaChip}>
|
||||
{locale === "en-US" ? "Updated" : "更新"}{" "}
|
||||
<strong>
|
||||
{detail.updated_at
|
||||
? new Date(detail.updated_at).toLocaleTimeString(
|
||||
locale === "en-US" ? "en-US" : "zh-CN",
|
||||
{
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
},
|
||||
)
|
||||
: "--"}
|
||||
</strong>
|
||||
</span>
|
||||
</div>
|
||||
{(() => {
|
||||
const activeMarketScan = isActiveMarketScan(detail)
|
||||
? detail.market_scan
|
||||
: null;
|
||||
return (
|
||||
<ProbabilityDistribution
|
||||
detail={detail}
|
||||
hideTitle
|
||||
marketScan={activeMarketScan}
|
||||
/>
|
||||
);
|
||||
})()}
|
||||
</section>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ProbabilityHubPage() {
|
||||
return (
|
||||
<I18nProvider>
|
||||
<DashboardStoreProvider>
|
||||
<ProbabilityHubScreen />
|
||||
</DashboardStoreProvider>
|
||||
</I18nProvider>
|
||||
);
|
||||
}
|
||||
@@ -12,8 +12,6 @@ const MESSAGES: Record<Locale, Record<string, string>> = {
|
||||
"header.homeAria": "返回主地图主页",
|
||||
"header.docs": "文档",
|
||||
"header.docsAria": "打开产品文档中心",
|
||||
"header.probabilityHub": "概率页",
|
||||
"header.probabilityHubAria": "打开 52 城市概率汇总页",
|
||||
"header.info": "技术说明",
|
||||
"header.infoAria": "查看系统技术说明",
|
||||
"header.account": "账户",
|
||||
@@ -179,8 +177,6 @@ const MESSAGES: Record<Locale, Record<string, string>> = {
|
||||
"header.homeAria": "Return to the main map homepage",
|
||||
"header.docs": "Docs",
|
||||
"header.docsAria": "Open product documentation",
|
||||
"header.probabilityHub": "Probabilities",
|
||||
"header.probabilityHubAria": "Open the 52-city probability hub",
|
||||
"header.info": "Tech Notes",
|
||||
"header.infoAria": "Open system technical notes",
|
||||
"header.account": "Account",
|
||||
|
||||
Reference in New Issue
Block a user