Improve selection of fallback segmentation when creating annotations (#8677)

### URL of deployed dev instance (used for testing):
- https://___.webknossos.xyz

### Steps to test:
- prepare a dataset with more than one segmentation layer
- go to dataset view mode, yield all seg layers invisible and click
"create annotation"
- you should see a modal that lets you select the seg layer on which to
base the volume annotation
- if there is only one segmentation layer in the DS or there are more
but only one is visible, the visible or only segmentation layer should
be used (no modal)

### Issues:
- fixes #8627 

------
(Please delete unneeded items, merge only when none are left open)
- [x] Updated
[changelog](../blob/master/CHANGELOG.unreleased.md#unreleased)
- [ ] Updated [migration
guide](../blob/master/MIGRATIONS.unreleased.md#unreleased) if applicable
- [ ] Updated [documentation](../blob/master/docs) if applicable
- [ ] Adapted [wk-libs python
client](https://github.com/scalableminds/webknossos-libs/tree/master/webknossos/webknossos/client)
if relevant API parts change
- [ ] Removed dev-only changes like prints and application.conf edits
- [x] Considered [common edge
cases](../blob/master/.github/common_edge_cases.md)
- [ ] Needs datastore update after deployment

---------

Co-authored-by: Florian M <fm3@users.noreply.github.com>
Co-authored-by: Philipp Otto <philipp.4096@gmail.com>

Author: 3 people

frontend/javascripts/viewer/view/action_bar_view.tsx

@@ -1,23 +1,25 @@
 import { withAuthentication } from "admin/auth/authentication_modal";
 import { createExplorational } from "admin/rest_api";
-import { Alert, Popover, Space } from "antd";
+import { Alert, Modal, Popover, Space } from "antd";
 import { AsyncButton, type AsyncButtonProps } from "components/async_clickables";
+import { NewVolumeLayerSelection } from "dashboard/advanced_dataset/create_explorative_modal";
 import { useWkSelector } from "libs/react_hooks";
 import { isUserAdminOrTeamManager } from "libs/utils";
 import { ArbitraryVectorInput } from "libs/vector_input";
 import * as React from "react";
 import { connect, useDispatch } from "react-redux";
 import { useHistory } from "react-router-dom";
-import type { APIDataset, APIUser } from "types/api_types";
+import type { APIDataset, APISegmentationLayer, APIUser } from "types/api_types";
 import { APIJobType, type AdditionalCoordinate } from "types/api_types";
 import { type ControlMode, MappingStatusEnum, type ViewMode } from "viewer/constants";
 import constants, { ControlModeEnum } from "viewer/constants";
 import {
   doesSupportVolumeWithFallback,
   getColorLayers,
   getMappingInfoForSupportedLayer,
+  getSegmentationLayers,
   getUnifiedAdditionalCoordinates,
-  getVisibleSegmentationLayer,
+  getVisibleSegmentationLayers,
   is2dDataset,
 } from "viewer/model/accessors/dataset_accessor";
 import { setAdditionalCoordinatesAction } from "viewer/model/actions/flycam_actions";
@@ -139,18 +141,23 @@ function AdditionalCoordinatesInputView() {
 function CreateAnnotationButton() {
   const history = useHistory();
   const activeUser = useWkSelector((state) => state.activeUser);
+  const visibleSegmentationLayers = useWkSelector((state) => getVisibleSegmentationLayers(state));
+  const segmentationLayers = useWkSelector((state) => getSegmentationLayers(state.dataset));
+  const dataset = useWkSelector((state) => state.dataset);
+  const [isLayerSelectionModalVisible, setLayerSelectionModalVisible] =
+    React.useState<boolean>(false);
+  const [selectedLayerName, setSelectedLayerName] = React.useState<string | undefined>(undefined);
 
-  const onClick = async () => {
-    const state = Store.getState();
-    const { dataset } = state;
+  const getUnambiguousSegmentationLayer = () => {
+    if (visibleSegmentationLayers?.length === 1) return visibleSegmentationLayers[0];
+    if (segmentationLayers.length === 1) return segmentationLayers[0];
+    return null;
+  };
+
+  const continueWithLayer = async (layer: APISegmentationLayer | null | undefined) => {
     // If the dataset supports creating an annotation with a fallback segmentation,
     // use it (as the fallback can always be removed later)
-    const maybeSegmentationLayer = getVisibleSegmentationLayer(state);
-    const fallbackLayerName =
-      maybeSegmentationLayer && doesSupportVolumeWithFallback(dataset, maybeSegmentationLayer)
-        ? maybeSegmentationLayer.name
-        : null;
-
+    const fallbackLayerName = getFallbackLayerName(layer);
     const mappingInfo = getMappingInfoForSupportedLayer(Store.getState());
     let maybeMappingName = null;
     if (
@@ -170,21 +177,60 @@ function CreateAnnotationButton() {
     history.push(`/annotations/${annotation.id}${location.hash}`);
   };
 
+  const getFallbackLayerName = (segmentationLayer: APISegmentationLayer | null | undefined) => {
+    return segmentationLayer && doesSupportVolumeWithFallback(dataset, segmentationLayer)
+      ? segmentationLayer.name
+      : null;
+  };
+
+  const onClick = async () => {
+    // This will be set in cases where it is clear which layer to use.
+    const unambiguousSegmentationLayer = getUnambiguousSegmentationLayer();
+    if (unambiguousSegmentationLayer == null && segmentationLayers.length > 1) {
+      setLayerSelectionModalVisible(true);
+      return;
+    }
+    await continueWithLayer(unambiguousSegmentationLayer);
+  };
+
+  const handleLayerSelected = async () => {
+    setLayerSelectionModalVisible(false);
+    const selectedLayer = selectedLayerName
+      ? segmentationLayers.find((layer) => layer.name === selectedLayerName)
+      : null;
+    await continueWithLayer(selectedLayer);
+  };
+
   const ButtonWithAuthentication = withAuthentication<AsyncButtonProps, typeof AsyncButton>(
     AsyncButton,
   );
   return (
-    <ButtonWithAuthentication
-      activeUser={activeUser}
-      authenticationMessage="You have to register or login to create an annotation."
-      style={{
-        marginLeft: 12,
-      }}
-      type="primary"
-      onClick={onClick}
-    >
-      Create Annotation
-    </ButtonWithAuthentication>
+    <>
+      <ButtonWithAuthentication
+        activeUser={activeUser}
+        authenticationMessage="You have to register or login to create an annotation."
+        style={{
+          marginLeft: 12,
+        }}
+        type="primary"
+        onClick={onClick}
+      >
+        Create Annotation
+      </ButtonWithAuthentication>
+
+      <Modal
+        open={isLayerSelectionModalVisible}
+        onCancel={() => setLayerSelectionModalVisible(false)}
+        onOk={handleLayerSelected}
+      >
+        <NewVolumeLayerSelection
+          segmentationLayers={segmentationLayers}
+          dataset={dataset}
+          selectedSegmentationLayerName={selectedLayerName}
+          setSelectedSegmentationLayerName={setSelectedLayerName}
+        />
+      </Modal>
+    </>
   );
 }
 

unreleased_changes/8677.md

@@ -0,0 +1,2 @@
+### Changed
+- When creating an annotation from the dataset view mode, and more than one segmentation layer is visible or multiple segmentation layers are invisible but available, a selection modal now appears allowing users to choose which segmentation layer to use for the newly created volume annotation. Per default, annotations are still based on the visible segmentation layer.