Allow selective segment visibility regardless of proofreading tool

frontend/javascripts/libs/input.ts

@@ -331,7 +331,7 @@ export class InputKeyboard {
 }
 
 // The mouse module.
-// Events: over, out, leftClick, rightClick, leftDownMove
+// Events: over, out, {left,right}Click, {left,right}DownMove, {left,right}DoubleClick
 class InputMouseButton {
   mouse: InputMouse;
   name: MouseButtonString;
@@ -384,6 +384,24 @@ class InputMouseButton {
     }
   }
 
+  handleDoubleClick(event: MouseEvent, triggeredByTouch: boolean): void {
+    // event.which is 0 on touch devices as there are no mouse buttons, interpret that as the left mouse button
+    // Safari doesn't support evt.buttons, but only evt.which is non-standardized
+    const eventWhich = event.which !== 0 ? event.which : 1;
+
+    if (eventWhich === this.which) {
+      if (this.moveDelta <= MOUSE_MOVE_DELTA_THRESHOLD) {
+        this.mouse.emitter.emit(
+          `${this.name}DoubleClick`,
+          this.mouse.lastPosition,
+          this.id,
+          event,
+          triggeredByTouch,
+        );
+      }
+    }
+  }
+
   handleMouseMove(event: MouseEvent, delta: Point2): void {
     if (this.down) {
       this.moveDelta += Math.abs(delta.x) + Math.abs(delta.y);
@@ -437,6 +455,7 @@ export class InputMouse {
     document.addEventListener("mousemove", this.mouseMove);
     document.addEventListener("mouseup", this.mouseUp);
     document.addEventListener("touchend", this.touchEnd);
+    document.addEventListener("dblclick", this.doubleClick);
 
     this.delegatedEvents = {
       ...Utils.addEventListenerWithDelegation(
@@ -489,6 +508,7 @@ export class InputMouse {
     document.removeEventListener("mousemove", this.mouseMove);
     document.removeEventListener("mouseup", this.mouseUp);
     document.removeEventListener("touchend", this.touchEnd);
+    document.removeEventListener("dblclick", this.doubleClick);
 
     for (const [eventName, eventHandler] of Object.entries(this.delegatedEvents)) {
       document.removeEventListener(eventName, eventHandler);
@@ -542,6 +562,12 @@ export class InputMouse {
     }
   };
 
+  doubleClick = (event: MouseEvent): void => {
+    if (this.isHit(event)) {
+      this.leftMouseButton.handleDoubleClick(event, false);
+    }
+  };
+
   touchEnd = (): void => {
     // The order of events during a click on a touch enabled device is:
     // touch events -> mouse events -> click

frontend/javascripts/oxalis/controller/combinations/tool_controls.ts

@@ -137,6 +137,20 @@ export class MoveTool {
         }
         handleClickSegment(pos);
       },
+      leftDoubleClick: (pos: Point2, _plane: OrthoView, _event: MouseEvent, _isTouch: boolean) => {
+        const { uiInformation } = Store.getState();
+        const isMoveToolActive = uiInformation.activeTool === AnnotationToolEnum.MOVE;
+
+        if (isMoveToolActive) {
+          // We want to select the clicked segment ID only in the MOVE tool. This method is
+          // implemented within the Move tool, but other tool controls will fall back to this one
+          // if they didn't define the double click hook. However, for most other tools, this behavior
+          // would be suboptimal, because when doing a double click, the first click will also be registered
+          // as a simple left click. For example, doing a double click with the brush tool would brush something
+          // and then immediately select the id again which is weird.
+          VolumeHandlers.handlePickCell(pos);
+        }
+      },
       middleClick: (pos: Point2, _plane: OrthoView, event: MouseEvent) => {
         if (event.shiftKey) {
           handleAgglomerateSkeletonAtClick(pos);

frontend/javascripts/oxalis/geometries/materials/plane_material_factory.ts

@@ -146,6 +146,9 @@ class PlaneMaterialFactory {
       selectiveVisibilityInProofreading: {
         value: true,
       },
+      selectiveSegmentVisibility: {
+        value: false,
+      },
       is3DViewBeingRendered: {
         value: true,
       },
@@ -562,6 +565,17 @@ class PlaneMaterialFactory {
         true,
       ),
     );
+
+    this.storePropertyUnsubscribers.push(
+      listenToStoreProperty(
+        (storeState) => storeState.datasetConfiguration.selectiveSegmentVisibility,
+        (selectiveSegmentVisibility) => {
+          this.uniforms.selectiveSegmentVisibility.value = selectiveSegmentVisibility;
+        },
+        true,
+      ),
+    );
+
     this.storePropertyUnsubscribers.push(
       listenToStoreProperty(
         (storeState) => getMagInfoByLayer(storeState.dataset),

frontend/javascripts/oxalis/shaders/main_data_shaders.glsl.ts

@@ -6,6 +6,7 @@ import {
   convertCellIdToRGB,
   getBrushOverlay,
   getCrossHairOverlay,
+  getSegmentationAlphaIncrement,
   getSegmentId,
 } from "./segmentation.glsl";
 import { getMaybeFilteredColorOrFallback } from "./filtering.glsl";
@@ -110,6 +111,7 @@ uniform highp uint LOOKUP_CUCKOO_TWIDTH;
 
 uniform float sphericalCapRadius;
 uniform bool selectiveVisibilityInProofreading;
+uniform bool selectiveSegmentVisibility;
 uniform float viewMode;
 uniform float alpha;
 uniform bool renderBucketIndices;
@@ -178,6 +180,7 @@ ${compileShader(
   hasSegmentation ? getBrushOverlay : null,
   hasSegmentation ? getSegmentId : null,
   hasSegmentation ? getCrossHairOverlay : null,
+  hasSegmentation ? getSegmentationAlphaIncrement : null,
   almostEq,
 )}
 
@@ -291,25 +294,13 @@ void main() {
         && hoveredUnmappedSegmentIdHigh == <%= segmentationName %>_unmapped_id_high;
       bool isActiveCell = activeCellIdLow == <%= segmentationName %>_id_low
          && activeCellIdHigh == <%= segmentationName %>_id_high;
-      // Highlight cell only if it's hovered or active during proofreading
-      // and if segmentation opacity is not zero
-      float alphaIncrement = isProofreading
-        ? (isActiveCell
-            ? (isHoveredUnmappedSegment
-              ? 0.4     // Highlight the hovered super-voxel of the active segment
-              : (isHoveredSegment
-                ? 0.15  // Highlight the not-hovered super-voxels of the hovered segment
-                : 0.0
-              )
-          )
-            : (isHoveredSegment
-              ? 0.2
-              // We are in proofreading mode, but the current voxel neither belongs
-              // to the active segment nor is it hovered. When selective visibility
-              // is enabled, lower the opacity.
-              : (selectiveVisibilityInProofreading ? -<%= segmentationName %>_alpha : 0.0)
-          )
-        ) : (isHoveredSegment ? 0.2 : 0.0);
+      float alphaIncrement = getSegmentationAlphaIncrement(
+        <%= segmentationName %>_alpha,
+        isHoveredSegment,
+        isHoveredUnmappedSegment,
+        isActiveCell
+      );
+
       gl_FragColor = vec4(mix(
         data_color.rgb,
         convertCellIdToRGB(<%= segmentationName %>_id_high, <%= segmentationName %>_id_low),

frontend/javascripts/oxalis/shaders/segmentation.glsl.ts

@@ -351,3 +351,44 @@ export const getSegmentId: ShaderModule = {
 <% }) %>
   `,
 };
+
+export const getSegmentationAlphaIncrement: ShaderModule = {
+  requirements: [],
+  code: `
+    float getSegmentationAlphaIncrement(float alpha, bool isHoveredSegment, bool isHoveredUnmappedSegment, bool isActiveCell) {
+      // Highlight segment only if
+      // - it's hovered or
+      // - active during proofreading
+      // Also, make segments invisible if selective visibility is turned on (unless the segment
+      // is active or hovered).
+
+      if (isProofreading) {
+        if (isActiveCell) {
+          return (isHoveredUnmappedSegment
+            ? 0.4     // Highlight the hovered super-voxel of the active segment
+            : (isHoveredSegment
+              ? 0.15  // Highlight the not-hovered super-voxels of the hovered segment
+              : 0.0
+            )
+          );
+        } else {
+          return (isHoveredSegment
+            ? 0.2
+            // We are in proofreading mode, but the current voxel neither belongs
+            // to the active segment nor is it hovered. When selective visibility
+            // is enabled, lower the opacity.
+            : (selectiveVisibilityInProofreading ? -alpha : 0.0)
+          );
+        }
+      }
+
+      if (isHoveredSegment) {
+        return 0.2;
+      } else if (selectiveSegmentVisibility) {
+        return isActiveCell ? 0.15 : -alpha;
+      } else {
+        return 0.;
+      }
+    }
+  `,
+};

frontend/javascripts/oxalis/store.ts

@@ -330,6 +330,7 @@ export type DatasetConfiguration = {
   readonly renderMissingDataBlack: boolean;
   readonly loadingStrategy: LoadingStrategy;
   readonly segmentationPatternOpacity: number;
+  readonly selectiveSegmentVisibility: boolean;
   readonly blendMode: BLEND_MODES;
   // If nativelyRenderedLayerName is not-null, the layer with
   // that name (or id) should be rendered without any transforms.

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

@@ -86,7 +86,7 @@ import {
   reloadHistogramAction,
 } from "oxalis/model/actions/settings_actions";
 import { userSettings } from "types/schemas/user_settings.schema";
-import type { Vector3, ControlMode } from "oxalis/constants";
+import type { Vector3 } from "oxalis/constants";
 import Constants, { ControlModeEnum, MappingStatusEnum } from "oxalis/constants";
 import EditableTextLabel from "oxalis/view/components/editable_text_label";
 import LinkButton from "components/link_button";
@@ -97,9 +97,6 @@ import type {
   DatasetLayerConfiguration,
   OxalisState,
   UserConfiguration,
-  HistogramDataForAllLayers,
-  Tracing,
-  Task,
 } from "oxalis/store";
 import Store from "oxalis/store";
 import Toast from "libs/toast";
@@ -132,33 +129,8 @@ import {
 } from "types/schemas/dataset_view_configuration.schema";
 import defaultState from "oxalis/default_state";
 
-type DatasetSettingsProps = {
-  userConfiguration: UserConfiguration;
-  datasetConfiguration: DatasetConfiguration;
-  dataset: APIDataset;
-  onChange: (propertyName: keyof DatasetConfiguration, value: any) => void;
-  onChangeLayer: (
-    layerName: string,
-    propertyName: keyof DatasetLayerConfiguration,
-    value: any,
-  ) => void;
-  onClipHistogram: (layerName: string, shouldAdjustClipRange: boolean) => Promise<void>;
-  histogramData: HistogramDataForAllLayers;
-  onChangeRadius: (value: number) => void;
-  onChangeShowSkeletons: (arg0: boolean) => void;
-  onSetPosition: (arg0: Vector3) => void;
-  onZoomToMag: (layerName: string, arg0: Vector3) => number;
-  onChangeUser: (key: keyof UserConfiguration, value: any) => void;
-  reloadHistogram: (layerName: string) => void;
-  tracing: Tracing;
-  task: Task | null | undefined;
-  onEditAnnotationLayer: (tracingId: string, layerProperties: EditableLayerProperties) => void;
-  controlMode: ControlMode;
-  isArbitraryMode: boolean;
-  isAdminOrDatasetManager: boolean;
-  isAdminOrManager: boolean;
-  isSuperUser: boolean;
-};
+type DatasetSettingsProps = ReturnType<typeof mapStateToProps> &
+  ReturnType<typeof mapDispatchToProps>;
 
 type State = {
   // If this is set to not-null, the downsampling modal
@@ -927,9 +899,37 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
         defaultValue={defaultDatasetViewConfigurationWithoutNull.segmentationPatternOpacity}
       />
     );
+
+    const isProofreadingMode = this.props.activeTool === "PROOFREAD";
+    const isSelectiveVisibilityDisabled = isProofreadingMode;
+
+    const selectiveVisibilitySwitch = (
+      <FastTooltip
+        title={
+          isSelectiveVisibilityDisabled
+            ? "This behavior is overriden by the 'selective segment visibility' button in the toolbar, because the proofreading tool is active."
+            : "When enabled, only hovered or active segments will be shown."
+        }
+      >
+        <div
+          style={{
+            marginBottom: 6,
+          }}
+        >
+          <SwitchSetting
+            onChange={_.partial(this.props.onChange, "selectiveSegmentVisibility")}
+            value={this.props.datasetConfiguration.selectiveSegmentVisibility}
+            label="Selective Visibility"
+            disabled={isSelectiveVisibilityDisabled}
+          />
+        </div>
+      </FastTooltip>
+    );
+
     return (
       <div>
         {segmentationOpacitySetting}
+        {selectiveVisibilitySwitch}
         <MappingSettingsView layerName={layerName} />
       </div>
     );
@@ -1338,6 +1338,7 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
         "loadingStrategy",
         "segmentationPatternOpacity",
         "blendMode",
+        "selectiveSegmentVisibility",
       ] as Array<keyof RecommendedConfiguration>
     ).map((key) => ({
       name: settings[key] as string,
@@ -1585,6 +1586,7 @@ const mapStateToProps = (state: OxalisState) => ({
     state.activeUser != null ? Utils.isUserAdminOrDatasetManager(state.activeUser) : false,
   isAdminOrManager: state.activeUser != null ? Utils.isUserAdminOrManager(state.activeUser) : false,
   isSuperUser: state.activeUser?.isSuperUser || false,
+  activeTool: state.uiInformation.activeTool,
 });
 
 const mapDispatchToProps = (dispatch: Dispatch<any>) => ({

frontend/javascripts/types/schemas/dataset_view_configuration.schema.ts

@@ -89,6 +89,7 @@ export const defaultDatasetViewConfigurationWithoutNull: DatasetConfiguration =
   blendMode: BLEND_MODES.Additive,
   colorLayerOrder: [],
   nativelyRenderedLayerName: null,
+  selectiveSegmentVisibility: false,
 };
 export const defaultDatasetViewConfiguration = {
   ...defaultDatasetViewConfigurationWithoutNull,