sjg/trx-rs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[fix](trx-frontend-http): drop peak labels, equalize spectrum/waterfall split

Browse Source 
Remove overkill peak frequency labels from spectrum view. Set waterfall
height to match spectrum height (1:1 split) instead of fixed 120px.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
Stan Grams
2026-03-26 20:53:50 +01:00
parent 49657fa68b
commit a82541e24e
3 changed files with 1 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
-28
View File
@@ -9452,31 +9452,6 @@ function drawSpectrum(data) {
spectrumGl.drawPoints(spectrumTmpMarkerPoints, Math.max(2, dpr * 1.6), cssColorToRgba(pal.waveformPeak));
}
// ── Peak frequency labels (top 5 strongest) ──
if (markerPeaks.length > 0) {
const topPeaks = markerPeaks.slice(0, 5);
const labelEl = document.getElementById("spectrum-peak-labels");
if (labelEl) {
labelEl.innerHTML = "";
const cssW = spectrumCanvas.clientWidth || 640;
const cssH = spectrumCanvas.clientHeight || 160;
for (const idx of topPeaks) {
const peakHz = loHz + (idx / (n - 1)) * fullSpanHz;
const peakDb = bins[idx];
if (peakDb < DB_MIN + 6) continue; // skip near-floor peaks
const xFrac = (peakHz - range.visLoHz) / range.visSpanHz;
if (xFrac < 0.02 || xFrac > 0.98) continue;
const yFrac = 1 - (Math.max(DB_MIN, Math.min(DB_MAX, peakDb)) - DB_MIN) / dbRange;
const span = document.createElement("span");
span.className = "spectrum-peak-label";
span.textContent = formatSpectrumFreq(peakHz);
span.style.left = (xFrac * cssW) + "px";
span.style.top = Math.max(2, yFrac * cssH - 16) + "px";
labelEl.appendChild(span);
}
}
}
// ── Crosshair lines ──
if (spectrumCrosshairX != null && spectrumCrosshairY != null) {
const cx = spectrumCrosshairX * dpr;
@@ -10582,9 +10557,6 @@ if (spectrumCanvas) {
spectrumCanvas.style.cursor = "crosshair";
spectrumCrosshairX = null;
spectrumCrosshairY = null;
// Clear peak labels on leave
const labelEl = document.getElementById("spectrum-peak-labels");
if (labelEl) labelEl.innerHTML = "";
scheduleSpectrumDraw();
});
}
src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
-1
View File
@@ -118,7 +118,6 @@
<div id="spectrum-bookmark-axis"></div>
<div id="spectrum-bookmark-side-left" class="spectrum-bookmark-side spectrum-bookmark-side-left" aria-hidden="true"></div>
<canvas id="spectrum-canvas"></canvas>
<div id="spectrum-peak-labels" aria-hidden="true"></div>
<div id="spectrum-zoom-indicator" aria-hidden="true"></div>
<div id="spectrum-minimap" aria-hidden="true"><div class="minimap-view"></div></div>
<div id="spectrum-db-axis" aria-hidden="true"></div>
src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
+1 -25
View File
@@ -34,7 +34,6 @@
--card-base-max-width: 1280px;
--card-max-width: 1600px;
--card-bookmark-gutter: 9.5rem;
--spectrum-waterfall-height: 120px;
--spectrum-bookmark-side-width: 6.5rem;
--spectrum-bookmark-side-offset: 8.85rem;
}
@@ -3108,29 +3107,6 @@ button:focus-visible, input:focus-visible, select:focus-visible {
font-weight: 700;
pointer-events: none;
}
/* ── Peak labels on spectrum ── */
#spectrum-peak-labels {
position: absolute;
top: 0;
left: 0;
right: 0;
height: var(--spectrum-plot-height);
pointer-events: none;
z-index: 6;
overflow: hidden;
}
.spectrum-peak-label {
position: absolute;
transform: translateX(-50%);
font-size: 0.58rem;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
color: var(--text-muted);
font-weight: 600;
white-space: nowrap;
pointer-events: none;
text-shadow: 0 1px 3px color-mix(in srgb, var(--bg) 80%, transparent);
opacity: 0.85;
}
/* ── Zoom indicator ── */
#spectrum-zoom-indicator {
display: none;
@@ -3173,7 +3149,7 @@ button:focus-visible, input:focus-visible, select:focus-visible {
#spectrum-waterfall-canvas {
display: block;
width: 100%;
height: var(--spectrum-waterfall-height, 120px);
height: var(--spectrum-plot-height);
background: var(--spectrum-bg);
cursor: crosshair;
touch-action: none;