boxes on score measure aren't in the right place

[alastair]

When we added the navigation menu bar to the top of the app and moved the position of the score div, the boxes that we use to draw around a measure to say that there are annotations have ended up in the wrong place.

A few improvements that we can make to this:

• Ensure that the <SelectableScoreApp> component renders all of its children inside a bootstrap grid layout (Interface overhaul #15)
• Try and see if we can identify the top of page offset of the score svg automatically, so that we can draw the boxes in the right place regardless of the score's position
• In order to make the SelectableScoreApp component easier to understand and follow, it'd be good to move the code that does the annotation processing and box drawing into a set of well defined utility functions, in order to make it easier to understand what the code is doing and separate each specific sub-part.

[fedezubo]

As a temp fix I can try and see what's causing the issue but I agree that the selectablescore file needs reshaping

[alastair]

I was reading about React Portals, which seems to be a great way of sending messages between unconnected react components. Or Refs might be a way of passing messages from a highlight box to the rest of the app to select the relevant annotation