Fix scrambled uint24 data

CHANGELOG.md

@@ -18,6 +18,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md).
 
 ### Fixed
 - Fixed a bug where volume tracings could not be converted to hybrid. [#4159](https://github.com/scalableminds/webknossos/pull/4159)
+- Fixed a bug where for uint24 color layers, scrambled data was shown for missing magnifications. [#4188](https://github.com/scalableminds/webknossos/pull/4188)
 - Fixed a bug where collapsing/expanding all tree groups would trigger when toggling a single tree [#4178](https://github.com/scalableminds/webknossos/pull/4178)
 
 ### Removed

frontend/javascripts/oxalis/api/api_latest.js

@@ -866,8 +866,8 @@ class DataApi {
     elementClass: ElementClass,
   ): $TypedArray {
     const extent = V3.sub(bbox.max, bbox.min);
-    const TypedArrayClass = getConstructorForElementClass(elementClass);
-    const result = new TypedArrayClass(extent[0] * extent[1] * extent[2]);
+    const [TypedArrayClass, channelCount] = getConstructorForElementClass(elementClass);
+    const result = new TypedArrayClass(channelCount * extent[0] * extent[1] * extent[2]);
     const bucketWidth = Constants.BUCKET_WIDTH;
     buckets.reverse();
 

frontend/javascripts/oxalis/model/bucket_data_handling/bucket.js

@@ -66,18 +66,18 @@ export const getConstructorForElementClass = (type: ElementClass) => {
   switch (type) {
     case "int8":
     case "uint8":
-      return Uint8Array;
+      return [Uint8Array, 1];
     case "int16":
     case "uint16":
-      return Uint16Array;
+      return [Uint16Array, 1];
     case "uint24":
       // There is no Uint24Array and uint24 is treated in a special way (rgb) anyways
-      return Uint8Array;
+      return [Uint8Array, 3];
     case "int32":
     case "uint32":
-      return Uint32Array;
+      return [Uint32Array, 1];
     case "float":
-      return Float32Array;
+      return [Float32Array, 1];
     default:
       throw new Error(`This type is not supported by the DataBucket class: ${type}`);
   }
@@ -191,8 +191,8 @@ export class DataBucket {
 
   getOrCreateData(): BucketDataArray {
     if (this.data == null) {
-      const TypedArrayClass = getConstructorForElementClass(this.elementClass);
-      this.data = new TypedArrayClass(Constants.BUCKET_SIZE);
+      const [TypedArrayClass, channelCount] = getConstructorForElementClass(this.elementClass);
+      this.data = new TypedArrayClass(channelCount * Constants.BUCKET_SIZE);
       if (!this.isMissing()) {
         this.temporalBucketManager.addBucket(this);
       }
@@ -225,15 +225,15 @@ export class DataBucket {
   }
 
   receiveData(arrayBuffer: ?Uint8Array): void {
-    const TypedArrayClass = getConstructorForElementClass(this.elementClass);
+    const [TypedArrayClass, channelCount] = getConstructorForElementClass(this.elementClass);
     const data =
       arrayBuffer != null
         ? new TypedArrayClass(
             arrayBuffer.buffer,
             arrayBuffer.byteOffset,
             arrayBuffer.byteLength / TypedArrayClass.BYTES_PER_ELEMENT,
           )
-        : new TypedArrayClass(Constants.BUCKET_SIZE);
+        : new TypedArrayClass(channelCount * Constants.BUCKET_SIZE);
     switch (this.state) {
       case BucketStateEnum.REQUESTED:
         if (this.dirty) {