@abi-software/scaffoldvuer 1.3.3 → 1.4.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.3.3",
+  "version": "1.4.0-beta.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/map-utilities": "^1.0.0",
+    "@abi-software/map-utilities": "^1.1.0-beta.2",
     "@abi-software/sparc-annotation": "^0.3.1",
     "@abi-software/svg-sprite": "^1.0.0",
     "@element-plus/icons-vue": "^2.3.1",
@@ -55,12 +55,12 @@
     "vue": "^3.4.15",
     "vue-router": "^4.2.5",
     "vue3-component-svg-sprite": "^0.0.1",
-    "zincjs": "^1.10.2"
+    "zincjs": "^1.11.3"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.6.2",
     "@vuese/markdown-render": "^2.11.3",
-    "@vuese/parser": "^2.10.3",
+    "@vuese/parser": "^2.9.1",
     "auto-changelog": "^2.4.0",
     "babel-eslint": "^10.1.0",
     "babel-plugin-component": "^1.1.1",

package/src/App.vue

@@ -28,6 +28,7 @@
         :format="format"
         :marker-labels="markerLabels"
         :enableLocalAnnotations="false"
+        :sparcAPI="sparcAPI"
         @open-map="openMap"
         @on-ready="onReady"
         @scaffold-selected="onSelected"
@@ -321,6 +322,9 @@ import {
 import { useRoute, useRouter } from 'vue-router'
 import { HelpModeDialog } from '@abi-software/map-utilities'
 import '@abi-software/map-utilities/dist/style.css'
+import { mapStores } from 'pinia';
+import { useSettingsStore } from '@/stores/settings';
+import { getOrganCuries } from '@/services/scicrunchQueries'
 
 let texture_prefix = undefined;
 
@@ -358,7 +362,7 @@ export default {
   },
   data: function () {
     return {
-      consoleOn: true,
+      consoleOn: false,
       createLinesWithNormal: false,
       url: undefined,
       input: undefined,
@@ -406,9 +410,14 @@ export default {
       router: useRouter(),
       ElIconSetting: shallowRef(ElIconSetting),
       ElIconFolderOpened: shallowRef(ElIconFolderOpened),
-      auto: NaN
+      auto: NaN,
+      sparcAPI: import.meta.env.VITE_SPARC_API,
+      // sparcAPI: "http://localhost:8000/",
     };
   },
+  computed: {
+    ...mapStores(useSettingsStore),
+  },
   watch: {
     input: function () {
       this.parseInput();
@@ -454,6 +463,7 @@ export default {
   },
   mounted: function () {
     this._objects = [];
+    getOrganCuries(this.sparcAPI).then((organCuries) => this.settingsStore.updateOrganCuries(organCuries))
   },
   created: function () {
     texture_prefix = import.meta.env.VITE_TEXTURE_FOOT_PREFIX;
@@ -646,6 +656,7 @@ export default {
         }
       }
       this.scaffoldRef = this.$refs.scaffold;
+      // this.scaffoldRef.changeViewingMode('Annotation')
     },
     addLinesWithNormal: function (coord, normal) {
       if (coord && normal) {

package/src/components/LinesControls.vue

@@ -97,7 +97,7 @@
 /* eslint-disable no-alert, no-console */
 // This is not in use at this moment, due to
 // limited support to line width
-import { shallowRef } from 'vue';
+import { markRaw, shallowRef } from 'vue';
 import {
   getLineDistance,
   moveAndExtendLine,
@@ -146,26 +146,24 @@ export default {
       ElIconArrowLeft: shallowRef(ElIconArrowLeft),
       ElIconArrowRight: shallowRef(ElIconArrowRight),
       edited: false,
+      zincObject: undefined,
     };
   },
   watch: {
     "createData.faceIndex": {
       handler: function (value) {
-        if (this._zincObject?.isLines2) {
+        if (this.zincObject?.isLines2) {
           this.currentIndex = value;
-          this.distance = getLineDistance(this._zincObject, this.currentIndex);
+          this.distance = getLineDistance(this.zincObject, this.currentIndex);
         }
       },
       immediate: true,
     },
   },
-  mounted: function () {
-    this._zincObject = undefined;
-  },
   methods: {
     changeIndex: function(increment) {
       if (increment) {
-        const dist = getLineDistance(this._zincObject, this.currentIndex + 1);
+        const dist = getLineDistance(this.zincObject, this.currentIndex + 1);
         if (dist > 0) {
           this.currentIndex++;
           this.reset();
@@ -179,7 +177,7 @@ export default {
       if (this.newDistance !== 0) {
         this.distance = this.newDistance;
         this.edited = moveAndExtendLine(
-          this._zincObject, this.currentIndex, this.newDistance, true) || this.edited;
+          this.zincObject, this.currentIndex, this.newDistance, true) || this.edited;
       } else {
         this.newDistance = this.distance;
       }
@@ -187,22 +185,22 @@ export default {
     onLengthSliding: function() {
       this.newDistance = Math.pow(10, this.lengthScale) * this.distance;
       this.edited = moveAndExtendLine(
-        this._zincObject, this.currentIndex, this.newDistance, true) || this.edited;
+        this.zincObject, this.currentIndex, this.newDistance, true) || this.edited;
     },
     onMoveSliding: function() {
       const diff = (this.adjust - this.pAdjust) * this.distance;
       this.edited =  moveAndExtendLine(
-        this._zincObject, this.currentIndex, diff, false) || this.edited;
+        this.zincObject, this.currentIndex, diff, false) || this.edited;
       this.pAdjust = this.adjust;
     },
     reset: function() {
       this.adjust = 0;
       this.pAdjust = 0;
       this.lengthScale = 0;
-      this.distance = getLineDistance(this._zincObject, this.currentIndex);
+      this.distance = getLineDistance(this.zincObject, this.currentIndex);
       this.newDistance = this.distance;
       if (this.edited) {
-        this.$emit("primitivesUpdated", this._zincObject);
+        this.$emit("primitivesUpdated", this.zincObject);
         this.edited = false;
       }
     },
@@ -210,19 +208,19 @@ export default {
       this.currentIndex = -1;
       this.distance = 0;
       if (object.isLines2) {
-        this._zincObject = object;
-        this.width = this._zincObject.getMorph().material.linewidth;
+        this.zincObject = markRaw(object);
+        this.width = this.zincObject.getMorph().material.linewidth;
         if (object.isEditable) {
           this.currentIndex = 0;
           this.distance = getLineDistance(object, this.currentIndex);
         }
       } else {
-        this._zincObject = undefined;
-        this.linewidth = 10;
+        this.zincObject = undefined;
+        this.width = 10;
       }
     },
     modifyWidth: function () {
-      this._zincObject.setWidth(this.width);
+      this.zincObject.setWidth(this.width);
     },
   },
 };

package/src/components/PointsControls.vue

@@ -125,7 +125,7 @@
 
 <script>
 /* eslint-disable no-alert, no-console */
-import { shallowRef } from 'vue';
+import { markRaw, shallowRef } from 'vue';
 import {
   movePoint,
 } from "../scripts/Utilities.js";
@@ -184,11 +184,9 @@ export default {
       ElIconArrowLeft: shallowRef(ElIconArrowLeft),
       ElIconArrowRight: shallowRef(ElIconArrowRight),
       edited: false,
+      zincObject: undefined,
     };
   },
-  mounted: function () {
-    this._zincObject = undefined;
-  },
   watch: {
     boundingDims: {
       handler: function (value) {
@@ -211,7 +209,7 @@ export default {
   methods: {
     changeIndex: function(increment) {
       if (increment) {
-        if (this._zincObject.drawRange > this.currentIndex + 1) {
+        if (this.zincObject.drawRange > this.currentIndex + 1) {
           this.currentIndex++;
           this.reset();
         }
@@ -226,7 +224,7 @@ export default {
         this.translation[1] - this.pTranslation[1],
         this.translation[2] - this.pTranslation[2],
       ];
-      this.edited = movePoint(this._zincObject, this.currentIndex, diff) || this.edited;
+      this.edited = movePoint(this.zincObject, this.currentIndex, diff) || this.edited;
       for (let i = 0; i < 3; i++) {
         this.pTranslation[i] = this.translation[i];
       }
@@ -235,33 +233,33 @@ export default {
       this.translation = [0, 0, 0];
       this.pTranslation = [0, 0, 0];
       if (this.edited) {
-        this.$emit("primitivesUpdated", this._zincObject);
+        this.$emit("primitivesUpdated", this.zincObject);
         this.edited = false;
       }
     },
     setObject: function (object) {
       this.currentIndex = -1;
       if (object.isPointset) {
-        this._zincObject = object;
-        this.size = this._zincObject.morph.material.size;
-        this.attenuation = this._zincObject.morph.material.sizeAttenuation;
+        this.zincObject = markRaw(object);
+        this.size = this.zincObject.morph.material.size;
+        this.attenuation = this.zincObject.morph.material.sizeAttenuation;
         if (object.isEditable) {
-          if (this._zincObject.drawRange > 0) {
+          if (this.zincObject.drawRange > 0) {
             this.currentIndex = 0;
           }
         }
       } else {
-        this._zincObject = undefined;
+        this.zincObject = undefined;
         this.size = 10;
         this.attenuation = false;
       }
     },
     modifyAttenuation: function(flag) {
       this.attenuation = flag;
-      this._zincObject.setSizeAttenuation(flag);
+      this.zincObject.setSizeAttenuation(flag);
     },
     modifySize: function () {
-      this._zincObject.setSize(this.size);
+      this.zincObject.setSize(this.size);
     },
   },
 };

package/src/components/PrimitiveControls.vue

@@ -51,7 +51,7 @@
 
 <script>
 /* eslint-disable no-alert, no-console */
-import { ref, shallowRef } from 'vue';
+import { markRaw } from 'vue';
 import {
   ArrowRight as ElIconArrowRight,
 } from '@element-plus/icons-vue';
@@ -96,6 +96,7 @@ export default {
       drawerOpen: true,
       zincObject: undefined,
       isEditable: false,
+      displayString: "100%"
     };
   },
   methods: {
@@ -108,7 +109,7 @@ export default {
     },
     setObject: function(object) {
       if (object) {
-        this.zincObject = shallowRef(object);
+        this.zincObject = markRaw(object);
       } else {
         this.zincObject = undefined;
       }
@@ -136,7 +137,7 @@ export default {
         }
       }
       if (object && object.getMorph()) {
-        this.material = ref(object.getMorph().material);
+        this.material = object.getMorph().material;
       } else {
         this.material = undefined;
       }

package/src/components/ScaffoldTooltip.vue

@@ -14,7 +14,7 @@
       <template #default>
         <div class="tooltip-text">{{ label }}</div>
         <div class="tooltip-text" v-if="region">Region: {{ region }}</div>
-        <CreateTooltiipContent
+        <CreateTooltipContent
           v-show="createData.toBeConfirmed"
           :createData="createData"
           @confirm-create="$emit('confirm-create', $event)"
@@ -22,10 +22,14 @@
         />
         <Tooltip
           class="p-tooltip"
-          v-show="annotationDisplay && !createData.toBeConfirmed"
-          ref="annotationTooltip"
-          :annotationDisplay="true"
+          v-show="
+            (annotationDisplay && !createData.toBeConfirmed) ||
+            imageEntry.length
+          "
+          ref="tooltip"
+          :tooltipType="annotationDisplay ? 'annotation' : 'image'"
           :annotationEntry="annotationEntry"
+          :imageEntry="imageEntry"
         />
         <div v-if="createData.toBeDeleted" class="delete-container">
           <el-row>
@@ -66,9 +70,9 @@ import {
 import {
   Delete as ElIconDelete,
 } from '@element-plus/icons-vue'
-import CreateTooltiipContent from "./CreateTooltipContent.vue";
 import { mapState } from 'pinia';
-import { useMainStore } from "@/store/index";
+import { useMainStore } from "@/stores/index";
+import CreateTooltipContent from "./CreateTooltipContent.vue";
 import { Tooltip } from '@abi-software/map-utilities'
 import '@abi-software/map-utilities/dist/style.css'
 
@@ -79,7 +83,7 @@ export default {
   name: "ScaffoldTooltip",
   components: {
     Col,
-    CreateTooltiipContent,
+    CreateTooltipContent,
     ElIconDelete,
     Icon,
     Popover,
@@ -121,6 +125,14 @@ export default {
       type: Number,
       default: 200,
     },
+    imageThumbnails: {
+      type: Object,
+      default: {},
+    },
+    imageThumbnailSidebar: {
+      type: Boolean,
+      default: false,
+    },
   },
   inject: ['scaffoldUrl'],
   provide() {
@@ -130,7 +142,6 @@ export default {
   },
   data: function () {
     return {
-      display: false,
       annotationEntry: { },
       ElIconDelete: shallowRef(ElIconDelete),
     };
@@ -145,11 +156,27 @@ export default {
       const x = this.x - 40;
       return { left: x + "px", top: this.y - yOffset + "px" };
     },
+    imageEntry: function () {
+      let imageEntries = []
+      const imageThumbnailsEntries = Object.assign({},
+        Object.fromEntries(
+          Object.entries(this.imageThumbnails)
+            .filter(([key, value]) => value.length > 0)
+            .map(([key, value]) => [key.toLowerCase(), value])))
+      const lowerCaseLabel = this.label.toLowerCase()
+      if (lowerCaseLabel in imageThumbnailsEntries) {
+        imageEntries = imageThumbnailsEntries[lowerCaseLabel];
+      }
+      if (this.imageThumbnailSidebar) {
+        this.$emit('image-thumbnail-open', imageEntries)
+        return [];
+      }
+      return imageEntries;
+    },
   },
   methods: {
     checkForDisplay: function () {
       if (this.visible && this.label && this.label !== "") {
-        this.display = true;
         if (this.annotationDisplay) {
           const region = this.region ? this.region +"/" : "";
           this.annotationEntry = {
@@ -158,9 +185,7 @@ export default {
             "resource": encodeURIComponent(this.scaffoldUrl),
           };
         }
-      }
-      else {
-        this.display = false;
+      } else {
         this.annotationEntry = { };
       }
     },

package/src/components/ScaffoldTreeControls.vue

@@ -37,6 +37,7 @@ import {
 } from "../scripts/Utilities.js";
 import { TreeControls } from "@abi-software/map-utilities";
 import "@abi-software/map-utilities/dist/style.css";
+import { markRaw } from "vue";
 
 const nameSorting = (a, b) => {
   const labelA = a.label.toUpperCase();
@@ -74,6 +75,8 @@ export default {
       active: [],
       hover: [],
       drawerOpen: true,
+      nodeNumbers: 0,
+      module: undefined,
     };
   },
   computed: {
@@ -104,7 +107,7 @@ export default {
       parentContainer.sort((a, b) => {
         return nameSorting(a, b);
       });
-      this.__nodeNumbers++;
+      this.nodeNumbers++;
       this.$nextTick(() => {
         const checked =
           this.$refs.treeControls.$refs.regionTree.getCheckedKeys();
@@ -117,8 +120,8 @@ export default {
     // '__r/'
     findOrCreateRegion: function (data, paths, prefix) {
       //check if root region has been set
-      if (this.rootID === undefined && this.$module && this.$module.scene) {
-        this.treeData[0].id = this.$module.scene.getRootRegion().uuid;
+      if (this.module && this.module.scene) {
+        this.treeData[0].id = this.module.scene.getRootRegion().uuid;
         this.treeData[0].isRegion = true;
       }
       if (paths.length > 0) {
@@ -127,7 +130,7 @@ export default {
           (child) => child.label == _paths[0]
         );
         const path = prefix + "/" + paths[0];
-        const region = this.$module.scene
+        const region = this.module.scene
           .getRootRegion()
           .findChildFromPath(path);
         if (!childRegionItem) {
@@ -185,7 +188,7 @@ export default {
           for (let i = 0; i < regionData.children.length; i++) {
             if (regionData.children[i].label === group) {
               regionData.children.splice(i, 1);
-              this.__nodeNumbers--;
+              this.nodeNumbers--;
               return;
             }
           }
@@ -196,7 +199,7 @@ export default {
       const isRegion = node.isRegion;
       const isPrimitives = node.isPrimitives;
       const isChecked = data.checkedKeys.includes(node.id);
-      const region = this.$module.scene
+      const region = this.module.scene
         .getRootRegion()
         .findChildFromPath(node.regionPath);
       if (isRegion) {
@@ -238,7 +241,7 @@ export default {
      * Select a region by its name.
      */
     changeActiveByNames: function (names, regionPath, propagate) {
-      const rootRegion = this.$module.scene.getRootRegion();
+      const rootRegion = this.module.scene.getRootRegion();
       const targetObjects = findObjectsWithNames(
         rootRegion,
         names,
@@ -251,7 +254,7 @@ export default {
      * Hover a region by its name.
      */
     changeHoverByNames: function (names, regionPath, propagate) {
-      const rootRegion = this.$module.scene.getRootRegion();
+      const rootRegion = this.module.scene.getRootRegion();
       const targetObjects = findObjectsWithNames(
         rootRegion,
         names,
@@ -293,7 +296,7 @@ export default {
     clear: function () {
       this.active.length = 0;
       this.hover.length = 0;
-      this.__nodeNumbers = 0;
+      this.nodeNumbers = 0;
       this.$refs.treeControls.$refs.regionTree.updateKeyChildren(
         this.treeData[0].id,
         []
@@ -315,7 +318,7 @@ export default {
       return "#FFFFFF";
     },
     getZincObjectsFromNode: function (node, transverse) {
-      const rootRegion = this.$module.scene.getRootRegion();
+      const rootRegion = this.module.scene.getRootRegion();
       if (node.isPrimitives) {
         return findObjectsWithNames(
           rootRegion,
@@ -335,14 +338,14 @@ export default {
     },
     //Set this right at the beginning.
     setModule: function (moduleIn) {
-      this.$module = moduleIn;
-      this.__nodeNumbers = 0;
-      const objects = this.$module.scene.getRootRegion().getAllObjects(true);
+      this.module = markRaw(moduleIn);
+      this.nodeNumbers = 0;
+      const objects = this.module.scene.getRootRegion().getAllObjects(true);
       objects.forEach((zincObject) => {
         this.zincObjectAdded(zincObject);
       });
-      this.$module.addOrganPartAddedCallback(this.zincObjectAdded);
-      this.$module.addOrganPartRemovedCallback(this.zincObjectRemoved);
+      this.module.addOrganPartAddedCallback(this.zincObjectAdded);
+      this.module.addOrganPartRemovedCallback(this.zincObjectRemoved);
     },
     setColourField: function (treeData, nodeData = undefined) {
       treeData
@@ -382,7 +385,7 @@ export default {
       }
     },
     visibilityToggle: function (item, event) {
-      this.$module.changeOrganPartsVisibility(item, event);
+      this.module.changeOrganPartsVisibility(item, event);
       if (event == false) {
         if (this.activeRegion === item) {
           this.removeActive(true);
@@ -414,7 +417,7 @@ export default {
         list.splice(index, 1);
         ids.push(node.id);
       }
-      const region = this.$module.scene
+      const region = this.module.scene
         .getRootRegion()
         .findChildFromPath(node.regionPath);
       if (nodeName && nodeName !== "__r") {
@@ -444,13 +447,13 @@ export default {
     getState: function () {
       let checkedItems =
         this.$refs.treeControls.$refs.regionTree.getCheckedKeys();
-      if (checkedItems.length === this.__nodeNumbers) {
+      if (checkedItems.length === this.nodeNumbers) {
         return { checkAll: true, version: "2.0" };
       } else {
         //We cannot use the generated uuid as the identifier for permastate,
         //convert it back to paths
         let paths = convertUUIDsToFullPaths(
-          this.$module.scene.getRootRegion(),
+          this.module.scene.getRootRegion(),
           checkedItems
         );
         return { checkedItems: paths, version: "2.0" };