Cleanup mjs module (#9059)

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

### Steps to test:
- test that the following still works:
    - all view modes (flight, orthogonal, oblique)
    - affine transformations 
    - drag and drop skeleton nodes
    - loading of ad-hoc meshes 
    - area measurement
    - brushing

### TODOs:
- [x] maybe have a look at other places and remove Float32Arrays there,
too

### Issues:
- fixes #8666 

------
(Please delete unneeded items, merge only when none are left open)
- [x] Added changelog entry (create a `$PR_NUMBER.md` file in
`unreleased_changes` or use `./tools/create-changelog-entry.py`)
- [ ] Added migration guide entry if applicable (edit the same file as
for the changelog)
- [ ] 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: Florian M <[email protected]>
Co-authored-by: MichaelBuessemeyer <[email protected]>
Co-authored-by: Philipp Otto <[email protected]>

Author: 4 people

frontend/javascripts/libs/mjs.ts

@@ -2,47 +2,23 @@
 //   https://github.com/imbcmdth/mjs/blob/master/index.js
 // for all functions in M4x4, V2 and V3.
 import _ from "lodash";
-import type { Vector3 as ThreeVector3 } from "three";
 import type { Vector2, Vector3, Vector4 } from "viewer/constants";
 import { chunk3 } from "viewer/model/helpers/chunk";
 
-import mjs from "mjs";
-
-const { M4x4: BareM4x4, V2: BareV2, V3: BareV3 } = mjs(Float32Array);
-
-type Vector3Like = Vector3 | Float32Array;
-type Vector2Like = Vector2 | Float32Array;
-
-export type Vector16 = [
-  number,
-  number,
-  number,
-  number,
-  number,
-  number,
-  number,
-  number,
-  number,
-  number,
-  number,
-  number,
-  number,
-  number,
-  number,
-  number,
-];
-export type Matrix4x4 = Vector16 | Float32Array;
+import mjs, { type Vector16, type Matrix4x4 } from "mjs";
+
+const { M4x4: BareM4x4, V2: BareV2, V3: BareV3 } = mjs(Array);
 
 const M4x4 = {
   ...BareM4x4,
   // Applies an affine transformation matrix on an array of points.
   transformPointsAffine(
     m: Matrix4x4,
-    points: number[] | Float32Array,
-    r?: Float32Array | Int32Array | null | undefined,
-  ): Float32Array | Int32Array {
+    points: number[],
+    r?: Array<number> | null | undefined,
+  ): Array<number> {
     if (r == null) {
-      r = new Float32Array(points.length);
+      r = new Array(points.length);
     }
 
     const m00 = m[0];
@@ -85,10 +61,10 @@ const M4x4 = {
   transformPoints(
     m: Matrix4x4,
     points: number[],
-    r?: Float32Array | null | undefined,
-  ): Float32Array {
+    r?: Array<number> | null | undefined,
+  ): Array<number> {
     if (r == null) {
-      r = new Float32Array(points.length);
+      r = new Array(points.length);
     }
 
     for (let i = 0; i < points.length; i += 3) {
@@ -112,7 +88,7 @@ const M4x4 = {
 
   inverse(mat: Matrix4x4, dest?: Matrix4x4): Matrix4x4 {
     if (dest == null) {
-      dest = new Float32Array(16);
+      dest = new Array(16) as Vector16;
     }
 
     const a00 = mat[0];
@@ -188,7 +164,7 @@ const M4x4 = {
       return m;
     }
 
-    if (r == null) r = new Float32Array(16);
+    if (r == null) r = new Array(16) as Vector16;
 
     r[0] = m[0];
     r[1] = m[4];
@@ -210,9 +186,9 @@ const M4x4 = {
     return r;
   },
 
-  extractTranslation(m: Matrix4x4, r?: Float32Array | null | undefined): Float32Array {
+  extractTranslation(m: Matrix4x4, r?: Vector3 | null | undefined): Vector3 {
     if (r == null) {
-      r = new Float32Array(3);
+      r = new Array(3) as Vector3;
     }
 
     r[0] = m[12];
@@ -236,8 +212,8 @@ const V2 = {
   max(vec1: Vector2, vec2: Vector2): Vector2 {
     return [Math.max(vec1[0], vec2[0]), Math.max(vec1[1], vec2[1])];
   },
-  scale2(a: Vector2, k: Vector2, r?: Vector2Like): Vector2Like {
-    if (r == null) r = new Float32Array(2);
+  scale2(a: Vector2, k: Vector2, r?: Vector2): Vector2 {
+    if (r == null) r = new Array(2) as Vector2;
     r[0] = a[0] * k[0];
     r[1] = a[1] * k[1];
     return r;
@@ -261,11 +237,9 @@ const V2 = {
 
 const _tmpVec: Vector3 = [0, 0, 0];
 
-// @ts-ignore TS claims that the implementation doesn't match the overloading
-function round(v: Vector3, r?: Vector3 | null | undefined): Vector3;
-function round(v: Vector3Like, r?: Float32Array | null | undefined) {
+function round(v: Vector3, r?: Vector3 | null | undefined) {
   if (r == null) {
-    r = new Float32Array(3);
+    r = new Array(3) as Vector3;
   }
 
   r[0] = Math.round(v[0]);
@@ -274,20 +248,16 @@ function round(v: Vector3Like, r?: Float32Array | null | undefined) {
   return r;
 }
 
-// @ts-ignore TS claims that the implementation doesn't match the overloading
-function divide3(a: ThreeVector3, k: ThreeVector3, r?: ThreeVector3): Vector3;
-function divide3(a: Vector3, k: Vector3, r?: Vector3): Vector3;
-function divide3(a: Float32Array, k: Float32Array, r?: Float32Array) {
-  if (r == null) r = new Float32Array(3);
+function divide3(a: Vector3, k: Vector3, r?: Vector3): Vector3 {
+  if (r == null) r = new Array(3) as Vector3;
   r[0] = a[0] / k[0];
   r[1] = a[1] / k[1];
   r[2] = a[2] / k[2];
   return r;
 }
 
-function scale3(a: Vector3, k: Vector3, r?: Vector3): Vector3;
-function scale3(a: Vector3Like, k: Vector3Like, r?: Vector3Like): Vector3Like {
-  if (r == null) r = new Float32Array(3);
+function scale3(a: Vector3, k: Vector3, r?: Vector3): Vector3 {
+  if (r == null) r = new Array(3) as Vector3;
   r[0] = a[0] * k[0];
   r[1] = a[1] * k[1];
   r[2] = a[2] * k[2];
@@ -297,16 +267,16 @@ function scale3(a: Vector3Like, k: Vector3Like, r?: Vector3Like): Vector3Like {
 const V3 = {
   ...BareV3,
   // Component-wise minimum of two vectors.
-  min(vec1: Vector3Like, vec2: Vector3Like): Vector3 {
+  min(vec1: Vector3, vec2: Vector3): Vector3 {
     return [Math.min(vec1[0], vec2[0]), Math.min(vec1[1], vec2[1]), Math.min(vec1[2], vec2[2])];
   },
 
   // Component-wise maximum of two vectors.
-  max(vec1: Vector3Like, vec2: Vector3Like): Vector3 {
+  max(vec1: Vector3, vec2: Vector3): Vector3 {
     return [Math.max(vec1[0], vec2[0]), Math.max(vec1[1], vec2[1]), Math.max(vec1[2], vec2[2])];
   },
 
-  equals(vec1: Vector3Like, vec2: Vector3Like): boolean {
+  equals(vec1: Vector3, vec2: Vector3): boolean {
     return vec1[0] === vec2[0] && vec1[1] === vec2[1] && vec1[2] === vec2[2];
   },
 
@@ -344,15 +314,15 @@ const V3 = {
     return V3.floor(V3.scale3(vec, sourceMag));
   },
 
-  scaledSquaredDist(a: Vector3Like, b: Vector3Like, scale: Vector3) {
+  scaledSquaredDist(a: Vector3, b: Vector3, scale: Vector3) {
     // Computes the distance between two vectors while respecting a 3 dimensional scale
     // Use _tmpVec as result variable (third parameter) to avoid allocations
     V3.sub(a, b, _tmpVec);
     V3.scale3(_tmpVec, scale, _tmpVec);
     return V3.lengthSquared(_tmpVec);
   },
 
-  scaledDist(a: Vector3Like, b: Vector3Like, scale: Vector3) {
+  scaledDist(a: Vector3, b: Vector3, scale: Vector3) {
     const squaredDist = V3.scaledSquaredDist(a, b, scale);
     return Math.sqrt(squaredDist);
   },
@@ -399,4 +369,4 @@ const V4 = {
   },
 };
 
-export { M4x4, V2, V3, V4 };
+export { M4x4, V2, V3, V4, type Matrix4x4 };

frontend/javascripts/types/mjs.d.ts

@@ -1,49 +1,45 @@
 declare module "mjs" {
-  type Vector3 = [number, number, number];
-  type Vector3Like = Vector3 | Float32Array;
-  type Vector2Like = Vector2 | Float32Array;
+type Vector3 = [number, number, number];
+export type Vector16 = [
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+];
+export type Matrix4x4 = Vector16;
 
-  export type Matrix4x4 =
-    | [
-        number,
-        number,
-        number,
-        number,
-        number,
-        number,
-        number,
-        number,
-        number,
-        number,
-        number,
-        number,
-        number,
-        number,
-        number,
-        number,
-      ]
-    | Float32Array;
-
-  export default (f: Float32ArrayConstructor) => ({
+  export default (f: ArrayConstructor) => ({
     M4x4: {
       identity: Matrix4x4,
       translate: function (
         m: Vector3,
         points: Matrix4x4,
-        r?: Float32Array | number[] | null | undefined,
+        r?: number[] | null | undefined,
       ): Matrix4x4 {},
       scale: function (
         s: Vector3,
         m: Matrix4x4,
-        r?: Float32Array | number[] | null | undefined,
+        r?: number[] | null | undefined,
       ): Matrix4x4 {},
-      scale1: function (s: number, m: Matrix4x4, r?: Float32Array | null | undefined): Matrix4x4 {},
+      scale1: function (s: number, m: Matrix4x4, r?: number[] | null | undefined): Matrix4x4 {},
       mul: function (a: Matrix4x4, b: Matrix4x4, r?: Matrix4x4 | null | undefined): Matrix4x4 {},
       rotate: function (
         angle: number,
         axis: Vector3,
         m: Matrix4x4,
-        r?: Float32Array | number[] | null | undefined,
+        r?: number[] | null | undefined,
       ): Matrix4x4 {},
       clone: function (m: Matrix4x4): Matrix4x4 {},
       transformLineAffine: function (m: Matrix4x4, v1: Vector3, v2: Vector3): Matrix4x4 {},
@@ -56,7 +52,7 @@ declare module "mjs" {
     },
     V3: {
       add: function (x: Vector3, y: Vector3, res?: Vector3): Vector3 {},
-      sub: function (x: Vector3Like, y: Vector3Like, res?: Vector3Like): Vector3 {},
+      sub: function (x: Vector3, y: Vector3, res?: Vector3): Vector3 {},
       cross: function (x: Vector3, y: Vector3, res?: Vector3): Vector3 {},
       length: function (x: Vector3): number {},
       lengthSquared: function (x: Vector3): number {},

frontend/javascripts/viewer/api/api_latest.ts

@@ -7,7 +7,7 @@ import {
 } from "admin/rest_api";
 import PriorityQueue from "js-priority-queue";
 import { InputKeyboardNoLoop } from "libs/input";
-import { M4x4, type Matrix4x4, V3, type Vector16 } from "libs/mjs";
+import { M4x4, type Matrix4x4, V3 } from "libs/mjs";
 import Request from "libs/request";
 import type { ToastStyle } from "libs/toast";
 import Toast from "libs/toast";
@@ -17,6 +17,7 @@ import { coalesce, mod } from "libs/utils";
 import window, { location } from "libs/window";
 import _ from "lodash";
 import messages from "messages";
+import type { Vector16 } from "mjs";
 import { Euler, MathUtils, Quaternion } from "three";
 import TWEEN from "tween.js";
 import { type APICompoundType, APICompoundTypeEnum, type ElementClass } from "types/api_types";
@@ -2745,8 +2746,8 @@ class DataApi {
    * );
    */
   _createTransformsFromSpecs(specs: Array<TransformSpec>) {
-    const makeTranslation = (x: number, y: number, z: number): Matrix4x4 =>
-      new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, x, y, z, 1]);
+    // biome-ignore format: don't format array
+    const makeTranslation = (x: number, y: number, z: number): Matrix4x4 => [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, x, y, z, 1];
     const makeScale = (scale: Vector3, anchor: Vector3) =>
       M4x4.mul(
         M4x4.scale(scale, makeTranslation(anchor[0], anchor[1], anchor[2])),
@@ -2757,11 +2758,11 @@ class DataApi {
         M4x4.mul(
           makeTranslation(pos[0], pos[1], pos[2]),
           // biome-ignore format: don't format array
-          new Float32Array([
+          [
             Math.cos(thetaInRad), Math.sin(thetaInRad), 0, 0,
             -Math.sin(thetaInRad), Math.cos(thetaInRad), 0, 0,
             0, 0, 1, 0, 0, 0, 0, 1,
-          ]),
+          ],
         ),
         makeTranslation(-pos[0], -pos[1], -pos[2]),
       );

frontend/javascripts/viewer/constants.ts

@@ -1,3 +1,4 @@
+import type { Matrix4x4 } from "mjs";
 import { Euler, Matrix4 } from "three";
 export type AdditionalCoordinate = { name: string; value: number };
 
@@ -383,7 +384,7 @@ export enum BLEND_MODES {
   Cover = "Cover",
 }
 
-export const Identity4x4 = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
+export const Identity4x4: Matrix4x4 = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
 export const IdentityTransform = {
   type: "affine",
   affineMatrix: Identity4x4,

frontend/javascripts/viewer/geometries/helper_geometries.ts

@@ -89,7 +89,7 @@ export class ContourGeometry {
   addEdgePoint(pos: Vector3) {
     const pointCount = this.vertexBuffer.getLength();
     const lastPoint = this.vertexBuffer.getBuffer().subarray((pointCount - 1) * 3, pointCount * 3);
-    if (V3.equals(pos, lastPoint)) {
+    if (V3.equals(pos, [lastPoint[0], lastPoint[1], lastPoint[2]])) {
       // Skip adding the point if it is the same as the last one.
       return;
     }

frontend/javascripts/viewer/model/accessors/flycam_accessor.ts

@@ -1,8 +1,8 @@
-import type { Matrix4x4 } from "libs/mjs";
 import { M4x4, V3 } from "libs/mjs";
 import { map3, mod } from "libs/utils";
 import _ from "lodash";
 import memoizeOne from "memoize-one";
+import type { Matrix4x4 } from "mjs";
 import { type Euler, MathUtils, Matrix4, Object3D } from "three";
 import type { AdditionalCoordinate, VoxelSize } from "types/api_types";
 import { baseDatasetViewConfiguration } from "types/schemas/dataset_view_configuration.schema";

frontend/javascripts/viewer/model/bucket_data_handling/bucket_picker_strategies/flight_bucket_picker.ts

@@ -63,8 +63,7 @@ export default function determineBucketsForFlight(
   };
 
   const transformAndApplyMatrix = (vec: Vector3): Vector3 =>
-    // @ts-ignore
-    M4x4.transformPointsAffine(queryMatrix, transformToSphereCap(vec));
+    M4x4.transformPointsAffine(queryMatrix, transformToSphereCap(vec)) as Vector3;
 
   let traversedBucketsWithPriorities: Array<[Vector4, number]> = [];
   const maybeAddBucket = createDistinctBucketAdder(traversedBucketsWithPriorities);

frontend/javascripts/viewer/model/bucket_data_handling/bucket_picker_strategies/oblique_bucket_picker.ts

@@ -1,7 +1,7 @@
 import ThreeDMap from "libs/ThreeDMap";
-import type { Matrix4x4 } from "libs/mjs";
 import { M4x4, V3 } from "libs/mjs";
 import _ from "lodash";
+import type { Matrix4x4 } from "mjs";
 import type { OrthoViewWithoutTD, Vector2, Vector3, Vector4, ViewMode } from "viewer/constants";
 import constants from "viewer/constants";
 import traverse from "viewer/model/bucket_data_handling/bucket_traversals";

unreleased_changes/9059.md

@@ -0,0 +1,2 @@
+### Changed
+- To improve performance, the use of Float32Arrays was omitted in favor of plain Arrays in our self-adjusted mjs module.