@abi-software/scaffoldvuer 1.21.1-beta.2 → 2.0.0

package/src/scripts/OrgansRenderer.js

@@ -5,16 +5,16 @@ import Annotation from './Annotation.js';
 // Current model's associate data, data fields, external link, nerve map
 // informations,
 // these are proived in the organsFileMap array.
-const OrgansSceneData = function() {
-  this.currentName = "";
-  this.currentSystem = "";
-  this.currentPart = "";
-  this.currentSpecies  = "";
-  this.metaURL = "";
-  this.viewURL = "";
+const OrgansSceneData = function () {
+  this.currentName = '';
+  this.currentSystem = '';
+  this.currentPart = '';
+  this.currentSpecies = '';
+  this.metaURL = '';
+  this.viewURL = '';
   this.timeVarying = false;
-	this.currentTime = 0.0;
-}
+  this.currentTime = 0.0;
+};
 
 /**
  * Viewer of 3D-organs models. Users can toggle on/off different views. Data is
@@ -30,73 +30,68 @@ const OrgansSceneData = function() {
  * @author Alan Wu
  * @returns {PJP.OrgansViewer}
  */
- const OrgansViewer = function(ModelsLoaderIn)  {
+const OrgansViewer = function (ModelsLoaderIn) {
   RendererModule.call(this);
   const _this = this;
-	let pickerScene = undefined;
-	this.sceneData = new OrgansSceneData();
-	const timeChangedCallbacks = new Array();
-	const sceneChangedCallbacks = new Array();
+  let pickerScene = undefined;
+  this.sceneData = new OrgansSceneData();
+  const timeChangedCallbacks = new Array();
+  const sceneChangedCallbacks = new Array();
   const organPartAddedCallbacks = new Array();
-	const organPartRemovedCallbacks = new Array();
+  const organPartRemovedCallbacks = new Array();
   let finishDownloadCallback = undefined;
-	let downloadErrorCallback = undefined;
-	const modelsLoader = ModelsLoaderIn;
+  let downloadErrorCallback = undefined;
+  const modelsLoader = ModelsLoaderIn;
+  const organsFileMap = modelsLoader?.organsFileMap ?? {};
   this.NDCCameraControl = undefined;
-	_this.typeName = "Organ Viewer";
-	let ignorePicking = false;
+  _this.typeName = 'Organ Viewer';
+  let ignorePicking = false;
 
-	this.isIgnorePicking = function() {
-    	return ignorePicking;
-	}
+  this.isIgnorePicking = function () {
+    return ignorePicking;
+  };
 
-	this.setIgnorePicking = function(value) {
-		ignorePicking = value;
-	}
+  this.setIgnorePicking = function (value) {
+    ignorePicking = value;
+  };
 
-	this.getSceneData = function() {
-	  return _this.sceneData;
-	}
+  this.getSceneData = function () {
+    return _this.sceneData;
+  };
 
-	/**
-	 * Used to update internal timer in scene when time slider has changed.
-	 */
-	this.updateTime = function(value) {
+  /**
+   * Used to update internal timer in scene when time slider has changed.
+   */
+  this.updateTime = function (value) {
     let duration = 6000;
-    if (_this.scene)
-      duration = _this.scene.getDuration();
-    const actualTime = value / 100.0 * duration;
-		if (!_this.sceneData.nerveMapIsActive) {
-			if (pickerScene)
-				pickerScene.setMorphsTime(actualTime);
-			if (_this.scene)
-				_this.scene.setMorphsTime(actualTime);
-		}
-		_this.sceneData.currentTime = value;
-	}
-
-	/**
-	 * Update the time slider and other renderers/scenes when time has changed.
-	 */
-   const preRenderTimeUpdate = function() {
+    if (_this.scene) duration = _this.scene.getDuration();
+    const actualTime = (value / 100.0) * duration;
+    if (!_this.sceneData.nerveMapIsActive) {
+      if (pickerScene) pickerScene.setMorphsTime(actualTime);
+      if (_this.scene) _this.scene.setMorphsTime(actualTime);
+    }
+    _this.sceneData.currentTime = value;
+  };
+
+  /**
+   * Update the time slider and other renderers/scenes when time has changed.
+   */
+  const preRenderTimeUpdate = function () {
     let duration = 3000;
-    if (_this.scene)
-      duration = _this.scene.getDuration();
+    if (_this.scene) duration = _this.scene.getDuration();
     const currentTime = _this.zincRenderer.getCurrentTime();
-		for (let i = 0; i < timeChangedCallbacks.length;i++) {
-			timeChangedCallbacks[i](currentTime);
-		}
-		if (!_this.sceneData.nerveMapIsActive && pickerScene)
-			pickerScene.setMorphsTime(currentTime);
-		if (_this.sceneData.nerveMap && _this.sceneData.nerveMap.additionalReader)
-      _this.sceneData.nerveMap.additionalReader.setTime(currentTime /
-        duration);
-		_this.sceneData.currentTime = currentTime / duration * 100.0;
-  }
-
-	this.getCurrentTime = function() {
-		return _this.sceneData.currentTime;
-	}
+    for (let i = 0; i < timeChangedCallbacks.length; i++) {
+      timeChangedCallbacks[i](currentTime);
+    }
+    if (!_this.sceneData.nerveMapIsActive && pickerScene) pickerScene.setMorphsTime(currentTime);
+    if (_this.sceneData.nerveMap && _this.sceneData.nerveMap.additionalReader)
+      _this.sceneData.nerveMap.additionalReader.setTime(currentTime / duration);
+    _this.sceneData.currentTime = (currentTime / duration) * 100.0;
+  };
+
+  this.getCurrentTime = function () {
+    return _this.sceneData.currentTime;
+  };
 
   this.toggleSyncControl = (flag, rotateMode) => {
     let cameraControl = this.scene.getZincCameraControls();
@@ -107,33 +102,33 @@ const OrgansSceneData = function() {
     } else {
       cameraControl.disableSyncControl();
       this.NDCCameraControl = undefined;
-      cameraControl.setRotationMode("free");
+      cameraControl.setRotationMode('free');
     }
-  }
+  };
 
   this.isSyncControl = () => {
     return this.NDCCameraControl !== undefined;
-  }
+  };
 
   this.setSyncControlZoomToBox = (box) => {
     if (this.NDCCameraControl) {
       this.NDCCameraControl.zoomToBox(box, 2);
     }
-  }
+  };
 
   this.setSyncControlCallback = (callback) => {
     if (this.NDCCameraControl) {
       this.NDCCameraControl.setEventCallback(callback);
     }
-  }
+  };
 
   this.setSyncControlCenterZoom = (center, zoom) => {
     if (this.NDCCameraControl) {
       this.NDCCameraControl.setCenterZoom(center, zoom);
     }
-  }
+  };
 
-  const postRenderSelectedCoordinatesUpdate = function() {
+  const postRenderSelectedCoordinatesUpdate = function () {
     //It is animating, the coordinates may have been updated
     if (_this.zincRenderer.playAnimation && _this.liveUpdatesObjects) {
       _this.setupLiveCoordinates(_this.liveUpdatesObjects);
@@ -145,339 +140,350 @@ const OrgansSceneData = function() {
       _this.selectedScreenCoordinates.x = coord.x;
       _this.selectedScreenCoordinates.y = coord.y;
     }
-  }
+  };
 
-	const preRenderUpdateCallback = function() {
+  const preRenderUpdateCallback = function () {
     preRenderTimeUpdate();
-  }
+  };
 
-  const postRenderUpdateCallback = function() {
+  const postRenderUpdateCallback = function () {
     postRenderSelectedCoordinatesUpdate();
-	}
-
-	/**
-	 * Add a callback which will be called when time has changed
-	 */
-	this.addTimeChangedCallback = function(callback) {
-	  if (typeof(callback === "function"))
-	    timeChangedCallbacks.push(callback);
-	}
-
-	this.setTexturePos = function(value) {
-		if (_this.sceneData.nerveMap && _this.sceneData.nerveMap.additionalReader)
-			_this.sceneData.nerveMap.additionalReader.setSliderPos(value);
-	}
-
-	this.addSceneChangedCallback = function(callback) {
-	  if (typeof(callback === "function")) {
-	    sceneChangedCallbacks.push(callback);
-	  }
-	}
-
-	this.addOrganPartAddedCallback = function(callback) {
-    if (typeof(callback === "function"))
-      organPartAddedCallbacks.push(callback);
-  }
-
-	this.addOrganPartRemovedCallback = function(callback) {
-    if (typeof(callback === "function"))
-      organPartRemovedCallbacks.push(callback);
-  }
-
-  this.setFinishDownloadCallback = function(callback) {
-    if (typeof(callback === "function"))
-      finishDownloadCallback = callback;
-  }
-
-  this.unsetFinishDownloadCallback = function() {
-    finishDownloadCallback = undefined;
-  }
+  };
 
+  /**
+   * Add a callback which will be called when time has changed
+   */
+  this.addTimeChangedCallback = function (callback) {
+    if (typeof callback === 'function') timeChangedCallbacks.push(callback);
+  };
+
+  this.setTexturePos = function (value) {
+    if (_this.sceneData.nerveMap && _this.sceneData.nerveMap.additionalReader)
+      _this.sceneData.nerveMap.additionalReader.setSliderPos(value);
+  };
+
+  this.addSceneChangedCallback = function (callback) {
+    if (typeof callback === 'function') {
+      sceneChangedCallbacks.push(callback);
+    }
+  };
 
-  this.setDownloadErrorCallback = function(callback) {
-    if (typeof(callback === "function"))
-      downloadErrorCallback = callback;
-  }
+  this.addOrganPartAddedCallback = function (callback) {
+    if (typeof callback === 'function') organPartAddedCallbacks.push(callback);
+  };
 
-  this.unsetDownloadErrorCallback = function() {
+  this.addOrganPartRemovedCallback = function (callback) {
+    if (typeof callback === 'function') organPartRemovedCallbacks.push(callback);
+  };
+
+  this.setFinishDownloadCallback = function (callback) {
+    if (typeof callback === 'function') finishDownloadCallback = callback;
+  };
+
+  this.unsetFinishDownloadCallback = function () {
+    finishDownloadCallback = undefined;
+  };
+
+  this.setDownloadErrorCallback = function (callback) {
+    if (typeof callback === 'function') downloadErrorCallback = callback;
+  };
+
+  this.unsetDownloadErrorCallback = function () {
     downloadErrorCallback = undefined;
-  }
+  };
 
-  this.getNamedObjectsToScreenCoordinates = function(name, camera) {
+  this.getNamedObjectsToScreenCoordinates = function (name, camera) {
     const vector = new THREE.Vector3();
-    vector.setFromMatrixPosition( obj.matrixWorld );
-    const widthHalf = (width/2);
-    const heightHalf = (height/2);
+    if (!_this.scene || !camera) {
+      return vector;
+    }
+    const zincObject =
+      _this.scene.findGeometriesWithGroupName(name)[0] ||
+      _this.scene.findGlyphsetsWithGroupName(name)[0] ||
+      _this.scene.findPointsetsWithGroupName(name)[0] ||
+      _this.scene.findLinesWithGroupName(name)[0];
+    const obj = zincObject?.getMorph?.() || zincObject?.morph;
+    if (!obj) {
+      return vector;
+    }
+    const renderer = _this.zincRenderer?.getThreeJSRenderer();
+    const width = renderer?.domElement?.clientWidth ?? _this.displayArea?.clientWidth ?? 0;
+    const height = renderer?.domElement?.clientHeight ?? _this.displayArea?.clientHeight ?? 0;
+    vector.setFromMatrixPosition(obj.matrixWorld);
+    const widthHalf = width / 2;
+    const heightHalf = height / 2;
     vector.project(camera);
-    vector.x = ( vector.x * widthHalf ) + widthHalf;
-    vector.y = - ( vector.y * heightHalf ) + heightHalf;
+    vector.x = vector.x * widthHalf + widthHalf;
+    vector.y = -(vector.y * heightHalf) + heightHalf;
     return vector;
-  }
+  };
 
-  const getIdObjectFromIntersect = function(intersected) {
+  const getIdObjectFromIntersect = function (intersected) {
     let id = undefined;
     let intersectedObject = undefined;
     if (intersected !== undefined) {
       let marker = false;
-      if (intersected.object.userData &&
-        intersected.object.userData.isMarker) {
+      if (intersected.object.userData && intersected.object.userData.isMarker) {
         marker = true;
         intersectedObject = intersected.object.userData.parent.getMorph();
       } else {
         intersectedObject = intersected.object;
       }
-      try {
+      if (intersectedObject?.userData?.userData?.annotation?.data) {
         intersectedObject.userData.userData.annotation.data.lastActionOnMarker = marker;
-      } finally { }
+      }
       if (intersectedObject) {
         if (intersectedObject.name) {
           id = intersectedObject.name;
         } else {
-          const annotations = _this.getAnnotationsFromObjects(
-            [intersectedObject], undefined);
+          const annotations = _this.getAnnotationsFromObjects([intersectedObject], undefined);
           if (annotations && annotations[0]) {
             id = annotations[0].data.group;
           }
         }
       }
     }
-    return {"id":id, "object":intersectedObject};
-  }
-
-	/**
-	 * Callback function when a pickable object has been picked. It will then
-	 * call functions in tissueViewer and cellPanel to show corresponding
-	 * informations.
-	 *
-	 * @callback
-	 */
-   const _pickingCallback = function() {
-		return function(intersects, window_x, window_y) {
+    return { id: id, object: intersectedObject };
+  };
+
+  /**
+   * Callback function when a pickable object has been picked. It will then
+   * call functions in tissueViewer and cellPanel to show corresponding
+   * informations.
+   *
+   * @callback
+   */
+  const _pickingCallback = function () {
+    return function (intersects, window_x, window_y) {
       const intersected = _this.getIntersectedObject(intersects);
       const idObject = getIdObjectFromIntersect(intersected);
-			const extraData = {
-				worldCoords: [
-					intersected ? intersected.point.x : 0,
-					intersected ? intersected.point.y : 0,
-					intersected ? intersected.point.z : 0,
-				],
-				intersected: intersected,
-				intersects: intersects,
+      const extraData = {
+        worldCoords: [
+          intersected ? intersected.point.x : 0,
+          intersected ? intersected.point.y : 0,
+          intersected ? intersected.point.z : 0,
+        ],
+        intersected: intersected,
+        intersects: intersects,
         instanceId: intersected?.instanceId ? intersected.instanceId : -1,
-			};
+      };
       const coords = { x: window_x, y: window_y };
       if (idObject.id) {
-				extraData.threeID = idObject.object?.id;
+        extraData.threeID = idObject.object?.id;
         if (idObject.object.userData.isGlyph) {
           if (idObject.object.name) {
-            _this.setSelectedByObjects([idObject.object], coords,
-							extraData, true);
-					} else {
-            _this.setSelectedByZincObjects(idObject.object.userData.getGlyphset(),
-							coords, extraData, true);
-					}
+            _this.setSelectedByObjects([idObject.object], coords, extraData, true);
+          } else {
+            _this.setSelectedByZincObjects(
+              idObject.object.userData.getGlyphset(),
+              coords,
+              extraData,
+              true,
+            );
+          }
         } else {
           _this.setSelectedByObjects([idObject.object], coords, extraData, true);
         }
         return;
       } else {
-		if (ignorePicking) return;
-				_this.setSelectedByObjects([], coords, extraData, true);
-			}
-		}
-	};
-
-	/**
-	 * Callback function when a pickable object has been hovered over.
-	 *
-	 * @callback
-	 */
-   const _hoverCallback = function() {
-		return function(intersects, window_x, window_y) {
+        if (ignorePicking) return;
+        _this.setSelectedByObjects([], coords, extraData, true);
+      }
+    };
+  };
+
+  /**
+   * Callback function when a pickable object has been hovered over.
+   *
+   * @callback
+   */
+  const _hoverCallback = function () {
+    return function (intersects, window_x, window_y) {
       const intersected = _this.getIntersectedObject(intersects);
       const idObject = getIdObjectFromIntersect(intersected);
-			const extraData = {
-				worldCoords: [
-					intersected ? intersected.point.x : 0,
-					intersected ? intersected.point.y : 0,
-					intersected ? intersected.point.z : 0,
-				],
+      const extraData = {
+        worldCoords: [
+          intersected ? intersected.point.x : 0,
+          intersected ? intersected.point.y : 0,
+          intersected ? intersected.point.z : 0,
+        ],
         instanceId: intersected?.instanceId ? intersected.instanceId : -1,
-			}
+      };
       const coords = { x: window_x, y: window_y };
       if (idObject.id) {
-				extraData.threeID = idObject.object?.id;
-        _this.displayArea.style.cursor = "pointer";
+        extraData.threeID = idObject.object?.id;
+        _this.displayArea.style.cursor = 'pointer';
         _this.setHighlightedByObjects([idObject.object], coords, extraData, true);
         return;
+      } else {
+        _this.displayArea.style.cursor = 'auto';
+        _this.setHighlightedByObjects([], coords, extraData, true);
+      }
+    };
+  };
+
+  const changeOrganPartsVisibilityForScene = function (scene, name, value, type) {
+    if (type == 'all' || type == 'geometries') {
+      const geometries = scene.findGeometriesWithGroupName(name);
+      for (let i = 0; i < geometries.length; i++) {
+        geometries[i].setVisibility(value);
+      }
+    }
+    if (type == 'all' || type == 'glyphsets') {
+      const glyphsets = scene.findGlyphsetsWithGroupName(name);
+      for (let i = 0; i < glyphsets.length; i++) {
+        glyphsets[i].setVisibility(value);
+      }
+    }
+    if (type == 'all' || type == 'pointsets') {
+      const pointsets = scene.findPointsetsWithGroupName(name);
+      for (let i = 0; i < pointsets.length; i++) {
+        pointsets[i].setVisibility(value);
       }
-      else {
-				_this.displayArea.style.cursor = "auto";
-				_this.setHighlightedByObjects([], coords, extraData, true);
+    }
+    if (type == 'all' || type == 'lines') {
+      const lines = scene.findLinesWithGroupName(name);
+      for (let i = 0; i < lines.length; i++) {
+        lines[i].setVisibility(value);
       }
-		}
-	};
-
-	const changeOrganPartsVisibilityForScene = function(scene, name, value, type) {
-		if (type == "all" || type == "geometries") {
-			const geometries = scene.findGeometriesWithGroupName(name);
-			for (let i = 0; i < geometries.length; i ++ ) {
-				geometries[i].setVisibility(value);
-			}
-		}
-		if (type == "all" || type == "glyphsets") {
-			const glyphsets = scene.findGlyphsetsWithGroupName(name);
-			for (let i = 0; i < glyphsets.length; i ++ ) {
-				glyphsets[i].setVisibility(value);
-			}
-		}
-		if (type == "all" || type == "pointsets") {
-			const pointsets = scene.findPointsetsWithGroupName(name);
-			for (let i = 0; i < pointsets.length; i ++ ) {
-				pointsets[i].setVisibility(value);
-			}
-		}
-		if (type == "all" || type == "lines") {
-			const lines = scene.findLinesWithGroupName(name);
-			for (let i = 0; i < lines.length; i ++ ) {
-				lines[i].setVisibility(value);
-			}
-		}
-	}
-
-	/**
-	 * Change visibility for parts of the current scene.
-	 */
-	this.changeGeometriesVisibility = function(name, value) {
-		changeOrganPartsVisibilityForScene(_this.scene, name, value, 'geometries');
-		if (pickerScene)
-			changeOrganPartsVisibilityForScene(pickerScene, name, value, 'geometries');
-	}
-
-	/**
-	 * Change visibility for parts of the current scene.
-	 */
-	this.changeGlyphsetsVisibility = function(name, value) {
-		changeOrganPartsVisibilityForScene(_this.scene, name, value, 'glyphsets');
-		if (pickerScene)
-			changeOrganPartsVisibilityForScene(pickerScene, name, value, 'glyphsets');
-	}
-
-	/**
-	 * Change visibility for parts of the current scene.
-	 */
-	this.changeLinesVisibility = function(name, value) {
-		changeOrganPartsVisibilityForScene(_this.scene, name, value, 'lines');
-		if (pickerScene)
-			changeOrganPartsVisibilityForScene(pickerScene, name, value, 'lines');
-	}
-
-	/**
-	 * Change visibility for parts of the current scene.
-	 */
-	this.changePointsetsVisibility = function(name, value) {
-		changeOrganPartsVisibilityForScene(_this.scene, name, value, 'pointsets');
-		if (pickerScene)
-			changeOrganPartsVisibilityForScene(pickerScene, name, value, 'pointsets');
-  }
-
-	/**
-	 * Change visibility for parts of the current scene.
-	 */
-	this.changeOrganPartsVisibility = function(name, value, typeIn) {
-		let type = "all";
-		if (typeIn !== undefined)
-			type = typeIn;
-		changeOrganPartsVisibilityForScene(_this.scene, name, value, type);
-		if (pickerScene)
-			changeOrganPartsVisibilityForScene(pickerScene, name, value, type);
-	}
-
-	this.changeOrganPartsVisibilityCallback = function(name) {
-		return function(value) {
-			_this.changeOrganPartsVisibility(name, value);
-		}
-	}
-
-	this.changeBackgroundColour = function(backgroundColourString) {
-		const colour = new THREE.Color(backgroundColourString);
-		if (_this.zincRenderer) {
-			const internalRenderer = _this.zincRenderer.getThreeJSRenderer();
-			internalRenderer.setClearColor( colour, 1 );
-		}
-	}
-
-	const addOrganPart = function(systemName, partName, useDefautColour, zincObject) {
-    for (let i = 0; i < organPartAddedCallbacks.length;i++) {
+    }
+  };
+
+  /**
+   * Change visibility for parts of the current scene.
+   */
+  this.changeGeometriesVisibility = function (name, value) {
+    changeOrganPartsVisibilityForScene(_this.scene, name, value, 'geometries');
+    if (pickerScene) changeOrganPartsVisibilityForScene(pickerScene, name, value, 'geometries');
+  };
+
+  /**
+   * Change visibility for parts of the current scene.
+   */
+  this.changeGlyphsetsVisibility = function (name, value) {
+    changeOrganPartsVisibilityForScene(_this.scene, name, value, 'glyphsets');
+    if (pickerScene) changeOrganPartsVisibilityForScene(pickerScene, name, value, 'glyphsets');
+  };
+
+  /**
+   * Change visibility for parts of the current scene.
+   */
+  this.changeLinesVisibility = function (name, value) {
+    changeOrganPartsVisibilityForScene(_this.scene, name, value, 'lines');
+    if (pickerScene) changeOrganPartsVisibilityForScene(pickerScene, name, value, 'lines');
+  };
+
+  /**
+   * Change visibility for parts of the current scene.
+   */
+  this.changePointsetsVisibility = function (name, value) {
+    changeOrganPartsVisibilityForScene(_this.scene, name, value, 'pointsets');
+    if (pickerScene) changeOrganPartsVisibilityForScene(pickerScene, name, value, 'pointsets');
+  };
+
+  /**
+   * Change visibility for parts of the current scene.
+   */
+  this.changeOrganPartsVisibility = function (name, value, typeIn) {
+    let type = 'all';
+    if (typeIn !== undefined) type = typeIn;
+    changeOrganPartsVisibilityForScene(_this.scene, name, value, type);
+    if (pickerScene) changeOrganPartsVisibilityForScene(pickerScene, name, value, type);
+  };
+
+  this.changeOrganPartsVisibilityCallback = function (name) {
+    return function (value) {
+      _this.changeOrganPartsVisibility(name, value);
+    };
+  };
+
+  this.changeBackgroundColour = function (backgroundColourString) {
+    const colour = new THREE.Color(backgroundColourString);
+    if (_this.zincRenderer) {
+      const internalRenderer = _this.zincRenderer.getThreeJSRenderer();
+      internalRenderer.setClearColor(colour, 1);
+    }
+  };
+
+  const addOrganPart = function (systemName, partName, useDefautColour, zincObject) {
+    for (let i = 0; i < organPartAddedCallbacks.length; i++) {
       organPartAddedCallbacks[i](zincObject, _this.scene.isTimeVarying());
     }
-    if (useDefautColour)
-      modelsLoader.setGeometryColour(zincObject, systemName, partName);
-		const annotation = new Annotation();
+    if (useDefautColour) modelsLoader.setGeometryColour(zincObject, systemName, partName);
+    const annotation = new Annotation();
     const region = zincObject.region.getFullPath();
-		annotation.data = {species:_this.sceneData.currentSpecies, system:systemName,
-      part:partName, group:zincObject.groupName, region: region, uuid:zincObject.uuid,
-      lastActionOnMarker: false};
-		zincObject.userData["annotation"] = annotation;
-	}
-
-	const removeOrganPart = function(systemName, partName, useDefautColour, zincObject) {
-    for (let i = 0; i < organPartRemovedCallbacks.length;i++) {
+    annotation.data = {
+      species: _this.sceneData.currentSpecies,
+      system: systemName,
+      part: partName,
+      group: zincObject.groupName,
+      region: region,
+      uuid: zincObject.uuid,
+      lastActionOnMarker: false,
+    };
+    zincObject.userData['annotation'] = annotation;
+  };
+
+  const removeOrganPart = function (systemName, partName, useDefautColour, zincObject) {
+    for (let i = 0; i < organPartRemovedCallbacks.length; i++) {
       organPartRemovedCallbacks[i](zincObject);
     }
-	}
+  };
 
   /**
    * New organs geometry has been added to the scene, add UIs and make
    * sure the viewport is correct.
    */
-  const _addOrganPartCallback = function(systemName, partName, useDefautColour) {
-    return function(zincObject) {
+  const _addOrganPartCallback = function (systemName, partName, useDefautColour) {
+    return function (zincObject) {
       addOrganPart(systemName, partName, useDefautColour, zincObject);
-    }
-  }
+    };
+  };
 
   /**
    * Organs geometry has been removed to the scene.
    */
-  const _removeOrganPartCallback = function(systemName, partName, useDefautColour) {
-    return function(zincObject) {
+  const _removeOrganPartCallback = function (systemName, partName, useDefautColour) {
+    return function (zincObject) {
       removeOrganPart(systemName, partName, useDefautColour, zincObject);
-    }
-  }
+    };
+  };
 
-  const downloadCompletedCallback = function() {
-    return function() {
+  const downloadCompletedCallback = function () {
+    return function () {
       _this.settingsChanged();
       _this.sceneData.timeVarying = _this.scene.isTimeVarying();
-      if (finishDownloadCallback)
-        finishDownloadCallback();
-    }
-  }
+      if (finishDownloadCallback) finishDownloadCallback();
+    };
+  };
 
   //The payload can either be a zinc object when the loading is successful or
   //an object containg the details of error message on failure.
   //We only use it to handle an error
-  const singleItemFinishCallback = function() {
-    return function(payload) {
-      if (payload?.type === "Error") {
+  const singleItemFinishCallback = function () {
+    return function (payload) {
+      if (payload?.type === 'Error') {
         if (downloadErrorCallback) {
           const error = {
             xhr: payload.xhr,
-            type: "download-error",
+            type: 'download-error',
           };
           downloadErrorCallback(error);
         }
       }
-    }
-  }
+    };
+  };
+
+  const getOrganDetails = function (systemName, partName) {
+    return organsFileMap[_this.sceneData.currentSpecies]?.[systemName]?.[partName];
+  };
 
   /**
    * Toggle data field displays. Data fields displays flow/pressure and      <button @click="play">Play</button>
    * other activities of the organs.
    */
-  this.updateFieldvisibility = function(dataFields, value) {
-    for ( let i = 0; i < dataFields.length; i ++ ) {
+  this.updateFieldvisibility = function (dataFields, value) {
+    for (let i = 0; i < dataFields.length; i++) {
       if (value != i) {
         const geometryName = dataFields[i].PartName;
         _this.changeOrganPartsVisibility(geometryName, false);
@@ -485,17 +491,21 @@ const OrgansSceneData = function() {
     }
     if (value > -1) {
       const partName = dataFields[value].PartName;
-      if ((_this.scene.findGeometriesWithGroupName(partName).length > 0) ||
-        (_this.scene.findGlyphsetsWithGroupName(partName).length > 0)) {
+      if (
+        _this.scene.findGeometriesWithGroupName(partName).length > 0 ||
+        _this.scene.findGlyphsetsWithGroupName(partName).length > 0
+      ) {
         _this.changeOrganPartsVisibility(partName, true);
       } else {
         const partDetails = getOrganDetails(dataFields[value].SystemName, partName);
         if (partDetails != undefined) {
-          _this.scene.loadMetadataURL(modelsLoader.getOrgansDirectoryPrefix() + "/" + partDetails.meta);
+          _this.scene.loadMetadataURL(
+            modelsLoader.getOrgansDirectoryPrefix() + '/' + partDetails.meta,
+          );
         }
       }
     }
-  }
+  };
 
   /**
    * Return an array containing name(s) of species that also contains the
@@ -503,152 +513,162 @@ const OrgansSceneData = function() {
    *
    * @returns {Array} containing species name
    */
-  this.getAvailableSpecies = function(currentSpecies, currentSystem, currentPart) {
+  this.getAvailableSpecies = function (currentSpecies, currentSystem, currentPart) {
     const availableSpecies = new Array();
-    availableSpecies.push("none");
+    availableSpecies.push('none');
     const keysArray = Object.keys(organsFileMap);
-    for (index in keysArray) {
-      const species = keysArray[index];
+    for (const species of keysArray) {
       if (species != currentSpecies) {
-        if (organsFileMap[species].hasOwnProperty(currentSystem) &&
-            organsFileMap[species][currentSystem].hasOwnProperty(currentPart)) {
+        if (
+          Object.hasOwn(organsFileMap[species], currentSystem) &&
+          Object.hasOwn(organsFileMap[species][currentSystem], currentPart)
+        ) {
           availableSpecies.push(species);
         }
       }
     }
     return availableSpecies;
-  }
+  };
 
   /**
    * Return the center and size of the cuurrent viewing scene
    */
-  this.getCentreAndSize = function() {
+  this.getCentreAndSize = function () {
     const vector = new THREE.Vector3();
     const boundingBox = this.scene.getBoundingBox();
     boundingBox.getCenter(vector);
     const centre = [vector.x, vector.y, vector.z];
     boundingBox.getSize(vector);
     const size = [vector.x, vector.y, vector.z];
-    return {centre, size};
-  }
+    return { centre, size };
+  };
 
-  const setSceneData = function(speciesName, systemName, partName, organsDetails) {
+  const setSceneData = function (speciesName, systemName, partName) {
     _this.sceneData.nerveMapIsActive = false;
     _this.sceneData.nerveMap = undefined;
-    _this.sceneData.metaURL = "";
-    _this.sceneData.viewURL = "";
+    _this.sceneData.metaURL = '';
+    _this.sceneData.viewURL = '';
     _this.sceneData.currentSpecies = speciesName;
     _this.sceneData.currentSystem = systemName;
     _this.sceneData.currentPart = partName;
     _this.sceneData.currentTime = 0.0;
     _this.sceneData.timeVarying = false;
     // This is used as title
-    let name = "";
-    if (speciesName)
-      name = speciesName + "/";
-    if (systemName)
-      name = systemName + "/";
-    if (partName)
-      name = partName;
+    let name = '';
+    if (speciesName) name = speciesName + '/';
+    if (systemName) name = systemName + '/';
+    if (partName) name = partName;
     _this.sceneData.currentName = name;
-  }
-
-  this.loadOrgansFromURL = function(url, speciesName, systemName, partName, viewURL, clearFirst, options) {
+  };
+
+  this.loadOrgansFromURL = function (
+    url,
+    speciesName,
+    systemName,
+    partName,
+    viewURL,
+    clearFirst,
+    options,
+  ) {
     if (_this.zincRenderer) {
-      if (partName && (_this.sceneData.metaURL !== url)) {
-          setSceneData(speciesName, systemName, partName, undefined);
-          const name = _this.sceneData.currentName;
-          let organScene = _this.zincRenderer.getSceneByName(name);
-          if (organScene) {
-            if (clearFirst)
-              organScene.clearAll();
-          } else {
-            organScene = _this.zincRenderer.createScene(name);
-          }
-          _this.selectObjectOnPick = true;
-          for (let i = 0; i < sceneChangedCallbacks.length;i++) {
-            sceneChangedCallbacks[i](_this.sceneData);
-          }
-          if (viewURL && viewURL != "") {
-            _this.sceneData.viewURL = viewURL;
-            organScene.loadViewURL(_this.sceneData.viewURL);
-          } else {
-            _this.sceneData.viewURL = undefined;
-          }
-          _this.sceneData.metaURL = url;
-          organScene.addZincObjectAddedCallbacks(_addOrganPartCallback(systemName, partName, false));
-          organScene.addZincObjectRemovedCallbacks(_removeOrganPartCallback(undefined, partName, false));
-          organScene.loadMetadataURL(url, singleItemFinishCallback(), downloadCompletedCallback(), options);
-          _this.scene = organScene;
-          _this.zincRenderer.setCurrentScene(organScene);
-          _this.graphicsHighlight.reset();
-          const zincCameraControl = organScene.getZincCameraControls();
-          zincCameraControl.enableRaycaster(organScene, _pickingCallback(), _hoverCallback());
-          zincCameraControl.setMouseButtonAction("AUXILIARY", "ZOOM");
-          zincCameraControl.setMouseButtonAction("SECONDARY", "PAN");
+      if (partName && _this.sceneData.metaURL !== url) {
+        setSceneData(speciesName, systemName, partName);
+        const name = _this.sceneData.currentName;
+        let organScene = _this.zincRenderer.getSceneByName(name);
+        if (organScene) {
+          if (clearFirst) organScene.clearAll();
+        } else {
+          organScene = _this.zincRenderer.createScene(name);
+        }
+        _this.selectObjectOnPick = true;
+        for (let i = 0; i < sceneChangedCallbacks.length; i++) {
+          sceneChangedCallbacks[i](_this.sceneData);
+        }
+        if (viewURL && viewURL != '') {
+          _this.sceneData.viewURL = viewURL;
+          organScene.loadViewURL(_this.sceneData.viewURL);
+        } else {
+          _this.sceneData.viewURL = undefined;
+        }
+        _this.sceneData.metaURL = url;
+        organScene.addZincObjectAddedCallbacks(_addOrganPartCallback(systemName, partName, false));
+        organScene.addZincObjectRemovedCallbacks(
+          _removeOrganPartCallback(undefined, partName, false),
+        );
+        organScene.loadMetadataURL(
+          url,
+          singleItemFinishCallback(),
+          downloadCompletedCallback(),
+          options,
+        );
+        _this.scene = organScene;
+        _this.zincRenderer.setCurrentScene(organScene);
+        _this.graphicsHighlight.reset();
+        const zincCameraControl = organScene.getZincCameraControls();
+        zincCameraControl.enableRaycaster(organScene, _pickingCallback(), _hoverCallback());
+        zincCameraControl.setMouseButtonAction('AUXILIARY', 'ZOOM');
+        zincCameraControl.setMouseButtonAction('SECONDARY', 'PAN');
       }
     }
-  }
+  };
 
-  this.loadGLTFFromURL = function(url, partName, clearFirst) {
+  this.loadGLTFFromURL = function (url, partName, clearFirst) {
     if (_this.zincRenderer) {
-      if (partName && (_this.sceneData.metaURL !== url)) {
-          setSceneData(undefined, undefined, partName, undefined);
-          const name = _this.sceneData.currentName;
-          let organScene = _this.zincRenderer.getSceneByName(name);
-          if (organScene) {
-            if (clearFirst)
-              organScene.clearAll();
-          } else {
-            organScene = _this.zincRenderer.createScene(name);
-          }
-          for (let i = 0; i < sceneChangedCallbacks.length;i++) {
-            sceneChangedCallbacks[i](_this.sceneData);
-          }
-          _this.sceneData.viewURL = undefined;
-          _this.sceneData.metaURL = url;
-          organScene.addZincObjectAddedCallbacks(_addOrganPartCallback(undefined, partName, false));
-          organScene.addZincObjectRemovedCallbacks(_removeOrganPartCallback(undefined, partName, false));
-          organScene.loadGLTF(url, undefined, downloadCompletedCallback());
-          _this.scene = organScene;
-          _this.zincRenderer.setCurrentScene(organScene);
-          _this.graphicsHighlight.reset();
-          const zincCameraControl = organScene.getZincCameraControls();
-          zincCameraControl.enableRaycaster(organScene, _pickingCallback(), _hoverCallback());
-          zincCameraControl.setMouseButtonAction("AUXILIARY", "ZOOM");
-          zincCameraControl.setMouseButtonAction("SECONDARY", "PAN");
+      if (partName && _this.sceneData.metaURL !== url) {
+        setSceneData(undefined, undefined, partName);
+        const name = _this.sceneData.currentName;
+        let organScene = _this.zincRenderer.getSceneByName(name);
+        if (organScene) {
+          if (clearFirst) organScene.clearAll();
+        } else {
+          organScene = _this.zincRenderer.createScene(name);
+        }
+        for (let i = 0; i < sceneChangedCallbacks.length; i++) {
+          sceneChangedCallbacks[i](_this.sceneData);
+        }
+        _this.sceneData.viewURL = undefined;
+        _this.sceneData.metaURL = url;
+        organScene.addZincObjectAddedCallbacks(_addOrganPartCallback(undefined, partName, false));
+        organScene.addZincObjectRemovedCallbacks(
+          _removeOrganPartCallback(undefined, partName, false),
+        );
+        organScene.loadGLTF(url, undefined, downloadCompletedCallback());
+        _this.scene = organScene;
+        _this.zincRenderer.setCurrentScene(organScene);
+        _this.graphicsHighlight.reset();
+        const zincCameraControl = organScene.getZincCameraControls();
+        zincCameraControl.enableRaycaster(organScene, _pickingCallback(), _hoverCallback());
+        zincCameraControl.setMouseButtonAction('AUXILIARY', 'ZOOM');
+        zincCameraControl.setMouseButtonAction('SECONDARY', 'PAN');
       }
     }
-  }
+  };
 
-  this.alignCameraWithSelectedObject = function(transitionTime) {
+  this.alignCameraWithSelectedObject = function (transitionTime) {
     const objects = _this.graphicsHighlight.getSelected();
     if (objects && objects[0] && objects[0].userData) {
       _this.scene.alignObjectToCameraView(objects[0].userData, transitionTime);
     }
-  }
-
-	/**
-	 * initialise loading of the html layout for the organs panel, this is
-	 * called when the {@link PJP.OrgansViewer} is created.
-	 *
-	 * @async
-	 */
-	 this.initialise = async function(displayAreaIn) {
-	   await _this.initialiseRenderer(displayAreaIn);
-	   if (_this.zincRenderer) {
-       _this.zincRenderer.addPreRenderCallbackFunction(() => {
-          preRenderUpdateCallback();
-        });
-       _this.zincRenderer.addPostRenderCallbackFunction(() => {
-        postRenderUpdateCallback()
-      });
-     }
-  }
+  };
 
-}
+  /**
+   * initialise loading of the html layout for the organs panel, this is
+   * called when the {@link PJP.OrgansViewer} is created.
+   *
+   * @async
+   */
+  this.initialise = async function (displayAreaIn) {
+    await _this.initialiseRenderer(displayAreaIn);
+    if (_this.zincRenderer) {
+      _this.zincRenderer.addPreRenderCallbackFunction(() => {
+        preRenderUpdateCallback();
+      });
+      _this.zincRenderer.addPostRenderCallbackFunction(() => {
+        postRenderUpdateCallback();
+      });
+    }
+  };
+};
 
 OrgansViewer.prototype = Object.create(RendererModule.prototype);
-export {
-	OrgansViewer
-}
+export { OrgansViewer };