[test](trx-frontend-http): watch the history progress from inside the page

The replay-progress check polled the overlay from the test every 100ms.
A replay that starts and finishes between two polls is never sampled, and
the test then reports that no progress was shown at all -- the source of
the intermittent "no progress was shown while the history loaded" failure.

Record the samples from a MutationObserver installed before the page's own
scripts run, so a fast replay is observed rather than missed.

Signed-off-by: Stan Grams <sjg@haxx.space>

src/trx-client/trx-frontend/trx-frontend-http/assets/web/generated/aprs.js

@@ -4,7 +4,7 @@ import {
   collapseAprsDuplicates,
   normalizeAprsPacket,
   renderAprsPacketRow
-} from "./chunk-OZI7SINT.js";
+} from "./chunk-OPEIVJGD.js";
 import {
   hostCore,
   hostState

src/trx-client/trx-frontend/trx-frontend-http/assets/web/generated/chunk-OPEIVJGD.js

@@ -117,6 +117,9 @@ function aprsSymbolSprite(symbolTable, symbolCode) {
     label: `Alternate APRS symbol \\${symbolCode} with overlay ${symbolTable}`
   };
 }
+function renderAprsSymbolSlot(packet, escapeHtml) {
+  return renderLocalAprsSymbol(packet, escapeHtml) || '<span class="aprs-symbol aprs-symbol-empty" aria-hidden="true"></span>';
+}
 function renderLocalAprsSymbol(packet, escapeHtml) {
   if (!packet.symbolTable || !packet.symbolCode) return "";
   const sprite = aprsSymbolSprite(packet.symbolTable, packet.symbolCode);
@@ -221,7 +224,7 @@ function renderAprsPacketRow(packet, options = {}) {
   const summary = summarizeAprsPayload(packet);
   const hasPosition = packet.lat != null && packet.lon != null;
   const qrzHref = `https://qrzcq.com/call/${encodeURIComponent(packet.srcCall || "")}`;
-  row.innerHTML = `<summary class="decode-line"><span class="aprs-time">${escapeAprsHtml(time)}</span>` + (options.badge ? `<span class="aprs-badge aprs-badge-band">${escapeAprsHtml(options.badge)}</span>` : "") + renderLocalAprsSymbol(packet, escapeAprsHtml) + `<span class="aprs-call">${escapeAprsHtml(packet.srcCall ?? "")}</span><span class="aprs-badge aprs-badge-type aprs-badge-type-${category}">${escapeAprsHtml(aprsCategoryLabel(category))}</span><span class="decode-line-summary">${summary ? escapeAprsHtml(summary) : renderAprsInfo(packet)}</span>` + (packet.crcOk ? "" : '<span class="aprs-badge aprs-badge-crc">CRC</span>') + (options.distance ? `<span class="decode-line-distance">${escapeAprsHtml(options.distance)}</span>` : "") + `</summary><div class="decode-expanded"><div class="decode-expanded-meta"><span>&gt;${escapeAprsHtml(packet.destCall || "--")}</span><span>${escapeAprsHtml(packet.path || "no path")}</span><span>${escapeAprsHtml(aprsAgeText(packet._tsMs))}</span><span>CRC ${packet.crcOk ? "ok" : "failed"}</span>` + (hasPosition ? `<a class="aprs-pos" href="javascript:void(0)" data-aprs-map="${packet.lat},${packet.lon}">${packet.lat?.toFixed(5)}, ${packet.lon?.toFixed(5)}</a>` : "") + `</div><div class="decode-expanded-raw">${renderAprsInfo(packet)}</div>` + (packet.info_bytes?.length ? `<div class="decode-expanded-bytes">${escapeAprsHtml(aprsHexBytes(packet.info_bytes))}</div>` : "") + `<div class="aprs-row-actions">` + (hasPosition ? `<button class="aprs-inline-btn" type="button" data-aprs-map="${packet.lat},${packet.lon}">Map</button>` : "") + (hasPosition ? `<button class="aprs-inline-btn" type="button" data-aprs-copy="${packet.lat},${packet.lon}">Copy Coords</button>` : "") + `<a class="aprs-inline-btn" href="${qrzHref}" target="_blank" rel="noopener">QRZ</a></div></div>`;
+  row.innerHTML = `<summary class="decode-line"><span class="aprs-time">${escapeAprsHtml(time)}</span>` + (options.badge ? `<span class="aprs-badge aprs-badge-band">${escapeAprsHtml(options.badge)}</span>` : "") + renderAprsSymbolSlot(packet, escapeAprsHtml) + `<span class="aprs-call">${escapeAprsHtml(packet.srcCall ?? "")}</span><span class="aprs-badge aprs-badge-type aprs-badge-type-${category}">${escapeAprsHtml(aprsCategoryLabel(category))}</span><span class="decode-line-summary">${summary ? escapeAprsHtml(summary) : renderAprsInfo(packet)}</span>` + (packet.crcOk ? "" : '<span class="aprs-badge aprs-badge-crc">CRC</span>') + (options.distance ? `<span class="decode-line-distance">${escapeAprsHtml(options.distance)}</span>` : "") + `</summary><div class="decode-expanded"><div class="decode-expanded-meta"><span>&gt;${escapeAprsHtml(packet.destCall || "--")}</span><span>${escapeAprsHtml(packet.path || "no path")}</span><span>${escapeAprsHtml(aprsAgeText(packet._tsMs))}</span><span>CRC ${packet.crcOk ? "ok" : "failed"}</span>` + (hasPosition ? `<a class="aprs-pos" href="javascript:void(0)" data-aprs-map="${packet.lat},${packet.lon}">${packet.lat?.toFixed(5)}, ${packet.lon?.toFixed(5)}</a>` : "") + `</div><div class="decode-expanded-raw">${renderAprsInfo(packet)}</div>` + (packet.info_bytes?.length ? `<div class="decode-expanded-bytes">${escapeAprsHtml(aprsHexBytes(packet.info_bytes))}</div>` : "") + `<div class="aprs-row-actions">` + (hasPosition ? `<button class="aprs-inline-btn" type="button" data-aprs-map="${packet.lat},${packet.lon}">Map</button>` : "") + (hasPosition ? `<button class="aprs-inline-btn" type="button" data-aprs-copy="${packet.lat},${packet.lon}">Copy Coords</button>` : "") + `<a class="aprs-inline-btn" href="${qrzHref}" target="_blank" rel="noopener">QRZ</a></div></div>`;
   row.querySelectorAll("[data-aprs-map]").forEach((element) => {
     element.addEventListener("click", (event) => {
       event.preventDefault();

src/trx-client/trx-frontend/trx-frontend-http/assets/web/generated/hf-aprs.js

@@ -4,7 +4,7 @@ import {
   collapseAprsDuplicates,
   normalizeAprsPacket,
   renderAprsPacketRow
-} from "./chunk-OZI7SINT.js";
+} from "./chunk-OPEIVJGD.js";
 import {
   hostCore,
   hostState

src/trx-client/trx-frontend/trx-frontend-http/assets/web/generated/map-core.js

@@ -1,6 +1,6 @@
 import {
   aprsSymbolSprite
-} from "./chunk-OZI7SINT.js";
+} from "./chunk-OPEIVJGD.js";
 
 // src/map-core.ts
 function mapEl(id) {

src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css

@@ -3153,6 +3153,8 @@ body.map-fake-fullscreen-active {
    displays can swap in the @2x variants. */
 .aprs-symbol { display: inline-block; width: 24px; height: 24px; background-repeat: no-repeat; background-size: 384px 144px; vertical-align: middle; margin-right: 0.3rem; }
 .aprs-symbol-marker { margin-right: 0; }
+/* Holds the column open for a frame that carries no symbol. */
+.aprs-symbol-empty { background-image: none; }
 .aprs-symbol-primary { background-image: url('/vendor/aprs-symbols-24-0.png'); }
 .aprs-symbol-alternate { background-image: url('/vendor/aprs-symbols-24-1.png'); }
 .aprs-symbol-overlaid { background-image: url('/vendor/aprs-symbols-24-2.png'), url('/vendor/aprs-symbols-24-1.png'); }

src/trx-client/trx-frontend/trx-frontend-http/frontend/src/plugins/aprs-shared.ts

@@ -182,6 +182,13 @@ export function aprsSymbolSprite(
   };
 }
 
+/** An empty slot of the symbol's size, so a frame without one still lines up
+ *  with the frames around it in the list. */
+export function renderAprsSymbolSlot(packet: AprsPacket, escapeHtml: (value: string) => string): string {
+  return renderLocalAprsSymbol(packet, escapeHtml)
+    || '<span class="aprs-symbol aprs-symbol-empty" aria-hidden="true"></span>';
+}
+
 export function renderLocalAprsSymbol(packet: AprsPacket, escapeHtml: (value: string) => string): string {
   if (!packet.symbolTable || !packet.symbolCode) return "";
   const sprite = aprsSymbolSprite(packet.symbolTable, packet.symbolCode);
@@ -336,7 +343,7 @@ export function renderAprsPacketRow(packet: AprsPacket, options: AprsRowOptions
     `<summary class="decode-line">` +
       `<span class="aprs-time">${escapeAprsHtml(time)}</span>` +
       (options.badge ? `<span class="aprs-badge aprs-badge-band">${escapeAprsHtml(options.badge)}</span>` : "") +
-      renderLocalAprsSymbol(packet, escapeAprsHtml) +
+      renderAprsSymbolSlot(packet, escapeAprsHtml) +
       `<span class="aprs-call">${escapeAprsHtml(packet.srcCall ?? "")}</span>` +
       `<span class="aprs-badge aprs-badge-type aprs-badge-type-${category}">` +
         `${escapeAprsHtml(aprsCategoryLabel(category))}</span>` +

src/trx-client/trx-frontend/trx-frontend-http/frontend/tests/decode-flow.mjs

@@ -11,7 +11,7 @@ import assert from "node:assert/strict";
 import { chromium } from "playwright-core";
 import { startBrowser, startWebFixture } from "./web-fixture.mjs";
 
-/* global document, getComputedStyle, window, location */
+/* global document, getComputedStyle, window, location, requestAnimationFrame, MutationObserver */
 
 const VESSEL = {
   type: "ais", mmsi: 244660000, lat: 52.37, lon: 4.89, vessel_name: "NEDERLAND",
@@ -121,6 +121,27 @@ const historyFixture = await startWebFixture({
 });
 const replay = await startBrowser(chromium);
 
+// Installed before the page's own scripts, so nothing can be missed: every
+// time the progress element becomes visible, its geometry is recorded.
+await replay.page.addInitScript(() => {
+  window.__historyProgressSamples = [];
+  const watch = () => {
+    const element = document.getElementById("decode-history-overlay");
+    if (!element) { requestAnimationFrame(watch); return; }
+    const sample = () => {
+      if (element.classList.contains("is-hidden")) return;
+      const rect = element.getBoundingClientRect();
+      window.__historyProgressSamples.push({
+        width: Math.round(rect.width),
+        coversCentre: document.elementFromPoint(700, 450)?.id === "decode-history-overlay",
+      });
+    };
+    new MutationObserver(sample).observe(element, { attributes: true, attributeFilter: ["class"] });
+    sample();
+  };
+  watch();
+});
+
 try {
   await replay.page.setViewportSize({ width: 1400, height: 900 });
   await replay.page.goto(`${historyFixture.origin}/digital-modes`, { waitUntil: "domcontentloaded" });
@@ -128,20 +149,11 @@ try {
 
   // While it loads, the operator can still see the radio. This used to be a
   // full-screen scrim over everything for as long as the replay ran.
-  const samples = [];
-  for (let attempt = 0; attempt < 30; attempt++) {
-    samples.push(await replay.page.evaluate(() => {
-      const element = document.getElementById("decode-history-overlay");
-      if (!element || element.classList.contains("is-hidden")) return null;
-      const rect = element.getBoundingClientRect();
-      return {
-        width: Math.round(rect.width),
-        coversCentre: document.elementFromPoint(700, 450)?.id === "decode-history-overlay",
-      };
-    }));
-    await replay.page.waitForTimeout(100);
-  }
-  const shown = samples.filter(Boolean);
+  //
+  // Watched from inside the page rather than polled from here: a fast replay
+  // can start and finish between two polls, and then the test reports that no
+  // progress was ever shown when what happened is that it blinked.
+  const shown = await replay.page.evaluate(() => window.__historyProgressSamples ?? []);
   assert.ok(shown.length > 0, "no progress was shown while the history loaded");
   for (const sample of shown) {
     assert.ok(sample.width < 700, `the progress covers ${sample.width}px of a 1400px page`);
@@ -174,7 +186,11 @@ const APRS_FRAMES = [
   { packet_type: "position", info: "!5421.30N/01839.20E>Test beacon 73", lat: 54.35, lon: 18.65 },
 ].map((frame, index) => ({
   src_call: `SP2SJG-${index}`, dest_call: "APRS", path: "WIDE1-1", crc_ok: true,
-  symbol_table: "/", symbol_code: ">", rig_id: "rig-a", ts_ms: Date.now() - index * 1000,
+  // Only position reports carry a symbol here, which is the case the columns
+  // have to survive: a frame without one used to close the gap and shift
+  // everything after it left.
+  ...(frame.packet_type === "position" ? { symbol_table: "/", symbol_code: ">" } : {}),
+  rig_id: "rig-a", ts_ms: Date.now() - index * 1000,
   ...frame,
 }));
 
@@ -224,6 +240,20 @@ try {
   assert.match(summaryOf("Telemetry"), /^#005/, `telemetry summary: ${summaryOf("Telemetry")}`);
   assert.match(summaryOf("Position"), /54\.3500, 18\.6500/, `position summary: ${summaryOf("Position")}`);
 
+  // Frames with and without a symbol line up: the slot is held open either way.
+  const columns = await aprs.page.evaluate(() =>
+    [...document.querySelectorAll("#aprs-packets .aprs-packet")].map((row) => ({
+      call: Math.round(row.querySelector(".aprs-call").getBoundingClientRect().x),
+      summary: Math.round(row.querySelector(".decode-line-summary").getBoundingClientRect().x),
+      symbol: !!row.querySelector(".aprs-symbol:not(.aprs-symbol-empty)"),
+    })));
+  assert.ok(columns.some((column) => column.symbol) && columns.some((column) => !column.symbol),
+    "the sample has to mix frames with and without a symbol to test this");
+  assert.equal(new Set(columns.map((column) => column.call)).size, 1,
+    `callsigns start at ${JSON.stringify(columns.map((column) => column.call))}`);
+  assert.equal(new Set(columns.map((column) => column.summary)).size, 1,
+    `summaries start at ${JSON.stringify(columns.map((column) => column.summary))}`);
+
   // The frame as it arrived is still there, one click away.
   await aprs.page.locator("#aprs-packets .aprs-packet", { hasText: "25 °C" })
     .locator(".decode-line").first().click();