rouggy/OpsLog
0
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 74 Wiki Activity

feat(cluster): mark the cell that carries the fact, and add the US county

Browse Source 
Colour moves from the text to the CELL. A filled Band cell means new band, a
filled Pfx cell means new prefix, a filled County cell means new county. This is
not the pills coming back: a pill is a box inside the cell with its own height
and padding, so it pushed the text off the row baseline. A background has no
geometry - the text does not move a pixel - and it reads from across the room,
which a tinted glyph does not. Worked-call stays text-only: it is not a novelty,
and filling it would wash most of the rows.

The colours still come from the semantic tokens and lib/spotMarkers, so a fact
keeps one colour across the grid, the band map and the filter chips - and the
per-marker colour setting will drive all of it from one table.

US County column. The backend already resolved the county from the offline ULS
store to decide NewCounty and then threw it away; it now returns it, which costs
nothing.

The Locator column is renamed Spotter locator. It always held the SPOTTER's grid
- cluster.go says so - so a column labelled Locator next to a DX callsign was
reading as the DX's grid and was mostly empty besides. The DX grid is not in the
feed at any price worth paying under an RBN firehose.

Both display options move out of Preferences into the cluster filter panel,
beside Hide worked. They are changed while working a run, not set up once, and
a preferences dialog reopened every ten minutes is a filter in the wrong place.
This commit is contained in:
rouggy
2026-08-10 12:29:57 +02:00
parent 6825af135a
commit 9d8b69d804
7 changed files with 116 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ClusterGrid.tsx
+69 -17
View File
@@ -57,6 +57,10 @@ export type SpotStatusEntry = {
// Always slot-scoped, unlike worked_call which follows the "same slot" option.
worked_slot?: boolean;
new_county?: boolean;
// The resolved US county and state, so the grid can SHOW them and not merely
// flag them. Filled from the offline ULS store, US callsigns only.
county?: string;
state?: string;
new_pota?: boolean;
new_pfx?: boolean;
pfx?: string;
@@ -110,21 +114,45 @@ function statusFor(p: any): SpotStatusEntry | undefined {
return applySpotDisplay(s, readSpotDisplayOptions());
}
// Spot status is shown by COLOURING THE TEXT, never by a pill or a badge.
// Spot status is shown on the CELL that carries the fact — filled background for
// a novelty, tinted text otherwise — never by a pill or a badge.
//
// The pills were dropped: a rounded box has its own height and padding, so it
// sat off the row's baseline and the callsign inside it no longer lined up with
// the plain callsigns above and below. A whole column of them read as chrome
// rather than as data. Same reasoning — and the same semantic tokens — as the
// Y/N/R QSL columns in lib/qslStatus.ts.
// The pills were dropped and stay dropped: a rounded box has its own height and
// padding, so it sat off the row's baseline and the callsign inside it no longer
// lined up with the plain callsigns above and below. A whole column of them read
// as chrome rather than as data. Same reasoning — and the same semantic tokens —
// as the Y/N/R QSL columns in lib/qslStatus.ts.
//
// Which cell is coloured IS the message, so one colour is enough for all three:
// Which cell is marked IS the message:
//
// yellow call → new DXCC yellow band → new band yellow mode → new mode
// blue call → already worked
// filled call → new DXCC filled band → new band filled mode → new mode
// filled pfx → new prefix filled POTA → new park filled county → new county
// blue call → already worked (not a novelty, so text only)
const NEW = 'var(--warning)'; // yellow: something here is new
const WKD = 'var(--info)'; // blue: this callsign is already in the log
// FILLING the cell that carries the fact, rather than only tinting its text.
//
// This is not a return to the pills that were dropped. A pill is a box INSIDE
// the cell: it has its own height and padding, so it sat off the row baseline
// and the callsign inside it stopped lining up with the plain callsigns above
// and below. A cell background has no geometry of its own — the text does not
// move by a single pixel — and it reads from across the room, which a tinted
// glyph does not.
//
// Which cell is filled is still the whole message: filled Band means new band,
// filled Pfx means new prefix, filled County means new county.
//
// The colours come from the same places they already came from — the semantic
// status tokens and lib/spotMarkers — so a fact keeps one colour across the
// grid, the band map and the filter chips. 22 % is the wash that survived both
// themes: enough to see at a glance, not enough to fight the text on it.
const fillStyle = (colour: string) => ({
background: `color-mix(in srgb, ${colour} 22%, transparent)`,
color: colour,
fontWeight: 700,
});
// cellText renders a cell value in an optional colour. An empty value keeps the
// muted dash the grid used before, so blank cells still read as "nothing here"
// rather than as a gap.
@@ -143,6 +171,7 @@ function statusColor(s: SpotStatusEntry | undefined): string | null {
case 'new-band':
case 'new-mode':
case 'new-slot':
case 'new-call':
return NEW;
default:
return s?.worked_call ? WKD : null;
@@ -185,11 +214,12 @@ const makeColCatalog = (t: TFn): ColEntry[] => [
headerName: t('clg2.c.call'), field: 'dx_call' as any, width: 120,
defaultVisible: true,
cellClass: 'font-mono',
// NEW DXCC → yellow call. Already worked → blue call. Anything else keeps
// the theme's normal ink so ordinary callsigns don't shout.
// NEW DXCC fills the call cell. Already worked only tints the text blue:
// 'worked' is not a novelty, and filling it would wash most of the rows.
cellStyle: (p: any) => (statusFor(p)?.status === 'new' ? fillStyle('var(--danger)') : null) as any,
cellRenderer: (p: any) => {
const s = statusFor(p);
const color = s?.status === 'new' ? NEW : s?.worked_call ? WKD : null;
const color = s?.status === 'new' ? null : s?.worked_call ? WKD : null;
return <span style={{ color: color ?? undefined, fontWeight: 700 }}>{p.value ?? ''}</span>;
},
tooltipValueGetter: (p: any) => {
@@ -262,7 +292,9 @@ const makeColCatalog = (t: TFn): ColEntry[] => [
group: 'Spot', label: t('clg2.c.pota'), colId: 'pota',
headerName: t('clg2.c.pota'), field: 'pota_ref' as any, width: 92, cellClass: 'font-mono',
defaultVisible: true,
cellStyle: { color: 'var(--success)' },
cellStyle: (p: any) => (statusFor(p)?.new_pota
? fillStyle(markerColour('new_pota'))
: { color: 'var(--success)' }) as any,
tooltipValueGetter: (p: any) => (p.data?.pota_name ? t('clg2.tipPota', { name: p.data.pota_name }) : undefined),
},
{
@@ -277,8 +309,9 @@ const makeColCatalog = (t: TFn): ColEntry[] => [
headerName: t('clg2.c.band'), field: 'band' as any, width: 75,
defaultVisible: true,
cellClass: 'font-mono',
// NEW BAND for this entity → the band text turns yellow.
cellRenderer: (p: any) => cellText(p.value, statusFor(p)?.status === 'new-band' ? NEW : null),
// NEW BAND for this entity → the band cell is filled.
cellStyle: (p: any) => (statusFor(p)?.status === 'new-band' ? fillStyle(NEW) : null) as any,
cellRenderer: (p: any) => cellText(p.value, null),
tooltipValueGetter: (p: any) => (statusFor(p)?.status === 'new-band' ? t('clg2.tipNewBand') : undefined),
},
{
@@ -291,7 +324,8 @@ const makeColCatalog = (t: TFn): ColEntry[] => [
// for the entity. NEW SLOT means band AND mode were each worked before (just
// not together), so highlighting the mode cell would wrongly imply "CW is new";
// that case is signalled by the Status badge alone.
cellRenderer: (p: any) => cellText(p.value, statusFor(p)?.status === 'new-mode' ? NEW : null),
cellStyle: (p: any) => (statusFor(p)?.status === 'new-mode' ? fillStyle('var(--caution)') : null) as any,
cellRenderer: (p: any) => cellText(p.value, null),
tooltipValueGetter: (p: any) => {
const st = statusFor(p)?.status;
if (st === 'new-mode') return t('clg2.tipNewMode');
@@ -303,7 +337,25 @@ const makeColCatalog = (t: TFn): ColEntry[] => [
group: 'Spot', label: t('clg2.c.pfx'), colId: 'pfx',
headerName: t('clg2.c.pfx'), width: 60, cellClass: 'font-mono',
valueGetter: (p: any) => fmtPfx(p.data?.dx_call ?? ''),
cellStyle: { color: 'var(--muted-foreground)' },
// NEW PFX fills the prefix cell, in the prefix marker's own colour.
cellStyle: (p: any) => (statusFor(p)?.new_pfx
? fillStyle(markerColour('new_pfx'))
: { color: 'var(--muted-foreground)' }) as any,
tooltipValueGetter: (p: any) => (statusFor(p)?.new_pfx ? t('clg2.tipNewPfx') : undefined),
},
{
group: 'Geo', label: t('clg2.c.county'), colId: 'county',
headerName: t('clg2.c.county'), width: 130, cellClass: 'font-mono',
// Not on the spot: resolved per callsign from the offline ULS store, so it
// stays empty for non-US calls and until that database is downloaded.
valueGetter: (p: any) => {
const s = statusFor(p);
if (!s?.county) return '';
return s.state ? s.county + ', ' + s.state : s.county;
},
cellStyle: (p: any) => (statusFor(p)?.new_county ? fillStyle(markerColour('new_county')) : null) as any,
cellRenderer: (p: any) => cellText(p.value, null),
tooltipValueGetter: (p: any) => (statusFor(p)?.new_county ? t('clg2.tipNewCounty') : undefined),
},
{
group: 'Geo', label: t('clg2.c.cqz'), colId: 'cqz',
frontend/src/components/SettingsModal.tsx
+5 -14
View File
@@ -1347,8 +1347,6 @@ export function SettingsModal({ onClose, onSaved, initialSection, onMainPaneChan
const [lookupOnBlur, setLookupOnBlur] = useState(() => localStorage.getItem('opslog.lookupOnBlur') === '1');
const [groupDigital, setGroupDigital] = useState(() => localStorage.getItem('opslog.groupDigitalSlots') === '1');
const [clusterWorkedSameSlot, setClusterWorkedSameSlot] = useState(() => localStorage.getItem('opslog.clusterWorkedSameSlot') === '1');
const [clusterMuteWorked, setClusterMuteWorked] = useState(() => localStorage.getItem('opslog.clusterMuteWorked') === '1');
const [clusterSlotHighlight, setClusterSlotHighlight] = useState(() => localStorage.getItem('opslog.clusterSlotHighlight') === '1');
const [showQsoRate, setShowQsoRate] = useState(() => localStorage.getItem('opslog.showQsoRate') === '1');
const [catModeBeforeFreq, setCatModeBeforeFreq] = useState(() => localStorage.getItem('opslog.catModeBeforeFreq') === '1');
// Password-encryption (secret vault) state.
@@ -4139,18 +4137,11 @@ export function SettingsModal({ onClose, onSaved, initialSection, onMainPaneChan
onCheckedChange={(c) => { const v = !!c; setClusterWorkedSameSlot(v); writeUiPref('opslog.clusterWorkedSameSlot', v ? '1' : '0'); }} />
<span>{t('clu.workedSameSlot')} <span className="text-xs text-muted-foreground">{t('clu.workedSameSlotHint')}</span></span>
</label>
{/* Two ways to cut through a busy cluster, and they compose: mute what
is done, light up what is not. */}
<label className="flex items-start gap-2 text-sm cursor-pointer">
<Checkbox checked={clusterMuteWorked} className="mt-0.5"
onCheckedChange={(c) => { const v = !!c; setClusterMuteWorked(v); writeUiPref('opslog.clusterMuteWorked', v ? '1' : '0'); }} />
<span>{t('clu.muteWorked')} <span className="text-xs text-muted-foreground">{t('clu.muteWorkedHint')}</span></span>
</label>
<label className="flex items-start gap-2 text-sm cursor-pointer">
<Checkbox checked={clusterSlotHighlight} className="mt-0.5"
onCheckedChange={(c) => { const v = !!c; setClusterSlotHighlight(v); writeUiPref('opslog.clusterSlotHighlight', v ? '1' : '0'); }} />
<span>{t('clu.slotHighlight')} <span className="text-xs text-muted-foreground">{t('clu.slotHighlightHint')}</span></span>
</label>
{/* "No colour on worked" and "colour what is unworked here" used to live
here. They moved to the Cluster tab's filter panel, next to Hide
worked: they are things an operator changes while working a run, not
things set up once. A preferences dialog you reopen every ten minutes
is a filter in the wrong place. */}
{/* Self-spot. The interval only shows once it's on — an interval for
something switched off is just a question the operator can't act on. */}