Assign Labels to & Delete Single Images and Assign Labels & Users to Multiple Images UI/UX Improvement

joshuajames-smith commented 3 years ago

Is your feature request related to a problem? Please describe

The current UI/UX only allows for single images to be labelled but needs to allow for multiple images to be assigned labels and users [roadmap issue 1 and 2]. Similarly, you can only delete multiple images - there needs to be a method for deleting single images. Labels are deleted from storage was not actively attached to an image (should be consistency between label storage between CURATE and ANNOTATE). There is no way to rename images.

Describe the solution you'd like

DELETE SINGLE IMAGE Issue #125 mentions the ability to only delete multiple images. The suggestion was to pull the delete option out to stand-alone but now this container holds the assigning multiple images with labels and users - a way of deleting single images is required.

When a user clicks on a single image, a delete icon should appear under the metadata dialogue. [backspace] should also be a shortcut key assignment.

CURATE - delete single image – final

SINGLE IMAGE LABEL ASSIGNMENT Label for a single image should have a text field for the user to change the image name if they require. A divide line seperates the label system. This is now a dropdown list which a user can create or apply/remove a label.

CURATE - label – 1

MULTIPLE IMAGE LABEL & USER ASSIGNMENT Using the multiple select icon or shift as a shortcut allows the user to select multiple images. The left column displays a new container holding: number of images selected, cog icon [multiple assignments [labels and/or users]] and a delete button. Two dropdown lists for labels and users are divided by a line. They allow a user to create or apply/remove label or assign/unassign users to annotate.

Curate Layout - assign – 1

Once a user clicks in the label box, the list of existing labels should display. The user can scroll (if there is many label) or type in the box which acts like a search, e.g. type 'Exa' would only show 'Example 1' and 'Example 2'. Active labels are demonstrated with a tick. A grey bar behind the text should be active for the hover state on each label/row.

Curate Layout - assign – 2

The dropdown label menu has an option as the bottom called 'edit or delete labels'. Clicking this gives the user the chance to change the name of the label (e.g. they spelt it wrong when creating) or delete the label (removing it from storage). The label text goes grey, once clicked a grey container should appear and the text returns to black to indicate 'editing' the name. The black crosses appear (should have green circle hover effect with tooltip to mention this permanently deletes the label).

Curate Layout - assign – 3

There is the chance a user may try and delete a label which is still assigned. A warning dialogue box should appear at this point (in front of a darkened background). It gives the user basic information (name of label clicked to delete and how many images are still assigned). If the user knows they click 'delete label' button, but otherwise they can click 'show assigned images' which should then TURN ON that label in the search field automatically - or they can click off, or the cross to close.

Curate Layout - assign – 4 2

When the label menu is closed, the labels are displayed in a container. This shows the user what is active without having to re-open the dropdown list. The cross in the container enables when to remove the label (but not delete from storage).

Curate Layout - assign – 5

Once a user clicks in the user box, the list of team member and collaborations should display. The user can scroll (if there is many) or type in the box which acts like a search, e.g. type 'Jos' would only show 'Joshua James Smith'. Assigned users are demonstrated with a tick. A grey bar behind the text should be active for the hover state on each label/row.

Curate Layout - assign – 6

When the user menu is closed, the user are displayed in a container. This shows the user what is assigned without having to re-open the dropdown list. The cross in the container enables when to assign the user.

Curate Layout - assign – 7

Describe alternatives you've considered

The green colouration relied on the select/deselect function (selected being green, deselected being grey). If the all labels exist in a drop-down menu displayed with ticks showing what is active - should the colouration be black instead? Might also help the legibility issues the green text can cause?

Curate Layout - assign – 13

No current warning dialogue design. Snackbars are currently purple so should the warning dialogue be blue? (colour-coded categories?) or green? (is this too similar to all the other headings?)

Curate Layout - assign – 4 1