@abi-software/scaffoldvuer 1.11.0-demo.3 → 1.11.1

package/src/components/ScaffoldVuer.vue

@@ -104,15 +104,15 @@
             @object-selected="objectSelected"
             @object-hovered="objectHovered"
             @drawer-toggled="drawerToggled"
-            @checked-regions="setCheckedRegions"
           />
         </template>
       </el-popover>
       <div class="primitive-controls-box">
         <primitive-controls
-          v-if="viewingMode === 'Exploration'"
           ref="primitiveControls"
           :createData="createData"
+          :viewingMode="viewingMode"
+          :usageConfig="usageConfig"
           @primitivesUpdated="primitivesUpdated"
         />
       </div>
@@ -457,11 +457,20 @@ import { AnnotationService } from '@abi-software/sparc-annotation';
 import { EventNotifier } from "../scripts/EventNotifier.js";
 import { OrgansViewer } from "../scripts/OrgansRenderer.js";
 import { SearchIndex } from "../scripts/Search.js";
-import { mapState } from 'pinia';
+import { mapState, mapStores } from 'pinia';
 import { useMainStore } from "@/store/index";
 import { getNerveMaps } from "../scripts/MappedNerves.js";
+import { getOrganMaps } from '../scripts/MappedOrgans.js';
 const nervesMap = getNerveMaps();
-let totalNerves = 0, foundNerves = 0;
+const organsMap = getOrganMaps();
+let foundNerves = 0;
+
+const haveSameElements = (arr1, arr2) => {
+  if (arr1.length !== arr2.length) return false;
+  return arr1.sort().every((value, index) => {
+    return value === arr2.sort()[index]
+  });
+}
 
 /**
  * A vue component of the scaffold viewer.
@@ -680,8 +689,10 @@ export default {
      */
     isNerves: {
       type: Object,
-      default: {
-        regions: ["nerves"]
+      default: function () {
+        return {
+          regions: ["nerves"]
+        };
       },
     },
     /**
@@ -762,6 +773,18 @@ export default {
       type: Boolean,
       default: true,
     },
+    /**
+     * Manage the settings when used in standalone or as child component.
+     */
+    usageConfig: {
+      type: Object,
+      default: function () {
+        return {
+          showTubeLinesControls: true,
+          tubeLines: false,
+        };
+      },
+    },
   },
   provide() {
     return {
@@ -891,7 +914,7 @@ export default {
         group: "",
         isSearch: false,
       }),
-      checkedRegions: []
+      //checkedRegions: []
     };
   },
   watch: {
@@ -1019,6 +1042,7 @@ export default {
     this.$module = undefined;
   },
   computed: {
+    ...mapStores(useMainStore),
     ...mapState(useMainStore,  ['userToken']),
     annotationDisplay: function() {
       return this.viewingMode === 'Annotation' && this.tData.active === true &&
@@ -1039,52 +1063,34 @@ export default {
     },
   },
   methods: {
+    /*
     setCheckedRegions: function (data) {
       this.checkedRegions = data;
     },
+    */
     /**
-     * 
+     *
      * @param nerves array of nerve names, show all nerves if empty
      * @param processed boolean, whether unselect all checkboxes
      */
     zoomToNerves: function (nerves, processed = false) {
       if (this.$module.scene) {
-        const idsList = [];
+        this.$module.setIgnorePicking(processed);
+        const nervesList = [];
         const regions = this.$module.scene.getRootRegion().getChildRegions();
         regions.forEach((region) => {
           const regionName = region.getName();
-          if (processed) {
-            region.hideAllPrimitives();
-            if (regionName === 'Nerves') {
-              if (nerves.length) {
-                const ids = nerves.reduce((acc, nerve) => {
-                  const primitive = this.findObjectsWithGroupName(nerve)
-                  const ids = primitive.map((object) => {
-                    object.setVisibility(true);
-                    return `${object.region.uuid}/${object.uuid}`;
-                  });
-                  acc.push(...ids);
-                  return acc;
-                }, []);
-                idsList.push(...ids)
-              } else {
-                region.showAllPrimitives();
-                idsList.push(region.uuid)
-              }
-            }
-          } else {
-            // if the checkboxes are checked previously, restore them
-            const isChecked = this.checkedRegions.find(item => item.label === regionName);
-            if (isChecked) {
-              region.showAllPrimitives();
-              idsList.push(region.uuid);
+          if (regionName === 'Nerves') {
+            if (processed) {
+              nerves.forEach((nerve) => {
+                const primitives = this.findObjectsWithGroupName(nerve);
+                nervesList.push(...primitives);
+              });
             }
           }
         });
-        if (nerves.length) {
-          this.fitWindow();
-        }
-        this.$refs.scaffoldTreeControls.setCheckedKeys(idsList, processed);
+        this.$module.setSelectedByZincObjects(nervesList, undefined, {}, true);
+        this.$module.scene.viewAll();
       }
     },
     enableAxisDisplay: function (enable, miniaxes) {
@@ -1119,25 +1125,37 @@ export default {
       if (this.timeVarying === false && zincObject.isTimeVarying()) {
         this.timeVarying = true;
       }
+      const groupName = zincObject.groupName.toLowerCase();
+      if (groupName in organsMap) {
+        zincObject.setAnatomicalId(organsMap[groupName]);
+      }
+      const morph = zincObject.getGroup();
+      if (morph && morph.position) {
+        zincObject.userData.originalPos = [
+          morph.position.x,
+          morph.position.y,
+          morph.position.z
+        ];
+      } else {
+        zincObject.userData.originalPos = [0, 0, 0];
+      }
       //Temporary way to mark an object as nerves
       const regions = this.isNerves?.regions;
       if (regions) {
         const regionPath = zincObject.getRegion().getFullPath().toLowerCase();
         for (let i = 0; i < regions.length; i++) {
           if (regionPath.includes(regions[i].toLowerCase())) {
-            totalNerves++;
             zincObject.userData.isNerves = true;
-            const groupName = zincObject.groupName.toLowerCase();
+            zincObject.userData.defaultColour = `#${zincObject.getColourHex()}`;
+            zincObject.userData.isGreyScale = false;
             if (groupName in nervesMap) {
               foundNerves++;
               zincObject.setAnatomicalId(nervesMap[groupName]);
-              // console.log(groupName, zincObject.anatomicalId, zincObject.uuid)
             }
           } else {
             zincObject.userData.isNerves = false;
           }
         }
-
       }
       /**
        * Emit when a new object is added to the scene
@@ -1745,16 +1763,21 @@ export default {
                 this.$refs.scaffoldTreeControls.removeActive(false);
               }
             }
+
             //Store the following for state saving. Search will handle the case with more than 1
             //identifiers.
             if (event.identifiers.length === 1) {
-              this.lastSelected.isSearch = false;
-              this.lastSelected.region = regionPath;
-              this.lastSelected.group = event.identifiers[0].data.group;
+              this.lastSelected = {
+                isSearch: false,
+                region: regionPath,
+                group: event.identifiers[0].data.group,
+              }
             } else if (event.identifiers.length === 0) {
-              this.lastSelected.isSearch = false;
-              this.lastSelected.region = "";
-              this.lastSelected.group = "";
+              this.lastSelected = {
+                isSearch: false,
+                region: "",
+                group: "",
+              }
             }
             /**
              * Emit when an object is selected
@@ -1841,7 +1864,7 @@ export default {
      * @arg objects objects to be set for the selected
      */
     updatePrimitiveControls: function (objects) {
-      if (this.viewingMode === 'Exploration') {
+      if (this.viewingMode === 'Exploration' || this.viewingMode === 'Annotation') {
         this.selectedObjects = objects;
         if (this.selectedObjects && this.selectedObjects.length > 0) {
           this.$refs.primitiveControls.setObject(this.selectedObjects[0]);
@@ -1858,6 +1881,7 @@ export default {
      * is made
      */
     objectSelected: function (objects, propagate) {
+      if (this.$module.isIgnorePicking()) return;
       this.updatePrimitiveControls(objects);
       this.$module.setSelectedByZincObjects(objects, undefined, {}, propagate);
     },
@@ -2189,10 +2213,10 @@ export default {
      * Optional, can be used to update the view mode.
      */
     changeViewingMode: function (modeName) {
+      let objectIsPickable = true;
       if (this.$module) {
         if (modeName) {
           this.viewingMode = modeName;
-          this.setIsPickable(true);
         }
         this.clearAnnotationFeature();
         if (this.viewingMode === "Annotation") {
@@ -2214,9 +2238,11 @@ export default {
           this.activeDrawMode = undefined;
           this.createData.shape = "";
         } else if (this.viewingMode === "Neuron Connection") {
-          this.setIsPickable(false);
+          // enable to make organs and nerves clickable and searchable for neuron connection mode
+          objectIsPickable = false;
         }
         if ((this.viewingMode === "Exploration") ||
+          (this.viewingMode === "Neuron Connection") ||
           (this.viewingMode === "Annotation") &&
           (this.createData.shape === "")) {
             this.$module.selectObjectOnPick = true;
@@ -2224,6 +2250,9 @@ export default {
           this.$module.selectObjectOnPick = false;
         }
         this.cancelCreate();
+        if (modeName) {
+          this.setObjectIsPickable(objectIsPickable);
+        }
       }
     },
     /**
@@ -2249,30 +2278,36 @@ export default {
       this.tData.region = undefined;
     },
     /**
-     * Currently will only apply to non-nerve object
+     * Currently will apply to non-nerve object and object without anatomical id
      * @param flag boolean to control whether objects pickable
      */
-    setIsPickable: function (flag) {
+    setObjectIsPickable: function (flag) {
       const objects = this.$module.scene.getRootRegion().getAllObjects(true);
       objects.forEach((zincObject) => {
-        if (!zincObject.userData.isNerves) zincObject.setIsPickable(flag);
+        if (!zincObject.userData?.isNerves && !zincObject.anatomicalId) {
+          zincObject.setIsPickable(flag);
+        }
       });
     },
     /**
-     * 
+     * Update objects to greyscale or colour.
+     * This will update all objects except those with the provided nerves labels.
      * @param flag boolean
-     * @param nerves array of nerve names
+     * @param labels array of nerve names that exclude from greyscale
      */
-    setGreyScale: function (flag, nerves = []) {
+    setGreyScale: function (flag, labels = []) {
       const objects = this.$module.scene.getRootRegion().getAllObjects(true);
       objects.forEach((zincObject) => {
-        if (nerves.length) {
-          const groupName = zincObject.groupName.toLowerCase();
-          if (zincObject.userData.isNerves) {
-            if (!nerves.includes(groupName)) zincObject.setGreyScale(flag);
-          }
-        } else {
-          if (!zincObject.userData.isNerves) zincObject.setGreyScale(flag);
+        const groupName = zincObject.groupName.toLowerCase();
+        const isNerves = zincObject.userData?.isNerves;
+
+        const shouldUpdate =
+          (labels.length > 0 && isNerves && !labels.includes(groupName)) ||
+          (labels.length === 0 && !isNerves);
+
+        if (shouldUpdate) {
+          zincObject.setGreyScale(flag);
+          zincObject.userData.isGreyScale = flag;
         }
       });
       this.$refs.scaffoldTreeControls.updateAllNodeColours();
@@ -2285,7 +2320,7 @@ export default {
      */
     setColour: function (flag, forced = false) {
       if (this.isReady && this.$module.scene &&
-        typeof flag === "boolean" && 
+        typeof flag === "boolean" &&
         (forced || flag !== this.colourRadio)) {
         this.loading = true;
         //This can take sometime to finish , nextTick does not bring out
@@ -2296,7 +2331,7 @@ export default {
           this.colourRadio = flag;
         }, 100);
       }
-    }, 
+    },
     /**
      * @public
      * Function to toggle lines graphics.
@@ -2305,7 +2340,7 @@ export default {
      */
      setOutlines: function (flag, forced = false) {
       if (this.isReady && this.$module.scene &&
-        typeof flag === "boolean" && 
+        typeof flag === "boolean" &&
         (forced || flag !== this.outlinesRadio)) {
         this.outlinesRadio = flag;
         this.$nextTick(() => this.$refs.scaffoldTreeControls.setOutlines(flag));
@@ -2382,15 +2417,19 @@ export default {
         if (text === undefined || text === "" ||
           ((Array.isArray(text) && text.length === 0))
         ) {
-          this.lastSelected.region = "";
-          this.lastSelected.group = "";
-          this.lastSelected.isSearch = true;
+          this.lastSelected = {
+            region: "",
+            group: "",
+            isSearch: true,
+          }
           this.objectSelected([], true);
           return false;
         } else {
-          this.lastSelected.region = "";
-          this.lastSelected.group = text;
-          this.lastSelected.isSearch = true;
+          this.lastSelected = {
+            region: "",
+            group: text,
+            isSearch: true,
+          }
           const result = this.$_searchIndex.searchAndProcessResult(text);
           const zincObjects = result.zincObjects;
           if (zincObjects.length > 0) {
@@ -2477,7 +2516,7 @@ export default {
         if (options.offlineAnnotations) {
           sessionStorage.setItem('anonymous-annotation', options.offlineAnnotations);
         }
-        if ("outlines" in options) { 
+        if ("outlines" in options) {
           this.setOutlines(options.outlines);
         }
         if (options.viewingMode) {
@@ -2523,7 +2562,7 @@ export default {
         //this.$module.scene.createAxisDisplay(false);
         //this.$module.scene.enableAxisDisplay(true, true);
         this.isReady = true;
-        // console.log(`Total ${totalNerves}, found ${foundNerves}`);
+        //console.log(`found ${foundNerves}`);
         this.$nextTick(() => {
           this.restoreSettings(options);
           this.$emit("on-ready");
@@ -2546,6 +2585,7 @@ export default {
         colour: this.colourRadio,
         outlines: this.outlinesRadio,
         viewingMode: this.viewingMode,
+        usageConfig: this.usageConfig,
       };
       if (this.$refs.scaffoldTreeControls)
         state.visibility = this.$refs.scaffoldTreeControls.getState();
@@ -2667,6 +2707,7 @@ export default {
      */
     setURLAndState: function (newValue, state) {
       if (newValue != this._currentURL) {
+        const options = {};
         if (state?.format) this.fileFormat = state.format;
         this._currentURL = newValue;
         if (this.$refs.scaffoldTreeControls) this.$refs.scaffoldTreeControls.clear();
@@ -2695,13 +2736,17 @@ export default {
         if (this.fileFormat === "gltf") {
           this.$module.loadGLTFFromURL(newValue, "scene", true);
         } else {
+          if (this?.usageConfig?.tubeLines || state?.usageConfig?.tubeLines){
+            options.tubeLines = true;
+          }
           this.$module.loadOrgansFromURL(
             newValue,
             undefined,
             undefined,
             "scene",
             undefined,
-            true
+            true,
+            options
           );
         }
         if (this.$module && this.$module.scene) {

package/src/components/TransformationControls.vue

@@ -171,6 +171,7 @@ export default {
       if (object.isZincObject) {
         this.zincObject = markRaw(object);
         const morph = this.zincObject.getGroup();
+        const originalPos = this.zincObject.userData.originalPos;
         if (morph && morph.position) {
           this.x = morph.position.x;
           this.y = morph.position.y;
@@ -181,6 +182,18 @@ export default {
             this.scale = morph.scale.x;
           }
           this.enableScaling = this.zincObject.isTextureSlides ? false : true;
+          if (originalPos && this.boundingDims) {
+            this.min = [
+              originalPos[0] - this.boundingDims.size[0],
+              originalPos[1] - this.boundingDims.size[1],
+              originalPos[2] - this.boundingDims.size[2]
+            ];
+            this.max = [
+              originalPos[0] + this.boundingDims.size[0],
+              originalPos[1] + this.boundingDims.size[1],
+              originalPos[2] + this.boundingDims.size[2]
+            ];
+          }
         }
       } else {
         this.zincObject = undefined;
@@ -191,7 +204,9 @@ export default {
       }
     },
     modifyPosition: function() {
-      this.zincObject.setPosition(this.x, this.y, this.z);
+      if (this.zincObject) {
+        this.zincObject.setPosition(this.x, this.y, this.z);
+      }
     },
     modifyScale: function() {
       this.zincObject.setScaleAll(this.scale);

package/src/scripts/GraphicsHighlight.js

@@ -1,4 +1,5 @@
 import { THREE } from 'zincjs';
+import { objectsToZincObjects, NERVE_CONFIG } from "./Utilities";
 
 const setEmissiveColour = (fullList, colour, setDepthFunc) => {
   for (let i = 0; i < fullList.length; i++) {
@@ -117,11 +118,13 @@ const GraphicsHighlight = function() {
   */
 
   this.setHighlighted = function(objects) {
-    const previousHighlightedObjects = [...currentHighlightedObjects];
+    const previousHighlightedObjects = [...currentHighlightedObjects];    
+    this.setNervesStyle(previousHighlightedObjects);
     _this.resetHighlighted();
     // Selected object cannot be highlighted
     const array = getUnmatchingObjects(objects, currentSelectedObjects);
     const fullList = getFullListOfObjects(array);
+    this.setNervesStyle(array, NERVE_CONFIG.HIGHLIGHTED_COLOUR);
     setEmissiveColour(fullList, _this.highlightColour, false);
     currentHighlightedObjects = array;
     return isDifferent(currentHighlightedObjects, previousHighlightedObjects);
@@ -129,14 +132,16 @@ const GraphicsHighlight = function() {
 
   this.setSelected = function(objects) {
     // first find highlighted object that are not selected
-    const previousHSelectedObjects = [...currentSelectedObjects];
+    const previousSelectedObjects = [...currentSelectedObjects];
+    this.setNervesStyle(previousSelectedObjects);
     //const array = getUnmatchingObjects(currentHighlightedObjects, objects);
     _this.resetHighlighted();
     _this.resetSelected();
     const fullList = getFullListOfObjects(objects);
+    this.setNervesStyle(objects, NERVE_CONFIG.SELECTED_COLOUR);
     setEmissiveColour(fullList, _this.selectColour, false);
     currentSelectedObjects = objects;
-    return isDifferent(currentSelectedObjects, previousHSelectedObjects);
+    return isDifferent(currentSelectedObjects, previousSelectedObjects);
   }
 
   const getFullListOfObjects = function(objects) {
@@ -147,15 +152,45 @@ const GraphicsHighlight = function() {
     }
     return _temp2;
   }
+
+  /**
+   * 
+   * @param {*} target 
+   * @param {*} colour use colour as flag to set or reset the style
+   * @returns 
+   */
+  this.setNervesStyle = function(target, colour) {
+    const currentObjects = objectsToZincObjects(target);
+    if (currentObjects && currentObjects.length) {
+      const radius = colour ?  
+        NERVE_CONFIG.ZOOM_RADIUS : NERVE_CONFIG.DEFAULT_RADIUS;
+      const radialSegments = colour ? 
+        NERVE_CONFIG.ZOOM_RADIAL_SEGMENTS : NERVE_CONFIG.DEFAULT_RADIAL_SEGMENTS;
+      currentObjects.forEach((currentObject) => {
+        if (
+          currentObject.isTubeLines &&
+          currentObject.userData?.isNerves &&
+          !currentObject.userData?.isGreyScale
+        ) {
+          currentObject.setTubeLines(radius, radialSegments);
+          let hexString = colour ? colour : currentObject.userData?.defaultColour;
+          hexString = hexString.replace("#", "0x");
+          currentObject.setColourHex(hexString);
+        }
+      });
+    }
+  }
   
   this.resetHighlighted = function() {
     const fullList = getFullListOfObjects(currentHighlightedObjects);
+    this.setNervesStyle(currentHighlightedObjects);
     setEmissiveColour(fullList, _this.originalColour, true);
     currentHighlightedObjects = [];
   }
   
   this.resetSelected = function() {
     const fullList = getFullListOfObjects(currentSelectedObjects);
+    this.setNervesStyle(currentHighlightedObjects);
     setEmissiveColour(fullList, _this.originalColour, true);
     currentSelectedObjects = [];
   }

package/src/scripts/MappedNerves.js

@@ -822,7 +822,6 @@ const getNerveMaps = () => {
       });
     }
   });
-  console.log(curatedMap)
   return curatedMap;
 }
 

package/src/scripts/MappedOrgans.js

@@ -0,0 +1,50 @@
+const organsWithAnatomicalIds = [
+  {
+      "label": "urinary bladder",
+      "anatomicalId": "UBERON:0001255",
+  },
+  {
+      "label": "brainstem",
+      "anatomicalId": "UBERON:0002298",
+  },
+  {
+      "label": "caecum",
+      "anatomicalId": "UBERON:0001153",
+  },
+  {
+      "label": "colon",
+      "anatomicalId": "UBERON:0001155",
+  },
+  {
+      "label": "esophagus",
+      "anatomicalId": "UBERON:0001043",
+  },
+  {
+      "label": "small intestine",
+      "anatomicalId": "UBERON:0002108",
+  },
+  {
+      "label": "stomach",
+      "anatomicalId": "UBERON:0000945",
+  },
+  {
+      "label": "heart",
+      "anatomicalId": "UBERON:0000948",
+  },
+  {
+      "label": "lung",
+      "anatomicalId": "UBERON:0002048",
+  },
+];
+
+const getOrganMaps = () => {
+    const curatedMap = {};
+    organsWithAnatomicalIds.forEach((item) => {
+        const label = item.label.toLowerCase();
+        if (!(label in curatedMap))
+            curatedMap[label.toLowerCase()] = item["anatomicalId"];
+    });
+    return curatedMap;
+};
+
+export { getOrganMaps };

package/src/scripts/OrgansRenderer.js

@@ -44,6 +44,15 @@ const OrgansSceneData = function() {
 	const modelsLoader = ModelsLoaderIn;
   this.NDCCameraControl = undefined;
 	_this.typeName = "Organ Viewer";
+	let ignorePicking = false;
+
+	this.isIgnorePicking = function() {
+    	return ignorePicking;
+	}
+	
+	this.setIgnorePicking = function(value) {
+		ignorePicking = value;
+	}
 
 	this.getSceneData = function() {
 	  return _this.sceneData;
@@ -275,6 +284,7 @@ const OrgansSceneData = function() {
         }
         return;
       } else {
+		if (ignorePicking) return;
 				_this.setSelectedByObjects([], coords, extraData, true);
 			}
 		}
@@ -546,7 +556,7 @@ const OrgansSceneData = function() {
       _this.sceneData.currentName = name;
 	  }
 
-	  this.loadOrgansFromURL = function(url, speciesName, systemName, partName, viewURL, clearFirst) {
+	  this.loadOrgansFromURL = function(url, speciesName, systemName, partName, viewURL, clearFirst, options) {
 		  if (_this.zincRenderer) {
 			  if (partName && (_this.sceneData.metaURL !== url)) {
 			      setSceneData(speciesName, systemName, partName, undefined);
@@ -571,7 +581,7 @@ const OrgansSceneData = function() {
 			      _this.sceneData.metaURL = url;
 						organScene.addZincObjectAddedCallbacks(_addOrganPartCallback(systemName, partName, false));
 			      organScene.addZincObjectRemovedCallbacks(_removeOrganPartCallback(undefined, partName, false));
-						organScene.loadMetadataURL(url, singleItemFinishCallback(), downloadCompletedCallback());
+						organScene.loadMetadataURL(url, singleItemFinishCallback(), downloadCompletedCallback(), options);
 			      _this.scene = organScene;
 			      _this.zincRenderer.setCurrentScene(organScene);
 			      _this.graphicsHighlight.reset();