@abi-software/scaffoldvuer 1.10.0-beta.1 → 1.11.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.10.0-beta.1",
+  "version": "1.11.0-beta.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/map-utilities": "^1.6.0-beta.1",
+    "@abi-software/map-utilities": "^1.6.0",
     "@abi-software/sparc-annotation": "^0.3.2",
     "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",
@@ -54,7 +54,7 @@
     "vue": "^3.4.21",
     "vue-router": "^4.2.5",
     "vue3-component-svg-sprite": "^0.0.1",
-    "zincjs": "^1.14.0"
+    "zincjs": "^1.14.3"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.6.2",

package/src/components/ScaffoldTooltip.vue

@@ -218,7 +218,7 @@ export default {
     border-radius: 4px;
     white-space: nowrap;
     min-width: unset!important;
-    max-width:330px;
+    max-width:fit-content;
     width:unset!important;
     pointer-events: none;
     top: -15px !important;

package/src/components/ScaffoldTreeControls.vue

@@ -77,6 +77,7 @@ export default {
       drawerOpen: true,
       nodeNumbers: 0,
       module: undefined,
+      //checkedRegions: [],
     };
   },
   computed: {
@@ -91,9 +92,21 @@ export default {
         if (this.isReady) {
           // Updated colour when scaffold is ready
           this.setColourField(data);
+          // _helper is unchecked by default
+          //this.checkedRegions = data.filter(region => region.label !== '_helper');
         }
       },
     },
+    /*
+    checkedRegions: {
+      deep: true,
+      handler: function (data) {
+        if (this.isReady) {
+          this.$emit('checked-regions', data);
+        }
+      },
+    },
+    */
   },
   methods: {
     addTreeItem: function (parentContainer, item, object) {
@@ -221,7 +234,13 @@ export default {
         .getRootRegion()
         .findChildFromPath(node.regionPath);
       if (isRegion) {
-        isChecked ? region.showAllPrimitives() : region.hideAllPrimitives();
+        if (isChecked) {
+          region.showAllPrimitives();
+          //this.checkedRegions.push(node);
+        } else {
+          region.hideAllPrimitives();
+          //this.checkedRegions = this.checkedRegions.filter(region => region.label !== node.label);
+        }
       }
       if (isPrimitives) {
         const primitives = region.findObjectsWithGroupName(node.label);
@@ -514,13 +533,28 @@ export default {
         });
       }
     },
-    checkAllKeys: function () {
+    setCheckedKeys: function (ids, clear) {
+      this.$nextTick(() => {
+        if (clear) {
+          this.$refs.treeControls.$refs.regionTree.setCheckedKeys([]); // Clear previous checked keys
+        }
+        // this will be faster as it only requires region node ids only
+        // the number will be much less than all node ids
+        ids.forEach((id) => {
+          this.$refs.treeControls.$refs.regionTree.setChecked(id, true, true); // Set new checked keys
+        })
+      });
+    },
+    checkAllKeys: function (ignore = []) {
       const keysList = [];
       const ids = [];
       extractAllFullPaths(this.treeData[0], keysList);
+      const modifiedKeysList = keysList.filter((key) => {
+        return !ignore.some(item => key.includes(item));
+      });
       this.setTreeVisibilityWithFullPaths(
         this.treeData[0],
-        keysList,
+        modifiedKeysList,
         ids,
         true
       );

package/src/components/ScaffoldVuer.vue

@@ -109,6 +109,7 @@
       </el-popover>
       <div class="primitive-controls-box">
         <primitive-controls
+          v-show="viewingMode === 'Exploration' || viewingMode === 'Annotation'"
           ref="primitiveControls"
           :createData="createData"
           @primitivesUpdated="primitivesUpdated"
@@ -288,7 +289,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"
@@ -323,7 +324,7 @@
             <el-radio-group
               v-model="colourRadio"
               class="scaffold-radio"
-              @change="setColour"
+              @change="setColour(colourRadio, true)"
             >
               <el-radio :value="true">Colour</el-radio>
               <el-radio :value="false">Greyscale</el-radio>
@@ -335,7 +336,7 @@
             <el-radio-group
               v-model="outlinesRadio"
               class="scaffold-radio"
-              @change="setOutlines"
+              @change="setOutlines(outlinesRadio, true)"
             >
               <el-radio :value="true">Show</el-radio>
               <el-radio :value="false">Hide</el-radio>
@@ -437,7 +438,6 @@ import {
   findObjectsWithNames,
   updateBoundingBox,
 } from "../scripts/Utilities.js";
-
 import {
   ElButton as Button,
   ElCol as Col,
@@ -458,6 +458,9 @@ import { OrgansViewer } from "../scripts/OrgansRenderer.js";
 import { SearchIndex } from "../scripts/Search.js";
 import { mapState } from 'pinia';
 import { useMainStore } from "@/store/index";
+import { getNerveMaps } from "../scripts/MappedNerves.js";
+const nervesMap = getNerveMaps();
+let totalNerves = 0, foundNerves = 0;
 
 /**
  * A vue component of the scaffold viewer.
@@ -860,6 +863,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,
@@ -885,7 +889,8 @@ export default {
         region: "",
         group: "",
         isSearch: false,
-      })
+      }),
+      //checkedRegions: []
     };
   },
   watch: {
@@ -1033,6 +1038,91 @@ 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 nervesList = [];
+        let nervesUUID = undefined;
+        const regions = this.$module.scene.getRootRegion().getChildRegions();
+        regions.forEach((region) => {
+          const regionName = region.getName();
+          if (processed) {
+            if (regionName === 'Nerves') {
+              if (nerves.length) {
+                const ids = nerves.forEach((nerve) => {
+                  const primitives = this.findObjectsWithGroupName(nerve)
+                  nervesList.push(...primitives);
+                  primitives.forEach((primitive) => {
+                    primitive.setVisibility(true);
+                    nervesList.push(primitive);
+                    if (!nervesUUID) nervesUUID = primitive.region.uuid;
+                  });
+                });
+              }
+            }
+          }
+        });
+        if (nervesList.length) {
+          let box = this.$module.scene.getBoundingBoxOfZincObjects(nervesList);
+          if (box) this.$module.scene.viewAllWithBoundingBox(box);
+        }
+        if (nervesUUID) {
+          this.$refs.scaffoldTreeControls.setCheckedKeys([nervesUUID], false);
+        }
+      }
+
+      //The following hide all the other primitives
+      /*
+      if (this.$module.scene) {
+        const idsList = [];
+        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 primitives = this.findObjectsWithGroupName(nerve)
+                  const ids = primitives.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 (nerves.length) {
+          this.fitWindow();
+        }
+        this.$refs.scaffoldTreeControls.setCheckedKeys(idsList, processed);
+      }
+      */
+    },
     enableAxisDisplay: function (enable, miniaxes) {
       if (this.$module.scene) {
         this.$module.scene.enableAxisDisplay(enable, miniaxes);
@@ -1072,10 +1162,17 @@ export default {
         for (let i = 0; i < regions.length; i++) {
           if (regionPath.includes(regions[i].toLowerCase())) {
             zincObject.userData.isNerves = true;
+            const groupName = zincObject.groupName.toLowerCase();
+            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
@@ -1779,11 +1876,13 @@ export default {
      * @arg objects objects to be set for the selected
      */
     updatePrimitiveControls: function (objects) {
-      this.selectedObjects = objects;
-      if (this.selectedObjects && this.selectedObjects.length > 0) {
-        this.$refs.primitiveControls.setObject(this.selectedObjects[0]);
-      } else {
-        this.$refs.primitiveControls.setObject(undefined);
+      if (this.viewingMode === 'Exploration' || this.viewingMode === 'Annotation') {
+        this.selectedObjects = objects;
+        if (this.selectedObjects && this.selectedObjects.length > 0) {
+          this.$refs.primitiveControls.setObject(this.selectedObjects[0]);
+        } else {
+          this.$refs.primitiveControls.setObject(undefined);
+        }
       }
     },
     /**
@@ -2125,6 +2224,7 @@ export default {
      * Optional, can be used to update the view mode.
      */
     changeViewingMode: function (modeName) {
+      let nonNervesIsPickable = true;
       if (this.$module) {
         if (modeName) {
           this.viewingMode = modeName;
@@ -2144,12 +2244,12 @@ 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") {
+          nonNervesIsPickable = false;
         }
         if ((this.viewingMode === "Exploration") ||
           (this.viewingMode === "Annotation") &&
@@ -2159,6 +2259,9 @@ export default {
           this.$module.selectObjectOnPick = false;
         }
         this.cancelCreate();
+        if (modeName) {
+          this.setNonNervesIsPickable(nonNervesIsPickable);
+        }
       }
     },
     /**
@@ -2183,24 +2286,50 @@ export default {
       this.tData.visible = false;
       this.tData.region = undefined;
     },
+    /**
+     * Currently will only apply to non-nerve object
+     * @param flag boolean to control whether objects pickable
+     */
+    setNonNervesIsPickable: function (flag) {
+      const objects = this.$module.scene.getRootRegion().getAllObjects(true);
+      objects.forEach((zincObject) => {
+        if (!zincObject.userData.isNerves) zincObject.setIsPickable(flag);
+      });
+    },
+    /**
+     * 
+     * @param flag boolean
+     * @param nerves array of nerve names
+     */
+    setGreyScale: function (flag, nerves = []) {
+      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);
+        }
+      });
+      this.$refs.scaffoldTreeControls.updateAllNodeColours();
+    },
     /**
      * @public
      * Function to toggle colour/greyscale of primitives.
      * The parameter ``flag`` is a boolean, ``true`` (colour) and ``false`` (greyscale).
      * @arg {Boolean} `flag`
      */
-     setColour: function (flag) {
+    setColour: function (flag, forced = false) {
       if (this.isReady && this.$module.scene &&
-      typeof flag === "boolean" && flag !== this.colourRadio) {
+        typeof flag === "boolean" && 
+        (forced || flag !== this.colourRadio)) {
         this.loading = true;
         //This can take sometime to finish , nextTick does not bring out
         //the loading screen so I opt for timeout loop here.
         setTimeout(() => {
-          const objects = this.$module.scene.getRootRegion().getAllObjects(true);
-          objects.forEach((zincObject) => {
-            if (!zincObject.userData.isNerves) zincObject.setGreyScale(!flag);
-          });
-          this.$refs.scaffoldTreeControls.updateAllNodeColours();
+          this.setGreyScale(!flag)
           this.loading = false;
           this.colourRadio = flag;
         }, 100);
@@ -2212,9 +2341,10 @@ export default {
      * The parameter ``flag`` is a boolean, ``true`` to show lines, ``false`` to hide them.
      * @arg {Boolean} `flag`
      */
-     setOutlines: function (flag) {
+     setOutlines: function (flag, forced = false) {
       if (this.isReady && this.$module.scene &&
-      typeof flag === "boolean" && flag !== this.outlinesRadio) {
+        typeof flag === "boolean" && 
+        (forced || flag !== this.outlinesRadio)) {
         this.outlinesRadio = flag;
         this.$nextTick(() => this.$refs.scaffoldTreeControls.setOutlines(flag));
       }
@@ -2431,6 +2561,7 @@ export default {
         //this.$module.scene.createAxisDisplay(false);
         //this.$module.scene.enableAxisDisplay(true, true);
         this.isReady = true;
+        //console.log(`Total ${totalNerves}, found ${foundNerves}`);
         this.$nextTick(() => {
           this.restoreSettings(options);
           this.$emit("on-ready");