@abi-software/scaffoldvuer 1.11.0-demo.2 → 1.11.0

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>
@@ -290,7 +290,7 @@
         ref="backgroundPopover"
         :virtual-ref="backgroundIconRef"
         placement="top-start"
-        width="128"
+        width="320"
         :teleported="false"
         trigger="click"
         popper-class="background-popper non-selectable h-auto"
@@ -457,12 +457,21 @@ 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();
+const organsMap = getOrganMaps();
 let totalNerves = 0, 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.
  *
@@ -762,6 +771,16 @@ export default {
       type: Boolean,
       default: true,
     },
+    /**
+     * Manage the settings when used in standalone or as child component.
+     */
+    usageConfig: {
+      type: Object,
+      default: {
+        showTubeLinesControls: true,
+        tubeLines: false,
+      },
+    },
   },
   provide() {
     return {
@@ -864,6 +883,7 @@ export default {
       viewingMode: "Exploration",
       viewingModes: {
         "Exploration": "View and explore detailed visualization of 3D scaffolds",
+        "Neuron Connection": "Discover nerve connections by selecting a nerve and viewing its associated connections",
         "Annotation": ['View feature annotations', 'Add, comment on and view feature annotations'],
       },
       openMapRef: undefined,
@@ -890,7 +910,7 @@ export default {
         group: "",
         isSearch: false,
       }),
-      checkedRegions: []
+      //checkedRegions: []
     };
   },
   watch: {
@@ -1018,6 +1038,7 @@ export default {
     this.$module = undefined;
   },
   computed: {
+    ...mapStores(useMainStore),
     ...mapState(useMainStore,  ['userToken']),
     annotationDisplay: function() {
       return this.viewingMode === 'Annotation' && this.tData.active === true &&
@@ -1038,42 +1059,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') {
-              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 {
-            // if the checkboxes are checked previously, restore them
-            const isChecked = this.checkedRegions.find(item => item.label === regionName);
-            if (isChecked) {
-              region.showAllPrimitives();
-              const zincObjects = region.getAllObjects();
-              const ids = zincObjects.map(object => object.region.uuid);
-              idsList.push(...ids);
+          if (regionName === 'Nerves') {
+            if (processed) {
+              nerves.forEach((nerve) => {
+                const primitives = this.findObjectsWithGroupName(nerve);
+                nervesList.push(...primitives);
+              });
             }
           }
         });
-        this.fitWindow();
-        this.$refs.scaffoldTreeControls.setCheckedKeys([...new Set(idsList)], processed);
+        this.$module.setSelectedByZincObjects(nervesList, undefined, {}, true);
+        this.$module.scene.viewAll();
       }
     },
     enableAxisDisplay: function (enable, miniaxes) {
@@ -1108,25 +1121,27 @@ export default {
       if (this.timeVarying === false && zincObject.isTimeVarying()) {
         this.timeVarying = true;
       }
+      const groupName = zincObject.groupName.toLowerCase();
+      if (groupName in organsMap) {
+        zincObject.setAnatomicalId(organsMap[groupName]);
+      }
       //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
@@ -1734,16 +1749,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
@@ -1830,7 +1850,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]);
@@ -1847,6 +1867,7 @@ export default {
      * is made
      */
     objectSelected: function (objects, propagate) {
+      if (this.$module.isIgnorePicking()) return;
       this.updatePrimitiveControls(objects);
       this.$module.setSelectedByZincObjects(objects, undefined, {}, propagate);
     },
@@ -2178,6 +2199,7 @@ 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;
@@ -2197,14 +2219,16 @@ export default {
             this.addAnnotationFeature();
             this.loading = false;
           });
-        } else {
-          if (this.viewingMode === "Exploration") {
-            this.activeDrawTool = undefined;
-            this.activeDrawMode = undefined;
-            this.createData.shape = "";
-          }
+        } else if (this.viewingMode === "Exploration") {
+          this.activeDrawTool = undefined;
+          this.activeDrawMode = undefined;
+          this.createData.shape = "";
+        } else if (this.viewingMode === "Neuron Connection") {
+          // 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;
@@ -2212,6 +2236,9 @@ export default {
           this.$module.selectObjectOnPick = false;
         }
         this.cancelCreate();
+        if (modeName) {
+          this.setObjectIsPickable(objectIsPickable);
+        }
       }
     },
     /**
@@ -2237,20 +2264,36 @@ export default {
       this.tData.region = undefined;
     },
     /**
-     * 
+     * Currently will apply to non-nerve object and object without anatomical id
+     * @param flag boolean to control whether objects pickable
+     */
+    setObjectIsPickable: function (flag) {
+      const objects = this.$module.scene.getRootRegion().getAllObjects(true);
+      objects.forEach((zincObject) => {
+        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();
@@ -2263,7 +2306,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
@@ -2274,7 +2317,7 @@ export default {
           this.colourRadio = flag;
         }, 100);
       }
-    }, 
+    },
     /**
      * @public
      * Function to toggle lines graphics.
@@ -2283,7 +2326,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));
@@ -2360,15 +2403,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) {
@@ -2455,7 +2502,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) {
@@ -2501,7 +2548,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(`Total ${totalNerves}, found ${foundNerves}`);
         this.$nextTick(() => {
           this.restoreSettings(options);
           this.$emit("on-ready");
@@ -2524,6 +2571,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();
@@ -2645,6 +2693,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();
@@ -2673,13 +2722,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/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();

package/src/scripts/RendererModule.js

@@ -4,6 +4,7 @@ const THREE = Zinc.THREE;
 import { BaseModule } from './BaseModule';
 import { EVENT_TYPE } from "./EventNotifier";
 import GraphicsHighlight from "./GraphicsHighlight";
+import { objectsToZincObjects } from "./Utilities";
 
 /**
  * Create a {@link Zinc.Renderer} on the dom element with corresponding elementID.
@@ -112,8 +113,8 @@ RendererModule.prototype.getAnnotationsFromObjects = function(objects) {
 
 RendererModule.prototype.setHighlightedByObjects = function(
   objects, coords, extraData, propagateChanges) {
+  const zincObjects = objectsToZincObjects(objects);
   const changed = this.graphicsHighlight.setHighlighted(objects);
-  const zincObjects = this.objectsToZincObjects(objects);
   if (propagateChanges) {
     let eventType = EVENT_TYPE.MOVE;
     if (changed)
@@ -162,24 +163,6 @@ RendererModule.prototype.setupLiveCoordinates = function(zincObjects) {
   }
 }
 
-RendererModule.prototype.objectsToZincObjects = function(objects) {
-  const zincObjects = [];
-  for (let i = 0; i < objects.length; i++) {
-    let zincObject = objects[i].userData;
-    if (zincObject) {
-      if (zincObject.isGlyph || zincObject.isGlyphset) {
-        let glyphset = zincObject;
-        if (zincObject.isGlyph)
-          glyphset = zincObject.getGlyphset();
-        zincObjects.push(glyphset);
-      } else {
-        zincObjects.push(zincObject);
-      }
-    }
-  }
-  return zincObjects;
-}
-
 
 RendererModule.prototype.setSelectedByObjects = function(
   objects, coords, extraData, propagateChanges) {
@@ -190,7 +173,7 @@ RendererModule.prototype.setSelectedByObjects = function(
     changed = true;
   }
   if (changed || this.ignorePreviousSelected) {
-    const zincObjects = this.objectsToZincObjects(objects);
+    const zincObjects = objectsToZincObjects(objects);
     if (this.selectObjectOnPick) {
       this.setupLiveCoordinates(zincObjects);
     }