Sort by similarity

[mzur]

Resolves #125

Todo:

• [x] Finish UI/UX of similarity sort
• [x] Implement sorting for project Largo
• [x] Update/extend manual

[mzur]

Here is a demo of the current UX:

Screencast from 26.06.2024 15:51:09.webm

That's happening:

1. Select similarity sorting.
2. Select a reference annotation for sorting. The icon on the annotations are changed to thumbtacks.
3. Scroll the annotations. The reference stays pinned to the top left.
4. Select similarity sorting again to select a new reference annotation.
5. Dismiss some annotations. The "x" on the reference is shown differently so the reference remains visible.
6. Reset sorting. All annotations are shown as usual.
7. Sort by similarity again and select a new label. This resets the sorting because the reference annotation is not available any more.

@dlangenk Any comments?

[dlangenk]

4. Select similarity sorting again to select a new reference annotation. @dlangenk Any comments?

Why do we need that additional click? In Maia if I remember correctly I could just hover over the thumbnail and click on the pin icon to pin a new annotation. Otherwise it looks great 👍

[mzur]

I decided against the pin button because in Largo there already is the "show annotation" button and I thought two buttons too much. Also, all sorting options should work more or less in the same way, so I wanted this as a button in the sorting tab. An additional sorting option should not get in the way of the typical Largo use case.

[dlangenk]

I rather meant to have the second button only visible when you activate the similarity sort. This way it would be easy to use and in line with MAIA usage.

[mzur]

I though it easier for the users to just click on the whole thumbnail when they should select a reference. So you think the additional button next to the "show annotation" button would be better UX? Maybe if the "pin" button is shown permanently (not only on hover) whenever the "select reference" state is active then the required action is more clear for the users?

[dlangenk]

Showing it permanently would be an option but the on hover would be better I think because then it wouldn't cover the image and it would be exactly like MAIA. When activating the similarity sort you could show the select a reference annotation as you already did in the video (or add "by clicking on the pin icon when hovering over a thumbnail"). Instead of next to the show annotation button you could put it on the left. But that is just my personal "make it balanced" Monk.

[mzur]

I like it. Here are the same steps of the video again with the updated UI:

Screencast from 27.06.2024 11:55:41.webm

When the similarity sorting is active, you can now directly select a new reference with the buttons. Also the button is permanently shown for the selected reference and you can reset the sorting with a click on this button, too. I chose the bottom right button position because the dismissed state is already shown at the top left of the selected reference (you can see this in the video).

[dlangenk]

Looks really good this way👍