Allow selective segment visibility regardless of proofreading tool (#8281)

* allow selective segment visibility regardless of proofreading tool

* remove unused imports

* allow double click in move tool to activate a segment id

* update changelog

* update docs

* clean up dblclick code that is only supported for the left mouse button anyway

Author: philippotto

CHANGELOG.unreleased.md

@@ -13,6 +13,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 ### Added
 - Added the total volume of a dataset to a tooltip in the dataset info tab. [#8229](https://github.com/scalableminds/webknossos/pull/8229)
 - Optimized performance of data loading with “fill value“ chunks. [#8271](https://github.com/scalableminds/webknossos/pull/8271)
+- Added the option for "Selective Segment Visibility" for segmentation layers. Select this option in the left sidebar to only show segments that are currently active or hovered. [#8281](https://github.com/scalableminds/webknossos/pull/8281)
 
 ### Changed
 - Renamed "resolution" to "magnification" in more places within the codebase, including local variables. [#8168](https://github.com/scalableminds/webknossos/pull/8168)

docs/ui/layers.md

@@ -31,6 +31,7 @@ In addition to the general layer properties mentioned above, `color` and `segmen
 
 - `Color`: Every `color` layer can be re-colored to make it easily identifiable. By default, all layers have a white overlay, showing the true, raw black & white data. Clicking on the square color indicator brings up your system's color palette to choose from. Note, there is an icon button for inverting all color values in this layer.
 - `Pattern Opacity`: Adjust the visibility of the texture/pattern on each segment. To make segments easier to distinguish and more unique, a pattern is applied to each in addition to its base color. 0% hides the pattern. 100% makes the pattern very prominent. Great for increasing the visual contrast between segments.
+- `Selective Visibility`: When activated, only segments are shown that are currently active or hovered.
 - `ID Mapping`: WEBKNOSSOS supports applying pre-computed agglomerations/groupings of segmentation IDs for a given segmentation layer. This is a very powerful feature to explore and compare different segmentation strategies for a given segmentation layer. Mappings need to be pre-computed and stored together with a dataset for WEBKNOSSOS to download and apply. [Read more about this here](../proofreading/segmentation_mappings.md).
 
 

frontend/javascripts/libs/input.ts

@@ -340,7 +340,7 @@ export class InputKeyboard {
 }
 
 // The mouse module.
-// Events: over, out, leftClick, rightClick, leftDownMove
+// Events: over, out, {left,right}Click, {left,right}DownMove, leftDoubleClick
 class InputMouseButton {
   mouse: InputMouse;
   name: MouseButtonString;
@@ -393,6 +393,19 @@ class InputMouseButton {
     }
   }
 
+  handleDoubleClick(event: MouseEvent, triggeredByTouch: boolean): void {
+    // DoubleClick is only supported for the left mouse button
+    if (this.name === "left" && this.moveDelta <= MOUSE_MOVE_DELTA_THRESHOLD) {
+      this.mouse.emitter.emit(
+        "leftDoubleClick",
+        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);
@@ -446,6 +459,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(
@@ -498,6 +512,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);
@@ -551,6 +566,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,