533 lines
19 KiB
TypeScript
533 lines
19 KiB
TypeScript
import React, { useMemo, useState } from 'react';
|
|
import { Badge, Card, Stack, Table } from 'react-bootstrap';
|
|
import { MapContainer, TileLayer, Popup, useMap, CircleMarker, Marker } from 'react-leaflet';
|
|
import { divIcon, type DivIcon } from 'leaflet';
|
|
import { renderToStaticMarkup } from 'react-dom/server';
|
|
import { useSearchParams } from 'react-router';
|
|
import VerticalSplit from '../../components/VerticalSplit';
|
|
import HorizontalSplit from '../../components/HorizontalSplit';
|
|
import CountryFlag from '../../components/CountryFlag';
|
|
import KeyboardShortcutsModal from '../../components/KeyboardShortcutsModal';
|
|
import StreamStatus from '../../components/StreamStatus';
|
|
import { APRSSymbol } from '../../components/aprs';
|
|
import { ClusteredMarkers } from '../../components/map';
|
|
import type { ClusterableItem, Cluster } from '../../components/map';
|
|
import { useKeyboardListNavigation } from '../../hooks/useKeyboardListNavigation';
|
|
import { useAPRSData } from './APRSData';
|
|
import type { APRSPacketRecord } from './APRSData';
|
|
|
|
const HeaderFact: React.FC<{ label: string; value: React.ReactNode }> = ({ label, value }) => (
|
|
<div className="aprs-fact-row">
|
|
<span className="aprs-fact-label">{label}</span>
|
|
<span className="aprs-fact-value">{value}</span>
|
|
</div>
|
|
);
|
|
|
|
const Callsign: React.FC<{ call: string; ssid?: string | number; plain?: boolean }> = ({ call, ssid, plain = false }) => (
|
|
<span className={plain ? 'callsign callsign--plain' : 'callsign'}>
|
|
{call}
|
|
{(ssid !== undefined && ssid !== '') ? <span>-{ssid}</span> : null}
|
|
</span>
|
|
);
|
|
|
|
const getPacketKey = (packet: APRSPacketRecord): string => {
|
|
const ssid = packet.frame.source.ssid ?? 0;
|
|
return `${packet.frame.source.call}-${ssid}-${packet.timestamp.toISOString()}-${packet.raw}`;
|
|
};
|
|
|
|
const calculateBounds = (packets: APRSPacketRecord[]): [[number, number], [number, number]] | null => {
|
|
const validPackets = packets.filter(p => p.latitude !== undefined && p.longitude !== undefined);
|
|
|
|
if (validPackets.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
if (validPackets.length === 1) {
|
|
const lat = validPackets[0].latitude!;
|
|
const lng = validPackets[0].longitude!;
|
|
const offset = 2;
|
|
return [[lat - offset, lng - offset], [lat + offset, lng + offset]];
|
|
}
|
|
|
|
let minLat = validPackets[0].latitude!;
|
|
let maxLat = validPackets[0].latitude!;
|
|
let minLng = validPackets[0].longitude!;
|
|
let maxLng = validPackets[0].longitude!;
|
|
|
|
validPackets.forEach(packet => {
|
|
const lat = packet.latitude!;
|
|
const lng = packet.longitude!;
|
|
if (lat < minLat) minLat = lat;
|
|
if (lat > maxLat) maxLat = lat;
|
|
if (lng < minLng) minLng = lng;
|
|
if (lng > maxLng) maxLng = lng;
|
|
});
|
|
|
|
// Add 10% padding to the bounds
|
|
const latPadding = (maxLat - minLat) * 0.1 || 0.5;
|
|
const lngPadding = (maxLng - minLng) * 0.1 || 0.5;
|
|
|
|
return [
|
|
[minLat - latPadding, minLng - lngPadding],
|
|
[maxLat + latPadding, maxLng + lngPadding]
|
|
];
|
|
};
|
|
|
|
const toRadians = (degrees: number): number => (degrees * Math.PI) / 180;
|
|
|
|
const distanceKm = (lat1: number, lng1: number, lat2: number, lng2: number): number => {
|
|
const earthRadiusKm = 6371;
|
|
const dLat = toRadians(lat2 - lat1);
|
|
const dLng = toRadians(lng2 - lng1);
|
|
const a =
|
|
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
|
|
Math.cos(toRadians(lat1)) * Math.cos(toRadians(lat2)) *
|
|
Math.sin(dLng / 2) * Math.sin(dLng / 2);
|
|
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
|
|
return earthRadiusKm * c;
|
|
};
|
|
|
|
const median = (values: number[]): number | null => {
|
|
if (values.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
const sorted = [...values].sort((a, b) => a - b);
|
|
const middle = Math.floor(sorted.length / 2);
|
|
|
|
if (sorted.length % 2 === 0) {
|
|
return (sorted[middle - 1] + sorted[middle]) / 2;
|
|
}
|
|
|
|
return sorted[middle];
|
|
};
|
|
|
|
const filterByClusterRadius = (packets: APRSPacketRecord[], radiusKm: number): APRSPacketRecord[] => {
|
|
const validPackets = packets.filter(p => p.latitude !== undefined && p.longitude !== undefined);
|
|
if (validPackets.length <= 1) {
|
|
return validPackets;
|
|
}
|
|
|
|
const latCenter = median(validPackets.map((p) => p.latitude!));
|
|
const lngCenter = median(validPackets.map((p) => p.longitude!));
|
|
if (latCenter === null || lngCenter === null) {
|
|
return validPackets;
|
|
}
|
|
|
|
const filtered = validPackets.filter((p) => distanceKm(latCenter, lngCenter, p.latitude!, p.longitude!) <= radiusKm);
|
|
return filtered.length > 0 ? filtered : validPackets;
|
|
};
|
|
|
|
/**
|
|
* Validate if an APRS symbol string is valid
|
|
*/
|
|
const isValidSymbol = (symbol: string | undefined): boolean => {
|
|
if (!symbol || symbol.length < 2) return false;
|
|
|
|
const table = symbol.charAt(0);
|
|
const code = symbol.charAt(1);
|
|
const charCode = code.charCodeAt(0);
|
|
|
|
// Primary and secondary tables
|
|
if (table === '/' || table === '\\') {
|
|
return charCode >= 33 && charCode <= 125;
|
|
}
|
|
|
|
// Overlay characters: 0-9, A-Z
|
|
if ((charCode >= 48 && charCode <= 57) || (charCode >= 65 && charCode <= 90)) {
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
};
|
|
|
|
/**
|
|
* Create a Leaflet DivIcon for an APRS symbol
|
|
* Uses 32px source image rendered at 16px for crisp display
|
|
*/
|
|
const createAPRSIcon = (symbol: string) => {
|
|
const iconHtml = renderToStaticMarkup(
|
|
<APRSSymbol symbol={symbol} size={32} className="aprs-map-marker" />
|
|
);
|
|
|
|
return divIcon({
|
|
html: iconHtml,
|
|
className: 'aprs-marker-icon',
|
|
iconSize: [16, 16],
|
|
iconAnchor: [8, 8],
|
|
popupAnchor: [0, -8],
|
|
});
|
|
};
|
|
|
|
const MapPanHandler: React.FC<{
|
|
packet: APRSPacketRecord | null;
|
|
defaultBounds: [[number, number], [number, number]] | null;
|
|
}> = ({ packet, defaultBounds }) => {
|
|
const map = useMap();
|
|
const prevPacketRef = React.useRef<APRSPacketRecord | null>(packet);
|
|
const prevBoundsRef = React.useRef<[[number, number], [number, number]] | null>(defaultBounds);
|
|
|
|
React.useEffect(() => {
|
|
if (packet && packet.latitude && packet.longitude) {
|
|
const currentZoom = map.getZoom();
|
|
// Don't zoom out if we're already zoomed in further than default
|
|
const targetZoom = Math.max(currentZoom, 12);
|
|
|
|
map.flyTo([packet.latitude as number, packet.longitude as number], targetZoom, {
|
|
duration: 1.5,
|
|
easeLinearity: 0.25,
|
|
});
|
|
prevPacketRef.current = packet;
|
|
} else if (!packet) {
|
|
// No packet selected - show all markers
|
|
if (defaultBounds && (!prevPacketRef.current || JSON.stringify(prevBoundsRef.current) !== JSON.stringify(defaultBounds))) {
|
|
map.fitBounds(defaultBounds, {
|
|
padding: [50, 50],
|
|
maxZoom: 15,
|
|
});
|
|
prevBoundsRef.current = defaultBounds;
|
|
}
|
|
prevPacketRef.current = null;
|
|
}
|
|
}, [packet, defaultBounds, map]);
|
|
|
|
return null;
|
|
};
|
|
|
|
/**
|
|
* Render popup content for an APRS packet
|
|
*/
|
|
const renderPacketPopup = (p: APRSPacketRecord) => (
|
|
<div>
|
|
<Callsign call={p.frame.source.call} ssid={p.frame.source.ssid} />
|
|
<br />
|
|
Lat: {p.latitude?.toFixed(4)}, Lon: {p.longitude?.toFixed(4)}
|
|
{p.altitude && <div>Alt: {p.altitude.toFixed(0)}m</div>}
|
|
{p.speed && <div>Speed: {p.speed}kt</div>}
|
|
{p.comment && <div style={{ marginTop: '0.25rem', fontSize: '0.875rem' }}>{p.comment}</div>}
|
|
</div>
|
|
);
|
|
|
|
/**
|
|
* Render popup content for a cluster
|
|
*/
|
|
const renderClusterPopup = (cluster: Cluster<ClusterableItem>) => {
|
|
const packets = cluster.items as APRSPacketRecord[];
|
|
return (
|
|
<div>
|
|
<strong>{cluster.count} stations</strong>
|
|
<div style={{ marginTop: '0.5rem', maxHeight: '200px', overflowY: 'auto' }}>
|
|
{packets.map((p, i) => (
|
|
<div key={i} style={{ marginBottom: '0.25rem' }}>
|
|
<Callsign call={p.frame.source.call} ssid={p.frame.source.ssid} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: '#666' }}>
|
|
Click to zoom in
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
/**
|
|
* Get icon for an APRS packet marker
|
|
*/
|
|
const getPacketIcon = (item: ClusterableItem): DivIcon | null => {
|
|
const packet = item as APRSPacketRecord;
|
|
if (isValidSymbol(packet.symbol)) {
|
|
return createAPRSIcon(packet.symbol!);
|
|
}
|
|
return null; // Will use default blue circle
|
|
};
|
|
|
|
const APRSMapPane: React.FC<{
|
|
packet: APRSPacketRecord | null;
|
|
packets: APRSPacketRecord[];
|
|
onSelectPacket: (packet: APRSPacketRecord) => void;
|
|
}> = ({ packet, packets, onSelectPacket }) => {
|
|
const hasPosition = packet && packet.latitude && packet.longitude;
|
|
|
|
// Create bounds from center point (offset by ~2 degrees)
|
|
const createBoundsFromCenter = (lat: number, lng: number): [[number, number], [number, number]] => {
|
|
const offset = 2;
|
|
return [[lat - offset, lng - offset], [lat + offset, lng + offset]];
|
|
};
|
|
|
|
// Get latest location for each source
|
|
const latestBySource = useMemo(() => {
|
|
const sourceMap = new Map<string, APRSPacketRecord>();
|
|
packets.forEach(p => {
|
|
if (p.latitude !== undefined && p.longitude !== undefined) {
|
|
const sourceSsid = p.frame.source.ssid ?? '';
|
|
const key = `${p.frame.source.call}-${sourceSsid}`;
|
|
// Keep the most recent packet for each source
|
|
if (!sourceMap.has(key) || p.timestamp > sourceMap.get(key)!.timestamp) {
|
|
sourceMap.set(key, p);
|
|
}
|
|
}
|
|
});
|
|
return Array.from(sourceMap.values());
|
|
}, [packets]);
|
|
|
|
const overviewLocations = useMemo(() => filterByClusterRadius(latestBySource, 250), [latestBySource]);
|
|
|
|
const defaultBounds = useMemo(() => calculateBounds(overviewLocations), [overviewLocations]);
|
|
|
|
const bounds = hasPosition
|
|
? createBoundsFromCenter(packet.latitude as number, packet.longitude as number)
|
|
: (defaultBounds ?? [[48.0, 3.0], [52.0, 7.0]]);
|
|
|
|
return (
|
|
<Card className="data-table-card h-100" style={{ display: 'flex', flexDirection: 'column', padding: 0 }}>
|
|
<MapContainer
|
|
bounds={bounds}
|
|
style={{ flex: 1, width: '100%' }}
|
|
className="aprs-map"
|
|
>
|
|
<MapPanHandler packet={packet} defaultBounds={defaultBounds} />
|
|
<TileLayer
|
|
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
|
/>
|
|
{/* Clustered markers for latest location per source */}
|
|
<ClusteredMarkers<ClusterableItem>
|
|
items={overviewLocations}
|
|
getItemKey={(item) => getPacketKey(item as APRSPacketRecord)}
|
|
onItemClick={(item) => onSelectPacket(item as APRSPacketRecord)}
|
|
getIcon={getPacketIcon}
|
|
renderPopupContent={(item) => renderPacketPopup(item as APRSPacketRecord)}
|
|
renderClusterPopupContent={renderClusterPopup}
|
|
/>
|
|
{/* Highlight selected packet - use APRS symbol or red circle */}
|
|
{hasPosition && (
|
|
isValidSymbol(packet.symbol) ? (
|
|
<Marker
|
|
position={[packet.latitude as number, packet.longitude as number]}
|
|
icon={createAPRSIcon(packet.symbol!)}
|
|
>
|
|
<Popup>
|
|
<div>
|
|
<Callsign call={packet.frame.source.call} ssid={packet.frame.source.ssid} />
|
|
<br />
|
|
Lat: {packet.latitude?.toFixed(4)}, Lon: {packet.longitude?.toFixed(4)}
|
|
{packet.altitude && <div>Alt: {packet.altitude.toFixed(0)}m</div>}
|
|
{packet.speed && <div>Speed: {packet.speed}kt</div>}
|
|
{packet.comment && <div style={{ marginTop: '0.25rem', fontSize: '0.875rem' }}>{packet.comment}</div>}
|
|
</div>
|
|
</Popup>
|
|
</Marker>
|
|
) : (
|
|
<CircleMarker
|
|
center={[packet.latitude as number, packet.longitude as number]}
|
|
radius={8}
|
|
pathOptions={{
|
|
color: '#dc3545',
|
|
fillColor: '#dc3545',
|
|
fillOpacity: 0.8,
|
|
weight: 3,
|
|
}}
|
|
>
|
|
<Popup>
|
|
<div>
|
|
<Callsign call={packet.frame.source.call} ssid={packet.frame.source.ssid} />
|
|
<br />
|
|
Lat: {packet.latitude?.toFixed(4)}, Lon: {packet.longitude?.toFixed(4)}
|
|
{packet.altitude && <div>Alt: {packet.altitude.toFixed(0)}m</div>}
|
|
{packet.speed && <div>Speed: {packet.speed}kt</div>}
|
|
{packet.comment && <div style={{ marginTop: '0.25rem', fontSize: '0.875rem' }}>{packet.comment}</div>}
|
|
</div>
|
|
</Popup>
|
|
</CircleMarker>
|
|
)
|
|
)}
|
|
</MapContainer>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
const PacketDetailsPane: React.FC<{ packet: APRSPacketRecord | null }> = ({ packet }) => {
|
|
if (!packet) {
|
|
return (
|
|
<Card body className="data-table-card h-100">
|
|
<h6>Select a packet</h6>
|
|
<div>Click any packet in the list to view details and map.</div>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Stack gap={2} className="h-100 aprs-detail-stack">
|
|
<Card body className="data-table-card">
|
|
<Stack direction="horizontal" gap={2} className="mb-2">
|
|
<h6 className="mb-0">Packet Details</h6>
|
|
<Badge bg="primary">
|
|
<Callsign call={packet.frame.source.call} ssid={packet.frame.source.ssid} plain />
|
|
</Badge>
|
|
</Stack>
|
|
<HeaderFact label="Timestamp" value={packet.timestamp.toLocaleTimeString()} />
|
|
<HeaderFact
|
|
label="Source"
|
|
value={<Callsign call={packet.frame.source.call} ssid={packet.frame.source.ssid} />}
|
|
/>
|
|
{packet.radioName && <HeaderFact label="Radio" value={packet.radioName} />}
|
|
<HeaderFact
|
|
label="Destination"
|
|
value={<Callsign call={packet.frame.destination.call} ssid={packet.frame.destination.ssid} />}
|
|
/>
|
|
<HeaderFact label="Path" value={packet.frame.path.map((addr) => `${addr.call}${addr.ssid ? `-${addr.ssid}` : ''}${addr.isRepeated ? '*' : ''}`).join(', ') || 'None'} />
|
|
</Card>
|
|
|
|
{(packet.latitude || packet.longitude || packet.altitude || packet.speed || packet.course) && (
|
|
<Card body className="data-table-card">
|
|
<h6 className="mb-2">Position Data</h6>
|
|
{packet.latitude && <HeaderFact label="Latitude" value={packet.latitude.toFixed(6)} />}
|
|
{packet.longitude && <HeaderFact label="Longitude" value={packet.longitude.toFixed(6)} />}
|
|
{packet.altitude && <HeaderFact label="Altitude" value={`${packet.altitude.toFixed(0)} m`} />}
|
|
{packet.speed !== undefined && <HeaderFact label="Speed" value={`${packet.speed} kt`} />}
|
|
{packet.course !== undefined && <HeaderFact label="Course" value={`${packet.course}°`} />}
|
|
</Card>
|
|
)}
|
|
|
|
{packet.comment && (
|
|
<Card body className="data-table-card">
|
|
<h6 className="mb-2">Comment</h6>
|
|
<div>{packet.comment}</div>
|
|
</Card>
|
|
)}
|
|
|
|
<Card body className="data-table-card">
|
|
<h6 className="mb-2">Raw Data</h6>
|
|
<code className="aprs-raw-code">{packet.raw}</code>
|
|
</Card>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
const PacketTable: React.FC<{
|
|
packets: APRSPacketRecord[];
|
|
radioFilter?: string;
|
|
selectedPacketKey: string | null;
|
|
onSelectPacket: (packet: APRSPacketRecord) => void;
|
|
onClearSelection: () => void;
|
|
streamReady: boolean;
|
|
}> = ({ packets, radioFilter, selectedPacketKey, onSelectPacket, onClearSelection, streamReady }) => {
|
|
const scrollRef = React.useRef<HTMLDivElement>(null);
|
|
|
|
const selectedIndex = useMemo(() => {
|
|
if (!selectedPacketKey) {
|
|
return null;
|
|
}
|
|
const index = packets.findIndex((packet) => getPacketKey(packet) === selectedPacketKey);
|
|
return index >= 0 ? index : null;
|
|
}, [packets, selectedPacketKey]);
|
|
|
|
const { showShortcuts, setShowShortcuts, shortcuts } = useKeyboardListNavigation({
|
|
itemCount: packets.length,
|
|
selectedIndex,
|
|
onSelectIndex: (index) => {
|
|
if (index === null) {
|
|
onClearSelection();
|
|
return;
|
|
}
|
|
const packet = packets[index];
|
|
if (packet) {
|
|
onSelectPacket(packet);
|
|
}
|
|
},
|
|
scrollContainerRef: scrollRef,
|
|
});
|
|
|
|
return (
|
|
<Card className="data-table-card h-100 d-flex flex-column">
|
|
<Card.Header className="data-table-header d-flex justify-content-between align-items-center">
|
|
<span>APRS Packets</span>
|
|
<div className="d-flex align-items-center gap-2">
|
|
<StreamStatus ready={streamReady} />
|
|
</div>
|
|
</Card.Header>
|
|
<Card.Body className="data-table-body p-0">
|
|
<div className="data-table-scroll" ref={scrollRef}>
|
|
<Table hover responsive className="data-table mb-0" size="sm">
|
|
<thead>
|
|
<tr>
|
|
<th>Time</th>
|
|
<th> </th>
|
|
<th>Source</th>
|
|
<th>Destination</th>
|
|
<th> </th>
|
|
<th>Comment</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{packets.map((packet, index) => (
|
|
<tr
|
|
key={getPacketKey(packet)}
|
|
data-nav-item="true"
|
|
className={selectedIndex === index ? 'is-selected' : ''}
|
|
onClick={() => onSelectPacket(packet)}
|
|
>
|
|
<td style={{ verticalAlign: 'top' }}>{packet.timestamp.toLocaleTimeString()}</td>
|
|
<td style={{ verticalAlign: 'top' }}>
|
|
<CountryFlag callsign={packet.frame.source.call} size={1.25} />
|
|
</td>
|
|
<td style={{ verticalAlign: 'top' }}>
|
|
<Callsign call={packet.frame.source.call} ssid={packet.frame.source.ssid} />
|
|
</td>
|
|
<td style={{ verticalAlign: 'top' }}>
|
|
<Callsign call={packet.frame.destination.call} ssid={packet.frame.destination.ssid} />
|
|
</td>
|
|
<td style={{ verticalAlign: 'top' }}>
|
|
{packet.symbol && <APRSSymbol symbol={packet.symbol} size={24} />}
|
|
</td>
|
|
<td style={{ verticalAlign: 'top' }}>{packet.comment || '-'}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</Table>
|
|
</div>
|
|
</Card.Body>
|
|
{radioFilter && <Card.Footer className="text-muted" style={{ fontSize: '0.875rem' }}>Filtered by radio: {radioFilter}</Card.Footer>}
|
|
<KeyboardShortcutsModal
|
|
show={showShortcuts}
|
|
onHide={() => setShowShortcuts(false)}
|
|
shortcuts={shortcuts}
|
|
/>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
const APRSPacketsView: React.FC = () => {
|
|
const { packets, streamReady } = useAPRSData();
|
|
const [searchParams] = useSearchParams();
|
|
const radioFilter = searchParams.get('radio') || undefined;
|
|
const [selectedPacketKey, setSelectedPacketKey] = useState<string | null>(null);
|
|
|
|
// Filter packets by radio name if specified
|
|
const filteredPackets = useMemo(() => {
|
|
if (!radioFilter) return packets;
|
|
return packets.filter(packet => packet.radioName === radioFilter);
|
|
}, [packets, radioFilter]);
|
|
|
|
const selectedPacket = useMemo(() => {
|
|
if (!selectedPacketKey) {
|
|
return null;
|
|
}
|
|
return filteredPackets.find((packet) => getPacketKey(packet) === selectedPacketKey) ?? null;
|
|
}, [filteredPackets, selectedPacketKey]);
|
|
|
|
return (
|
|
<VerticalSplit
|
|
ratio="1:1"
|
|
left={<PacketTable packets={filteredPackets} radioFilter={radioFilter} selectedPacketKey={selectedPacketKey} onSelectPacket={(packet) => setSelectedPacketKey(getPacketKey(packet))} onClearSelection={() => setSelectedPacketKey(null)} streamReady={streamReady} />}
|
|
right={
|
|
<HorizontalSplit
|
|
top={<APRSMapPane packet={selectedPacket} packets={filteredPackets} onSelectPacket={(packet) => setSelectedPacketKey(getPacketKey(packet))} />}
|
|
bottom={<PacketDetailsPane packet={selectedPacket} />}
|
|
/>
|
|
}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default APRSPacketsView;
|