Live Collab M2 - Automatically update annotation to newest changes (#8648)

From changelog:
> When you are viewing an annotation and another user changes that
annotation, these changes will be automatically shown. For some changes
(e.g., when adding a new annotation layer), you will still need to
reload the page, but most of the time WEBKNOSSOS will update the
annotation automatically.

Implementation details:
- I extended the save saga so that it not only polls for the newest
version, but also does try to incorporate newer version from the server,
if they exist. I named this incorporation "update action application"
- The update action application does not support all update actions yet
(I skipped the ones that I deemed unimportant for this iteration). If an
update action cannot be applied, the user is asked to reload the page
(as before).
- I refactored the tests and fixtures quite a bit to get the new tests
up and running.

Limitations:
- adding/removing layers will still require a reload
- changes to the active mapping will still require a reload <-- this
also impacts the very first brush as this will make the null-mapping
locked
- meshes aren't refreshed automatically

### URL of deployed dev instance (used for testing):
- https://___.webknossos.xyz

### Steps to test:
- open wk in two different windows (one incognito) and login as sample
and sample2
- create a new annotation as sample user and copy a sharing link
- open the same annotation as sample2 (should be read only)
- perform actions as sample and check that all changes are also shown
for sample2
- support actions include
  - skeleton related actions
  - volume brushing as well as changing the segment list
  - proofreading operations

### TODOs:
- [X] proof of concept
- [x] skeleton
- [x] volume
- [x] proofreading
- [x] bounding boxes
- [x] write new tests
  - [X] skeleton
  - [x] proofreading
  - [x] volume
- [x] final clean up

### Issues:
- fixes #8664

------
(Please delete unneeded items, merge only when none are left open)
- [x] Updated
[changelog](../blob/master/CHANGELOG.unreleased.md#unreleased)
- [ ] Updated [migration
guide](../blob/master/MIGRATIONS.unreleased.md#unreleased) if applicable
- [ ] Updated [documentation](../blob/master/docs) if applicable
- [ ] Adapted [wk-libs python
client](https://github.com/scalableminds/webknossos-libs/tree/master/webknossos/webknossos/client)
if relevant API parts change
- [ ] Removed dev-only changes like prints and application.conf edits
- [ ] Considered [common edge
cases](../blob/master/.github/common_edge_cases.md)
- [ ] Needs datastore update after deployment

---------

Co-authored-by: Michael Büßemeyer <39529669+MichaelBuessemeyer@users.noreply.github.com>

Author: philippotto

frontend/javascripts/admin/rest_api.ts

@@ -777,8 +777,9 @@ export function getUpdateActionLog(
   annotationId: string,
   oldestVersion?: number,
   newestVersion?: number,
+  sortAscending: boolean = false,
 ): Promise<Array<APIUpdateActionBatch>> {
-  return doWithToken((token) => {
+  return doWithToken(async (token) => {
     const params = new URLSearchParams();
     params.set("token", token);
     if (oldestVersion != null) {
@@ -787,9 +788,14 @@ export function getUpdateActionLog(
     if (newestVersion != null) {
       params.set("newestVersion", newestVersion.toString());
     }
-    return Request.receiveJSON(
+    const log: APIUpdateActionBatch[] = await Request.receiveJSON(
       `${tracingStoreUrl}/tracings/annotation/${annotationId}/updateActionLog?${params}`,
     );
+
+    if (sortAscending) {
+      log.reverse();
+    }
+    return log;
   });
 }
 
@@ -1989,6 +1995,9 @@ export async function getAgglomeratesForSegmentsFromDatastore<T extends number |
   mappingId: string,
   segmentIds: Array<T>,
 ): Promise<Mapping> {
+  if (segmentIds.length === 0) {
+    return new Map();
+  }
   const segmentIdBuffer = serializeProtoListOfLong<T>(segmentIds);
   const listArrayBuffer: ArrayBuffer = await doWithToken((token) => {
     const params = new URLSearchParams({ token });
@@ -2019,6 +2028,9 @@ export async function getAgglomeratesForSegmentsFromTracingstore<T extends numbe
   annotationId: string,
   version?: number | null | undefined,
 ): Promise<Mapping> {
+  if (segmentIds.length === 0) {
+    return new Map();
+  }
   const params = new URLSearchParams({ annotationId });
   if (version != null) {
     params.set("version", version.toString());
@@ -2201,7 +2213,7 @@ export function getSynapseTypes(
   );
 }
 
-type MinCutTargetEdge = {
+export type MinCutTargetEdge = {
   position1: Vector3;
   position2: Vector3;
   segmentId1: number;

frontend/javascripts/libs/utils.ts

@@ -1,18 +1,12 @@
+import { Chalk } from "chalk";
 import dayjs from "dayjs";
 import naturalSort from "javascript-natural-sort";
 import window, { document, location } from "libs/window";
 import _ from "lodash";
 import type { APIDataset, APIUser, MapEntries } from "types/api_types";
+import type { BoundingBoxMinMaxType } from "types/bounding_box";
 import type { ArbitraryObject, Comparator } from "types/globals";
-import type {
-  BoundingBoxType,
-  ColorObject,
-  Point3,
-  TypedArray,
-  Vector3,
-  Vector4,
-  Vector6,
-} from "viewer/constants";
+import type { ColorObject, Point3, TypedArray, Vector3, Vector4, Vector6 } from "viewer/constants";
 import type { TreeGroup } from "viewer/model/types/tree_types";
 import type { BoundingBoxObject, NumberLike, SegmentGroup } from "viewer/store";
 
@@ -276,19 +270,23 @@ export function getRandomColor(): Vector3 {
   return randomColor as any as Vector3;
 }
 
-export function computeBoundingBoxFromArray(bb: Vector6): BoundingBoxType {
+export function computeBoundingBoxFromArray(bb: Vector6): BoundingBoxMinMaxType {
   const [x, y, z, width, height, depth] = bb;
   return {
     min: [x, y, z],
     max: [x + width, y + height, z + depth],
   };
 }
 
-export function computeBoundingBoxFromBoundingBoxObject(bb: BoundingBoxObject): BoundingBoxType {
+export function computeBoundingBoxFromBoundingBoxObject(
+  bb: BoundingBoxObject,
+): BoundingBoxMinMaxType {
   return computeBoundingBoxFromArray([...bb.topLeft, bb.width, bb.height, bb.depth]);
 }
 
-export function computeBoundingBoxObjectFromBoundingBox(bb: BoundingBoxType): BoundingBoxObject {
+export function computeBoundingBoxObjectFromBoundingBox(
+  bb: BoundingBoxMinMaxType,
+): BoundingBoxObject {
   const boundingBoxArray = computeArrayFromBoundingBox(bb);
   return {
     topLeft: [boundingBoxArray[0], boundingBoxArray[1], boundingBoxArray[2]],
@@ -298,7 +296,7 @@ export function computeBoundingBoxObjectFromBoundingBox(bb: BoundingBoxType): Bo
   };
 }
 
-export function computeArrayFromBoundingBox(bb: BoundingBoxType): Vector6 {
+export function computeArrayFromBoundingBox(bb: BoundingBoxMinMaxType): Vector6 {
   return [
     bb.min[0],
     bb.min[1],
@@ -309,11 +307,13 @@ export function computeArrayFromBoundingBox(bb: BoundingBoxType): Vector6 {
   ];
 }
 
-export function computeShapeFromBoundingBox(bb: BoundingBoxType): Vector3 {
+export function computeShapeFromBoundingBox(bb: BoundingBoxMinMaxType): Vector3 {
   return [bb.max[0] - bb.min[0], bb.max[1] - bb.min[1], bb.max[2] - bb.min[2]];
 }
 
-export function aggregateBoundingBox(boundingBoxes: Array<BoundingBoxObject>): BoundingBoxType {
+export function aggregateBoundingBox(
+  boundingBoxes: Array<BoundingBoxObject>,
+): BoundingBoxMinMaxType {
   if (boundingBoxes.length === 0) {
     return {
       min: [0, 0, 0],
@@ -344,8 +344,8 @@ export function aggregateBoundingBox(boundingBoxes: Array<BoundingBoxObject>): B
 }
 
 export function areBoundingBoxesOverlappingOrTouching(
-  firstBB: BoundingBoxType,
-  secondBB: BoundingBoxType,
+  firstBB: BoundingBoxMinMaxType,
+  secondBB: BoundingBoxMinMaxType,
 ) {
   let areOverlapping = true;
 
@@ -425,10 +425,6 @@ export function stringToNumberArray(s: string): Array<number> {
   return result;
 }
 
-export function concatVector3(a: Vector3, b: Vector3): Vector6 {
-  return [a[0], a[1], a[2], b[0], b[1], b[2]];
-}
-
 export function numberArrayToVector3(array: Array<number>): Vector3 {
   const output: Vector3 = [0, 0, 0];
 
@@ -1262,7 +1258,11 @@ export function notEmpty<TValue>(value: TValue | null | undefined): value is TVa
 
 export function isNumberMap(x: Map<NumberLike, NumberLike>): x is Map<number, number> {
   const { value } = x.entries().next();
-  return Boolean(value && typeof value[0] === "number");
+  if (value === undefined) {
+    // Let's assume a number map when the map is empty.
+    return true;
+  }
+  return Boolean(typeof value[0] === "number");
 }
 
 export function isBigInt(x: NumberLike): x is bigint {
@@ -1368,3 +1368,26 @@ export function areSetsEqual<T>(setA: Set<T>, setB: Set<T>) {
   }
   return true;
 }
+
+// ColoredLogger can be used to make certain log outputs easier to find (especially useful
+// when automatic logging of redux actions is enabled which makes the overall logging
+// very verbose).
+const chalk = new Chalk({ level: 3 });
+export const ColoredLogger = {
+  log: (...args: unknown[]) => {
+    // Simple wrapper to allow easy switching from colored to non-colored logs
+    console.log(...args);
+  },
+  logRed: (str: string, ...args: unknown[]) => {
+    console.log(chalk.bgRed(str), ...args);
+  },
+  logGreen: (str: string, ...args: unknown[]) => {
+    console.log(chalk.bgGreen(str), ...args);
+  },
+  logYellow: (str: string, ...args: unknown[]) => {
+    console.log(chalk.bgYellow(str), ...args);
+  },
+  logBlue: (str: string, ...args: unknown[]) => {
+    console.log(chalk.bgBlue(str), ...args);
+  },
+};

frontend/javascripts/libs/vector_input.tsx

@@ -2,7 +2,7 @@ import type { InputProps } from "antd";
 import * as Utils from "libs/utils";
 import _ from "lodash";
 import * as React from "react";
-import type { ServerBoundingBoxTypeTuple } from "types/api_types";
+import type { ServerBoundingBoxMinMaxTypeTuple } from "types/api_types";
 import type { Vector3, Vector6 } from "viewer/constants";
 import InputComponent from "viewer/view/components/input_component";
 
@@ -206,11 +206,11 @@ export class ArbitraryVectorInput extends BaseVector<number[]> {
 }
 
 type BoundingBoxInputProps = Omit<InputProps, "value"> & {
-  value: ServerBoundingBoxTypeTuple;
-  onChange: (arg0: ServerBoundingBoxTypeTuple) => void;
+  value: ServerBoundingBoxMinMaxTypeTuple;
+  onChange: (arg0: ServerBoundingBoxMinMaxTypeTuple) => void;
 };
 
-function boundingBoxToVector6(value: ServerBoundingBoxTypeTuple): Vector6 {
+function boundingBoxToVector6(value: ServerBoundingBoxMinMaxTypeTuple): Vector6 {
   const { topLeft, width, height, depth } = value;
   const [x, y, z] = topLeft;
   return [x, y, z, width, height, depth];

frontend/javascripts/test/backend-snapshot-tests/annotations.e2e.ts

@@ -11,14 +11,14 @@ import { createTreeMapFromTreeArray } from "viewer/model/reducers/skeletontracin
 import { diffTrees } from "viewer/model/sagas/skeletontracing_saga";
 import { getNullableSkeletonTracing } from "viewer/model/accessors/skeletontracing_accessor";
 import { getServerVolumeTracings } from "viewer/model/accessors/volumetracing_accessor";
-import { addVersionNumbers } from "viewer/model/sagas/save_saga";
-import * as UpdateActions from "viewer/model/sagas/update_actions";
+import * as UpdateActions from "viewer/model/sagas/volume/update_actions";
 import * as api from "admin/rest_api";
 import generateDummyTrees from "viewer/model/helpers/generate_dummy_trees";
 import { describe, it, beforeAll, expect } from "vitest";
 import { createSaveQueueFromUpdateActions } from "../helpers/saveHelpers";
 import type { SaveQueueEntry } from "viewer/store";
 import DiffableMap from "libs/diffable_map";
+import { addVersionNumbers } from "viewer/model/sagas/saving/save_queue_draining";
 
 const datasetId = "59e9cfbdba632ac2ab8b23b3";