mirror of
https://github.com/zvx-echo6/meshai.git
synced 2026-05-21 23:24:44 +02:00
Make environmental feeds band-agnostic; add Environment page
- Remove band_assessment and band_detail from SWPC adapter - Remove all frequency-specific conclusions (906 MHz, 10m-20m, etc.) - Store only raw indices: SFI, Kp, R/S/G scales, dM/dz gradients - Let LLM interpret propagation data based on user's band of interest - Add full Environment page with feed status, solar indices, and ducting data - Update Dashboard RF Propagation card to show raw values only - Update alert messages to be frequency-agnostic Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
61684f0ee2
commit
1158e30c0b
12 changed files with 863 additions and 273 deletions
|
|
@ -1,15 +1,452 @@
|
|||
import { Cloud } from 'lucide-react'
|
||||
import { useEffect, useState } from 'react'
|
||||
import {
|
||||
Cloud,
|
||||
Sun,
|
||||
AlertTriangle,
|
||||
AlertCircle,
|
||||
Info,
|
||||
CheckCircle,
|
||||
Activity,
|
||||
Wind,
|
||||
} from 'lucide-react'
|
||||
import {
|
||||
fetchEnvStatus,
|
||||
fetchEnvActive,
|
||||
fetchSWPC,
|
||||
fetchDucting,
|
||||
type EnvStatus,
|
||||
type EnvEvent,
|
||||
type SWPCStatus,
|
||||
type DuctingStatus,
|
||||
} from '@/lib/api'
|
||||
|
||||
function FeedStatusCard({ feed }: { feed: { source: string; is_loaded: boolean; last_error: string | null; consecutive_errors: number; event_count: number; last_fetch: number } }) {
|
||||
const getStatusColor = () => {
|
||||
if (!feed.is_loaded) return 'bg-red-500'
|
||||
if (feed.consecutive_errors > 0) return 'bg-amber-500'
|
||||
return 'bg-green-500'
|
||||
}
|
||||
|
||||
const getStatusText = () => {
|
||||
if (!feed.is_loaded) return 'Not loaded'
|
||||
if (feed.consecutive_errors > 0) return `${feed.consecutive_errors} errors`
|
||||
return 'Healthy'
|
||||
}
|
||||
|
||||
const formatLastFetch = (ts: number) => {
|
||||
if (!ts) return 'Never'
|
||||
const date = new Date(ts * 1000)
|
||||
return date.toLocaleTimeString()
|
||||
}
|
||||
|
||||
export default function Environment() {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-[60vh] text-center">
|
||||
<div className="w-16 h-16 rounded-full bg-bg-card border border-border flex items-center justify-center mb-6">
|
||||
<Cloud size={32} className="text-slate-500" />
|
||||
<div className="bg-bg-hover rounded-lg p-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`w-2 h-2 rounded-full ${getStatusColor()}`} />
|
||||
<span className="text-sm font-medium text-slate-200 uppercase">
|
||||
{feed.source}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-xs text-slate-400">{getStatusText()}</span>
|
||||
</div>
|
||||
<div className="text-xs text-slate-500 space-y-1">
|
||||
<div>Events: {feed.event_count}</div>
|
||||
<div>Last fetch: {formatLastFetch(feed.last_fetch)}</div>
|
||||
{feed.last_error && (
|
||||
<div className="text-amber-500 truncate">{feed.last_error}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertEventCard({ event }: { event: EnvEvent }) {
|
||||
const getSeverityStyles = (severity: string) => {
|
||||
switch (severity.toLowerCase()) {
|
||||
case 'extreme':
|
||||
case 'severe':
|
||||
return {
|
||||
bg: 'bg-red-500/10',
|
||||
border: 'border-red-500',
|
||||
icon: AlertCircle,
|
||||
iconColor: 'text-red-500',
|
||||
}
|
||||
case 'moderate':
|
||||
case 'warning':
|
||||
return {
|
||||
bg: 'bg-amber-500/10',
|
||||
border: 'border-amber-500',
|
||||
icon: AlertTriangle,
|
||||
iconColor: 'text-amber-500',
|
||||
}
|
||||
case 'minor':
|
||||
return {
|
||||
bg: 'bg-yellow-500/10',
|
||||
border: 'border-yellow-500',
|
||||
icon: Info,
|
||||
iconColor: 'text-yellow-500',
|
||||
}
|
||||
default:
|
||||
return {
|
||||
bg: 'bg-slate-500/10',
|
||||
border: 'border-slate-500',
|
||||
icon: Info,
|
||||
iconColor: 'text-slate-400',
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const styles = getSeverityStyles(event.severity)
|
||||
const Icon = styles.icon
|
||||
|
||||
const formatExpires = (ts?: number) => {
|
||||
if (!ts) return null
|
||||
const date = new Date(ts * 1000)
|
||||
return date.toLocaleString()
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`p-4 rounded-lg ${styles.bg} border-l-2 ${styles.border}`}>
|
||||
<div className="flex items-start gap-3">
|
||||
<Icon size={18} className={styles.iconColor} />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="text-sm font-medium text-slate-200">
|
||||
{event.event_type}
|
||||
</span>
|
||||
<span className={`text-xs px-1.5 py-0.5 rounded ${styles.bg} ${styles.iconColor}`}>
|
||||
{event.severity}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-sm text-slate-300 mb-2">{event.headline}</div>
|
||||
{event.description && (
|
||||
<div className="text-xs text-slate-400 mb-2 line-clamp-2">
|
||||
{event.description}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-4 text-xs text-slate-500">
|
||||
<span className="uppercase">{event.source}</span>
|
||||
{event.expires && (
|
||||
<span>Expires: {formatExpires(event.expires)}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function SolarIndicesPanel({ swpc }: { swpc: SWPCStatus | null }) {
|
||||
if (!swpc || !swpc.enabled) {
|
||||
return (
|
||||
<div className="bg-bg-card border border-border rounded-lg p-6">
|
||||
<h2 className="text-sm font-medium text-slate-400 mb-4 flex items-center gap-2">
|
||||
<Sun size={14} />
|
||||
Solar/Geomagnetic Indices
|
||||
</h2>
|
||||
<div className="text-slate-500">Data not available</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const getKpColor = (kp?: number) => {
|
||||
if (kp === undefined) return 'text-slate-400'
|
||||
if (kp <= 2) return 'text-green-500'
|
||||
if (kp <= 4) return 'text-amber-500'
|
||||
if (kp <= 6) return 'text-orange-500'
|
||||
return 'text-red-500'
|
||||
}
|
||||
|
||||
const getScaleColor = (scale?: number) => {
|
||||
if (scale === undefined || scale === 0) return 'text-green-500'
|
||||
if (scale <= 2) return 'text-amber-500'
|
||||
if (scale <= 3) return 'text-orange-500'
|
||||
return 'text-red-500'
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-bg-card border border-border rounded-lg p-6">
|
||||
<h2 className="text-sm font-medium text-slate-400 mb-4 flex items-center gap-2">
|
||||
<Sun size={14} />
|
||||
Solar/Geomagnetic Indices
|
||||
</h2>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 mb-4">
|
||||
{/* SFI */}
|
||||
<div className="bg-bg-hover rounded-lg p-3">
|
||||
<div className="text-xs text-slate-500 mb-1">Solar Flux Index</div>
|
||||
<div className="text-2xl font-mono text-slate-100">
|
||||
{swpc.sfi?.toFixed(0) ?? '—'}
|
||||
</div>
|
||||
<div className="text-xs text-slate-500">SFI (10.7 cm)</div>
|
||||
</div>
|
||||
|
||||
{/* Kp */}
|
||||
<div className="bg-bg-hover rounded-lg p-3">
|
||||
<div className="text-xs text-slate-500 mb-1">Planetary K-Index</div>
|
||||
<div className={`text-2xl font-mono ${getKpColor(swpc.kp_current)}`}>
|
||||
{swpc.kp_current?.toFixed(1) ?? '—'}
|
||||
</div>
|
||||
<div className="text-xs text-slate-500">Kp</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* NOAA Scales */}
|
||||
<div className="bg-bg-hover rounded-lg p-3 mb-4">
|
||||
<div className="text-xs text-slate-500 mb-2">NOAA Space Weather Scales</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-xs text-slate-400">R:</span>
|
||||
<span className={`text-sm font-mono ${getScaleColor(swpc.r_scale)}`}>
|
||||
{swpc.r_scale ?? 0}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-xs text-slate-400">S:</span>
|
||||
<span className={`text-sm font-mono ${getScaleColor(swpc.s_scale)}`}>
|
||||
{swpc.s_scale ?? 0}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-xs text-slate-400">G:</span>
|
||||
<span className={`text-sm font-mono ${getScaleColor(swpc.g_scale)}`}>
|
||||
{swpc.g_scale ?? 0}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs text-slate-500 mt-2">
|
||||
Radio Blackout / Solar Radiation / Geomagnetic Storm
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Active Warnings */}
|
||||
{swpc.active_warnings && swpc.active_warnings.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<div className="text-xs text-slate-500">Active Warnings</div>
|
||||
{swpc.active_warnings.slice(0, 3).map((warning, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="text-xs text-amber-400 bg-amber-500/10 rounded p-2"
|
||||
>
|
||||
{warning}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function DuctingPanel({ ducting }: { ducting: DuctingStatus | null }) {
|
||||
if (!ducting || !ducting.enabled) {
|
||||
return (
|
||||
<div className="bg-bg-card border border-border rounded-lg p-6">
|
||||
<h2 className="text-sm font-medium text-slate-400 mb-4 flex items-center gap-2">
|
||||
<Wind size={14} />
|
||||
Tropospheric Ducting
|
||||
</h2>
|
||||
<div className="text-slate-500">Data not available</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const getConditionColor = (condition?: string) => {
|
||||
switch (condition) {
|
||||
case 'normal':
|
||||
return 'text-green-500'
|
||||
case 'super_refraction':
|
||||
return 'text-amber-500'
|
||||
case 'surface_duct':
|
||||
case 'elevated_duct':
|
||||
return 'text-blue-400'
|
||||
default:
|
||||
return 'text-slate-400'
|
||||
}
|
||||
}
|
||||
|
||||
const formatCondition = (condition?: string) => {
|
||||
if (!condition) return 'Unknown'
|
||||
return condition.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase())
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-bg-card border border-border rounded-lg p-6">
|
||||
<h2 className="text-sm font-medium text-slate-400 mb-4 flex items-center gap-2">
|
||||
<Wind size={14} />
|
||||
Tropospheric Ducting
|
||||
</h2>
|
||||
|
||||
{/* Condition */}
|
||||
<div className="bg-bg-hover rounded-lg p-4 mb-4">
|
||||
<div className="text-xs text-slate-500 mb-1">Condition</div>
|
||||
<div className={`text-xl font-medium ${getConditionColor(ducting.condition)}`}>
|
||||
{formatCondition(ducting.condition)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Refractivity Gradient */}
|
||||
<div className="grid grid-cols-2 gap-4 mb-4">
|
||||
<div className="bg-bg-hover rounded-lg p-3">
|
||||
<div className="text-xs text-slate-500 mb-1">Min Gradient</div>
|
||||
<div className="text-lg font-mono text-slate-100">
|
||||
{ducting.min_gradient ?? '—'}
|
||||
</div>
|
||||
<div className="text-xs text-slate-500">M-units/km</div>
|
||||
</div>
|
||||
|
||||
{ducting.duct_thickness_m && (
|
||||
<div className="bg-bg-hover rounded-lg p-3">
|
||||
<div className="text-xs text-slate-500 mb-1">Duct Thickness</div>
|
||||
<div className="text-lg font-mono text-slate-100">
|
||||
{ducting.duct_thickness_m}
|
||||
</div>
|
||||
<div className="text-xs text-slate-500">meters</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{ducting.duct_base_m && (
|
||||
<div className="bg-bg-hover rounded-lg p-3">
|
||||
<div className="text-xs text-slate-500 mb-1">Duct Base</div>
|
||||
<div className="text-lg font-mono text-slate-100">
|
||||
{ducting.duct_base_m}
|
||||
</div>
|
||||
<div className="text-xs text-slate-500">meters AGL</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Reference */}
|
||||
<div className="text-xs text-slate-500 bg-bg-hover rounded p-2">
|
||||
<div>dM/dz reference:</div>
|
||||
<div className="mt-1 space-y-0.5">
|
||||
<div>>79: Normal propagation</div>
|
||||
<div>0–79: Super-refraction</div>
|
||||
<div><0: Ducting (trapping layer)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ducting.last_update && (
|
||||
<div className="text-xs text-slate-500 mt-3">
|
||||
Last update: {ducting.last_update}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Environment() {
|
||||
const [envStatus, setEnvStatus] = useState<EnvStatus | null>(null)
|
||||
const [events, setEvents] = useState<EnvEvent[]>([])
|
||||
const [swpc, setSWPC] = useState<SWPCStatus | null>(null)
|
||||
const [ducting, setDucting] = useState<DuctingStatus | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
Promise.all([
|
||||
fetchEnvStatus().catch(() => null),
|
||||
fetchEnvActive().catch(() => []),
|
||||
fetchSWPC().catch(() => null),
|
||||
fetchDucting().catch(() => null),
|
||||
])
|
||||
.then(([status, active, swpcData, ductingData]) => {
|
||||
setEnvStatus(status)
|
||||
setEvents(active)
|
||||
setSWPC(swpcData)
|
||||
setDucting(ductingData)
|
||||
setLoading(false)
|
||||
})
|
||||
.catch((err) => {
|
||||
setError(err.message)
|
||||
setLoading(false)
|
||||
})
|
||||
}, [])
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="text-slate-400">Loading environmental data...</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="text-red-400">Error: {error}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!envStatus?.enabled) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-[60vh] text-center">
|
||||
<div className="w-16 h-16 rounded-full bg-bg-card border border-border flex items-center justify-center mb-6">
|
||||
<Cloud size={32} className="text-slate-500" />
|
||||
</div>
|
||||
<h2 className="text-xl font-semibold text-slate-300 mb-2">
|
||||
Environmental Feeds Disabled
|
||||
</h2>
|
||||
<p className="text-slate-500 max-w-md">
|
||||
Enable environmental feeds in config.yaml to see weather alerts,
|
||||
space weather indices, and tropospheric ducting data.
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-xl font-semibold text-slate-200">Environment</h1>
|
||||
<div className="text-xs text-slate-500">
|
||||
{events.length} active event{events.length !== 1 ? 's' : ''}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Feed Status */}
|
||||
<div className="bg-bg-card border border-border rounded-lg p-6">
|
||||
<h2 className="text-sm font-medium text-slate-400 mb-4 flex items-center gap-2">
|
||||
<Activity size={14} />
|
||||
Feed Status
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{envStatus.feeds.map((feed) => (
|
||||
<FeedStatusCard key={feed.source} feed={feed} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main content grid */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Solar Indices */}
|
||||
<SolarIndicesPanel swpc={swpc} />
|
||||
|
||||
{/* Tropospheric Ducting */}
|
||||
<DuctingPanel ducting={ducting} />
|
||||
</div>
|
||||
|
||||
{/* Active Events */}
|
||||
<div className="bg-bg-card border border-border rounded-lg p-6">
|
||||
<h2 className="text-sm font-medium text-slate-400 mb-4 flex items-center gap-2">
|
||||
<AlertTriangle size={14} />
|
||||
Active Events ({events.length})
|
||||
</h2>
|
||||
{events.length > 0 ? (
|
||||
<div className="space-y-3">
|
||||
{events.map((event) => (
|
||||
<AlertEventCard key={event.event_id} event={event} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-2 text-slate-500 py-4">
|
||||
<CheckCircle size={16} className="text-green-500" />
|
||||
<span>No active environmental events</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<h2 className="text-xl font-semibold text-slate-300 mb-2">Environment</h2>
|
||||
<p className="text-slate-500 max-w-md">
|
||||
Environmental feeds and space weather detail coming soon
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue