// DecodesPanel — every FTx decode from the inbound UDP feed, grouped by T/R period. // // The point of this panel, and what makes it different from the cluster list, is // the PERIOD. FT8 is a sequence of fifteen-second slots, and an operator reads a // band by watching them go by: who called CQ this period, who answered, what I // was sending while they did. A flat list sorted by time loses exactly that — // the slot boundaries are where the information is. // // So the list is grouped, one section per period, newest first, with the // operator's own transmission shown INSIDE the period it went out in. // // Status flags (new entity / band / mode / slot / grid / prefix / POTA / county) // come from the same resolver the cluster uses, so a call means the same thing in // both panels rather than being judged twice by two rules. import { useCallback, useEffect, useMemo, useState } from 'react'; import { AlertTriangle, Radio, Search, X, Signal, ArrowUpRight, Timer, Trash2, Ban, Columns2, Bot } from 'lucide-react'; import { cn } from '@/lib/utils'; import { useI18n } from '@/lib/i18n'; import { chaseAllows } from '@/lib/spotDisplay'; import { pathBetween } from '@/lib/maidenhead'; import { distanceValue, distanceUnit, subscribeDistanceUnit } from '@/lib/units'; import { markerColour, type SpotMarkerKey } from '@/lib/spotMarkers'; import { writeUiPref } from '@/lib/uiPref'; import { SetAutoCallVisible } from '../../wailsjs/go/main/App'; import { decoderName } from '@/lib/decoderName'; export type Decode = { call: string; grid?: string; snr: number; freq_hz: number; dial_hz?: number; band?: string; mode?: string; msg?: string; cq?: boolean; at: string; tr_period?: number; off_air?: boolean; source?: string; instance?: string; dt?: number; audio_hz?: number; // Replayed verbatim when answering the station — see AnswerDecode. ms?: number; low_conf?: boolean; // The mode field as the Decode carried it (the "~"/"+" marker). `mode` above // is the resolved name, for display and for the log; a Reply has to send this // one back or the receiving application finds no matching decode. mode_raw?: string; // The message as sent, untrimmed — replayed in a Reply for the same reason. msg_raw?: string; }; export type TxMsg = { msg: string; de_call?: string; dx_call?: string; mode?: string; band?: string; freq_hz?: number; instance?: string; transmitting?: boolean; // The sender's Enable Tx toggle. The watchdog clears it while leaving the DX // call set — the only sign an exchange was abandoned rather than paused. tx_enabled?: boolean; at: string; }; type StatusEntry = { status?: string; country?: string; continent?: string; worked_call?: boolean; worked_slot?: boolean; new_county?: boolean; new_pota?: boolean; new_pfx?: boolean; new_grid?: boolean; new_state?: boolean; unconf_status?: boolean; unconf_pfx?: boolean; unconf_cty?: boolean; unconf_state?: boolean; // "new" = never worked, "unconf" = worked and awaiting a confirmation. grid_state?: string; state?: string; grid?: string; lotw?: boolean; }; interface Props { decodes: Decode[]; txMsgs: TxMsg[]; // txState is the LIVE transmit state — what is going out right now and to // whom. Separate from txMsgs, which is the history threaded into the periods. txState?: TxMsg | null; // The same, keyed by instance. In a split view the shared txState is whichever // receiver reported last, which is a coin toss — each pane needs its own. txStates?: Record; spotStatus: Record; // The band the RIG is on, when CAT is connected. Only ever compared with what // the decoder announces — see the drift warning. rigBand?: string; onCall: (d: Decode) => void; // A single click: take the station without transmitting — fill the entry, and // point the panels at it. Absent, a click falls back to onCall. onSelect?: (d: Decode) => void; myCall?: string; // The station's own square: distance is measured from it, and without one the // column stays empty rather than guessing. myGrid?: string; // Drop every decode and transmit message held for this panel. The list is a // live view, not data — clearing it costs nothing but the seconds until the // next period lands. // instance = clear just that receiver's decodes; empty = all of them. A split // view needs the narrow form: clearing both because you wanted one is the same // loss of context the split exists to prevent. onClear?: (instance?: string) => void; // Stop the decoding application transmitting, mid-over. Routed to one // instance by program id — see HaltDecodeTx. onHalt?: (instance: string) => void; // Auto-call on/off, mirrored here as well as in Preferences: it is the one // setting an operator wants to reach WITHOUT leaving the band — turning the // machine off is not something to go hunting through a settings tree for. autoCallOn?: boolean; onToggleAutoCall?: () => void; // The engine's own account of what it is doing, straight from the backend. autoCall?: { target: string; waiting: string; calls: number; max: number; misses: number; max_miss: number; stopped: boolean; reason: string }; // The chase list, here as well as in Preferences: naming the station you are // waiting for is done WHILE watching the band, not in a settings tree. autoCallOnly?: string; onSetAutoCallOnly?: (list: string) => void; // The watch list, as PATTERNS (VK9*, 3Y0J). A decode of one is worth saying // so where the operator is reading the band, not only in the watchlist tab. watchlist?: string[]; } // The "new" categories, as toggle badges — the same idea and the same colours as // the Chase New panel, so an operator who has learned one has learned both. // // All off means no filtering at all: this is a decode LOG first, and a panel // that starts by hiding most of the band would be lying about what is on it. type NewCat = 'dxcc' | 'band' | 'mode' | 'slot' | 'pfx' | 'grid' | 'pota' | 'cty' | 'state'; // The seven, in the order an operator reads them. const CONTINENTS = ['AF', 'AN', 'AS', 'EU', 'NA', 'OC', 'SA']; const NEW_CATS: { key: NewCat; label: string; colour: string }[] = [ { key: 'dxcc', label: 'dec.stNew', colour: 'var(--success)' }, { key: 'band', label: 'dec.stBand', colour: 'var(--warning)' }, { key: 'mode', label: 'dec.stMode', colour: 'var(--info)' }, { key: 'slot', label: 'dec.stSlot', colour: 'var(--caution)' }, { key: 'pota', label: 'dec.bgPota', colour: markerColour('new_pota') }, { key: 'grid', label: 'dec.bgGrid', colour: markerColour('new_grid') }, { key: 'pfx', label: 'dec.bgPfx', colour: markerColour('new_pfx') }, { key: 'cty', label: 'dec.bgCounty', colour: markerColour('new_county') }, { key: 'state', label: 'dec.bgState', colour: markerColour('new_state') }, ]; // catsOf lists everything a decode is new for. A station can be several at once // — a new entity that is also a new park — so this is a set, not a verdict. function catsOf(e: StatusEntry | undefined): Set { const out = new Set(); if (!e) return out; switch (e.status) { case 'new': out.add('dxcc'); break; // NEW BAND+MODE lights BOTH badges: the two facts are true at once, and // showing one of them would say the entity is already worked in the other. case 'new-band-mode': out.add('band'); out.add('mode'); break; case 'new-band': out.add('band'); break; case 'new-mode': out.add('mode'); break; case 'new-slot': out.add('slot'); break; } if (e.new_pota) out.add('pota'); if (e.new_grid) out.add('grid'); if (e.new_pfx) out.add('pfx'); if (e.new_county) out.add('cty'); if (e.new_state) out.add('state'); return out; } // isWatched applies the watch list's own rule — a trailing "*" is a prefix, // anything else is the whole callsign — so a decode is judged here exactly as // the backend judges a spot. Two rules for one list is how a badge and an alert // start disagreeing about the same station. function isWatched(call: string, patterns: string[] | undefined): boolean { if (!patterns || patterns.length === 0 || !call) return false; const c = call.toUpperCase(); for (const raw of patterns) { const p = (raw ?? '').toUpperCase().trim(); if (!p) continue; if (p.endsWith('*') ? c.startsWith(p.slice(0, -1)) : c === p) return true; } return false; } const CAT_KEY = 'opslog.decodeCats'; const SPLIT_KEY = 'opslog.decodeSplit'; const FILTER_KEY = 'opslog.decodeFilters'; // usePersisted is useState that survives the panel being unmounted. // // All the filters share ONE stored object rather than a key each: they are read // and written together, and a dozen localStorage entries for one filter bar is a // dozen things to keep in step when one of them is renamed. function readFilters(): Record { try { const v = JSON.parse(localStorage.getItem(FILTER_KEY) || '{}'); return v && typeof v === 'object' ? v : {}; } catch { return {}; } } function usePersisted(key: string, fallback: T): [T, (v: T) => void] { const [v, setV] = useState(() => { const stored = readFilters()[key]; return (typeof stored === typeof fallback ? stored as T : fallback); }); const set = (next: T) => { setV(next); try { localStorage.setItem(FILTER_KEY, JSON.stringify({ ...readFilters(), [key]: next })); } catch { /* quota / private mode — the filter still works this session */ } }; return [v, set]; } // DEFAULT_TR is the slot length assumed when nothing better is known. Fifteen // seconds is FT8, the overwhelming majority of what arrives here; a wrong guess // only mis-groups, it never loses a decode. const DEFAULT_TR = 15; // MODE_TR is the authority on slot length, ahead of what the sender reports. // // Status carries the T/R period as a whole number of seconds, so FT4 arrives as // 7 or 8 depending on which way the sender rounded — and a period that is out by // half a second walks across the real boundary until decodes land in the wrong // slot entirely. The mode name gives the exact figure, and the halving sequence // is the whole family: 15, 7.5, 3.75. const MODE_TR: Record = { FT8: 15, FT4: 7.5, FT2: 3.75, JT65: 60, JT9: 60, JS8: 15, }; // trSeconds picks the slot length for a decode: the mode's own figure when we // know it, the sender's rounded one otherwise, and FT8 as the last resort. function trSeconds(mode?: string, reported?: number): number { const m = MODE_TR[(mode ?? '').toUpperCase()]; if (m) return m; if (reported && reported > 0) return reported; return DEFAULT_TR; } // ROW is the grid shell, shared by the header and every row so the two can // never drift. The column TEMPLATE is no longer baked in: every column has a // width the operator can drag, so the table takes exactly the room it needs and // no more. // // Message used to be an elastic 1fr column. On a wide screen that handed it // every spare pixel — a message column hundreds of pixels wider than its longest // line, with Country and Status marooned against the far edge. Fixed widths // throughout mean the slack stays OUTSIDE the table, which is where a second // panel can go. const ROW = 'grid items-stretch'; // CELL draws the column rule. items-stretch above plus a right border here is // what makes the lines run unbroken from the header to the bottom of the list — // the thing that turns rows of text into a table you can follow across. const CELL = 'flex items-center min-w-0 px-2 border-r border-border/30'; const CELL_LAST = 'flex items-center min-w-0 px-2 gap-1 overflow-hidden'; // ── Columns ────────────────────────────────────────────────────────────────── // One declaration per column, in display order: the header, the widths and the // resize handles all read from this, so a column cannot be resized in the header // and stay the old width in the body. type ColKey = 'time' | 'rx' | 'snr' | 'dt' | 'freq' | 'band' | 'mode' | 'msg' | 'grid' | 'dist' | 'state' | 'country' | 'status'; const COLS: { key: ColKey; tkey: string; def: number; min: number }[] = [ { key: 'time', tkey: 'dec.colTime', def: 64, min: 44 }, // WHICH RECEIVER heard it. Shown only while more than one is feeding, and // that is the case it exists for: two decoders on one band send the same // stations twice, each with its own SNR and DT, and a merged list gave no way // at all to tell a second receiver from a duplicate. { key: 'rx', tkey: 'dec.colRx', def: 74, min: 44 }, { key: 'snr', tkey: 'dec.colSnr', def: 50, min: 36 }, { key: 'dt', tkey: 'dec.colDt', def: 44, min: 32 }, { key: 'freq', tkey: 'dec.colFreq', def: 56, min: 40 }, { key: 'band', tkey: 'dec.colBand', def: 50, min: 36 }, { key: 'mode', tkey: 'dec.colMode', def: 44, min: 36 }, // 300 px holds the longest real FT8 line ("<3B9/SQ9UM> LZ3BS KN22") with room // to spare; anything past that was the dead space this replaces. { key: 'msg', tkey: 'dec.colMsg', def: 300, min: 120 }, // The grid was carried and shown nowhere: it drives the NEW GRID badge, and // an operator chasing squares could see the verdict but never the square. { key: 'grid', tkey: 'dec.colGrid', def: 62, min: 46 }, // For the WAS chasers: the badge carries the two letters, the name spells // them out — "SD" alone is a quiz for a European. // Next to the square it is computed from. A four-character grid is a square // tens of kilometres wide, so this is rounded to whole units and never // pretends to more: it answers "is that station across the pond or across the // valley", which is what decides whether the report is worth anything. { key: 'dist', tkey: 'dec.colDist', def: 70, min: 46 }, { key: 'state', tkey: 'dec.colState', def: 120, min: 56 }, { key: 'country', tkey: 'dec.colCountry', def: 140, min: 70 }, { key: 'status', tkey: 'dec.colStatus', def: 186, min: 80 }, ]; const US_STATES: Record = { AL: 'Alabama', AK: 'Alaska', AZ: 'Arizona', AR: 'Arkansas', CA: 'California', CO: 'Colorado', CT: 'Connecticut', DE: 'Delaware', FL: 'Florida', GA: 'Georgia', HI: 'Hawaii', ID: 'Idaho', IL: 'Illinois', IN: 'Indiana', IA: 'Iowa', KS: 'Kansas', KY: 'Kentucky', LA: 'Louisiana', ME: 'Maine', MD: 'Maryland', MA: 'Massachusetts', MI: 'Michigan', MN: 'Minnesota', MS: 'Mississippi', MO: 'Missouri', MT: 'Montana', NE: 'Nebraska', NV: 'Nevada', NH: 'New Hampshire', NJ: 'New Jersey', NM: 'New Mexico', NY: 'New York', NC: 'North Carolina', ND: 'North Dakota', OH: 'Ohio', OK: 'Oklahoma', OR: 'Oregon', PA: 'Pennsylvania', RI: 'Rhode Island', SC: 'South Carolina', SD: 'South Dakota', TN: 'Tennessee', TX: 'Texas', UT: 'Utah', VT: 'Vermont', VA: 'Virginia', WA: 'Washington', WV: 'West Virginia', WI: 'Wisconsin', WY: 'Wyoming', DC: 'District of Columbia', }; // The columns worth sorting on. Not every column: time is what the periods // already are, and sorting a slot by callsign or message answers no question an // operator has. type SortKey = 'snr' | 'freq' | 'dist' | 'country' | 'status'; const SORTABLE: SortKey[] = ['snr', 'freq', 'dist', 'country', 'status']; // Which way each column is worth reading FIRST — strongest signal, lowest // frequency, furthest DX, A to Z, most wanted. Clicking again reverses it. const SORT_FIRST: Record = { snr: 'desc', freq: 'asc', dist: 'desc', country: 'asc', status: 'desc', }; // How wanted a station is, as a number to sort by. The cluster's own order, // most wanted first — a new entity above a new band above a new slot — so the // two views rank the same things the same way. const STATUS_RANK: Record = { 'new': 100, 'new-band-mode': 90, 'new-band': 80, 'new-mode': 70, 'new-slot': 60, 'new-call': 30, 'worked': 10, }; function statusRank(e?: StatusEntry): number { if (!e) return 0; let r = STATUS_RANK[e.status ?? ''] ?? 0; // The markers that are orthogonal to the entity: a new county on a worked // country is still something to chase, and should not sort with the plain // duplicates. if (e.new_pota) r = Math.max(r, 50); if (e.new_county) r = Math.max(r, 45); if (e.new_grid) r = Math.max(r, 44); if (e.new_state) r = Math.max(r, 43); if (e.new_pfx) r = Math.max(r, 42); return r; } const COL_MAX = 600; const COLW_KEY = 'opslog.decodeColWidths'; type ColWidths = Record; const defaultWidths = (): ColWidths => Object.fromEntries(COLS.map((c) => [c.key, c.def])) as ColWidths; // Stored widths are merged ONTO the defaults rather than used as-is: a saved set // from before a column existed would otherwise leave that column at zero width. function loadWidths(): ColWidths { const out = defaultWidths(); try { const raw = localStorage.getItem(COLW_KEY); if (!raw) return out; const saved = JSON.parse(raw) as Partial>; for (const c of COLS) { const v = saved[c.key]; if (typeof v === 'number' && Number.isFinite(v)) { out[c.key] = Math.min(COL_MAX, Math.max(c.min, Math.round(v))); } } } catch { /* corrupt value — the defaults are a fine answer */ } return out; } // The drag handle sitting on a column's right edge. Pointer capture, so a fast // drag that outruns the cursor still tracks instead of dropping the column. // Double-click restores that one column's default width. function ColResizer({ onResize, onReset }: { onResize: (dx: number) => void; onReset: () => void }) { return ( { e.stopPropagation(); onReset(); }} onPointerDown={(e) => { e.preventDefault(); e.stopPropagation(); const startX = e.clientX; const el = e.currentTarget; el.setPointerCapture(e.pointerId); const move = (ev: PointerEvent) => onResize(ev.clientX - startX); const up = () => { el.removeEventListener('pointermove', move); el.removeEventListener('pointerup', up); }; el.addEventListener('pointermove', move); el.addEventListener('pointerup', up); }} // Wider than it looks: a 1px target is unusable, so the hit area is 7px // with only the hairline painted on hover. className="absolute top-0 right-0 z-10 h-full w-[7px] translate-x-[3px] cursor-col-resize before:absolute before:inset-y-0 before:left-1/2 before:w-px before:bg-transparent hover:before:bg-primary" /> ); } // The "new" badges. Every one of these is a REASON TO CALL, which is why they // get a column of their own rather than a coloured edge: a stripe says something // is special, a badge says what, and the operator is deciding whether to break // off what they are doing. // // Colours match the cluster list and the band map — the same fact must not be // amber in one panel and green in the next. const ENTITY_BADGE: Record = { // colour is the category's own hue, for the UNCONFIRMED rendering: the // filled cls puts light text on a filled chip, and dimming that to a // transparent background left light-on-nothing — an invisible badge. 'new': { label: 'dec.stNew', cls: 'bg-success text-success-foreground', colour: 'var(--success)' }, 'new-band': { label: 'dec.stBand', cls: 'bg-warning text-warning-foreground', colour: 'var(--warning)' }, 'new-mode': { label: 'dec.stMode', cls: 'bg-info text-info-foreground', colour: 'var(--info)' }, 'new-slot': { label: 'dec.stSlot', cls: 'bg-caution text-caution-foreground', colour: 'var(--caution)' }, 'new-call': { label: 'dec.stCall', cls: 'bg-muted text-muted-foreground', colour: 'var(--muted-foreground)' }, }; // entityBadgesFor turns a status into the badges that describe it. // // A LIST, because "new-band-mode" is two facts at once — new on this band and // new in this mode — and the map above has an entry for neither. It was read // with a single lookup, which returned nothing for that status: those rows // passed the BAND and MODE filters and then showed no reason for being there, // which is precisely what was reported. catsOf has always split the status into // its two categories; this is the same split, on the screen. function entityBadgesFor(status: string): { label: string; cls: string; colour: string }[] { if (status === 'new-band-mode') { return [ENTITY_BADGE['new-band'], ENTITY_BADGE['new-mode']]; } const one = ENTITY_BADGE[status]; return one ? [one] : []; } // The orthogonal ones: a station already worked for its entity can still be a // new grid, a new prefix or a park never logged. // // The colour comes from markerColour, the table the cluster list and the band // map read — so a new park is the same green in all three. Applied inline // because those are categorical --chart-* variables, which the theme exposes as // CSS custom properties and not as Tailwind colour utilities; every other place // that paints with them does the same. const EXTRA_BADGES: { key: keyof StatusEntry; marker: SpotMarkerKey; label: string }[] = [ { key: 'new_pota', marker: 'new_pota', label: 'dec.bgPota' }, { key: 'new_grid', marker: 'new_grid', label: 'dec.bgGrid' }, { key: 'new_state', marker: 'new_state', label: 'dec.bgState' }, { key: 'new_pfx', marker: 'new_pfx', label: 'dec.bgPfx' }, { key: 'new_county', marker: 'new_county', label: 'dec.bgCounty' }, ]; // periodStartMs floors an instant to its slot, in MILLISECONDS. // // Milliseconds, not seconds, because FT4's slot is seven and a half of them and // FT2's three and three quarters: flooring to whole seconds put two different // FT4 periods in one bucket and split others down the middle. // // The instant is the decode's OWN timestamp, never its arrival: a period's // decodes reach us in one burst a second or two after the slot closes, so // arrival time would pile a whole period into the next one. function periodStartMs(atMs: number, trSec: number): number { const p = Math.max(0.5, trSec) * 1000; return Math.floor(atMs / p) * p; } // periodLabel names a slot. Sub-second slots get a decimal, or two FT4 periods // inside the same second would print the same heading twice. function periodLabel(ms: number, trSec: number): string { const base = new Date(ms).toISOString().slice(11, 19); if (Number.isInteger(trSec)) return base; const tenths = Math.round((ms % 1000) / 100); return tenths ? `${base}.${tenths}` : base; } // renderMsg prints the decoded line with its leading CQ picked out. // // There used to be a separate green "CQ" badge in front of the message, which // read "CQ CQ PE1NAO JO32" — the badge and the message's own first word saying // the same thing twice. Highlighting the word already in the line keeps the // scannability and drops the stutter. function renderMsg(msg: string, me: string, calling: string, toMe: boolean) { if (!msg) return null; // THE WHOLE LINE, when it is addressed to YOU. // // Token colouring is for reading the band — it picks your call out of a wall // of other people's traffic. A message sent TO you is a different question: // not "is my call in there somewhere" but "what did he just send me", read // from the far side of the shack, so the whole line carries the colour. // // Only that case. The station you are calling also transmits to everybody // else — "LA8WRA LA1RAU/P +00" is your target reporting to another caller — // and setting those lines in the same strong colour said you were in a QSO // you were not in. Its callsign is picked out by the token pass below, which // is what "he is on the air, working somebody else" should look like. if (toMe) { return {msg}; } // Split on whitespace and colour the tokens that matter, rather than the // whole line: an operator scanning a slot is looking for their own call in // the first position (someone answering) and for the station being called. const parts = msg.split(/(\s+)/); return ( <> {parts.map((tok, i) => { if (/^\s+$/.test(tok)) return tok; const bare = tok.replace(/[<>]/g, '').toUpperCase(); if (i === 0 && /^CQ$/i.test(tok)) return {tok.toUpperCase()}; if (me && bare === me) return {tok}; if (calling && bare === calling) return {tok}; return {tok}; })} ); } // PeriodClock shows where the current T/R slot is, against the UTC clock. // // Slots are anchored to UTC, not to when OpsLog started or when the last decode // landed, so this is computed from the wall clock and nothing else — which also // means it keeps running when the band is dead and there is nothing to group. // // It is the one moving thing on the panel, and it answers the question an // operator actually has between overs: how long until the next batch. function PeriodClock({ trSec, mode, tx }: { trSec: number; mode?: string; tx?: boolean }) { const [now, setNow] = useState(() => Date.now()); useEffect(() => { // 100 ms: smooth enough for a bar that fills in three and three quarter // seconds at the fastest, cheap enough to leave running. const id = window.setInterval(() => setNow(Date.now()), 100); return () => window.clearInterval(id); }, []); const p = Math.max(0.5, trSec) * 1000; const into = now % p; const left = (p - into) / 1000; const pct = (into / p) * 100; // The last fifth of a slot is when a decode is imminent and an operator // deciding whether to answer has run out of time to think. const closing = left <= trSec / 5; // TRANSMITTING outranks both. The bar is the one thing on this screen that // moves continuously, so it is what the eye is already on — and "am I on the // air" is the state worth reading from across the room. Red, and it stays red // for the whole over rather than turning amber near the end of it. const tone = tx ? 'danger' : closing ? 'warning' : ''; return ( {left.toFixed(1)} {mode ? `${mode} ${trSec}s` : `${trSec}s`} ); } // hhmmssCompact is the per-row time, HHMMSS with no separators. // // Every row carries it. A decode belongs to a period, and the section heading // names that period — but once a slot runs past a screenful, the heading is // somewhere above and the instant is no longer readable where the decode is. function hhmmssCompact(at: string): string { const ms = Date.parse(at); if (!Number.isFinite(ms)) return ''; return new Date(ms).toISOString().slice(11, 19).replace(/:/g, ''); } // snrTone colours the report by readability rather than as a gradient: an // operator scanning a period wants "workable" to jump out, and -24 dB is not // three shades worse than -6, it is a different decision. function snrTone(snr: number): string { if (snr >= -5) return 'text-success'; if (snr >= -15) return 'text-foreground'; return 'text-muted-foreground/70'; } // buildPeriods cuts a decode list into T/R periods. A plain function, not a // memo, because it is run ONCE PER PANE: with two receivers on two bands the // panel shows two independent period lists side by side, and each has to be cut // with its own slot boundaries. function buildPeriods(filtered: Decode[], txMsgs: TxMsg[]) { const by = new Map(); for (const d of filtered) { const at = Date.parse(d.at); if (!Number.isFinite(at)) continue; const k = periodStartMs(at, trSeconds(d.mode, d.tr_period)); let g = by.get(k); if (!g) { g = { decodes: [], tx: [] }; by.set(k, g); } g.decodes.push(d); } for (const m of txMsgs) { const at = Date.parse(m.at); if (!Number.isFinite(at)) continue; const k = periodStartMs(at, trSeconds(m.mode, undefined)); // A transmit slot CREATES its period when there is none. // // This is the whole alternation, and getting it wrong hid the feature // completely: FT8 transmits and receives in opposite slots, so the period // you were sending in is exactly the one with no decodes in it. Dropping // the message when its period was empty meant it never appeared at all. let g = by.get(k); if (!g) { g = { decodes: [], tx: [] }; by.set(k, g); } g.tx.push(m); } return [...by.entries()] .sort((a, b) => b[0] - a[0]) .map(([start, g]) => ({ start, // The slot length this period was cut with, so its heading is labelled // the same way it was grouped. tr: trSeconds(g.decodes[0]?.mode ?? g.tx[0]?.mode, g.decodes[0]?.tr_period), tx: g.tx, // ARRIVAL order inside a period, per the operator: it mirrors the // decoder's own window line for line, which makes the two screens // comparable at a glance — the strongest-first sort scrambled that // correspondence, and SNR is right there in its column anyway. decodes: g.decodes, })); } export function DecodesPanel({ decodes, txMsgs, txState, txStates, spotStatus, rigBand, onCall, onSelect, myCall, myGrid, onClear, onHalt, autoCallOn, onToggleAutoCall, autoCall, autoCallOnly, onSetAutoCallOnly, watchlist }: Props) { const { t } = useI18n(); // Column widths, dragged in the header and shared by every row. Persisted // through writeUiPref (not raw localStorage) so the layout travels with data/ // like every other portable preference. const [colw, setColw] = useState(loadWidths); // The chase list as TYPED. Re-seeded whenever the stored value changes — // from Preferences, or from another window — but never while the box has the // focus, or a status arriving mid-word would rewrite what is being typed. const [onlyText, setOnlyText] = useState(autoCallOnly ?? ''); useEffect(() => { const el = document.activeElement as HTMLElement | null; if (el && el.tagName === 'INPUT' && el.getAttribute('placeholder') === t('dec.chasePh')) return; setOnlyText(autoCallOnly ?? ''); }, [autoCallOnly, t]); const setColWidth = (key: ColKey, px: number) => { const col = COLS.find((c) => c.key === key)!; const w = Math.min(COL_MAX, Math.max(col.min, Math.round(px))); setColw((prev) => { if (prev[key] === w) return prev; const next = { ...prev, [key]: w }; writeUiPref(COLW_KEY, JSON.stringify(next)); return next; }); }; // Split the table into one column per receiver. Off by default: it only means // anything with two instances running, and a single-receiver operator should // not have to turn something off to get the layout they had. const [splitByInstance, setSplitByInstance] = useState(() => localStorage.getItem(SPLIT_KEY) === '1'); // Every filter below is persisted, NOT just the NEW badges. The panel is // remounted on a tab change, so anything held only in React state comes back // cleared — which left the badges lit and the rest silently reset, a list that // looks filtered and is not. const [cqOnly, setCqOnly] = usePersisted('cqOnly', false); const [lotwOnly, setLotwOnly] = usePersisted('lotwOnly', false); const [cats, setCats] = useState>(() => { try { const raw = JSON.parse(localStorage.getItem(CAT_KEY) || '[]'); return new Set(Array.isArray(raw) ? raw : []); } catch { return new Set(); } }); const toggleCat = (k: NewCat) => setCats((prev) => { const next = new Set(prev); if (next.has(k)) next.delete(k); else next.add(k); try { localStorage.setItem(CAT_KEY, JSON.stringify([...next])); } catch { /* not worth failing over */ } return next; }); const [bandSel, setBandSel] = usePersisted('bandSel', ''); const [modeSel, setModeSel] = usePersisted('modeSel', ''); // Continents are a MULTI-selection, not one at a time: the useful filter is // "everything except NA and EU", which a single-choice dropdown cannot say — // it can only name one continent to keep. Stored as a list (a Set does not // survive JSON), empty meaning no filter at all. const [contList, setContList] = usePersisted('contList', []); const contSel = useMemo(() => new Set(contList), [contList]); const toggleCont = (c: string) => setContList(contSel.has(c) ? contList.filter((x) => x !== c) : [...contList, c].sort()); const [minSnr, setMinSnr] = usePersisted('minSnr', ''); const [search, setSearch] = usePersisted('search', ''); const statusOf = (d: Decode): StatusEntry | undefined => spotStatus[`${d.call}|${d.band ?? ''}|${(d.mode ?? '').toUpperCase()}`]; // ── Sorting, inside a period ────────────────────────────────────────── // // WITHIN each slot and never across them. The periods are the point of this // panel — what was on the air in one fifteen-second window — and a list // sorted end to end by signal would mix three minutes of decodes into one // column of numbers with no way to tell which slot any of them came from. // // Arrival order stays the default and stays one click away, because it // mirrors the decoder's own window line for line, which is what makes the // two screens comparable at a glance. const [sortSpec, setSortSpec] = usePersisted('sort', ''); const [sortKey, sortDir] = useMemo(() => { const [k, d] = String(sortSpec || '').split(':'); return [SORTABLE.includes(k as SortKey) ? (k as SortKey) : '', d === 'asc' ? 'asc' : 'desc'] as const; }, [sortSpec]); // One click sorts the way that column is worth reading — strongest signal, // furthest DX, lowest frequency, A to Z, most wanted. The second reverses it, // the third gives arrival order back. const toggleSort = (k: SortKey) => { if (sortKey !== k) { setSortSpec(`${k}:${SORT_FIRST[k]}`); return; } if (sortDir === SORT_FIRST[k]) { setSortSpec(`${k}:${SORT_FIRST[k] === 'asc' ? 'desc' : 'asc'}`); return; } setSortSpec(''); }; const sortValue = useCallback((d: Decode, k: SortKey): number | string => { const e = statusOf(d); switch (k) { case 'snr': return d.snr; case 'freq': return d.freq_hz ?? 0; case 'dist': { const g = d.grid || e?.grid || ''; const path = myGrid && g ? pathBetween(myGrid, g) : null; // A station that never sent a grid cannot be placed. Sorted to the end // whichever way round the column goes, rather than pretending to a // distance of zero and sitting at the top of "nearest first". return path ? path.distanceShort : Number.NaN; } case 'country': return (e?.country ?? '').toUpperCase(); case 'status': return statusRank(e); } }, [spotStatus, myGrid]); const sortDecodes = useCallback((list: Decode[]): Decode[] => { if (!sortKey) return list; const sign = sortDir === 'asc' ? 1 : -1; return [...list].sort((a, b) => { const va = sortValue(a, sortKey), vb = sortValue(b, sortKey); const na = typeof va === 'number' && Number.isNaN(va); const nb = typeof vb === 'number' && Number.isNaN(vb); if (na !== nb) return na ? 1 : -1; // unknowns last, both ways if (na && nb) return 0; if (typeof va === 'string' || typeof vb === 'string') { const sa = String(va), sb = String(vb); // An empty country is an unknown too, not a name that sorts first. if (!sa !== !sb) return sa ? -1 : 1; return sign * sa.localeCompare(sb); } return sign * ((va as number) - (vb as number)); }); }, [sortKey, sortDir, sortValue]); // The mode currently on the air, for the slot clock. The newest decode knows // best; between overs the transmit state still does. // A decoder that has lost its CAT link keeps announcing the last dial // frequency it knew, and every decode after that carries a stale band. Nothing // downstream can tell: the entity verdicts, the band filter and the FT map all // believe what the decoder said, and an operator ends up reading NEW BAND for a // band they are not on. (Seen for real: MSHV lost CAT, kept saying 80 m, and // Korea showed as a new band because on 80 m it would have been.) // // Said, not decided. Using the rig's band instead would be wrong for anyone // decoding a second receiver on another band, and a warning costs that setup // nothing but a line it can read past. const decoderBand = decodes.length ? (decodes[decodes.length - 1].band ?? '') : ''; const bandDrift = !!rigBand && !!decoderBand && rigBand.toLowerCase() !== decoderBand.toLowerCase(); const driftInstance = decodes.length ? (decodes[decodes.length - 1].instance ?? '') : ''; const liveMode = decodes.length ? decodes[decodes.length - 1].mode : txState?.mode; const liveTr = trSeconds(liveMode, decodes.length ? decodes[decodes.length - 1].tr_period : undefined); // Who I am calling, and what an answer to me looks like. // // These are the two lines on the screen that are not about the band but about // the QSO in progress, and they are what an operator is actually watching for // — the rest is context. A reply is addressed to us by name: the decoded line // opens with our callsign, sometimes bracketed when the sender compressed a // non-standard call. const me = (myCall ?? '').toUpperCase(); const [, bumpUnit] = useState(0); useEffect(() => subscribeDistanceUnit(() => bumpUnit((n) => n + 1)), []); const calling = (txState?.dx_call ?? '').toUpperCase(); const answersMe = (msg?: string): boolean => { if (!me || !msg) return false; // EVERY segment, not just the first. // // MSHV answers two stations in one transmission and sends them as one line: // // DM8BJF RR73; F4BPO +14 // // The second half is addressed to F4BPO, and reading only the start of the // line missed it — the operator being answered saw no badge at all, which is // the one moment this badge exists for. Each ';' segment is its own message // and names its own recipient first. for (const part of msg.split(';')) { const first = part.trim().split(/\s+/)[0]?.replace(/[<>]/g, '').toUpperCase(); if (first && first === me) return true; } return false; }; // The choices are built from what is actually on the feed, and a selector with // nothing to choose is HIDDEN. One MSHV is one band and one mode, so those two // dropdowns were pure furniture for most operators; they appear the day a // second instance puts a second band on the link, which is the only day they // mean anything. const { bands, modes, instances } = useMemo(() => { const b = new Set(), m = new Set(), i = new Set(); for (const d of decodes) { if (d.band) b.add(d.band); if (d.mode) m.add(d.mode); if (d.instance) i.add(d.instance); } return { bands: [...b].sort(), modes: [...m].sort(), instances: [...i].sort() }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [decodes, spotStatus]); // The receiver column is dead weight with one decoder — which is nearly // everybody — so it is not there at all until a second one starts feeding. const cols = useMemo(() => COLS.filter((c) => c.key !== 'rx' || (instances.length > 1 && !splitByInstance)), [instances.length, splitByInstance]); const template = useMemo(() => cols.map((c) => `${colw[c.key]}px`).join(' '), [cols, colw]); const tableW = useMemo(() => cols.reduce((s, c) => s + colw[c.key], 0), [cols, colw]); // All seven, always, in their usual order. // // The chips used to be built from the continents ON the feed, which read as a // list that reshuffled itself every period: a chip appeared when the first // Asian station decoded and moved everything sideways under the pointer. A // fixed row can be aimed at — you learn where OC is and it stays there — and // it also says what the filter can do before anything has been heard. const contChips = CONTINENTS; const filtered = useMemo(() => { const q = search.trim().toUpperCase(); const floor = minSnr.trim() === '' ? null : parseInt(minSnr, 10); return decodes.filter((d) => { if (cqOnly && !d.cq) return false; if (bandSel && d.band !== bandSel) return false; if (modeSel && d.mode !== modeSel) return false; if (floor != null && Number.isFinite(floor) && d.snr < floor) return false; const e = statusOf(d); if (lotwOnly && !e?.lotw) return false; // Any badge lit narrows the list to the things it names; none lit shows // the band as it is. if (cats.size > 0) { const have = catsOf(e); let hit = false; for (const c of cats) if (have.has(c)) { hit = true; break; } if (!hit) return false; } if (contSel.size > 0 && !(e?.continent && contSel.has(e.continent))) return false; if (q && !(d.call.includes(q) || (d.grid ?? '').toUpperCase().includes(q) || (d.msg ?? '').toUpperCase().includes(q))) return false; return true; }); // eslint-disable-next-line react-hooks/exhaustive-deps }, [decodes, spotStatus, cqOnly, lotwOnly, cats, bandSel, modeSel, contSel, minSnr, search]); // What this panel is SHOWING, published to the auto-call engine. // // The filters are the operator's control over the transmitter as well as // over the list: a station filtered off the screen is not called. The panel // sends the callsigns rather than the filter settings, so there is one // definition of "shown" and not two — the engine cannot disagree with what // is in front of the operator. useEffect(() => { const calls = [...new Set(filtered.map((d) => (d.call ?? '').toUpperCase()).filter(Boolean))]; SetAutoCallVisible(calls, true).catch(() => {}); }, [filtered]); // Closed, it publishes nothing: filters that are not on the screen cannot // silence the engine behind the operator's back. useEffect(() => () => { SetAutoCallVisible([], false).catch(() => {}); }, []); // Group into periods, newest first, and drop the operator's transmissions into // the slot they went out in. // One PANE per receiver when the split is on. Two receivers on two bands is // the day this panel earns its keep, and merging their decodes into one list // throws away the only thing that tells them apart. // // Each pane cuts its own periods: the bands differ, so the slot boundaries and // the transmit messages belong to one receiver and not the other. const panes = useMemo(() => { // The sort is applied to each period's decodes, never to the periods // themselves: the slots stay newest-first, which is what the panel is. const sorted = (ps: ReturnType) => sortKey ? ps.map((p) => ({ ...p, decodes: sortDecodes(p.decodes) })) : ps; if (!splitByInstance || instances.length < 2) { return [{ key: '', label: '', tx: txState ?? undefined, periods: sorted(buildPeriods(filtered, txMsgs)) }]; } return instances.map((inst) => ({ key: inst, // What the program is called, not the id it announces — see decoderName. label: decoderName(inst), tx: txStates?.[inst], periods: sorted(buildPeriods( filtered.filter((d) => (d.instance ?? '') === inst), txMsgs.filter((m) => (m.instance ?? '') === inst), )), })); }, [filtered, txMsgs, splitByInstance, instances, txState, txStates, sortKey, sortDecodes]); const resetFilters = () => { setCqOnly(false); setLotwOnly(false); setBandSel(''); setModeSel(''); setContList([]); setMinSnr(''); setSearch(''); setCats(new Set()); try { localStorage.setItem(CAT_KEY, '[]'); } catch { /* not worth failing over */ } }; const anyFilter = cqOnly || lotwOnly || cats.size > 0 || !!bandSel || !!modeSel || contSel.size > 0 || !!minSnr || !!search.trim(); const sel = 'h-8 rounded-lg border border-border bg-background px-2 text-sm'; const chip = (on: boolean, tone = 'primary') => cn( 'h-8 px-3 rounded-full border text-sm font-medium transition-colors', on ? tone === 'success' ? 'border-success bg-success text-success-foreground' : 'border-primary bg-primary text-primary-foreground' : 'border-border text-muted-foreground hover:bg-muted hover:text-foreground', ); return (
{/* ── Filter bar ─────────────────────────────────────────────── */}
{t('dec.title')} {/* The slot clock. Taken from the newest decode's mode, falling back to what the transmit state reports, so it is right the moment anything is heard and keeps running when the band goes quiet. */} {/* Any receiver on the air colours it: with two decoders the shared txState is whichever reported last, and "somebody here is transmitting" is what the bar has to say. */} s?.transmitting)} /> {bandDrift && ( {t('dec.bandDrift', { app: decoderName(driftInstance) || t('dec.bandDriftApp'), dec: decoderBand.toUpperCase(), rig: (rigBand ?? '').toUpperCase(), })} )} {/* Per-category badges, in the colours of the flags they select — the same vocabulary as the Chase New panel. */} {NEW_CATS.filter((c) => chaseAllows(c.key)).map((c) => { const on = cats.has(c.key); return ( ); })} {/* Only when there is a choice to make — see the memo above. */} {bands.length > 1 && ( )} {modes.length > 1 && ( )} {/* Toggles, like the category badges above — the same gesture for the same kind of question. None lit is every continent, which is what an empty filter has always meant here. */} {contChips.length > 1 && ( {contChips.map((c) => { const on = contSel.has(c); return ( ); })} )}
setSearch(e.target.value)} placeholder={t('dec.searchPh')} className="h-8 w-56 rounded-lg border border-border bg-background pl-8 pr-2 text-sm" />
{anyFilter && ( )} {/* Which receivers are feeding this. Only with more than one — with a single MSHV it is a label stating the obvious. */} {/* Only with two receivers running: with one it would be a control that does nothing, which is worse than no control. */} {instances.length > 1 && ( )} {instances.length > 1 && ( {t('dec.instances', { n: instances.length })} )} {t('dec.count', { shown: filtered.length, total: decodes.length })} {/* Halt and Clear sit together at the right, away from the filters: one talks to the radio, the other only to this list, and neither is a filter. Halt goes LAST — it is the one that must be findable without reading, and the end of the row is the one position that never moves as filters come and go. */} {/* Auto-call. Deliberately next to Halt: the two belong together, and what it is doing right now — which station, how many calls of how many — is on the button itself, because a thing that keys the transmitter must never be a switch with no readout. */} {onToggleAutoCall && ( )} {/* WHAT IT IS DOING, BESIDE THE SWITCH RATHER THAN ON IT. A thing that keys the transmitter must never be a switch with no readout — but the readout was crammed inside the button as "Auto D2ACE 1/7 ·1/3", where the two counters read as one number and the whole control changed width every period. Out here each figure gets a label, and the station being called is the biggest thing on the row. */} {autoCallOn && autoCall?.target && ( {autoCall.target} {t('dec.autoCalls')} {autoCall.calls}/{autoCall.max} {/* Only once there is one to report: a zero that is always there is a figure nobody reads, and it was the half of the pair that got mistaken for the call count. */} {autoCall.misses > 0 && ( {t('dec.autoMisses')} = autoCall.max_miss ? 'text-warning' : 'text-foreground')}> {autoCall.misses}/{autoCall.max_miss} )} )} {/* Wanted, decoded, and in a QSO with somebody else. Holding fire looks exactly like having nothing to do, and the operator had no way to tell them apart. */} {autoCallOn && !autoCall?.target && autoCall?.waiting && ( ⏳ {autoCall.waiting} {t('dec.autoWaiting')} )} {/* The chase list. Raw text while typing, committed on blur or Enter: the stored value is upper-cased and trimmed, and binding the box to that makes the space bar look dead — in a field whose whole purpose is a list separated by spaces. */} {onSetAutoCallOnly && ( setOnlyText(e.target.value)} onBlur={() => { if (onlyText.toUpperCase() !== (autoCallOnly ?? '')) onSetAutoCallOnly(onlyText); }} onKeyDown={(e) => { if (e.key === 'Enter') (e.target as HTMLInputElement).blur(); if (e.key === 'Escape') setOnlyText(autoCallOnly ?? ''); }} placeholder={t('dec.chasePh')} title={t('dec.chaseTip')} className={cn('h-8 w-44 rounded-lg border px-2 text-sm font-mono uppercase bg-background', (autoCallOnly ?? '').trim() ? 'border-primary text-foreground' : 'border-border text-muted-foreground')} /> )} {onHalt && ( )} {onClear && ( )}
{/* ── What I am sending, and to whom ─────────────────────────── */} {/* Its own strip rather than a line in the list: it is the one thing on this screen that is about the operator and not about the band, and while a period scrolls away this stays put. It appears as soon as a Status arrives, so it says who is being called even before anything is sent. */} {txState && (txState.msg || txState.dx_call) && (
{txState.transmitting && } {txState.transmitting ? t('dec.txNow') : t('dec.txIdle')} {/* An EMPTY tx_message is the ordinary state between overs — WSJT-X, JTDX and MSHV all send Status about once a second with nothing in that field when nothing is queued. Reading it as "this application does not report its transmit text" accused the sender of a shortcoming on the strength of one empty string, and said so for most of every cycle. Only a sender that is KEYED and still tells us nothing has actually withheld anything. */} {txState.msg ? {txState.msg} : {txState.transmitting ? t('dec.txUnknown') : t('dec.txNothing')} } {txState.dx_call && ( {t('dec.working')} {txState.dx_call} )} {txState.band && {txState.band}} {txState.instance && instances.length > 1 && ( {decoderName(txState.instance)} )}
)} {/* One table per receiver when the split is on, side by side. Each pane carries its OWN column header: they are independent tables at their own widths, and one shared header row would line up with none of them. */}
{panes.map((pane) => (
{pane.label && (
{pane.label} {/* This pane's OWN transmit line. The shared strip shows whichever instance reported last, which in a split view is a coin toss. */} {pane.tx?.msg && ( {pane.tx.transmitting && ( {t('dec.txNow')} )} {pane.tx.msg} )} {onHalt && ( )} {onClear && ( )}
)} {/* ── Column header ──────────────────────────────────────────── */}
{cols.map((c, i) => { const sortable = SORTABLE.includes(c.key as SortKey); const active = sortable && sortKey === c.key; return ( toggleSort(c.key as SortKey) : undefined} title={sortable ? t('dec.sortTip') : c.key === 'dt' ? t('dec.colDtTitle') : c.key === 'freq' ? t('dec.colFreqTitle') : undefined}> {c.key === 'dist' ? `${t(c.tkey)} (${distanceUnit()})` : t(c.tkey)} {active && {sortDir === 'asc' ? '▲' : '▼'}} setColWidth(c.key, colw[c.key] + dx)} onReset={() => setColWidth(c.key, c.def)} /> ); })}
{/* ── Periods ────────────────────────────────────────────────── */}
{pane.periods.length === 0 && (

{decodes.length === 0 ? t('dec.empty') : t('dec.emptyFiltered')}

)} {pane.periods.map((g, gi) => (
{/* Period header — sticky, so the slot being read is always named. */}
{periodLabel(g.start, g.tr)} {t('dec.periodCount', { n: g.decodes.length })} {gi === 0 && ( {t('dec.live')} )}
{/* The operator's own transmission, at the top of its slot: it is what the stations below were answering (or ignoring). */} {g.tx.map((m, i) => (
{t('dec.tx')} {m.msg} {m.band && {m.band}}
))} {g.decodes.map((d, i) => { const e = statusOf(d); const st = e?.status && e.status !== 'worked' ? e.status : ''; const entities = st ? entityBadgesFor(st) : []; const extras = EXTRA_BADGES.filter((b) => !!e?.[b.key] && chaseAllows(b.key as string)); const mine = !!me && d.call === me; const hot = entities.length > 0 || extras.length > 0; // Someone answering us outranks everything else on the screen. const replying = answersMe(d.msg); // The station we are calling, so it can be picked out of a slot // holding thirty others. const worked = !!calling && d.call === calling; return ( ); })}
))}
))}
); }