Add display of annotations to Markers component (UI)

[elynema]

Description

For AVAnnotation grant effort, Ramp needs to be able to display annotations more generically. The Markers component can be re-used for this purpose. The name of the component can be set through a prop.

Questions

• How to handle multiple annotation bodies? Do they all get concatenated into a single annotation? Do we want all textualbodies regardless of purpose or just some?
• When providing a label to filter annotation sets and to display next to each annotation, do we use the AnnotationPage label (Aviary and AvAnnotate provide) or the textualBody with purpose=tagging label?
• Annotations with motivation of commenting (AVAnnotate) and supplementing (Aviary) were called out. Are there other motivation types that we need to support?

Done Looks Like

• Extend Markers display component

• Provide a multi-select filter drop-down at the top allowing users to select one or more annotation sets to display. When not expanded, the drop-down should say how many sets are selected.

• Display annotations with motivation commenting (AVAnnotate) or supplementing (Aviary)

• For a given annotation body, the label/value pair displays, ex: "Title: Bladderball"

• If there are multiple annotation bodies, all should be displayed

• If there is an annotation body with purpose=tagging, that value should be displayed as the label for the annotation

• Props exist for: component heading, whether or not the tab scrolls, which motivation annotations should be displayed

• Time should be displayed as either a single time (if the annotation reference a timepoint or a range if referenced in annotation). If a range, the entire range should link to the starting timepoint in the range.

• Do not display markers on the time rail for first iteration

• If not displaying highlighting annotations (markers), then annotations should display with timepoint/range and label(s) on the first line, with annotation text below and likely to be muti-line. If the annotation text is >6 lines, implement some kind of expand to show the entire annotation text, which could be very long

[Dananji]

Since almost all the parsing work is done via #751 and #753, I think we are in a good place to start the UI work for Annotations component.
Also, visualizing things will help me to update and fix parsing as needed.
@elynema and @joncameron Can I pull this ticket into current sprint to start this work?

[joncameron]

@Dananji Sounds good to me.

[Dananji]

@joncameron and @elynema Do you happen to remember why we put the following done looks like for displaying annotations with a given motivation (as a prop)? I can't seem to remember whether this was a requirement came from AVAnnotate folks or something we discussed implementing in the Annotations component.

Props exist for: tab label, whether or not the tab scrolls, which motivation annotations should be displayed

There doesn't seem to be any filtering done based on motivation in both Aviary and AVAnnotate's annotations display.

[elynema]

@Dananji This is not necessarily based on the AVAnnotate or Aviary use case, but more that it seems useful for Ramp users to be able to define which annotation motivations are displayed in the Annotations component?

[Dananji]

Yes, that sounds good.

@elynema Does it make sense to set the prop as follows?
Default: annotationMotivation = [] => displays all annotations
For playlist context: Ramp programmatically set annotationMotivation = ['highlighting'] => displays only markers
When the user specifies the value: annotationMotivation = ['commenting', 'supplementing'] => display annotations with at least one of the specified annotations.

[elynema]

@Dananji Yes, that sounds right to me.