serversdown/terra-view
1
0
Fork 0
Code Issues 16 Pull Requests Actions Packages Projects Releases 4 Wiki Activity

event-modal: port 4-channel Chart.js waveform/histogram panels

Browse Source 
Adds inline waveform plots to the shared event-detail modal, ported
from sfm/sfm_webapp.html:2555-2880.  The standalone SFM webapp's
plot logic moves into event-modal.js with Tailwind-friendly grid +
tick colors (theme-aware via the `dark` class on <html>).

Channels render in BW Event Report order — MicL on top, Tran on
bottom.  Mic channel auto-converts psi → dB(L) when the operator's
mic_unit_pref is "dBL" (the default), using _psiToDblForChart with
a MIC_DBL_FLOOR=60 floor so the chart shows an SPL-vs-time curve
instead of a sparse pattern of "moments above floor".

Histograms render as bars with HH:MM:SS x-axis labels when the
sidecar carries time_axis.interval_times (events ingested with the
v0.20 parser); falls back to interval index for older events.
Geo + mic histogram channels enforce minimum Y ranges (0.05 in/s
and 0.001 psi respectively) so quiet events don't fill the panel.

Waveform events get the trigger-line + zero-baseline overlay; the
histogram branch suppresses it (no trigger concept).  Downsampling
kicks in at >3000 samples to keep render time bounded.

Modal partial widened max-w-3xl → max-w-5xl to fit the chart panels
without horizontal clipping.  Chart.js 4.4.1 loaded from cdn.jsdelivr
at the bottom of the partial, matching the standalone webapp's
reference version pin.

Side-yard: docker-compose bind-mounts ../seismo-relay-prod-snap into
the SFM container so the symlinked DB + waveform store inside
bridges/captures resolve.  Without it SFM 500s on every /db/* call
because the symlink target was outside the container's filesystem
view.  Read-write (not :ro) because SFM opens the DB in WAL mode
which requires creating -wal and -shm sidecar files even for reads.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
serversdown
2026-05-29 01:01:51 +00:00
parent db8d666aa1
commit 1d9fd00cc2
3 changed files with 339 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/partials/event_detail_modal.html
+6 -2
View File
@@ -10,8 +10,8 @@ Usage:
#}
<div id="event-detail-modal" class="fixed inset-0 z-50 hidden">
<div class="absolute inset-0 bg-black/60" onclick="closeEventDetailModal()"></div>
<div class="absolute inset-x-4 top-1/2 -translate-y-1/2 max-w-3xl mx-auto bg-white dark:bg-slate-800 rounded-xl shadow-2xl p-6 max-h-[88vh] overflow-y-auto">
<div class="flex items-center justify-between mb-4 sticky top-0 bg-white dark:bg-slate-800 -mx-6 px-6 pb-3 border-b border-gray-200 dark:border-gray-700">
<div class="absolute inset-x-4 top-1/2 -translate-y-1/2 max-w-5xl mx-auto bg-white dark:bg-slate-800 rounded-xl shadow-2xl p-6 max-h-[92vh] overflow-y-auto">
<div class="flex items-center justify-between mb-4 sticky top-0 bg-white dark:bg-slate-800 -mx-6 px-6 pb-3 border-b border-gray-200 dark:border-gray-700 z-10">
<h3 class="text-lg font-bold text-gray-900 dark:text-white" id="event-detail-modal-title">Event Detail</h3>
<button onclick="closeEventDetailModal()"
class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors">
@@ -23,3 +23,7 @@ Usage:
<div id="event-detail-modal-content"></div>
</div>
</div>
{# Chart.js — pinned to v4.4.1 to match the SFM webapp's reference impl
(v4 chart API; differs from v3). Loaded once globally; safe if other
pages on the same template tree also load it. #}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>