Improve convert to hybrid workflow

frontend/javascripts/components/hover_icon_button.tsx

@@ -0,0 +1,32 @@
+import { ButtonProps } from "antd";
+import * as React from "react";
+const { useState } = React;
+
+export type HoverButtonProps = Omit<ButtonProps, "icon"> & {
+  icon: React.ReactElement<any>;
+  hoveredIcon: React.ReactElement<any>;
+};
+
+export function HoverIconButton(props: HoverButtonProps) {
+  const [isMouseOver, setIsMouseOver] = useState<boolean>(false);
+
+  const onMouseEnter = (event: React.MouseEvent) => {
+    setIsMouseOver(true);
+    if (props.onMouseEnter != null) {
+      props.onMouseEnter(event);
+    }
+  };
+  const onMouseLeave = (event: React.MouseEvent) => {
+    setIsMouseOver(false);
+    if (props.onMouseLeave != null) {
+      props.onMouseLeave(event);
+    }
+  };
+
+  return React.cloneElement(isMouseOver ? props.hoveredIcon : props.icon, {
+    ...props,
+    onMouseEnter,
+    onMouseLeave,
+  });
+}
+export default {};

frontend/javascripts/dashboard/advanced_dataset/create_explorative_modal.tsx

@@ -27,11 +27,13 @@ export function NewVolumeLayerSelection({
   dataset,
   selectedSegmentationLayerIndex,
   setSelectedSegmentationLayerIndex,
+  showLayerSelectionDisabled,
 }: {
   segmentationLayers: Array<APISegmentationLayer>;
   dataset: APIDataset;
   selectedSegmentationLayerIndex: number | null | undefined;
   setSelectedSegmentationLayerIndex: (arg0: number | null | undefined) => void;
+  showLayerSelectionDisabled: boolean | null | undefined;
 }) {
   return (
     <div
@@ -52,6 +54,7 @@ export function NewVolumeLayerSelection({
           setSelectedSegmentationLayerIndex(index !== -1 ? index : null);
         }}
         value={selectedSegmentationLayerIndex != null ? selectedSegmentationLayerIndex : -1}
+        disabled={showLayerSelectionDisabled != null ? showLayerSelectionDisabled : false}
       >
         <Radio key={-1} value={-1}>
           Create empty layer

frontend/javascripts/oxalis/view/left-border-tabs/layer_settings_tab.tsx

@@ -8,15 +8,23 @@ import {
   WarningOutlined,
   PlusOutlined,
   VerticalAlignMiddleOutlined,
+  LockOutlined,
+  UnlockOutlined,
 } from "@ant-design/icons";
 import { connect } from "react-redux";
 import React from "react";
 import _ from "lodash";
 
 import classnames from "classnames";
-import type { APIDataLayer, APIDataset, EditableLayerProperties } from "types/api_flow_types";
+import {
+  APIAnnotationTypeEnum,
+  APIDataLayer,
+  APIDataset,
+  EditableLayerProperties,
+} from "types/api_flow_types";
 import { ValueOf } from "types/globals";
 import { AsyncIconButton } from "components/async_clickables";
+import { HoverIconButton } from "components/hover_icon_button";
 import {
   SwitchSetting,
   NumberSliderSetting,
@@ -33,6 +41,7 @@ import {
   findDataPositionForLayer,
   clearCache,
   findDataPositionForVolumeTracing,
+  convertToHybridTracing,
 } from "admin/admin_rest_api";
 import {
   getDefaultIntensityRangeOfLayer,
@@ -42,6 +51,8 @@ import {
   getLayerByName,
   getResolutionInfo,
   getResolutions,
+  getVisibleSegmentationLayer,
+  getSegmentationLayers,
 } from "oxalis/model/accessors/dataset_accessor";
 import { getMaxZoomValueForResolution } from "oxalis/model/accessors/flycam_accessor";
 import {
@@ -117,6 +128,8 @@ type State = {
   // is shown for that VolumeTracing
   volumeTracingToDownsample: VolumeTracing | null | undefined;
   isAddVolumeLayerModalVisible: boolean;
+  preselectedSegmentationLayerIndex: number | null | undefined;
+  segmentationLayerWasPreselected: boolean | null | undefined;
   layerToMergeWithFallback: APIDataLayer | null | undefined;
 };
 
@@ -125,6 +138,8 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
   state: State = {
     volumeTracingToDownsample: null,
     isAddVolumeLayerModalVisible: false,
+    preselectedSegmentationLayerIndex: null,
+    segmentationLayerWasPreselected: false,
     layerToMergeWithFallback: null,
   };
 
@@ -308,8 +323,11 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
     const { tracing, dataset } = this.props;
     const { intensityRange } = layerSettings;
     const layer = getLayerByName(dataset, layerName);
-    const isVolumeTracing = layer.category === "segmentation" ? layer.tracingId != null : false;
-    const maybeTracingId = layer.category === "segmentation" ? layer.tracingId : null;
+    const isSegmentation = layer.category === "segmentation";
+    const canBeMadeEditable =
+      isSegmentation && layer.tracingId == null && this.props.controlMode === "TRACE";
+    const isVolumeTracing = isSegmentation ? layer.tracingId != null : false;
+    const maybeTracingId = isSegmentation ? layer.tracingId : null;
     const maybeVolumeTracing =
       maybeTracingId != null ? getVolumeTracingById(tracing, maybeTracingId) : null;
     const maybeFallbackLayer =
@@ -403,7 +421,7 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
         <div
           className="flex-container"
           style={{
-            paddingRight: 5,
+            paddingRight: 1,
           }}
         >
           <div className="flex-item">
@@ -457,6 +475,26 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
             >
               <InfoCircleOutlined />
             </Tooltip>
+            {canBeMadeEditable ? (
+              <Tooltip
+                title="Make this segmentation editable by adding a Volume Annotation Layer."
+                placement="left"
+              >
+                <HoverIconButton
+                  icon={<LockOutlined />}
+                  hoveredIcon={<UnlockOutlined />}
+                  onClick={() => {
+                    const segmentationLayers = getSegmentationLayers(dataset);
+                    const segmentationLayerIndex = segmentationLayers.indexOf(layer);
+                    this.setState({
+                      isAddVolumeLayerModalVisible: true,
+                      segmentationLayerWasPreselected: true,
+                      preselectedSegmentationLayerIndex: segmentationLayerIndex,
+                    });
+                  }}
+                />
+              </Tooltip>
+            ) : null}
           </div>
           <div className="flex-item">
             {isVolumeTracing ? (
@@ -894,9 +932,21 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
   hideAddVolumeLayerModal = () => {
     this.setState({
       isAddVolumeLayerModalVisible: false,
+      segmentationLayerWasPreselected: false,
+      preselectedSegmentationLayerIndex: null,
     });
   };
 
+  handleConvertToHybrid = async () => {
+    await Model.ensureSavedState();
+    const maybeSegmentationLayer = getVisibleSegmentationLayer(Store.getState());
+    await convertToHybridTracing(
+      this.props.tracing.annotationId,
+      maybeSegmentationLayer != null ? maybeSegmentationLayer.name : null,
+    );
+    location.reload();
+  };
+
   render() {
     const { layers } = this.props.datasetConfiguration;
 
@@ -914,6 +964,11 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
       (el) => !el.isColorLayer,
     ).map((el) => this.getLayerSettings(el.layerName, el.layer, el.isColorLayer));
 
+    const state = Store.getState();
+    const canBeMadeHybrid =
+      this.props.tracing.skeleton === null &&
+      this.props.tracing.annotationType === APIAnnotationTypeEnum.Explorational &&
+      state.task === null;
     return (
       <div className="tracing-settings-menu">
         {layerSettings}
@@ -924,14 +979,34 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
           <>
             <Divider />
             <Row justify="center" align="middle">
-              <Button onClick={this.showAddVolumeLayerModal}>
+              <Button
+                onClick={this.showAddVolumeLayerModal}
+                style={{
+                  width: 235,
+                }}
+              >
                 <PlusOutlined />
                 Add Volume Annotation Layer
               </Button>
             </Row>
           </>
         ) : null}
 
+        {this.props.tracing.restrictions.allowUpdate && canBeMadeHybrid ? (
+          <Row justify="center" align="middle">
+            <Button
+              onClick={this.handleConvertToHybrid}
+              style={{
+                width: 235,
+                marginTop: 10,
+              }}
+            >
+              <PlusOutlined />
+              Add Skeleton Annotation Layer
+            </Button>
+          </Row>
+        ) : null}
+
         {this.state.volumeTracingToDownsample != null ? (
           <DownsampleVolumeModal
             hideDownsampleVolumeModal={this.hideDownsampleVolumeModal}
@@ -952,6 +1027,8 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
             dataset={this.props.dataset}
             onCancel={this.hideAddVolumeLayerModal}
             tracing={this.props.tracing}
+            preselectedLayerIndex={this.state.preselectedSegmentationLayerIndex}
+            showLayerSelectionDisabled={this.state.segmentationLayerWasPreselected}
           />
         ) : null}
       </div>

frontend/javascripts/oxalis/view/left-border-tabs/modals/add_volume_layer_modal.tsx

@@ -84,14 +84,18 @@ export default function AddVolumeLayerModal({
   dataset,
   onCancel,
   tracing,
+  preselectedLayerIndex,
+  showLayerSelectionDisabled,
 }: {
   dataset: APIDataset;
   onCancel: () => void;
   tracing: Tracing;
+  preselectedLayerIndex: number | null | undefined;
+  showLayerSelectionDisabled: boolean | null | undefined;
 }) {
   const [selectedSegmentationLayerIndex, setSelectedSegmentationLayerIndex] = useState<
     number | null | undefined
-  >(null);
+  >(preselectedLayerIndex);
   const allReadableLayerNames = useMemo(
     () => getAllReadableLayerNames(dataset, tracing),
     [dataset, tracing],
@@ -190,6 +194,9 @@ export default function AddVolumeLayerModal({
           segmentationLayers={availableSegmentationLayers}
           selectedSegmentationLayerIndex={selectedSegmentationLayerIndex}
           setSelectedSegmentationLayerIndex={setSelectedSegmentationLayerIndex}
+          showLayerSelectionDisabled={
+            showLayerSelectionDisabled != null ? showLayerSelectionDisabled : false
+          }
         />
       ) : null}
       <RestrictResolutionSlider

frontend/javascripts/oxalis/view/right-border-tabs/dataset_info_tab_view.tsx

@@ -1,33 +1,24 @@
 import type { Dispatch } from "redux";
 import { Tooltip, Button, Dropdown, Menu } from "antd";
-import { SettingOutlined, InfoCircleOutlined, StarOutlined } from "@ant-design/icons";
+import { SettingOutlined, StarOutlined } from "@ant-design/icons";
 import { connect } from "react-redux";
 // @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module 'reac... Remove this comment to see the full error message
 import Markdown from "react-remarkable";
 import React from "react";
 import { Link } from "react-router-dom";
 import type { APIDataset, APIUser } from "types/api_flow_types";
-import { APIAnnotationTypeEnum } from "types/api_flow_types";
 import type { Vector3 } from "oxalis/constants";
 import { ControlModeEnum } from "oxalis/constants";
-import { convertToHybridTracing } from "admin/admin_rest_api";
 import { formatScale } from "libs/format_utils";
 import { getBaseVoxel } from "oxalis/model/scaleinfo";
-import {
-  getDatasetExtentAsString,
-  getResolutions,
-  getVisibleSegmentationLayer,
-} from "oxalis/model/accessors/dataset_accessor";
+import { getDatasetExtentAsString, getResolutions } from "oxalis/model/accessors/dataset_accessor";
 import { getCurrentResolution } from "oxalis/model/accessors/flycam_accessor";
 import { getStats } from "oxalis/model/accessors/skeletontracing_accessor";
-import { location } from "libs/window";
 import {
   setAnnotationNameAction,
   setAnnotationDescriptionAction,
 } from "oxalis/model/actions/annotation_actions";
-import ButtonComponent from "oxalis/view/components/button_component";
 import EditableTextLabel from "oxalis/view/components/editable_text_label";
-import Model from "oxalis/model";
 import features from "features";
 import type { OxalisState, Task, Tracing } from "oxalis/store";
 import Store from "oxalis/store";
@@ -476,55 +467,6 @@ class DatasetInfoTabView extends React.PureComponent<Props, State> {
     );
   }
 
-  handleConvertToHybrid = async () => {
-    await Model.ensureSavedState();
-    const maybeSegmentationLayer = getVisibleSegmentationLayer(Store.getState());
-    await convertToHybridTracing(
-      this.props.tracing.annotationId,
-      maybeSegmentationLayer != null ? maybeSegmentationLayer.name : null,
-    );
-    location.reload();
-  };
-
-  getTracingType(isDatasetViewMode: boolean) {
-    if (isDatasetViewMode) return null;
-    const isSkeleton = this.props.tracing.skeleton != null;
-    const isVolume = this.props.tracing.volumes.length > 0;
-    const isHybrid = isSkeleton && isVolume;
-    const { allowUpdate } = this.props.tracing.restrictions;
-    const isExplorational =
-      this.props.tracing.annotationType === APIAnnotationTypeEnum.Explorational;
-
-    if (isHybrid) {
-      return (
-        <p>
-          Annotation Type:{" "}
-          <Tooltip title="Skeleton and Volume">
-            Hybrid <InfoCircleOutlined />
-          </Tooltip>
-        </p>
-      );
-    } else {
-      return (
-        <p>
-          Annotation Type: {isVolume ? "Volume" : "Skeleton"}
-          {allowUpdate && isExplorational ? (
-            <ButtonComponent
-              style={{
-                marginLeft: 10,
-              }}
-              size="small"
-              onClick={this.handleConvertToHybrid}
-              title="Skeleton and Volume"
-            >
-              Convert to Hybrid
-            </ButtonComponent>
-          ) : null}
-        </p>
-      );
-    }
-  }
-
   maybePrintOwner() {
     const { activeUser } = this.props;
     const { owner } = this.props.tracing;
@@ -614,7 +556,6 @@ class DatasetInfoTabView extends React.PureComponent<Props, State> {
       <div className="flex-overflow padded-tab-content">
         <div className="info-tab-block">
           {this.getTracingName(isDatasetViewMode)}
-          {this.getTracingType(isDatasetViewMode)}
           {this.getDatasetName(isDatasetViewMode)}
           {this.maybePrintOwner()}
         </div>