fix: keep spectrogram shades aligned by drawing them once over the image

[kauereinbold]

Fixes #578

Problem

The detection shades were drawn by two different systems: static strips over the spectrogram image before playback, and wavesurfer's regions plugin once a player was active. Every symptom in #578 comes from the handoff between the two:

• The static strips were sized in frozen pixels at creation time, so resizing or zooming the window left them misaligned with the responsive image, and pushed the waveform below the spectrogram.
• Pressing play swapped the strips for plugin regions. Wavesurfer 2 draws those at player creation, before the audio duration is known, so they render as ~2px slivers at the left edge until the ready event. On a slow connection that window lasts seconds. This also happens in production today, it is just hard to notice without the static strips next to it.
• When playback finished, moved to another card, or the audio failed to load, the removal/restore glue missed cases and the shades disappeared entirely.

Change

Make the image shades the single source of truth and remove the regions plugin:

• DrawRegionShades draws percentage-positioned strips over the spectrogram image, for the card and the modal, once. Percentage units mean they track the responsive image through any resize or zoom with no JS resize handling.
• The clip duration comes from an <audio preload="metadata"> probe, with a 60 second fallback (the inference segment size) if the audio fails to load, so shades still appear when the clip is unreachable.
• The players no longer load the regions plugin, and all swap/restore glue is gone. Play, finish, destroy, and card switches cannot move, blink, or drop a shade because nothing about playback touches the shades anymore.
• The progress cursor still comes from the player and sweeps over the static shades, so playback feedback is unchanged.

Region drag/resize was already disabled, so no interactive behavior is lost by dropping the plugin.

How to test

1. Open the candidates page and pick a card with detection annotations (shaded bars over the spectrogram).
2. Resize the browser window from narrow to wide, and back. The shades should stretch with the image and stay on the annotation times, and the waveform should stay on top of the spectrogram instead of dropping below it.
3. Press play. The shades should not flash, shift, or get replaced; the white cursor sweeps over them.
4. Let the clip finish, then play a different card. The shades on both cards should still be there, unchanged.
5. Open the spectrogram modal from the card menu. The shades should cover the full image height at the same times.
6. Optional: block the audio URL in DevTools and reload. The shades still render, positioned against the 60 second segment length.

[Copilot]

Pull request overview

Fixes spectrogram shade alignment and persistence by decoupling detection shades from playback.

Changes:

• Draws responsive, percentage-positioned shades over card and modal images.
• Removes the WaveSurfer regions plugin and playback lifecycle glue.
• Uses audio metadata with a 60-second fallback for shade positioning.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.

File	Description
ai-for-orcas.js	Implements persistent image-overlay shades and simplifies players.
_Host.cshtml	Removes the unused regions plugin script.
DetectionComponent.razor.cs	Updates JavaScript interop and region serialization.
DetectionComponent.razor	Removes obsolete region data attributes.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[dthaler]

I found an issue when running locally with your PR. While window is not maximized, start playing a sample and then pause it, so progress line is visible. Now change the horizontal size of the window slightly. As you do, a bar across the bottom of the spectrogram will blink as it switches back and forth between present and not present as you drag.

[kauereinbold]

Good catch, thanks. That bar is the player's horizontal scrollbar. wavesurfer creates its wave element with overflow-x auto, and while dragging the canvas width can briefly overflow the container by a pixel, so the scrollbar flickers in and out. I couldn't reproduce it at first because Chrome's overlay scrollbars take no space; your screenshot showed the classic style, which made it visible.

Fixed by passing hideScrollbar: true to both players. The scrollbar was never functional there since the waveform always fills its parent.

While testing this I found a pre-existing problem in the same area: with playback paused, the progress line drifts off its position for a moment during the drag and snaps back when wavesurfer's debounced redraw fires. It happens in production too, independent of this PR. Fixed by redrawing the player on each resize event. Both changes are pushed.