Switch the runtime data structure used to store segments in the timeline

[jbilcke-hf]

Context

Currently segments are stored as Array<TimelineSegment>, with various temporary data structures to handle time splicing (see BufferedSegments or activeSegments in the codebase)

Goal

I would like to simplify the code and improve performance by reducing the number of .find() and .filter() operations needed

Limitations / things to checks

• Each data structure has benefits and drawbacks: we probably should run benchmarks to really check if there are performance improvements by switching the data structure (and where the bottlenecks are)

• I do not exclude the possibility to use multiple data structures (a bit like an index for a database), but this increases complexity (do we sync on each little change, or do we use cache invalidation strategies etc)

• This is a deep, core change: we should probably add unit tests firsts

How to implement

Our problem can be represented by a Segment Tree:

https://en.wikipedia.org/wiki/Segment_tree

although (to quote wikipedia):

The segment tree is less efficient than the interval tree for range queries in one dimension, due to its higher storage requirement: O(n log n) against the O(n) of the interval tree.

I was also thinking of maybe using a sorted B Tree:
https://www.npmjs.com/package/sorted-btree#features

Acceptance criteria

• the performance gain should be perceptible
• this should also add benchmark tests to compare performance

Existing features of the app should still work as usual (the problem is that right now, we don't have automated tests to verify this)