Annotations: Render an annotation range [optionally: with note]

[alexpaxton]

Background

See #377 - the first part of this.

The product requirements of the UI are:

• Annotations inherit their display color from the stream they are a part of
• Annotations should be drawn on top of the visualization to ensure mouse interactions with them are not interrupted
• Tooltip should contain timestamp (of that line), the summary text, (if it exists) the message text, and an edit button

Acceptance Criteria

• Ranges should be shaded/colored in
  • Shade the area between the lines with the same color as the lines in low opacity (10%? TBD)
• ~~Hovering over the range displays a tooltip aligned to the mouse~~ <---- covered by a separate issue
• Clicking the edit button opens the edit overlay (this part might not need to exist in giraffe specifically)
• The tooltip should be rendered by giraffe, but the content might need to be injectable by the application (in the case of the ui providing an edit button)
• Annotations layers should accept a single color

[hoorayimhelping]

Types of annotations

• Point annotations
  • Have identical _timeStart and _timeStop values
  • A single vertical line the full height of the visualization
• Range annotations
  • Use _timeStart and _timeStart to draw the 2 vertical lines