Add (minimal) UI for auto brush and allow it for white-listed datasets

CHANGELOG.md

@@ -11,7 +11,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md).
 
 ### Added
 - BossDB datasets can now be added to webKnossos using the webknossos-connect service. [#4036](https://github.com/scalableminds/webknossos/pull/4036)
-- 
+- Added an auto-brush feature for selected datasets. [#4053](https://github.com/scalableminds/webknossos/pull/4053)
 
 ### Changed
 - The NML parser now rounds floating point values in node coordinates. [#4045](https://github.com/scalableminds/webknossos/pull/4045)

conf/application.conf

@@ -93,6 +93,7 @@ features {
   # if it is false, / will be the login page, if not logged in, and the dashboard otherwise
   enableFrontpage = false
   isDemoInstance = false
+  autoBrushReadyDatasets = []
 }
 
 # Actor settings

frontend/javascripts/admin/api_flow_types.js

@@ -496,6 +496,7 @@ export type APIFeatureToggles = {
   +hideNavbarLogin: boolean,
   +addMissingDatasetButtonEnabled: boolean,
   +enableFrontpage: boolean,
+  +autoBrushReadyDatasets: Array<string>,
   +isDemoInstance: boolean,
 };
 

frontend/javascripts/libs/toast.js

@@ -90,7 +90,7 @@ const Toast = {
     notification[type](toastConfig);
   },
 
-  info(message: string, config: ToastConfig = {}): void {
+  info(message: string | React$Element<any>, config: ToastConfig = {}): void {
     return this.message("info", message, config);
   },
 

frontend/javascripts/messages.js

@@ -36,6 +36,7 @@ export const settings = {
     but it will take more time until the best quality is shown).`,
   mergerMode: "Enable Merger Mode",
   gpuMemoryFactor: "Quality",
+  autoBrush: "Automatic Brush (Beta)",
 };
 
 export default {

frontend/javascripts/oxalis/controller/combinations/volumetracing_plane_controller.js

@@ -39,6 +39,8 @@ import * as Utils from "libs/utils";
 
 // TODO: Build proper UI for this
 window.isAutomaticBrushEnabled = false;
+const isAutomaticBrushEnabled = () =>
+  window.isAutomaticBrushEnabled || Store.getState().temporaryConfiguration.isAutoBrushEnabled;
 
 // eslint-disable-next-line no-unused-vars
 const simulateTracing = async (): Promise<void> => {
@@ -95,7 +97,7 @@ export function getPlaneMouseControls(_planeId: OrthoView): * {
 
       if (!event.shiftKey && (tool === VolumeToolEnum.TRACE || tool === VolumeToolEnum.BRUSH)) {
         if (event.ctrlKey) {
-          if (window.isAutomaticBrushEnabled) {
+          if (isAutomaticBrushEnabled()) {
             return;
           }
           Store.dispatch(setContourTracingMode(ContourModeEnum.DRAW));
@@ -169,7 +171,7 @@ export function getPlaneMouseControls(_planeId: OrthoView): * {
           Store.dispatch(setActiveCellAction(cellId));
         }
       } else if (event.ctrlKey) {
-        if (window.isAutomaticBrushEnabled) {
+        if (isAutomaticBrushEnabled()) {
           Store.dispatch(inferSegmentationInViewportAction(calculateGlobalPos(pos)));
         }
       }

frontend/javascripts/oxalis/default_state.js

@@ -87,6 +87,7 @@ const defaultState: OxalisState = {
       mappingSize: 0,
     },
     isMergerModeEnabled: false,
+    isAutoBrushEnabled: false,
     gpuSetup: {
       smallestCommonBucketCapacity:
         Constants.GPU_FACTOR_MULTIPLIER * Constants.DEFAULT_GPU_MEMORY_FACTOR,

frontend/javascripts/oxalis/model/sagas/automatic_brush_saga.js

@@ -1,7 +1,7 @@
 // @flow
 import * as tf from "@tensorflow/tfjs";
 import memoizeOne from "memoize-one";
-
+import React from "react";
 import { type Saga, call, fork, select, take, _cancel } from "oxalis/model/sagas/effect-generators";
 import floodfill from "libs/floodfill";
 import { FlycamActions } from "oxalis/model/actions/flycam_actions";
@@ -18,6 +18,7 @@ import Model from "oxalis/model";
 import Toast from "libs/toast";
 import { enforceVolumeTracing } from "oxalis/model/accessors/volumetracing_accessor";
 import Dimensions from "oxalis/model/dimensions";
+import Shortcut from "libs/shortcut_component";
 import api from "oxalis/api/internal_api";
 import {
   getPosition,
@@ -138,9 +139,21 @@ export default function* inferSegmentInViewport(
     sticky: true,
     key: "automatic-brush",
   };
-  const toastDescription = "Automatic brush is active. Close the toast to stop using it.";
+  const getEscapableToast = text => (
+    <div>
+      {text}
+      <Shortcut
+        keys="esc"
+        onTrigger={() => {
+          aborted = true;
+          Toast.close(toastConfig.key);
+        }}
+      />
+    </div>
+  );
 
-  Toast.info(toastDescription, toastConfig);
+  const brushIsActiveText = "Automatic brush is active. Close the toast to stop using it.";
+  Toast.info(getEscapableToast(brushIsActiveText), toastConfig);
 
   const colorLayers = yield* call([Model, Model.getColorLayers]);
   const colorLayerName = colorLayers[0].name;
@@ -209,7 +222,9 @@ export default function* inferSegmentInViewport(
       console.time("predict");
       const thirdDimension = Dimensions.thirdDimensionForPlane(activeViewport);
       Toast.info(
-        `${toastDescription}\nLabeling ${["x", "y", "z"][thirdDimension]}=${z}.`,
+        getEscapableToast(
+          `${brushIsActiveText}\nLabeling ${["x", "y", "z"][thirdDimension]}=${z}.`,
+        ),
         toastConfig,
       );
       predictions.set(

frontend/javascripts/oxalis/store.js

@@ -286,6 +286,7 @@ export type TemporaryConfiguration = {
     +mappingSize: number,
   },
   +isMergerModeEnabled: boolean,
+  +isAutoBrushEnabled: boolean,
   +gpuSetup: {
     // These rendering-related variables are set up
     // during startup and cannot change (with the current

frontend/javascripts/oxalis/view/settings/user_settings_view.js

@@ -3,6 +3,7 @@
  * @flow
  */
 
+import features from "features";
 import { Collapse } from "antd";
 import type { Dispatch } from "redux";
 import { connect } from "react-redux";
@@ -37,14 +38,18 @@ import {
 import { setUserBoundingBoxAction } from "oxalis/model/actions/annotation_actions";
 import { setZoomStepAction } from "oxalis/model/actions/flycam_actions";
 import { settings as settingsLabels } from "messages";
-import { updateUserSettingAction } from "oxalis/model/actions/settings_actions";
+import {
+  updateTemporarySettingAction,
+  updateUserSettingAction,
+} from "oxalis/model/actions/settings_actions";
 import { userSettings } from "libs/user_settings.schema";
 import Constants, {
   type ControlMode,
   ControlModeEnum,
   type ViewMode,
   type Vector6,
 } from "oxalis/constants";
+import Toast from "libs/toast";
 import * as Utils from "libs/utils";
 
 import MergerModeModalView from "./merger_mode_modal_view";
@@ -64,7 +69,9 @@ type UserSettingsViewProps = {
   onChangeRadius: (value: number) => void,
   onChangeZoomStep: (value: number) => void,
   onChangeEnableMergerMode: (active: boolean) => void,
+  onChangeEnableAutoBrush: (active: boolean) => void,
   isMergerModeEnabled: boolean,
+  isAutoBrushEnabled: boolean,
   viewMode: ViewMode,
   controlMode: ControlMode,
   dataset: APIDataset,
@@ -109,6 +116,15 @@ class UserSettingsView extends PureComponent<UserSettingsViewProps, State> {
     }
   };
 
+  handleAutoBrushChange = async (active: boolean) => {
+    this.props.onChangeEnableAutoBrush(active);
+    if (active) {
+      Toast.info(
+        "You enabled the experimental automatic brush feature. Activate the brush tool and use CTRL+Click to use it.",
+      );
+    }
+  };
+
   getViewportOptions = () => {
     switch (this.props.viewMode) {
       case Constants.MODE_PLANE_TRACING:
@@ -321,6 +337,7 @@ class UserSettingsView extends PureComponent<UserSettingsViewProps, State> {
             value={this.props.userConfiguration.brushSize}
             onChange={this.onChangeUser.brushSize}
           />
+          {this.maybeGetAutoBrushUi()}
           <NumberInputSetting
             label="Active Cell ID"
             value={volumeTracing.activeCellId}
@@ -332,6 +349,26 @@ class UserSettingsView extends PureComponent<UserSettingsViewProps, State> {
     return panels;
   };
 
+  maybeGetAutoBrushUi() {
+    const { autoBrushReadyDatasets } = features();
+    if (
+      autoBrushReadyDatasets == null ||
+      !autoBrushReadyDatasets.includes(this.props.dataset.name)
+    ) {
+      return null;
+    }
+
+    return (
+      <SwitchSetting
+        label={settingsLabels.autoBrush}
+        value={this.props.isAutoBrushEnabled}
+        onChange={value => {
+          this.handleAutoBrushChange(value);
+        }}
+      />
+    );
+  }
+
   render() {
     const { isMergerModeModalVisible, isMergerModeModalClosable } = this.state;
     const moveValueSetting = Constants.MODES_ARBITRARY.includes(this.props.viewMode) ? (
@@ -409,6 +446,7 @@ const mapStateToProps = (state: OxalisState) => ({
   viewMode: state.temporaryConfiguration.viewMode,
   controlMode: state.temporaryConfiguration.controlMode,
   isMergerModeEnabled: state.temporaryConfiguration.isMergerModeEnabled,
+  isAutoBrushEnabled: state.temporaryConfiguration.isAutoBrushEnabled,
   dataset: state.dataset,
 });
 
@@ -437,6 +475,9 @@ const mapDispatchToProps = (dispatch: Dispatch<*>) => ({
   onChangeEnableMergerMode(active: boolean) {
     dispatch(setMergerModeEnabledAction(active));
   },
+  onChangeEnableAutoBrush(active: boolean) {
+    dispatch(updateTemporarySettingAction("isAutoBrushEnabled", active));
+  },
 });
 
 export default connect<UserSettingsViewProps, {||}, _, _, _, _>(

frontend/javascripts/test/snapshots/public/test-bundle/test/backend-snapshot-tests/misc.e2e.js.md

@@ -66,6 +66,7 @@ Generated by [AVA](https://ava.li).
       addForeignDataset: false,
       addMissingDatasetButtonEnabled: false,
       allowOrganizationCreation: false,
+      autoBrushReadyDatasets: [],
       defaultOrganization: '',
       discussionBoard: 'https://support.webknossos.org',
       discussionBoardRequiresAdmin: false,