Region virtualisation: rapid removal and creation of large numbers of regions appears to be glitchy since 7.8.0

[rewbs]

Hi all,

I have a UI that uses regions to represent beat positions in a track. The region positions are calculated based on the BPM and beat offset. The user can change the BPM and beat offset with a slider, which updates the beat markers in real time.

The way I'm doing this is quite naive, but worked well up until 7.8.0. When the BPM or offset changes, I simply delete all the "beat" regions like regionsPlugin.getRegions().filter(r => r.id.includes('beat')).forEach(r => r.remove()) (I can't simply clear all regions because there are non-beat regions I need to keep) , and then re-invoke regionsPlugin.addRegion() for each updated beat position.

Here it is in action in 7.7.15:

ws-7.7.15.mp4

But as of 7.8.0, there is a lag and a refresh issue (only change here is the WaveSurfer version, no change in my code):

ws-7.8.0.mp4

Does this feel like a regression in Wavesurfer or is my approach brain-dead? I notice 7.8.0 introduced some virtualisation for regions, which I assume is related.

For further context I'm using @wavesurfer/react 1.0.7 and Chrome on MacOS.

If there's consensus this is a bug or unexpected (as opposed to me being an idiot), I'm happy to work on a simple recreate case.

Cheers,
Robin

[katspaugh]

Thanks Robin, it's definitely a regression! I'll look into it.

[jomin398]

@rozap can you share your code?
Visualizing the bpm is overlaps with what I'm trying to make.
I'm trying to cloning to look like pioneer's DJ machine.

May be I'm going to make a plugin.

[katspaugh]

@rewbs is this still the case with the latest version (7.8.13)? There were a couple fixes for region removal.