Make layer settings visually consistent

[MichaelBuessemeyer]

URL of deployed dev instance (used for testing):

• https://makelayersettingsvisualconsistent.webknossos.xyz/

Steps to test:

• Open a tracing with more than one color layer.
• The color layers should be able to be rearranged.
• The volume and skeleton layers should also have a drag handle with less opacity. The drag handle should be disabled and a tooltip should tell that this layer cannot be moved.

TODOs:

• Get feedback

Issues:

• no issue exists for this

---

(Please delete unneeded items, merge only when none are left open)

• Updated changelog

[philippotto]

wouldn't this print the string dragHandleIcon because it's not in {} braces? Why not use something like <DragHandleIcon isDisabled=... />?

[MichaelBuessemeyer]

Oh right, I forgot the {...} here. The reason why I did not went for the "jsx-version" () is that in this scenario the tooltip does not work. The tooltip somehow needs an immediate child. This problem can be solved by adding a fragment, but this clutters the code imo more than the {...} version. Here is how it would look like with the jsx style:

<Tooltip title={`Layer not movable: ${layerType} layers are always rendered on top.`}>
  <>
    <DragHandleIcon isDisabled />
  </>
</Tooltip>

As I dislike the additional fragments, I used the { ... } style

[MichaelBuessemeyer]

One open question imo is whether to hide all drag handles in case every drag handle is disabled anyway: e.g. when there is only one color layer, the color layer order cannot be changed and all the drag handles will be disabled and take up space on the screen.
Pro: less wasted screen space
Con: inconsistent behaviour compared to datasets with multiple color layers. -> in some annotations the drag handles would be rendered and in some other annotations, the drag handles are not available :/

I do not have a strong option on this but have a tendency to go for "leaving the handles always visible" as this is more consistent and might not create the confusion that for some annotations some UI elements are not available. The reason the drag handle is disabled is explained by the tooltips and that should be explanation enough why the handle does not work and is greyed out.

[philippotto]

I do not have a strong option on this but have a tendency to go for "leaving the handles always visible" as this is more consistent and might not create the confusion that for some annotations some UI elements are not available. The reason the drag handle is disabled is explained by the tooltips and that should be explanation enough why the handle does not work and is greyed out.

Yes, I agree with your stance here 👍