Compare Annotations

[joshuajames-smith]

Problem

Relates to gliff-ai/roadmap#3.
Our users currently do not have a way to view two annotations on either the same image or side by side.

Solution

CURATE appeared as a fitting UX entry point to access this new feature which allows a user to compare two annotations.

The user must have only one image selected. This feature felt like it should be clear/obvious to the user and so could be achieved via an icon with text button. This button appears below the metadata drawer.

This changes gliff-ai/dominate#306 UI/UX design - specifically for CURATE (@Kinukeo). Now clicking a single image adds a grey overlay and button to image tile to access ANNOTATE.

Clicking the Compare Annotations button opens a dialogue for the user to select two users to compare their annotations.

Each input field is a dropdown list (similar to other fields, this should have a search capability - i.e. user types a couple letters which filters the dropdown list, e.g. user input 'Jos' would only show 'Josh Smith' in the list.

The dropdown list should not show the user already selected in the list, i.e. 'Team Member 1' is selected already and thus not shown in the other list. Those users who are greyed out show they have not marked their annotations are complete yet (this message should also appear in a tooltip when user hovers - good user feedback practice).

User clicks the Compare button, and is taken to ANNOTATE (gliff-ai/annotate#674)

Considered Alternatives

Thinking about the UI/UX of how a user accesses this feature in CURATE.

This feature handles one image, and so I explored how this would work UI-wise with only one image is selected and where this new button lives. Location of bottom-left or top-bar were considered.

Additional Context

Based on discussion with @philipjackson.