akiba/CA
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix: analysis 500s, caching, alert page perf

Browse Source 
P0: Fix KeyError in 3 analysis endpoints. geojson.py stores 1d risk
as "risk_value" but analysis.py accessed "risk_1d" — always crashed.

Backend: Add lru_cache to GeoJSON/CSV/Parquet loaders, date helpers,
and district loader. Add try/except and FileNotFoundError guards.

Frontend: Debounce riskRange, merge counts into useMemo, stabilize
handleGridClick with ref, memoize nearest-grid scan, wrap AlertMap
in React.memo, switch useLodGrid from fetch to cachedGet.
This commit is contained in:
Akiba So
2026-06-05 02:27:10 +08:00
parent fc468464b2
commit e64ca3b4f5
9 changed files with 154 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/AlertMap.tsx
View File

@@ -1,10 +1,10 @@
import { useEffect, useRef, useState, useCallback } from 'react';
import { useEffect, useRef, useState, useCallback, memo } from 'react';
import L from 'leaflet';
import { useRiskStore } from '@/stores';
import { LodGridLayer } from '@/components/LodGridLayer';
import { GridStatsOverlay } from '@/components/GridStatsOverlay';
import { useLodGrid } from '@/hooks/useLodGrid';
import type { Alert } from '@/types';
import type { Alert, GridRisk } from '@/types';
export interface CellInfo {
lat: number;
@@ -44,6 +44,8 @@ function getRiskLabel(value: number): string {
return '低风险';
}
const EMPTY_GRIDS: GridRisk[] = [];
function AlertMapComponent({
selectedGridId,
onGridClick,
@@ -62,7 +64,7 @@ function AlertMapComponent({
const clickHandlerRef = useRef(onGridClick);
const [currentZoom, setCurrentZoom] = useState(10);
const grids = useRiskStore((s) => s.grids ?? []);
const grids = useRiskStore((s) => s.grids ?? EMPTY_GRIDS);
// LOD grid data for stats overlay
const { count, avgRisk, maxRisk, loading } = useLodGrid(currentZoom, forecastDay);
@@ -299,4 +301,4 @@ function AlertMapComponent({
);
}
export const AlertMap = AlertMapComponent;
export const AlertMap = memo(AlertMapComponent);

19
frontend/src/hooks/useLodGrid.ts
View File

@@ -1,4 +1,5 @@
import { useState, useEffect, useRef, useCallback } from 'react';
import { cachedGet } from '../services/api';
export interface LodGridResult {
grids: number[][];
@@ -30,23 +31,17 @@ export function useLodGrid(zoom: number, forecastDay: 1 | 3 | 7, bounds?: MapBou
const abortRef = useRef<AbortController>();
const fetchData = useCallback(async (z: number, day: 1 | 3 | 7, b?: MapBounds) => {
abortRef.current?.abort();
const controller = new AbortController();
abortRef.current = controller;
setResult((prev) => ({ ...prev, loading: true }));
try {
let url = `/api/risk/lod-grid?zoom=${z}&forecast_day=${day}`;
const params: Record<string, any> = { zoom: z, forecast_day: day };
if (b && z >= 10) {
url += `&min_lat=${b.min_lat}&max_lat=${b.max_lat}&min_lon=${b.min_lon}&max_lon=${b.max_lon}`;
params.min_lat = b.min_lat;
params.max_lat = b.max_lat;
params.min_lon = b.min_lon;
params.max_lon = b.max_lon;
}
const resp = await fetch(url, {
signal: controller.signal,
});
if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
const data = await resp.json();
const data = await cachedGet<any>('/risk/lod-grid', params);
const grids: number[][] = data.grids || [];
const count = data.total_count || grids.length;

158
frontend/src/pages/AlertsDashboard.tsx
View File

@@ -1,4 +1,5 @@
import { useState, useMemo, useCallback, useEffect } from 'react';
import { useState, useMemo, useCallback, useEffect, useRef } from 'react';
import React from 'react';
import { useRiskStore } from '@/stores';
import { useLodGrid } from '@/hooks/useLodGrid';
import { AlertMap } from '@/components/AlertMap';
@@ -36,6 +37,7 @@ export function AlertsDashboard() {
const [showAlertMarkers, setShowAlertMarkers] = useState(true);
const [selectedAlert, setSelectedAlert] = useState<string | null>(null);
const [riskRange, setRiskRange] = useState<[number, number]>([0.6, 1.0]);
const [debouncedRiskRange, setDebouncedRiskRange] = useState<[number, number]>([0.6, 1.0]);
const [forecastDay, setForecastDay] = useState<1 | 3 | 7>(1);
const [isFullscreen, setIsFullscreen] = useState(false);
const [showGrid, setShowGrid] = useState(true);
@@ -44,6 +46,12 @@ export function AlertsDashboard() {
// LOD grid data for cell info lookup (1d/3d/7d risk values)
const { grids: lodGrids } = useLodGrid(10, forecastDay);
// Debounce riskRange for filteredAlerts computation
useEffect(() => {
const timer = setTimeout(() => setDebouncedRiskRange(riskRange), 300);
return () => clearTimeout(timer);
}, [riskRange]);
// Fetch grids (for map) and alerts (for side panel) on mount
useEffect(() => {
fetchRiskMap();
@@ -71,7 +79,7 @@ export function AlertsDashboard() {
.filter((alert) => {
const horizonMatch = selectedHorizon === 'all' || alert.forecast_horizon === selectedHorizon;
const priorityMatch = selectedPriority === 'all' || alert.priority === selectedPriority;
const riskMatch = alert.risk_value >= riskRange[0] && alert.risk_value <= riskRange[1];
const riskMatch = alert.risk_value >= debouncedRiskRange[0] && alert.risk_value <= debouncedRiskRange[1];
return horizonMatch && priorityMatch && riskMatch;
})
.sort((a, b) => {
@@ -80,13 +88,12 @@ export function AlertsDashboard() {
}
return new Date(b.forecast_time).getTime() - new Date(a.forecast_time).getTime();
});
}, [extendedAlerts, selectedHorizon, selectedPriority, sortBy, riskRange]);
}, [extendedAlerts, selectedHorizon, selectedPriority, sortBy, debouncedRiskRange]);
const p1Count = extendedAlerts.filter((a) => a.priority === 'P1').length;
const p2Count = extendedAlerts.filter((a) => a.priority === 'P2').length;
// Risk distribution stats
// Risk distribution stats (includes p1/p2 counts)
const riskStats = useMemo(() => {
const p1 = extendedAlerts.filter(a => a.priority === 'P1').length;
const p2 = extendedAlerts.filter(a => a.priority === 'P2').length;
const high = filteredAlerts.filter(a => a.risk_value >= 0.8).length;
const mediumHigh = filteredAlerts.filter(a => a.risk_value >= 0.6 && a.risk_value < 0.8).length;
const medium = filteredAlerts.filter(a => a.risk_value >= 0.4 && a.risk_value < 0.6).length;
@@ -103,8 +110,8 @@ export function AlertsDashboard() {
.sort((a, b) => b[1] - a[1])
.slice(0, 5);
return { high, mediumHigh, medium, avgRisk, topDistricts };
}, [filteredAlerts]);
return { p1, p2, high, mediumHigh, medium, avgRisk, topDistricts };
}, [extendedAlerts, filteredAlerts]);
const selectedAlertData = useMemo(() => {
return filteredAlerts.find(a => a.alert_id === selectedAlert);
@@ -116,12 +123,15 @@ export function AlertsDashboard() {
return alert?.grid_id ?? null;
}, [filteredAlerts, selectedAlert]);
const filteredAlertsRef = useRef(filteredAlerts);
useEffect(() => { filteredAlertsRef.current = filteredAlerts; }, [filteredAlerts]);
const handleGridClick = useCallback((gridId: string) => {
const alertForGrid = filteredAlerts.find(a => a.grid_id === gridId);
const alertForGrid = filteredAlertsRef.current.find(a => a.grid_id === gridId);
if (alertForGrid) {
setSelectedAlert(alertForGrid.alert_id);
}
}, [filteredAlerts]);
}, []);
const handleAlertCardClick = useCallback((id: string) => {
setSelectedAlert(id);
@@ -169,6 +179,20 @@ export function AlertsDashboard() {
URL.revokeObjectURL(url);
}, [filteredAlerts]);
const nearestGrid = useMemo(() => {
if (!cellInfo || !lodGrids.length) return null;
let best: { lat: number; lon: number; risk_1d: number; risk_3d: number; risk_7d: number } | null = null;
let bestDist = Infinity;
for (const g of lodGrids) {
const d = Math.sqrt((g[0] - cellInfo.lat) ** 2 + (g[1] - cellInfo.lon) ** 2);
if (d < bestDist) {
bestDist = d;
best = { lat: g[0], lon: g[1], risk_1d: g[2] ?? 0, risk_3d: g[3] ?? 0, risk_7d: g[4] ?? 0 };
}
}
return best;
}, [cellInfo, lodGrids]);
return (
<div className={isFullscreen ? 'fixed inset-0 z-40 bg-bg-page pt-[52px] p-5' : 'p-5'}>
{error && (
@@ -189,8 +213,8 @@ export function AlertsDashboard() {
</div>
<div className="flex items-center gap-3 text-[11px]">
<span className="text-text-muted">共 <span className="font-semibold text-text-primary">{filteredAlerts.length}</span> 条预警</span>
<span className="px-2 py-1 bg-danger/10 border border-danger/20 rounded text-danger font-semibold">P1: {p1Count}</span>
<span className="px-2 py-1 bg-warning/10 border border-warning/20 rounded text-warning font-semibold">P2: {p2Count}</span>
<span className="px-2 py-1 bg-danger/10 border border-danger/20 rounded text-danger font-semibold">P1: {riskStats.p1}</span>
<span className="px-2 py-1 bg-warning/10 border border-warning/20 rounded text-warning font-semibold">P2: {riskStats.p2}</span>
</div>
</div>
@@ -464,67 +488,51 @@ export function AlertsDashboard() {
)}
{/* Cell info panel - shown when clicking grid cell without alert */}
{cellInfo && !selectedAlertData && (() => {
// Find nearest LOD grid cell for multi-day risk display
// grids are [lat, lon, risk_1d, risk_3d, risk_7d]
let nearest: { lat: number; lon: number; risk_1d: number; risk_3d: number; risk_7d: number } | null = null;
let minDist = Infinity;
for (const g of lodGrids) {
const d = Math.sqrt((g[0] - cellInfo.lat) ** 2 + (g[1] - cellInfo.lon) ** 2);
if (d < minDist) {
minDist = d;
nearest = { lat: g[0], lon: g[1], risk_1d: g[2] ?? 0, risk_3d: g[3] ?? 0, risk_7d: g[4] ?? 0 };
}
}
return (
<div className="fixed bottom-5 left-1/2 -translate-x-1/2 bg-bg-card rounded-lg border border-border-light shadow-lg z-50 px-5 py-4 min-w-[320px]">
<div className="flex items-center justify-between mb-3">
<span className="text-[14px] font-semibold text-text-primary">网格详情</span>
<button onClick={clearCellInfo} className="text-text-muted hover:text-text-primary text-[18px] leading-none">&times;</button>
</div>
<div className="space-y-2 text-[12px]">
<div className="flex justify-between">
<span className="text-text-muted">坐标</span>
<span className="font-mono text-text-primary">{cellInfo.lat.toFixed(4)}, {cellInfo.lon.toFixed(4)}</span>
</div>
<div className="flex justify-between">
<span className="text-text-muted">当前风险</span>
<span className={`font-bold ${cellInfo.risk >= 0.8 ? 'text-danger' : cellInfo.risk >= 0.6 ? 'text-warning' : cellInfo.risk >= 0.4 ? 'text-primary' : 'text-success'}`}>
{(cellInfo.risk * 100).toFixed(1)}%
</span>
</div>
{nearest && (
<div className="flex gap-3 pt-1">
<div className="flex-1 text-center p-1.5 rounded bg-bg-page">
<div className="text-[10px] text-text-muted">1天</div>
<div className="font-bold text-[13px]">{(nearest.risk_1d * 100).toFixed(0)}%</div>
</div>
<div className="flex-1 text-center p-1.5 rounded bg-bg-page">
<div className="text-[10px] text-text-muted">3天</div>
<div className="font-bold text-[13px]">{(nearest.risk_3d * 100).toFixed(0)}%</div>
</div>
<div className="flex-1 text-center p-1.5 rounded bg-bg-page">
<div className="text-[10px] text-text-muted">7天</div>
<div className="font-bold text-[13px]">{(nearest.risk_7d * 100).toFixed(0)}%</div>
</div>
</div>
)}
{cellInfo.nearestAlertId && (
<div className="flex justify-between">
<span className="text-text-muted">最近预警距离</span>
<span className="text-text-primary">{(cellInfo.nearestAlertDist * 111).toFixed(1)} km</span>
</div>
)}
{!cellInfo.nearestAlertId && (
<div className="text-[11px] text-text-muted mt-1 pt-2 border-t border-border">
该区域无预警
</div>
)}
</div>
{cellInfo && !selectedAlertData && nearestGrid && (
<div className="fixed bottom-5 left-1/2 -translate-x-1/2 bg-bg-card rounded-lg border border-border-light shadow-lg z-50 px-5 py-4 min-w-[320px]">
<div className="flex items-center justify-between mb-3">
<span className="text-[14px] font-semibold text-text-primary">网格详情</span>
<button onClick={clearCellInfo} className="text-text-muted hover:text-text-primary text-[18px] leading-none">&times;</button>
</div>
);
})()}
<div className="space-y-2 text-[12px]">
<div className="flex justify-between">
<span className="text-text-muted">坐标</span>
<span className="font-mono text-text-primary">{cellInfo.lat.toFixed(4)}, {cellInfo.lon.toFixed(4)}</span>
</div>
<div className="flex justify-between">
<span className="text-text-muted">当前风险</span>
<span className={`font-bold ${cellInfo.risk >= 0.8 ? 'text-danger' : cellInfo.risk >= 0.6 ? 'text-warning' : cellInfo.risk >= 0.4 ? 'text-primary' : 'text-success'}`}>
{(cellInfo.risk * 100).toFixed(1)}%
</span>
</div>
<div className="flex gap-3 pt-1">
<div className="flex-1 text-center p-1.5 rounded bg-bg-page">
<div className="text-[10px] text-text-muted">1天</div>
<div className="font-bold text-[13px]">{(nearestGrid.risk_1d * 100).toFixed(0)}%</div>
</div>
<div className="flex-1 text-center p-1.5 rounded bg-bg-page">
<div className="text-[10px] text-text-muted">3天</div>
<div className="font-bold text-[13px]">{(nearestGrid.risk_3d * 100).toFixed(0)}%</div>
</div>
<div className="flex-1 text-center p-1.5 rounded bg-bg-page">
<div className="text-[10px] text-text-muted">7天</div>
<div className="font-bold text-[13px]">{(nearestGrid.risk_7d * 100).toFixed(0)}%</div>
</div>
</div>
{cellInfo.nearestAlertId && (
<div className="flex justify-between">
<span className="text-text-muted">最近预警距离</span>
<span className="text-text-primary">{(cellInfo.nearestAlertDist * 111).toFixed(1)} km</span>
</div>
)}
{!cellInfo.nearestAlertId && (
<div className="text-[11px] text-text-muted mt-1 pt-2 border-t border-border">
该区域无预警
</div>
)}
</div>
</div>
)}
{/* Alert detail modal */}
{selectedAlertData && (
@@ -574,7 +582,7 @@ interface AlertCardProps {
onClick?: () => void;
}
function AlertCard({ alert, isSelected, onClick }: AlertCardProps) {
const AlertCard = React.memo(function AlertCard({ alert, isSelected, onClick }: AlertCardProps) {
const isP1 = alert.priority === 'P1';
const riskPercent = Math.round(alert.risk_value * 100);
@@ -625,4 +633,4 @@ function AlertCard({ alert, isSelected, onClick }: AlertCardProps) {
</div>
</div>
);
}
});

2
frontend/src/services/api.ts
View File

@@ -87,7 +87,7 @@ api.interceptors.response.use(
}
);
async function cachedGet<T>(url: string, params?: Record<string, any>): Promise<T> {
export async function cachedGet<T>(url: string, params?: Record<string, any>): Promise<T> {
const key = getCacheKey(url, params);
const cached = getCached<T>(key);
if (cached !== undefined) return cached;