Avoid proofreading actions while the last one is not finished

CHANGELOG.unreleased.md

@@ -20,6 +20,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 
 ### Fixed
 - Fixed that zooming out for datasets with very large scale was not possible until the coarsest level. [#6304](https://github.com/scalableminds/webknossos/pull/6304)
+- Fixed an error if multiple proofreading actions were performed in rapid succession. If webKnossos is busy, inputs to the viewports are disabled from now on. [#6325](https://github.com/scalableminds/webknossos/pull/6325)
 
 ### Removed
 

frontend/javascripts/oxalis/model/sagas/proofread_saga.ts

@@ -23,7 +23,6 @@ import {
 import {
   pushSaveQueueTransaction,
   setVersionNumberAction,
-  undoAction,
 } from "oxalis/model/actions/save_actions";
 import { splitAgglomerate, mergeAgglomerate } from "oxalis/model/sagas/update_actions";
 import Model from "oxalis/model";
@@ -47,6 +46,7 @@ import { loadAgglomerateSkeletonWithId } from "oxalis/model/sagas/skeletontracin
 import { getConstructorForElementClass } from "oxalis/model/bucket_data_handling/bucket";
 import { Tree } from "oxalis/store";
 import { APISegmentationLayer } from "types/api_flow_types";
+import { setBusyBlockingInfoAction } from "oxalis/model/actions/ui_actions";
 
 export default function* proofreadMapping(): Saga<any> {
   yield* take("INITIALIZE_SKELETONTRACING");
@@ -279,13 +279,20 @@ function* splitOrMergeAgglomerate(action: MergeTreesAction | DeleteEdgeAction) {
   const isHdf5MappingEnabled = yield* call(ensureHdf5MappingIsEnabled, layerName);
   if (!isHdf5MappingEnabled) return;
 
+  const busyBlockingInfo = yield* select((state) => state.uiInformation.busyBlockingInfo);
+  if (busyBlockingInfo.isBusy) {
+    console.warn(`Ignoring proofreading action (reason: ${busyBlockingInfo.reason || "null"})`);
+    return;
+  }
+
+  yield* put(setBusyBlockingInfoAction(true, "Proofreading action"));
+
   if (!volumeTracing.mappingIsEditable) {
     try {
       yield* call(createEditableMapping);
     } catch (e) {
       console.error(e);
-      // Undo the last splitting/merging action since the proofreading action did not succeed
-      yield* put(undoAction());
+      yield* put(setBusyBlockingInfoAction(false));
       return;
     }
   }
@@ -305,6 +312,7 @@ function* splitOrMergeAgglomerate(action: MergeTreesAction | DeleteEdgeAction) {
   const targetTree = findTreeByNodeId(trees, targetNodeId).getOrElse(null);
 
   if (sourceTree == null || targetTree == null) {
+    yield* put(setBusyBlockingInfoAction(false));
     return;
   }
 
@@ -330,6 +338,7 @@ function* splitOrMergeAgglomerate(action: MergeTreesAction | DeleteEdgeAction) {
   if (action.type === "MERGE_TREES") {
     if (sourceNodeAgglomerateId === targetNodeAgglomerateId) {
       Toast.error("Segments that should be merged need to be in different agglomerates.");
+      yield* put(setBusyBlockingInfoAction(false));
       return;
     }
     items.push(
@@ -344,6 +353,7 @@ function* splitOrMergeAgglomerate(action: MergeTreesAction | DeleteEdgeAction) {
   } else if (action.type === "DELETE_EDGE") {
     if (sourceNodeAgglomerateId !== targetNodeAgglomerateId) {
       Toast.error("Segments that should be split need to be in the same agglomerate.");
+      yield* put(setBusyBlockingInfoAction(false));
       return;
     }
     items.push(
@@ -356,7 +366,10 @@ function* splitOrMergeAgglomerate(action: MergeTreesAction | DeleteEdgeAction) {
     );
   }
 
-  if (items.length === 0) return;
+  if (items.length === 0) {
+    yield* put(setBusyBlockingInfoAction(false));
+    return;
+  }
 
   yield* put(pushSaveQueueTransaction(items, "mapping", volumeTracingId));
   yield* call([Model, Model.ensureSavedState]);
@@ -372,6 +385,7 @@ function* splitOrMergeAgglomerate(action: MergeTreesAction | DeleteEdgeAction) {
     volumeTracingWithEditableMapping == null ||
     volumeTracingWithEditableMapping.mappingName == null
   ) {
+    yield* put(setBusyBlockingInfoAction(false));
     return;
   }
 
@@ -412,6 +426,8 @@ function* splitOrMergeAgglomerate(action: MergeTreesAction | DeleteEdgeAction) {
     );
   }
 
+  yield* put(setBusyBlockingInfoAction(false));
+
   /* Remove old meshes and load updated meshes */
 
   if (proofreadUsingMeshes()) {

frontend/javascripts/oxalis/view/input_catcher.tsx

@@ -134,18 +134,23 @@ function InputCatcher({
   );
 
   return (
-    <div className="flexlayout-dont-overflow">
+    <div
+      className="flexlayout-dont-overflow"
+      onContextMenu={ignoreContextMenu}
+      style={{ cursor: busyBlockingInfo.isBusy ? "wait" : cursorForTool[adaptedTool] }}
+    >
       <div
         id={`inputcatcher_${viewportID}`}
         ref={(domElement) => {
           domElementRef.current = domElement;
         }}
-        onContextMenu={ignoreContextMenu}
         data-value={viewportID}
         className={`inputcatcher ${viewportID}`}
         style={{
           position: "relative",
-          cursor: busyBlockingInfo.isBusy ? "wait" : cursorForTool[adaptedTool],
+          // Disable inputs while wk is busy. However, keep the custom cursor and the ignoreContextMenu handler
+          // which is why those are defined at the outer element.
+          pointerEvents: busyBlockingInfo.isBusy ? "none" : "auto",
         }}
       >
         <ViewportStatusIndicator />

frontend/javascripts/oxalis/view/right-border-tabs/connectome_tab/synapse_tree.tsx

@@ -234,7 +234,7 @@ class SynapseTree extends React.Component<Props, State> {
           <Dropdown // Lazily create the dropdown menu and destroy it again, afterwards
             overlay={() => this.createSegmentDropdownMenu(data.id)}
             autoDestroy
-            placement="bottomCenter"
+            placement="bottom"
             visible={this.state.activeSegmentDropdownKey === key}
             onVisibleChange={(isVisible) =>
               this.handleSegmentDropdownMenuVisibility(key, isVisible)

frontend/javascripts/oxalis/view/right-border-tabs/segments_tab/segment_list_item.tsx

@@ -384,7 +384,7 @@ function _SegmentListItem({
         // does not work properly. See https://github.com/react-component/trigger/issues/106#issuecomment-948532990
         // @ts-expect-error ts-migrate(2322) FIXME: Type '{ children: Element; overlay: () => Element;... Remove this comment to see the full error message
         autoDestroy
-        placement="bottomCenter"
+        placement="bottom"
         visible={activeDropdownSegmentId === segment.id}
         onVisibleChange={(isVisible) => handleSegmentDropdownMenuVisibility(segment.id, isVisible)}
         trigger={["contextMenu"]}

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

@@ -393,7 +393,7 @@ class TreeHierarchyView extends React.PureComponent<Props, State> {
       <div>
         <Dropdown
           overlay={createMenu}
-          placement="bottomCenter" // The overlay is generated lazily. By default, this would make the overlay
+          placement="bottom" // The overlay is generated lazily. By default, this would make the overlay
           // re-render on each parent's render() after it was shown for the first time.
           // The reason for this is that it's not destroyed after closing.
           // Therefore, autoDestroy is passed.
@@ -533,7 +533,7 @@ class TreeHierarchyView extends React.PureComponent<Props, State> {
             // does not work properly. See https://github.com/react-component/trigger/issues/106#issuecomment-948532990
             // @ts-expect-error ts-migrate(2322) FIXME: Type '{ children: Element; overlay: () => Element;... Remove this comment to see the full error message
             autoDestroy
-            placement="bottomCenter"
+            placement="bottom"
             visible={this.state.activeTreeDropdownId === tree.treeId} // explicit visibility handling is required here otherwise the color picker component for "Change Tree color" is rendered/positioned incorrectly
             onVisibleChange={(isVisible) =>
               this.handleTreeDropdownMenuVisibility(tree.treeId, isVisible)