update
This commit is contained in:
@@ -0,0 +1,323 @@
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { Minus, Plus, Crosshair, X } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { spotStatusKey } from '@/lib/spot';
|
||||
|
||||
// BandMap — vertical spectrum panel. Layout follows Log4OM's well-loved
|
||||
// design: a kHz scale on the left, callsign labels stacked vertically on
|
||||
// the right (one per line, no overlap), connected to their actual
|
||||
// frequency on the scale by diagonal "leader" lines. Wheel-scroll for
|
||||
// long spot lists, Ctrl+wheel to zoom.
|
||||
|
||||
interface Spot {
|
||||
source_id?: number;
|
||||
source_name?: string;
|
||||
dx_call: string;
|
||||
freq_khz: number;
|
||||
freq_hz: number;
|
||||
band?: string;
|
||||
comment?: string;
|
||||
spotter?: string;
|
||||
}
|
||||
|
||||
type SpotStatusEntry = { status: string; country?: string };
|
||||
|
||||
interface Props {
|
||||
band: string;
|
||||
spots: Spot[];
|
||||
spotStatus: Record<string, SpotStatusEntry>;
|
||||
currentFreqHz: number;
|
||||
onSpotClick: (s: Spot) => void;
|
||||
onClose?: () => void;
|
||||
}
|
||||
|
||||
// Visible kHz range per band — covers IARU R1 plus a small pad so spots
|
||||
// right at the edge are still drawn.
|
||||
const BAND_RANGES: Record<string, [number, number]> = {
|
||||
'160m': [1800, 2000],
|
||||
'80m': [3500, 3800],
|
||||
'60m': [5350, 5450],
|
||||
'40m': [7000, 7200],
|
||||
'30m': [10100, 10150],
|
||||
'20m': [14000, 14350],
|
||||
'17m': [18068, 18168],
|
||||
'15m': [21000, 21450],
|
||||
'12m': [24890, 24990],
|
||||
'10m': [28000, 29700],
|
||||
'6m': [50000, 50500],
|
||||
'4m': [70000, 70500],
|
||||
'2m': [144000, 146000],
|
||||
'70cm': [430000, 440000],
|
||||
};
|
||||
|
||||
const SEGMENT_COLORS: Record<string, [number, number, string][]> = {
|
||||
'160m': [[1800, 1838, 'fill-emerald-50'], [1838, 1840, 'fill-sky-50'], [1840, 2000, 'fill-amber-50']],
|
||||
'80m': [[3500, 3580, 'fill-emerald-50'], [3580, 3600, 'fill-sky-50'], [3600, 3800, 'fill-amber-50']],
|
||||
'60m': [[5350, 5450, 'fill-amber-50']],
|
||||
'40m': [[7000, 7040, 'fill-emerald-50'], [7040, 7100, 'fill-sky-50'], [7100, 7200, 'fill-amber-50']],
|
||||
'30m': [[10100, 10130, 'fill-emerald-50'], [10130, 10150, 'fill-sky-50']],
|
||||
'20m': [[14000, 14070, 'fill-emerald-50'], [14070, 14100, 'fill-sky-50'], [14100, 14350, 'fill-amber-50']],
|
||||
'17m': [[18068, 18095, 'fill-emerald-50'], [18095, 18110, 'fill-sky-50'], [18110, 18168, 'fill-amber-50']],
|
||||
'15m': [[21000, 21070, 'fill-emerald-50'], [21070, 21150, 'fill-sky-50'], [21150, 21450, 'fill-amber-50']],
|
||||
'12m': [[24890, 24915, 'fill-emerald-50'], [24915, 24940, 'fill-sky-50'], [24940, 24990, 'fill-amber-50']],
|
||||
'10m': [[28000, 28070, 'fill-emerald-50'], [28070, 28300, 'fill-sky-50'], [28300, 29700, 'fill-amber-50']],
|
||||
'6m': [[50000, 50100, 'fill-emerald-50'], [50100, 50500, 'fill-amber-50']],
|
||||
};
|
||||
|
||||
function statusColor(s: string): { fg: string; line: string } {
|
||||
// fg is the label text colour; line is the SVG stroke. Both follow the
|
||||
// same NEW / NEW BAND / NEW SLOT / WORKED palette as the spot table.
|
||||
switch (s) {
|
||||
case 'new': return { fg: 'text-rose-700', line: 'stroke-rose-500' };
|
||||
case 'new-band': return { fg: 'text-amber-700', line: 'stroke-amber-500' };
|
||||
case 'new-slot': return { fg: 'text-yellow-700', line: 'stroke-yellow-600' };
|
||||
case 'worked': return { fg: 'text-muted-foreground', line: 'stroke-border' };
|
||||
default: return { fg: 'text-emerald-700', line: 'stroke-emerald-600' };
|
||||
}
|
||||
}
|
||||
|
||||
const ZOOMS = [1, 2, 4, 8, 16];
|
||||
const SCALE_W = 56; // px — left freq scale column
|
||||
const LINE_H = 18; // px — per-callsign row height
|
||||
const LABEL_PAD_LEFT = 24; // px — diagonal line lands here, before the text
|
||||
|
||||
export function BandMap({ band, spots, spotStatus, currentFreqHz, onSpotClick, onClose }: Props) {
|
||||
const range = BAND_RANGES[band];
|
||||
const segments = SEGMENT_COLORS[band] ?? [];
|
||||
const [zoomIdx, setZoomIdx] = useState(0);
|
||||
const [center, setCenter] = useState<number | null>(null);
|
||||
const scrollerRef = useRef<HTMLDivElement | null>(null);
|
||||
const innerRef = useRef<HTMLDivElement | null>(null);
|
||||
const [containerH, setContainerH] = useState(400);
|
||||
|
||||
// Track the visible container height so we can stretch the scale.
|
||||
useEffect(() => {
|
||||
const el = scrollerRef.current;
|
||||
if (!el) return;
|
||||
const ro = new ResizeObserver(() => setContainerH(el.clientHeight));
|
||||
ro.observe(el);
|
||||
setContainerH(el.clientHeight);
|
||||
return () => ro.disconnect();
|
||||
}, []);
|
||||
|
||||
// Window geometry.
|
||||
const zoom = ZOOMS[zoomIdx];
|
||||
const fallback: [number, number] = range ?? [0, 1];
|
||||
const [bandLo, bandHi] = fallback;
|
||||
const visSpan = (bandHi - bandLo) / zoom;
|
||||
const c0 = center ?? (currentFreqHz > 0 ? currentFreqHz / 1000 : (bandLo + (bandHi - bandLo) / 2));
|
||||
const c = clampCenter(c0, fallback, zoom);
|
||||
const lo = c - visSpan / 2;
|
||||
const hi = c + visSpan / 2;
|
||||
const span = hi - lo;
|
||||
|
||||
// Filtered + sorted spots (highest freq first → top of the column).
|
||||
const visible = useMemo(() => {
|
||||
if (!range) return [];
|
||||
return spots
|
||||
.filter((s) => s.freq_khz >= lo && s.freq_khz <= hi)
|
||||
.sort((a, b) => b.freq_khz - a.freq_khz);
|
||||
}, [spots, lo, hi, range]);
|
||||
|
||||
// Total content height: stretch so every label has its own row, but
|
||||
// never shrink below the visible container so the scale fills the box
|
||||
// when there are few spots.
|
||||
const totalH = Math.max(containerH, visible.length * LINE_H + 16);
|
||||
|
||||
// Ctrl+wheel = zoom, regular wheel = native scroll (default browser).
|
||||
useEffect(() => {
|
||||
const el = scrollerRef.current;
|
||||
if (!el) return;
|
||||
const onWheel = (e: WheelEvent) => {
|
||||
if (!range) return;
|
||||
if (e.ctrlKey || e.metaKey) {
|
||||
e.preventDefault();
|
||||
setZoomIdx((z) => Math.max(0, Math.min(ZOOMS.length - 1, z + (e.deltaY > 0 ? -1 : 1))));
|
||||
}
|
||||
};
|
||||
el.addEventListener('wheel', onWheel, { passive: false });
|
||||
return () => el.removeEventListener('wheel', onWheel);
|
||||
}, [range]);
|
||||
|
||||
if (!range) {
|
||||
return (
|
||||
<div className="h-full w-full flex flex-col items-center justify-center text-xs text-muted-foreground p-3 bg-muted/20">
|
||||
<div className="text-sm font-semibold mb-1">Band map</div>
|
||||
Not configured for {band || '—'}.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Tick step adapts to visible kHz span so labels stay legible.
|
||||
let step = 100;
|
||||
if (span <= 1500) step = 50;
|
||||
if (span <= 800) step = 25;
|
||||
if (span <= 300) step = 10;
|
||||
if (span <= 100) step = 5;
|
||||
if (span <= 40) step = 2;
|
||||
if (span <= 20) step = 1;
|
||||
const ticks: number[] = [];
|
||||
for (let t = Math.ceil(lo / step) * step; t <= hi; t += step) ticks.push(t);
|
||||
|
||||
// Y-axis convention: HIGH frequency at top, LOW at bottom (matches a
|
||||
// physical receiver dial). freqToY maps a kHz to pixel-Y in totalH.
|
||||
const freqToY = (kHz: number) => (1 - (kHz - lo) / span) * totalH;
|
||||
|
||||
function recenterOnRig() {
|
||||
if (currentFreqHz > 0) setCenter(clampCenter(currentFreqHz / 1000, range, zoom));
|
||||
else setCenter(null);
|
||||
// Also scroll to keep the rig pointer in view.
|
||||
if (scrollerRef.current && currentFreqHz > 0) {
|
||||
const y = freqToY(currentFreqHz / 1000);
|
||||
scrollerRef.current.scrollTop = Math.max(0, y - containerH / 2);
|
||||
}
|
||||
}
|
||||
|
||||
const currentKHz = currentFreqHz ? currentFreqHz / 1000 : 0;
|
||||
const showRigPointer = currentKHz >= lo && currentKHz <= hi;
|
||||
const rigY = freqToY(currentKHz);
|
||||
|
||||
return (
|
||||
<div className="h-full w-full flex flex-col min-h-0 bg-card">
|
||||
<div className="px-3 py-1.5 text-xs font-semibold uppercase tracking-wider text-muted-foreground bg-muted/40 border-b border-border flex items-center gap-1 shrink-0">
|
||||
<span className="flex-1">Map · {band}</span>
|
||||
<button type="button" onClick={() => setZoomIdx((z) => Math.max(0, z - 1))} disabled={zoomIdx === 0}
|
||||
className="size-5 inline-flex items-center justify-center rounded hover:bg-muted disabled:opacity-30"
|
||||
title="Zoom out">
|
||||
<Minus className="size-3" />
|
||||
</button>
|
||||
<span className="font-mono text-[10px] w-7 text-center">{zoom}×</span>
|
||||
<button type="button" onClick={() => setZoomIdx((z) => Math.min(ZOOMS.length - 1, z + 1))} disabled={zoomIdx === ZOOMS.length - 1}
|
||||
className="size-5 inline-flex items-center justify-center rounded hover:bg-muted disabled:opacity-30"
|
||||
title="Zoom in">
|
||||
<Plus className="size-3" />
|
||||
</button>
|
||||
<button type="button" onClick={recenterOnRig}
|
||||
className="size-5 inline-flex items-center justify-center rounded hover:bg-muted"
|
||||
title="Center on current rig frequency">
|
||||
<Crosshair className="size-3" />
|
||||
</button>
|
||||
{onClose && (
|
||||
<button type="button" onClick={onClose}
|
||||
className="size-5 inline-flex items-center justify-center rounded hover:bg-muted"
|
||||
title="Hide band map">
|
||||
<X className="size-3" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div ref={scrollerRef} className="flex-1 overflow-y-auto overflow-x-hidden relative">
|
||||
<div ref={innerRef} className="relative" style={{ height: totalH }}>
|
||||
{/* Scale column background — full height, segments stretched */}
|
||||
<svg
|
||||
className="absolute top-0 left-0 pointer-events-none"
|
||||
width={SCALE_W}
|
||||
height={totalH}
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
{segments.map(([s, e, cls], i) => {
|
||||
if (e < lo || s > hi) return null;
|
||||
const y1 = freqToY(Math.min(e, hi));
|
||||
const y2 = freqToY(Math.max(s, lo));
|
||||
return <rect key={i} x={0} y={y1} width={SCALE_W} height={Math.max(0, y2 - y1)} className={cls} />;
|
||||
})}
|
||||
{/* Scale border */}
|
||||
<line x1={SCALE_W - 0.5} y1={0} x2={SCALE_W - 0.5} y2={totalH} className="stroke-border" strokeWidth={1} />
|
||||
</svg>
|
||||
|
||||
{/* Tick marks + labels on scale */}
|
||||
{ticks.map((t) => {
|
||||
const y = freqToY(t);
|
||||
const major = t % (step * 5) === 0;
|
||||
return (
|
||||
<div key={t} className="absolute left-0 flex items-center pointer-events-none" style={{ top: y, transform: 'translateY(-50%)', width: SCALE_W }}>
|
||||
<div className={cn('border-t', major ? 'w-full border-foreground/40' : 'w-3 border-border/60')} />
|
||||
{major && (
|
||||
<span className="absolute left-1 text-[10px] font-mono text-muted-foreground/90 bg-card/80 px-0.5">
|
||||
{t.toLocaleString()}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* SVG layer for leader lines + rig pointer */}
|
||||
<svg
|
||||
className="absolute inset-0 pointer-events-none"
|
||||
width="100%"
|
||||
height={totalH}
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
{visible.map((s, i) => {
|
||||
const k = spotStatusKey(s.dx_call, s.band ?? '', s.comment ?? '', s.freq_hz);
|
||||
const st = spotStatus[k]?.status ?? '';
|
||||
const color = statusColor(st);
|
||||
const fy = freqToY(s.freq_khz);
|
||||
const ly = i * LINE_H + LINE_H / 2 + 8;
|
||||
return (
|
||||
<line
|
||||
key={`l-${i}-${s.dx_call}`}
|
||||
x1={SCALE_W}
|
||||
y1={fy}
|
||||
x2={SCALE_W + LABEL_PAD_LEFT}
|
||||
y2={ly}
|
||||
className={color.line}
|
||||
strokeWidth={1}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
{showRigPointer && (
|
||||
<>
|
||||
<polygon
|
||||
points={`${SCALE_W - 1},${rigY - 4} ${SCALE_W + 5},${rigY} ${SCALE_W - 1},${rigY + 4}`}
|
||||
className="fill-primary"
|
||||
/>
|
||||
<line
|
||||
x1={SCALE_W + 5}
|
||||
y1={rigY}
|
||||
x2="100%"
|
||||
y2={rigY}
|
||||
className="stroke-primary/40"
|
||||
strokeWidth={1}
|
||||
strokeDasharray="3 3"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</svg>
|
||||
|
||||
{/* Callsign label stack — one per line, sorted by freq desc */}
|
||||
<div className="absolute" style={{ left: SCALE_W + LABEL_PAD_LEFT, top: 8, right: 0 }}>
|
||||
{visible.map((s, i) => {
|
||||
const k = spotStatusKey(s.dx_call, s.band ?? '', s.comment ?? '', s.freq_hz);
|
||||
const st = spotStatus[k]?.status ?? '';
|
||||
const color = statusColor(st);
|
||||
return (
|
||||
<button
|
||||
key={`${s.freq_khz}-${s.dx_call}-${i}`}
|
||||
type="button"
|
||||
onClick={() => onSpotClick(s)}
|
||||
style={{ height: LINE_H, lineHeight: `${LINE_H}px` }}
|
||||
className={cn(
|
||||
'block w-full text-left px-1 font-mono text-[11px] font-bold hover:bg-accent/30 transition-colors whitespace-nowrap',
|
||||
color.fg,
|
||||
)}
|
||||
title={`${s.dx_call} · ${s.freq_khz.toFixed(1)} kHz${s.comment ? ' · ' + s.comment : ''}${s.spotter ? ' · de ' + s.spotter : ''}`}
|
||||
>
|
||||
{s.dx_call}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-3 py-1 text-[9px] text-muted-foreground bg-muted/30 border-t border-border font-mono text-center shrink-0">
|
||||
scroll · ctrl+wheel = zoom · ◎ = recenter
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function clampCenter(c: number, [lo, hi]: [number, number], zoom: number): number {
|
||||
const halfSpan = (hi - lo) / zoom / 2;
|
||||
return Math.max(lo + halfSpan, Math.min(hi - halfSpan, c));
|
||||
}
|
||||
Reference in New Issue
Block a user