Reload mesh with opacity (#8622)

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

This PR improves the reloading of meshes by keeping their previous
opacity. It also refactors the code by splitting the mesh_saga into
three modules.

### Steps to test:
- Open an annotation and select some segments. Load their meshes.
- Now change the opacity of a mesh and reload it. The opacity should not
change upon reloading.
- Do this for precomputed and ad-hoc meshes
- As the mesh_saga was refactored, it makes sense to test the usual mesh
functionality: downloading mesh(es), reloading them, removing them,
toggling the visibility, changing their color, etc

### Issues:
- fixes #8504

Author: knollengewaechs

CHANGELOG.unreleased.md

@@ -11,6 +11,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 [Commits](https://github.com/scalableminds/webknossos/compare/25.06.1...HEAD)
 
 ### Added
+- Meshes are now reloaded using their previous opacity value. [#8622](https://github.com/scalableminds/webknossos/pull/8622)
 
 ### Changed
 

frontend/javascripts/components/color_picker.tsx

@@ -1,7 +1,7 @@
 import { InputNumber, Popover } from "antd";
 import useThrottledCallback from "beautiful-react-hooks/useThrottledCallback";
 import * as Utils from "libs/utils";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import type { CSSProperties } from "react";
 import { HexColorInput, HexColorPicker, type RgbaColor, RgbaColorPicker } from "react-colorful";
 import type { Vector3, Vector4 } from "viewer/constants";
@@ -36,14 +36,20 @@ const ThrottledColorPicker = ({
 }) => {
   const [value, localSetValue] = useState(color);
   const throttledSetValue = useThrottledCallback(onChange, [onChange], 20);
+
+  // Sync local state when external color prop changes
+  useEffect(() => {
+    localSetValue(color);
+  }, [color]);
+
   const setValue = (newValue: string) => {
     localSetValue(newValue);
     throttledSetValue(newValue);
   };
   return (
     <div style={{ marginRight: 10 }}>
       <HexColorPicker color={value} onChange={setValue} />
-      <HexColorInput color={color} onChange={setValue} style={inputStyle} />
+      <HexColorInput color={value} onChange={setValue} style={inputStyle} />
     </div>
   );
 };
@@ -90,6 +96,12 @@ const ThrottledRGBAColorPicker = ({
 }) => {
   const [value, localSetValue] = useState(color);
   const throttledSetValue = useThrottledCallback(onChangeColor, [onChangeColor, value], 20);
+
+  // Sync local state when external color prop changes
+  useEffect(() => {
+    localSetValue(color);
+  }, [color]);
+
   const setValue = (newValue: RgbaColor) => {
     localSetValue(newValue);
     throttledSetValue(newValue);

frontend/javascripts/viewer/api/api_latest.ts

@@ -2521,6 +2521,7 @@ class DataApi {
         seedPosition,
         seedAdditionalCoordinates,
         meshFileName,
+        undefined,
         effectiveLayerName,
       ),
     );

frontend/javascripts/viewer/controller/mesh_helpers.ts

@@ -1,5 +1,8 @@
+import type { meshApi } from "admin/rest_api";
+import { V3 } from "libs/mjs";
 import _ from "lodash";
 import type * as THREE from "three";
+import type { Vector3 } from "viewer/constants";
 
 export type BufferGeometryWithInfo = THREE.BufferGeometry & {
   vertexSegmentMapping?: VertexSegmentMapping;
@@ -78,3 +81,12 @@ export class VertexSegmentMapping {
     return _.sortedIndexOf(this.unmappedSegmentIds, segmentId) !== -1;
   }
 }
+
+export function sortByDistanceTo(
+  availableChunks: Vector3[] | meshApi.MeshChunk[] | null | undefined,
+  seedPosition: Vector3,
+) {
+  return _.sortBy(availableChunks, (chunk: Vector3 | meshApi.MeshChunk) =>
+    V3.length(V3.sub(seedPosition, "position" in chunk ? chunk.position : chunk)),
+  ) as Array<Vector3> | Array<meshApi.MeshChunk>;
+}

frontend/javascripts/viewer/controller/segment_mesh_controller.ts

@@ -13,11 +13,12 @@ import {
   getActiveSegmentationTracing,
   getSegmentColorAsHSLA,
 } from "viewer/model/accessors/volumetracing_accessor";
-import { NO_LOD_MESH_INDEX } from "viewer/model/sagas/mesh_saga";
 import Store from "viewer/store";
 
 import { computeBvhAsync } from "libs/compute_bvh_async";
 import type { BufferAttribute } from "three";
+import Constants from "viewer/constants";
+import { NO_LOD_MESH_INDEX } from "viewer/model/sagas/meshes/common_mesh_saga";
 import type { BufferGeometryWithInfo } from "./mesh_helpers";
 
 // Add the raycast function. Assumes the BVH is available on
@@ -110,6 +111,7 @@ export default class SegmentMeshController {
     vertices: Float32Array,
     segmentId: number,
     layerName: string,
+    opacity: number | undefined,
     additionalCoordinates?: AdditionalCoordinate[] | undefined | null,
   ): Promise<void> {
     // Currently, this function is only used by ad hoc meshing.
@@ -129,6 +131,7 @@ export default class SegmentMeshController {
       NO_LOD_MESH_INDEX,
       layerName,
       additionalCoordinates,
+      opacity,
       false,
     );
   }
@@ -137,6 +140,7 @@ export default class SegmentMeshController {
     segmentId: number,
     layerName: string,
     geometry: BufferGeometryWithInfo,
+    opacity: number | undefined,
     isMerged: boolean,
   ): MeshSceneNode {
     const color = this.getColorObjectForSegment(segmentId, layerName);
@@ -169,7 +173,7 @@ export default class SegmentMeshController {
     tweenAnimation
       .to(
         {
-          opacity: 1,
+          opacity: opacity ?? Constants.DEFAULT_MESH_OPACITY,
         },
         100,
       )
@@ -189,6 +193,7 @@ export default class SegmentMeshController {
     lod: number,
     layerName: string,
     additionalCoordinates: AdditionalCoordinate[] | null | undefined,
+    opacity: number | undefined,
     isMerged: boolean,
   ): void {
     const additionalCoordinatesString = getAdditionalCoordinatesAsString(additionalCoordinates);
@@ -232,7 +237,7 @@ export default class SegmentMeshController {
       ];
       targetGroup.scale.copy(new THREE.Vector3(...adaptedScale));
     }
-    const meshChunk = this.constructMesh(segmentId, layerName, geometry, isMerged);
+    const meshChunk = this.constructMesh(segmentId, layerName, geometry, opacity, isMerged);
 
     const group = new THREE.Group() as SceneGroupForMeshes;
     group.add(meshChunk);

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

@@ -12,6 +12,7 @@ import type {
 } from "types/api_types";
 import type { AdditionalCoordinate } from "types/api_types";
 import type { Vector3 } from "viewer/constants";
+import Constants from "viewer/constants";
 import type {
   Annotation,
   MappingType,
@@ -333,6 +334,7 @@ export const addAdHocMeshAction = (
   seedAdditionalCoordinates: AdditionalCoordinate[] | undefined | null,
   mappingName: string | null | undefined,
   mappingType: MappingType | null | undefined,
+  opacity: number | undefined,
 ) =>
   ({
     type: "ADD_AD_HOC_MESH",
@@ -342,6 +344,7 @@ export const addAdHocMeshAction = (
     seedAdditionalCoordinates,
     mappingName,
     mappingType,
+    opacity: opacity ?? Constants.DEFAULT_MESH_OPACITY,
   }) as const;
 
 export const addPrecomputedMeshAction = (
@@ -351,6 +354,7 @@ export const addPrecomputedMeshAction = (
   seedAdditionalCoordinates: AdditionalCoordinate[] | undefined | null,
   meshFileName: string,
   mappingName: string | null | undefined,
+  opacity: number | undefined,
 ) =>
   ({
     type: "ADD_PRECOMPUTED_MESH",
@@ -360,6 +364,7 @@ export const addPrecomputedMeshAction = (
     seedAdditionalCoordinates,
     meshFileName,
     mappingName,
+    opacity: opacity ?? Constants.DEFAULT_MESH_OPACITY,
   }) as const;
 
 export const setOthersMayEditForAnnotationAction = (othersMayEdit: boolean) =>

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

@@ -7,6 +7,7 @@ export type AdHocMeshInfo = {
   mappingType: MappingType | null | undefined;
   useDataStore?: boolean | null | undefined;
   preferredQuality?: number | null | undefined;
+  opacity?: number | undefined;
 };
 export type LoadAdHocMeshAction = ReturnType<typeof loadAdHocMeshAction>;
 export type LoadPrecomputedMeshAction = ReturnType<typeof loadPrecomputedMeshAction>;
@@ -34,6 +35,7 @@ export const loadPrecomputedMeshAction = (
   seedPosition: Vector3,
   seedAdditionalCoordinates: AdditionalCoordinate[] | undefined | null,
   meshFileName: string,
+  opacity: number | undefined,
   layerName?: string | undefined,
 ) =>
   ({
@@ -42,5 +44,6 @@ export const loadPrecomputedMeshAction = (
     seedPosition,
     seedAdditionalCoordinates,
     meshFileName,
+    opacity,
     layerName,
   }) as const;

frontend/javascripts/viewer/model/reducers/annotation_reducer.ts

@@ -3,7 +3,6 @@ import { V3 } from "libs/mjs";
 import * as Utils from "libs/utils";
 import _ from "lodash";
 import type { AdditionalCoordinate } from "types/api_types";
-import Constants from "viewer/constants";
 import { maybeGetSomeTracing } from "viewer/model/accessors/tracing_accessor";
 import { getDisplayedDataExtentInPlaneMode } from "viewer/model/accessors/view_mode_accessor";
 import type { Action } from "viewer/model/actions/actions";
@@ -344,7 +343,7 @@ function AnnotationReducer(state: WebknossosState, action: Action): WebknossosSt
       });
     }
 
-    // Mesh information is stored in three places: the state in the store, segment_view_controller and within the mesh_saga.
+    // Mesh information is stored in three places: the state in the store, segment_view_controller and within the mesh sagas.
     case "ADD_AD_HOC_MESH": {
       const {
         layerName,
@@ -353,6 +352,7 @@ function AnnotationReducer(state: WebknossosState, action: Action): WebknossosSt
         seedAdditionalCoordinates,
         mappingName,
         mappingType,
+        opacity,
       } = action;
       const meshInfo: MeshInformation = {
         segmentId: segmentId,
@@ -361,7 +361,7 @@ function AnnotationReducer(state: WebknossosState, action: Action): WebknossosSt
         isLoading: false,
         isVisible: true,
         isPrecomputed: false,
-        opacity: Constants.DEFAULT_MESH_OPACITY,
+        opacity,
         mappingName,
         mappingType,
       };
@@ -398,6 +398,7 @@ function AnnotationReducer(state: WebknossosState, action: Action): WebknossosSt
         seedAdditionalCoordinates,
         meshFileName,
         mappingName,
+        opacity,
       } = action;
       const meshInfo: MeshInformation = {
         segmentId: segmentId,
@@ -406,7 +407,7 @@ function AnnotationReducer(state: WebknossosState, action: Action): WebknossosSt
         isLoading: false,
         isVisible: true,
         isPrecomputed: true,
-        opacity: Constants.DEFAULT_MESH_OPACITY,
+        opacity,
         meshFileName,
         mappingName,
       };