Update UI for identifications and show multiple suggestions per classification

[annavik]

Summary

In this PR we implement the new design for identifications. This includes showing multiple suggestions per classificatoins.

List of Changes

• Use new components to present identifications
• Fetch classification details when a machine prediction is expanded
• Show multiple suggestions per classification
• Update bunch of other related components to use our new building blocks from Nova, to make UI more streamlined

Related Issues

• Closes Show more than the first prediction in UI #352.
• New UI components were implemented and added to Nova in Identification components nova#9.

Detailed Description

We have going a bit back and forth around these changes. The initial design (see Figma) suggested separating "confirming identifications" from "custom identifications" and also a grouped structure. We did like these ideas, however they would mean some significant logic changes, which we decided we are not fully ready for. We have a few stakeholders that needs to be involved in such decisions, some active labeling projects to consider and also some more high prio tasks. Also, our most urgent need for identifications was to present machine predictions in a more detailed way. Therefore, we decided to skip the suggested logic updates on the backend side, focus on our most urgent needs, but still try use as much as possible from the updated design, with some compromises.

How to Test the Changes

Please test all features related to identifications:

• Confirm machine prediction
• Confirm human suggestion
• Suggest ID
• Expand machine prediction
• Apply classification from an expanded item
• Delete identification

Screenshots

Before:

After:

Deployment Notes

This PR needs a small update after the permission PR (see #693) is merged!

[netlify]

✅ Deploy Preview for antenna-preview canceled.

Name	Link
🔨 Latest commit	74ad443
🔍 Latest deploy log	https://app.netlify.com/sites/antenna-preview/deploys/67f6dd0439064600087490c4

[annavik]

@mihow I did notice that if I try to fetch classification details, I get 500-responses from the backend in some cases. This is how we present such a failure in UI:

On localhost, this is the case for the initial occurrences I get, if I spin up a new database. If I process captures, the occurrences that will be generated can be expanded without any problems.

Is this something to worry about? Maybe it's just the dummy database that needs to be updated, or would this affect all older classifications?

[mihow]

@mihow I did notice that if I try to fetch classification details, I get 500-responses from the backend in some cases. This is how we present such a failure in UI:

On localhost, this is the case for the initial occurrences I get, if I spin up a new database. If I process captures, the occurrences that will be generated can be expanded without any problems.

Is this something to worry about? Maybe it's just the dummy database that needs to be updated, or would this affect all older classifications?

Thanks, yes it shouldn't throw a 500 error if there are not top N choices. I will look into that.

[mihow]

I found some cases where there is top-n data but the species values are null (even though there are scores). Mainly for the moth/non-moth model. So I need a little more time on this one.

[mihow]

@annavik Will you fix the merge conflicts while we wait for me to fix the backend issue?

[annavik]

@annavik Will you fix the merge conflicts while we wait for me to fix the backend issue?

Done! I have synced this with main and included some final tweaks as well. I think this one is ready now!

This is how it looks if we get some error:

This is how it looks if we get a response, but we have nothing to show:

[mihow]

@mihow todo: only return the full list of logits & scores when requests explicitly by the user (query param or another view)

[annavik]

@mihow todo: only return the full list of logits & scores when requests explicitly by the user (query param or another view)

This would be good to fix of course (as we talked about before), however even if we would get the full list, the frontend will now slice it to 5 items max.

[annavik]

This one is synced with main now! I have also added a few last tweaks:

• Add tooltips to expand button
• Tweak error messages to be in line with tooltips
• Make sure we are never showing more than 5 top predictions

[mihow]

I tested on staging and it's working quite well! This feature is a big deal. Sorry I put the breaks on merging for so long. Thank you for keeping the branch up-to-date. The new styles look great too!