Add color picker to select tree color

[MichaelBuessemeyer]

URL of deployed dev instance (used for testing):

• https://colorselectionfortrees.webknossos.xyz

Steps to test:

• Open a skeleton tracing and create a tree with some nodes.
• Then use the color selection by clicking the eye-dropper icon.
  The color of the tree should now be the newly selected color.

Issues:

• fixes User-definable colors for trees #4794

---

• 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]

Nice! I left only a few suggestions.

I think we can improve the UI for this a bit, because the functionality is kind of scattered right now and I feel like the color picking is too prominent. Some options, like "Measure skeleton length" and "Shuffle tree color" are in the dropdown menu up top and this color picker is next to the tree name and always visible. We could put all of these three things into a settings dropdown next to the tree name in the same way it's done for the groups. These setting would also only appear when hovering to keep the UI more clear. Maybe @philippotto has some opinion or suggestions for this as well? :)

[philippotto]

I think we can improve the UI for this a bit, because the functionality is kind of scattered right now and I feel like the color picking is too prominent. Some options, like "Measure skeleton length" and "Shuffle tree color" are in the dropdown menu up top and this color picker is next to the tree name and always visible. We could put all of these three things into a settings dropdown next to the tree name in the same way it's done for the groups. These setting would also only appear when hovering to keep the UI more clear. Maybe @philippotto has some opinion or suggestions for this as well? :)

Yes, I completely agree with you 👍 It would also be cool if one could right click on a tree and then the settings submenu would open, too (same as clicking on the cog icon). I think antd supports contextmenu as a trigger for opening the menu.

[MichaelBuessemeyer]

I think we can improve the UI for this a bit, because the functionality is kind of scattered right now and I feel like the color picking is too prominent. Some options, like "Measure skeleton length" and "Shuffle tree color" are in the dropdown menu up top and this color picker is next to the tree name and always visible. We could put all of these three things into a settings dropdown next to the tree name in the same way it's done for the groups. These setting would also only appear when hovering to keep the UI more clear.

I also think this a very good idea 👍

[daniel-wer]

Thanks for improving the UX by adding the tree setting dropdowns 👍

Please see my comment regarding the default color that is selected when the color pickers are opened (that I added before this review).
Also, the color picker no longer works for me as it instantly closes after clicking the menu entry (is only a problem in Chrome - Firefox works).

[MichaelBuessemeyer]

Also, the color picker no longer works for me as it instantly closes after clicking the menu entry (is only a problem in Chrome - Firefox works).

This took me quite some time to figure it out.
I tried using a library for this but the library made it only worse.

The solution: Somehow controlling the dropdown menu's visibility made it work.

I think the actual problem was that the color selection is a child of the dropdown menu and as the color picker opens, the dropdown menu loses focus and collapses which also closes the color picker.

[MichaelBuessemeyer]

@daniel-wer I think I fixed all your mentions and the code looks fine. Could you please check the newest changes again?

[daniel-wer]

Very nice, works like a charm for me! 👍