Make hybrid annotations the default

[philippotto]

• by default, the "New Hybrid Tracing" will be shown in the dataset list (will create a hybrid with segmentation fallback)
• a dropdown menu offers more options (e.g., skeleton, volume etc.)
• if the current dataset, does not have a segmentation layer, the fallback options are not shown
• if a segmentation layer exists, but is uint64, the default action will create an annotation without fallback data and in the dropdown the fallback-option is disabled (see Fully support uint64 segmentations and volume annotations #4852)
• the "create annotation" button when viewing a dataset simply defaults to creating a hybrid (with fallback if possible)
• I also refactored the flow types around the dataset so that isActive === true always means that dataLayers is an array. however, the back-end also needs to be adapted so that this is really true.
• remove the workaround in the rest api I added to avoid errors with the previous todo

I think, we can change the wording later to "New Annotation" (without "Hybrid"), but let's get the users accustomed to the new UI first.

URL of deployed dev instance (used for testing):

• https://refactornewannotationlinks.webknossos.xyz

Steps to test:

• use the create annotation UI in dashboard and when viewing a dataset

Issues:

• fixes Make hybrid tracings the default #3433

---

• Updated (unreleased) changelog
• Updated (unreleased) migration guide if applicable
• Updated documentation if applicable
• Adapted wk-connect if datastore API changes
• Needs datastore update after deployment
• Ready for review

[daniel-wer]

Very cool, also the flow type refactoring 👍 I only left some very small suggestions regarding the code.

Regarding the UI, I agree with some of the points @fm3 already mentioned elsewhere and think there is some room for improvement. These are a couple of notes and ideas (feel free to ignore!):

• The dropdown is misleading as it's not recognizable that only the arrow triggers the dropdown. Initially, I thought the button needed to be clicked to trigger the dropdown, however, that started a hybrid annotation. Usually one would solve this by separating the arrow:
  
  However, as we don't have the borders this doesn't really work 🤔 Sorry for not having a solution here, but I think we should try to find one.
• A simple plus could work as an icon for the hybrid annotation
• While we're at it, a cog wheel icon would work better for the "Edit" option in my opinion and one could also name it "Settings" instead of "Edit"
• I think it would be fine to go with New Annotation directly instead of changing it again after a while, but no strong opinion

[fm3]

• The dropdown is misleading as it's not recognizable that only the arrow triggers the dropdown. Initially, I thought the button needed to be clicked to trigger the dropdown, however, that started a hybrid annotation. Usually one would solve this by separating the arrow. However, as we don't have the borders this doesn't really work thinking Sorry for not having a solution here, but I think we should try to find one.

How about something like this, with a vertical bar and a bit more space?

• A simple plus could work as an icon for the hybrid annotation
• While we're at it, a cog wheel icon would work better for the "Edit" option in my opinion and one could also name it "Settings" instead of "Edit"

I like that!

[philippotto]

Thank you both for your feedback and ideas! I incorporated all the suggestions and regarding the dropdown/click target issue, I decided to make the entire "New Annotation" link a dropdown menu. One can directly click on it to create a new hybrid, but already hovering over it will show the dropdown with the other options. I think, this is the most idiomatic way and also antd's default menus support this. The fact that I had to manually tinker with the CSS before should have been a sign for me, that I did something weird 🙈

I updated the screenshot in the PR description (or check it out live).

[fm3]

Ah yes that’s also a fair idea :D
I’m a bit worried, though, that this may make the original “main” button less attractive, if the user’s eye is immediately drawn to the much bigger drop down menu. Now I can imagine the user thinking the main button to be only a target to pop out the menu 🙈 …while actually we wanted the users to mostly use the hybrids from now on.

[philippotto]

I’m a bit worried, though, that this may make the original “main” button less attractive, if the user’s eye is immediately drawn to the much bigger drop down menu. Now I can imagine the user thinking the main button to be only a target to pop out the menu

Argh, of course you are right, point taken. My first thought was to add redundancy (so the first menu item would be equal to the link), but now I'm considering the following:

What do you think?

/edit: I used the ItemGroup element of antd for it. So, it's not handrolled.

[fm3]

Yeah definitely better 🤔 What do you think @daniel-wer?

[daniel-wer]

I decided to make the entire "New Annotation" link a dropdown menu. One can directly click on it to create a new hybrid, but already hovering over it will show the dropdown with the other options. I think, this is the most idiomatic way and also antd's default menus support this.

I also thought about this but refuted the idea in my head with the argument @fm3 gave. However, I think you solved this nicely with the "Other options" divider. It's not perfect, but I think it's the best idea we have for now :)

[philippotto]

Hmm, now, that I slept over it, I got more hesitant. I see two downsides:

• as @fm3 pointed out, the dropdown is quite prominent even though we actually want to encourage the hybrid option
• the dropdown won't work on touch systems as there is no hover.

the second point is not super dramatic in my opinion, but in combination with the first, it makes me really doubt the approach.

How about something like this, with a vertical bar and a bit more space?

I'll play around with that to see how this feels :)

[philippotto]

Ok, I eventually went with your suggestion, @fm3. It currently looks like this:

This solution doesn't put too much emphasis on the dropdown, the UI should be easy to understand and it also works on mobile. Seems like the right way to go :)

[fm3]

Great :) Thanks for looking into that!

I noticed that on some datasets I get the skeleton-only option twice? 🤔

Also, do you think it might make sense to offer the same options for the create-annotation button in the menu bar in view mode?

[philippotto]

I noticed that on some datasets I get the skeleton-only option twice?

Good catch! Should be fixed now.

Also, do you think it might make sense to offer the same options for the create-annotation button in the menu bar in view mode?

Hm, strictly speaking, yes. I just tried adding that, but various problems arose which is why I wouldn't want to continue this, as the impact is rather low in my opinion 🙈

[daniel-wer]

Great work @philippotto and thanks @fm3 for the testing and ideas!

To me this looks good to be merged 🎉

There is one minor issue but feel free to ignore - For some reason the vertical alignment of the 4 elements (icon + text + divider + arrow) irritates my brain, but I can't quite make out what's wrong:

Maybe the arrow is too low, or the divider too high? As I said, feel free to ignore 🙈