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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.11.0-demo.0",
+  "version": "1.11.0-demo.2",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -54,7 +54,7 @@
     "vue": "^3.4.21",
     "vue-router": "^4.2.5",
     "vue3-component-svg-sprite": "^0.0.1",
-    "zincjs": "^1.14.1"
+    "zincjs": "^1.14.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.6.2",

package/src/components/ScaffoldTooltip.vue

@@ -87,10 +87,6 @@ export default {
     Tooltip,
   },
   props: {
-    clientHeight: {
-      type: Number,
-      default: 200,
-    },
     createData: {
       type: Object,
       default: {
@@ -150,14 +146,12 @@ export default {
   computed: {
     ...mapState(useMainStore,  ['userToken']),
     position: function () {
-      let yOffset = 20;
+      let yOffset = 40;
       if (this.region) {
-        yOffset = 35;
+        yOffset = 55;
       }
-      const x = this.x - 100;
-      const bottom = this.clientHeight - (this.y - yOffset);
-      return { left: x + "px", bottom: (bottom >= 0) ? `${bottom}px` : '0px'
-      };
+      const x = this.x - 40;
+      return { left: x + "px", top: this.y - yOffset + "px" };
     },
   },
   methods: {
@@ -222,8 +216,9 @@ export default {
     background-color: #fff;
     border: 1px solid $app-primary-color;
     border-radius: 4px;
-    min-width: 250px!important;
-    max-width:500px;
+    white-space: nowrap;
+    min-width: unset!important;
+    max-width:fit-content;
     width:unset!important;
     pointer-events: none;
     top: -15px !important;
@@ -235,13 +230,9 @@ export default {
   }
 
   .tooltip-text {
-    word-wrap: normal;
     text-align: center;
     color: $app-primary-color;
   }
-  .tooltip-text + .tooltip-text {
-    border-top: 1px solid $app-primary-color;
-  }
 
   :deep(.non-selectable) {
     user-select: none;

package/src/components/ScaffoldTreeControls.vue

@@ -77,6 +77,7 @@ export default {
       drawerOpen: true,
       nodeNumbers: 0,
       module: undefined,
+      checkedRegions: [],
     };
   },
   computed: {
@@ -91,6 +92,16 @@ 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)
         }
       },
     },
@@ -221,7 +232,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 +531,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

@@ -8,7 +8,6 @@
   >
     <map-svg-sprite-color />
     <scaffold-tooltip
-      :clientHeight="clientHeight"
       :createData="createData"
       :label="tData.label"
       :region="tData.region"
@@ -105,11 +104,13 @@
             @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"
           @primitivesUpdated="primitivesUpdated"
@@ -680,7 +681,7 @@ export default {
     isNerves: {
       type: Object,
       default: {
-        regions: ["nerves", "Spinal nerves"]
+        regions: ["nerves"]
       },
     },
     /**
@@ -772,7 +773,6 @@ export default {
   data: function () {
     return {
       annotator: undefined,
-      clientHeight: 200,
       colourRadio: true,
       createData: {
         drawingBox: false,
@@ -889,7 +889,8 @@ export default {
         region: "",
         group: "",
         isSearch: false,
-      })
+      }),
+      checkedRegions: []
     };
   },
   watch: {
@@ -1037,6 +1038,44 @@ export default {
     },
   },
   methods: {
+    setCheckedRegions: function (data) {
+      this.checkedRegions = data;
+    },
+    zoomToNerves: function (nerves, processed = false) {
+      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') {
+              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);
+            }
+          }
+        });
+        this.fitWindow();
+        this.$refs.scaffoldTreeControls.setCheckedKeys([...new Set(idsList)], processed);
+      }
+    },
     enableAxisDisplay: function (enable, miniaxes) {
       if (this.$module.scene) {
         this.$module.scene.enableAxisDisplay(enable, miniaxes);
@@ -1073,12 +1112,10 @@ export default {
       const regions = this.isNerves?.regions;
       if (regions) {
         const regionPath = zincObject.getRegion().getFullPath().toLowerCase();
-        let searching = true;
-        for (let i = 0; i < regions.length && searching; i++) {
+        for (let i = 0; i < regions.length; i++) {
           if (regionPath.includes(regions[i].toLowerCase())) {
             totalNerves++;
             zincObject.userData.isNerves = true;
-            searching = false;
             const groupName = zincObject.groupName.toLowerCase();
             if (groupName in nervesMap) {
               foundNerves++;
@@ -1793,11 +1830,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.selectedObjects = objects;
+        if (this.selectedObjects && this.selectedObjects.length > 0) {
+          this.$refs.primitiveControls.setObject(this.selectedObjects[0]);
+        } else {
+          this.$refs.primitiveControls.setObject(undefined);
+        }
       }
     },
     /**
@@ -2197,14 +2236,32 @@ export default {
       this.tData.visible = false;
       this.tData.region = undefined;
     },
+    /**
+     * 
+     * @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, forced = false) {
-      console.log(flag, this.colourRadio)
+    setColour: function (flag, forced = false) {
       if (this.isReady && this.$module.scene &&
         typeof flag === "boolean" && 
         (forced || flag !== this.colourRadio)) {
@@ -2212,11 +2269,7 @@ export default {
         //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);
@@ -2660,7 +2713,6 @@ export default {
     adjustLayout: function () {
       if (this.$refs.scaffoldContainer) {
         let width = this.$refs.scaffoldContainer.clientWidth;
-        this.clientHeight = this.$refs.scaffoldContainer.clientHeight;
         this.minimisedSlider = width < 812;
         if (this.minimisedSlider) {
           this.sliderPosition = this.drawerOpen ? "right" : "left";

package/src/scripts/MappedNerves.js

@@ -829,21 +829,73 @@ const getNerveMaps = () => {
 const getTermNerveMaps = () => {
   const curatedMap = {};
   mappedNerves.forEach((item) => {
-    if (item["nerve_id"] && item["label"] !== "nerve") {
-      if (!item["subclass labels"].length) {
+    const nerve_id = item["nerve_id"];
+    const label = item["label"].toLowerCase();
+    const subclassLabels = item["subclass labels"];
+    if (nerve_id && label !== "nerve") {
+      if (!subclassLabels.length) {
         return;
       }
-      if (!(item["nerve_id"] in curatedMap)) {
-        curatedMap[item["nerve_id"]] = [];
+      if (!(nerve_id in curatedMap)) {
+        curatedMap[nerve_id] = {};
       }
-      const labels = item["subclass labels"].map((label) => label.toLowerCase())
-      curatedMap[item["nerve_id"]].push(...labels);
+      const subLabels = subclassLabels
+        .map((label) => label.toLowerCase())
+        .sort();
+      curatedMap[nerve_id] = {
+        nerve: label,
+        subNerves: subLabels,
+      };
     }
   });
   return curatedMap;
 };
 
+const getFilterOptions = () => {
+  let filterOptions = [];
+  let main = {
+    key: "scaffold.connectivity.nerve",
+    label: "Nerves",
+    children: [],
+  };
+  let children1 = [];
+  for (const nerve of mappedNerves) {
+    if (nerve.label === "nerve") {
+      continue;
+    }
+    let sub = {
+      facetPropPath: "scaffold.connectivity.nerve",
+      label: "",
+      children: [],
+    };
+    let children2 = [];
+    for (const [key, value] of Object.entries(nerve)) {
+      if (key === "label") {
+        sub.label = value;
+      }
+      if (key === "subclass labels") {
+        for (const subnerve of value) {
+          children2.push({
+            facetPropPath: "scaffold.connectivity.subnerve",
+            label: subnerve,
+          });
+        }
+      }
+    }
+    if (children2.length) {
+      sub.children = children2.sort((a, b) => a.label.localeCompare(b.label));
+      children1.push(sub);
+    }
+  }
+  if (children1.length) {
+    main.children = children1.sort((a, b) => a.label.localeCompare(b.label));
+    filterOptions.push(main);
+  }
+  return filterOptions;
+};
+
 export {
   getNerveMaps,
-  getTermNerveMaps
+  getTermNerveMaps,
+  getFilterOptions
 };