Encourage coarser mags when annotating a high number of voxels

docs/volume_annotation/import_export.md

@@ -16,4 +16,19 @@ After finishing the annotation of a volume layer with a fallback layer, the comb
 Icon to open the materialize volume annotation dialog
 ///
 
-This button opens up a dialog that starts a long-running job which will materialize the volume annotation.
+This button opens up a dialog that starts a long-running job which will materialize the volume annotation.
+
+## Restricting magnifications
+
+WEBKNOSSOS allows data annotation in different magnifications.
+Restricting the available magnifications can greatly improve the performance when annotating large structures, such as nuclei, since the volume data does not need to be stored in all quality levels. 
+How to read: Mag 1 is the most detailed, 4-4-2 is downsampled by factor 4 in x and y, and by factor 2 in z.
+When annotating large structures, consider restricting the available magnifications in this specific annotation or in this volume annotation layer.
+
+### Restricting magnifications for a whole annotation
+
+Go to the dataset dashboard. Click on the three dots next to `New Annotation` for the dataset you want to annotate. Use the slider to restrict the volume magnifications, e.g. by omitting the finest magnification, which is usually 1-1-1, or the two finest magnifications.
+
+### Restricting magnifications for volume annotation layers
+
+Within an existing annotation, go to the `Layers` tab on the left. Click `Add Volume Annotation Layer` at the bottom of the list of all layers in this annotation. Restrict the magnifications as explained above.

frontend/javascripts/viewer/constants.ts

@@ -333,6 +333,7 @@ const Constants = {
   MIN_NODE_ID: 1,
   // Maximum of how many buckets will be held in RAM (per layer)
   MAXIMUM_BUCKET_COUNT_PER_LAYER: 5000,
+  MAX_BUCKET_COUNT_PER_SAVE_SOFT_LIMIT: 400, //TODO_C 4k
   FLOOD_FILL_EXTENTS: {
     // In 2D mode, the third axis is set to 1 later in the code.
     _2D: (process.env.IS_TESTING ? [512, 512, 512] : [768, 768, 768]) as Vector3,

frontend/javascripts/viewer/model/actions/save_actions.ts

@@ -13,7 +13,7 @@ export type PushSaveQueueTransaction = {
   type: "PUSH_SAVE_QUEUE_TRANSACTION";
   items: UpdateAction[];
   transactionId: string;
-};
+}; // use saga to listen to these. measure how long this takes and whether it creates a lag todo_c
 type SaveNowAction = ReturnType<typeof saveNowAction>;
 export type ShiftSaveQueueAction = ReturnType<typeof shiftSaveQueueAction>;
 type DiscardSaveQueuesAction = ReturnType<typeof discardSaveQueuesAction>;

frontend/javascripts/viewer/model/bucket_data_handling/pushqueue.ts

@@ -155,7 +155,8 @@ class PushQueue {
         createCompressedUpdateBucketActions(batch),
       );
       Store.dispatch(pushSaveQueueTransaction(items));
-
+      // todo_c dispatch new action to count items including number. track the sum in sliding window of 120s
+      // todo_c research data structure for sliding window
       this.compressingBucketCount -= batch.length;
     } catch (error) {
       // See other usage of escalateErrorAction for a detailed explanation.

frontend/javascripts/viewer/model/sagas/saving/save_queue_draining.ts → frontend/javascripts/viewer/model/sagas/saving/save_queue_draining.tsx

@@ -9,10 +9,11 @@ import ErrorHandling from "libs/error_handling";
 import Toast from "libs/toast";
 import { sleep } from "libs/utils";
 import window, { alert, document, location } from "libs/window";
+import _ from "lodash";
 import memoizeOne from "memoize-one";
 import messages from "messages";
 import { call, delay, put, race, take } from "typed-redux-saga";
-import { ControlModeEnum } from "viewer/constants";
+import constants, { ControlModeEnum } from "viewer/constants";
 import { getMagInfo } from "viewer/model/accessors/dataset_accessor";
 import {
   setLastSaveTimestampAction,
@@ -36,6 +37,26 @@ import type { SaveQueueEntry } from "viewer/store";
 
 const ONE_YEAR_MS = 365 * 24 * 3600 * 1000;
 
+const warnAboutTooManyBuckets = _.once(() => {
+  const warningMessage =
+    "You are annotating a large area which puts a high load on the server. Consider creating an annotation or annotation layer with restricted volume magnifications.";
+  const linkToDocs =
+    "https://docs.webknossos.org/volume_annotation/import_export.html#restricting-magnifications";
+  Toast.warning(
+    <>
+      {warningMessage}
+      <br />
+      See the{" "}
+      <a href={linkToDocs} target="_blank" rel="noopener noreferrer">
+        docs
+      </a>
+      .
+    </>,
+    { sticky: true },
+  );
+  console.warn(warningMessage + " For more info, visit: " + linkToDocs);
+});
+
 export function* pushSaveQueueAsync(): Saga<never> {
   yield* call(ensureWkReady);
 
@@ -161,6 +182,7 @@ export function* sendSaveRequestToServer(): Saga<number> {
 
       try {
         yield* call(markBucketsAsNotDirty, compactedSaveQueue);
+        // todo_c check old save queue here
       } catch (error) {
         // If markBucketsAsNotDirty fails some reason, wk cannot recover from this error.
         console.warn("Error when marking buckets as clean. No retry possible. Error:", error);
@@ -236,9 +258,11 @@ function* markBucketsAsNotDirty(saveQueue: Array<SaveQueueEntry>) {
     const segmentationMagInfo = getMagInfo(segmentationLayer.mags);
     return [segmentationLayer, segmentationMagInfo] as const;
   });
+  let bucketCounter = 0;
   for (const saveEntry of saveQueue) {
     for (const updateAction of saveEntry.actions) {
       if (updateAction.name === "updateBucket") {
+        bucketCounter++;
         const { actionTracingId: tracingId } = updateAction.value;
         const [segmentationLayer, segmentationMagInfo] = getLayerAndMagInfoForTracingId(tracingId);
 
@@ -264,6 +288,10 @@ function* markBucketsAsNotDirty(saveQueue: Array<SaveQueueEntry>) {
       }
     }
   }
+  console.log("Checking number of buckets in save queue...", bucketCounter);
+  if (bucketCounter > constants.MAX_BUCKET_COUNT_PER_SAVE_SOFT_LIMIT) {
+    warnAboutTooManyBuckets();
+  }
 }
 
 export function toggleErrorHighlighting(state: boolean, permanentError: boolean = false): void {