@abi-software/scaffoldvuer 1.4.0-beta.2 → 1.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.4.0-beta.2",
+  "version": "1.4.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/map-utilities": "^1.1.0-beta.2",
+    "@abi-software/map-utilities": "^1.1.0",
     "@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.11.3"
+    "zincjs": "^1.11.4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.6.2",
     "@vuese/markdown-render": "^2.11.3",
-    "@vuese/parser": "^2.9.1",
+    "@vuese/parser": "^2.10.3",
     "auto-changelog": "^2.4.0",
     "babel-eslint": "^10.1.0",
     "babel-plugin-component": "^1.1.1",
@@ -92,8 +92,5 @@
   "browserslist": [
     "> 1%",
     "last 2 versions"
-  ],
-  "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "^4.21.1"
-  }
+  ]
 }

package/src/App.vue

@@ -28,7 +28,6 @@
         :format="format"
         :marker-labels="markerLabels"
         :enableLocalAnnotations="false"
-        :sparcAPI="sparcAPI"
         @open-map="openMap"
         @on-ready="onReady"
         @scaffold-selected="onSelected"
@@ -322,9 +321,6 @@ 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;
 
@@ -362,7 +358,7 @@ export default {
   },
   data: function () {
     return {
-      consoleOn: false,
+      consoleOn: true,
       createLinesWithNormal: false,
       url: undefined,
       input: undefined,
@@ -410,14 +406,9 @@ export default {
       router: useRouter(),
       ElIconSetting: shallowRef(ElIconSetting),
       ElIconFolderOpened: shallowRef(ElIconFolderOpened),
-      auto: NaN,
-      sparcAPI: import.meta.env.VITE_SPARC_API,
-      // sparcAPI: "http://localhost:8000/",
+      auto: NaN
     };
   },
-  computed: {
-    ...mapStores(useSettingsStore),
-  },
   watch: {
     input: function () {
       this.parseInput();
@@ -431,7 +422,7 @@ export default {
           "body proper": 9,
           "Spinal cord": 8,
           "lung": 11,
-          "stomach": 12,
+          "stomach": {number:12, imgURL: 'https://mapcore-bucket1.s3.us-west-2.amazonaws.com/texture/arm1/jpg/0984.jpg'},
           "urinary bladder": 11,
           "Brainstem": 11,
           "heart": 9,
@@ -463,7 +454,6 @@ 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;

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>
-        <CreateTooltipContent
+        <CreateTooltiipContent
           v-show="createData.toBeConfirmed"
           :createData="createData"
           @confirm-create="$emit('confirm-create', $event)"
@@ -22,14 +22,10 @@
         />
         <Tooltip
           class="p-tooltip"
-          v-show="
-            (annotationDisplay && !createData.toBeConfirmed) ||
-            imageEntry.length
-          "
-          ref="tooltip"
-          :tooltipType="annotationDisplay ? 'annotation' : 'image'"
+          v-show="annotationDisplay && !createData.toBeConfirmed"
+          ref="annotationTooltip"
+          :annotationDisplay="true"
           :annotationEntry="annotationEntry"
-          :imageEntry="imageEntry"
         />
         <div v-if="createData.toBeDeleted" class="delete-container">
           <el-row>
@@ -70,9 +66,9 @@ import {
 import {
   Delete as ElIconDelete,
 } from '@element-plus/icons-vue'
+import CreateTooltiipContent from "./CreateTooltipContent.vue";
 import { mapState } from 'pinia';
-import { useMainStore } from "@/stores/index";
-import CreateTooltipContent from "./CreateTooltipContent.vue";
+import { useMainStore } from "@/store/index";
 import { Tooltip } from '@abi-software/map-utilities'
 import '@abi-software/map-utilities/dist/style.css'
 
@@ -83,7 +79,7 @@ export default {
   name: "ScaffoldTooltip",
   components: {
     Col,
-    CreateTooltipContent,
+    CreateTooltiipContent,
     ElIconDelete,
     Icon,
     Popover,
@@ -125,14 +121,6 @@ export default {
       type: Number,
       default: 200,
     },
-    imageThumbnails: {
-      type: Object,
-      default: {},
-    },
-    imageThumbnailSidebar: {
-      type: Boolean,
-      default: false,
-    },
   },
   inject: ['scaffoldUrl'],
   provide() {
@@ -142,6 +130,7 @@ export default {
   },
   data: function () {
     return {
+      display: false,
       annotationEntry: { },
       ElIconDelete: shallowRef(ElIconDelete),
     };
@@ -156,27 +145,11 @@ 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 = {
@@ -185,7 +158,9 @@ export default {
             "resource": encodeURIComponent(this.scaffoldUrl),
           };
         }
-      } else {
+      }
+      else {
+        this.display = false;
         this.annotationEntry = { };
       }
     },

package/src/components/ScaffoldVuer.vue

@@ -15,12 +15,9 @@
       :x="tData.x"
       :y="tData.y"
       :annotationDisplay="annotationDisplay"
-      :imageThumbnailSidebar="imageThumbnailSidebar"
-      :imageThumbnails="imageThumbnailsEntry"
       @confirm-create="confirmCreate($event)"
       @cancel-create="cancelCreate()"
       @confirm-delete="confirmDelete($event)"
-      @image-thumbnail-open="onImageThumbnailOpen"
     />
     <div
       id="organsDisplayArea"
@@ -287,7 +284,7 @@
         ref="backgroundPopover"
         :virtual-ref="backgroundIconRef"
         placement="top-start"
-        width="330"
+        width="128"
         :teleported="false"
         trigger="click"
         popper-class="background-popper non-selectable h-auto"
@@ -295,7 +292,7 @@
       >
         <div>
           <el-row class="backgroundText">Viewing Mode</el-row>
-          <el-row class="backgroundChooser">
+          <el-row class="backgroundControl">
             <div style="margin-bottom: 2px;">
               <template
                   v-for="(value, key, index) in viewingModes"
@@ -313,41 +310,6 @@
               {{ viewingModes[viewingMode] }}
             </el-row>
           </el-row>
-          <el-row class="backgroundSpacer" v-if="viewingMode === 'Exploration'"></el-row>
-          <el-row class="backgroundText" v-if="viewingMode === 'Exploration'">Markers display</el-row>
-          <el-row class="backgroundChooser" v-if="viewingMode === 'Exploration'">
-            <el-col :span="14">
-              <el-radio-group
-                v-model="imageRadio"
-                class="flatmap-radio"
-                @change="setImage"
-              >
-                <el-radio :value="false">Standard</el-radio>
-                <el-radio :value="true">Image</el-radio>
-              </el-radio-group>
-            </el-col>
-            <el-col :span="10" v-if="imageRadio">
-              <el-select
-                :teleported="false"
-                v-model="imageType"
-                placeholder="Select"
-                class="scaffold-select-box imageSelector"
-                popper-class="scaffold_viewer_dropdown"
-                @change="setImageType"
-              >
-                <el-option
-                  v-for="item in imageTypes"
-                  :key="item"
-                  :label="item"
-                  :value="item"
-                >
-                  <el-row>
-                    <el-col :span="12">{{ item }}</el-col>
-                  </el-row>
-                </el-option>
-              </el-select>
-            </el-col>
-          </el-row>
           <el-row class="backgroundSpacer"></el-row>
           <el-row class="backgroundText"> Change background </el-row>
           <el-row class="backgroundChooser">
@@ -420,7 +382,7 @@
 
 <script>
 /* eslint-disable no-alert, no-console */
-import { markRaw, toRaw, shallowRef } from 'vue';
+import { markRaw, shallowRef } from 'vue';
 import {
   WarningFilled as ElIconWarningFilled,
   ArrowDown as ElIconArrowDown,
@@ -459,16 +421,8 @@ 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, mapStores } from 'pinia';
-import { useMainStore } from "@/stores/index";
-import { useSettingsStore } from '@/stores/settings'
-import {
-  getBiolucidaThumbnails,
-  getSegmentationThumbnails,
-  getScaffoldThumbnails,
-  getPlotThumbnails
-} from '../services/scicrunchQueries'
-import imageMixin from '../mixins/imageMixin.js'
+import { mapState } from 'pinia';
+import { useMainStore } from "@/store/index";
 
 /**
  * A vue component of the scaffold viewer.
@@ -478,7 +432,6 @@ import imageMixin from '../mixins/imageMixin.js'
  */
 export default {
   name: "ScaffoldVuer",
-  mixins: [imageMixin],
   components: {
     Button,
     Col,
@@ -736,24 +689,10 @@ export default {
     /**
      * Enable local annotations
      */
-    enableLocalAnnotations: {
+     enableLocalAnnotations: {
       type: Boolean,
       default: false
     },
-    /**
-     * Specify the endpoint of the SPARC API.
-     */
-    sparcAPI: {
-      type: String,
-      default: 'https://api.sparc.science/',
-    },
-    /**
-     * The option to show image thumbnail in sidebar
-     */
-    imageThumbnailSidebar: {
-      type: Boolean,
-      default: false,
-    },
   },
   provide() {
     return {
@@ -761,7 +700,6 @@ export default {
       scaffoldUrl: this.url,
       $annotator: this.annotator,
       boundingDims: this.boundingDims,
-      getFeaturesAlert: () => undefined,
     };
   },
   data: function () {
@@ -852,8 +790,7 @@ export default {
         active: false,
       },
       fileFormat: "metadata",
-      markerLabelEntry: markRaw({}),
-      previousMarkerLabelEntry: markRaw({}),
+      previousMarkerLabels: markRaw({}),
       viewingMode: "Exploration",
       viewingModes: {
         "Exploration": "View and explore detailed visualization of 3D scaffolds",
@@ -875,10 +812,6 @@ export default {
         centre: [0, 0, 0],
         size:[1, 1, 1],
       },
-      imageRadio: false,
-      imageType: 'Image',
-      imageTypes: ['Image', 'Segmentation', 'Scaffold', 'Plot'],
-      imageClicked: '',
     };
   },
   watch: {
@@ -958,17 +891,14 @@ export default {
       },
       immediate: true,
     },
-    markerLabels: function (labels) {
-      this.markerLabelEntry = markRaw({...labels})
-    },
-    markerLabelEntry: function (entry) {
-      for (const [key, value] of Object.entries(this.previousMarkerLabelEntry)) {
+    markerLabels: function(labels) {
+      for (const [key, value] of Object.entries(this.previousMarkerLabels)) {
         this.setMarkerModeForObjectsWithName(key, value, "off");
       }
-      for (const [key, value] of Object.entries(entry)) {
+      for (const [key, value] of Object.entries(labels)) {
         this.setMarkerModeForObjectsWithName(key, value, "on");
       }
-      this.previousMarkerLabelEntry = markRaw({...entry});
+      this.previousMarkerLabels = markRaw({...labels});
     },
   },
   beforeCreate: function () {
@@ -1008,13 +938,9 @@ export default {
   },
   computed: {
     ...mapState(useMainStore,  ['userToken']),
-    ...mapStores(useSettingsStore),
     annotationDisplay: function() {
       return this.viewingMode === 'Annotation' && this.tData.active === true &&
         (this.activeDrawMode === 'Edit' || this.activeDrawMode === 'Delete');
-    },
-    imageThumbnailsEntry: function() {
-      return this.imageClicked ? this.convertUberonToName() : {};
     }
   },
   methods: {
@@ -1554,9 +1480,6 @@ export default {
                 ? identifier.data.id
                 : identifier.data.group;
               names.push(id);
-              if (identifier.data) {
-                identifier.data.imageType = this.imageRadio ? this.imageType : "Standard"
-              }
             }
           });
           zincObjects = event.zincObjects;
@@ -1580,13 +1503,6 @@ export default {
                 this.$refs.scaffoldTreeControls.removeActive(false);
               }
             }
-            if (this.imageRadio && event.identifiers.length && event.identifiers[0]) {
-              this.imageClicked = event.identifiers[0].data.id
-                ? event.identifiers[0].data.id
-                : event.identifiers[0].data.group;
-            } else {
-              this.imageClicked = ''
-            }
             //Emit when an object is selected
             //@arg Identifier of selected objects
             this.$emit("scaffold-selected", event.identifiers);
@@ -1637,12 +1553,6 @@ export default {
               this.createEditTemporaryLines(event.identifiers[0].extraData.worldCoords);
             }
             this.createEditTemporaryLines(event.identifiers[0].extraData.worldCoords);
-            const id = event.identifiers[0].data.id
-              ? event.identifiers[0].data.id
-              : event.identifiers[0].data.group;
-            if (this.imageClicked !== id) {
-              this.imageClicked = ''
-            }
           }
         }
       }
@@ -2417,67 +2327,15 @@ export default {
       this.$module.toggleSyncControl(flag, rotateMode);
       this.$module.setSyncControlCallback(this.syncControlCallback);
     },
+
     /**
      * Set the markers for the scene.
      */
     setMarkers: function () {
-      for (const [key, value] of Object.entries(this.markerLabelEntry)) {
+      for (const [key, value] of Object.entries(this.markerLabels)) {
         this.setMarkerModeForObjectsWithName(key, value, "on");
       }
     },
-    removeImageThumbnails: function () {
-      this.imageThumbnails = {}
-      this.markerLabelEntry = markRaw(this.markerLabels)
-    },
-    setImage: function (flag) {
-      if (flag) {
-        this.setImageType(this.imageType)
-      } else {
-        this.removeImageThumbnails()
-      }
-    },
-    setImageType: async function (type) {
-      this.imageType = type
-      if (!this.settingsStore.imageTypeCached(type)) {
-        this.loading = true
-        await this.fetchImageThumbnails(type)
-        this.loading = false
-      }
-      this.populateImageThumbnails(type)
-    },
-    fetchImageThumbnails: async function (type) {
-      let thumbnails = {}
-      const organCuries = this.settingsStore.organCuries
-      if (type === 'Image') {
-        thumbnails = await getBiolucidaThumbnails(this.sparcAPI, organCuries, type)
-      } else if (type === 'Segmentation') {
-        thumbnails = await getSegmentationThumbnails(this.sparcAPI, organCuries, type)
-      } else if (type === 'Scaffold') {
-        thumbnails = await getScaffoldThumbnails(this.sparcAPI, organCuries, type)
-      } else if (type === 'Plot') {
-        thumbnails = await getPlotThumbnails(this.sparcAPI, organCuries, type)
-      }
-      this.settingsStore.updateImageThumbnails(type, thumbnails)
-    },
-    convertUberonToName: function () {
-      const organCuries = this.settingsStore.organCuries
-      const identifiers = organCuries.filter((curie) => curie.name in this.markerLabels).map((curie) => curie.id)
-      const imageThumbnails = this.settingsStore.getImageThumbnails(this.imageType, identifiers)
-      return Object.assign({},
-        Object.fromEntries(
-          Object.entries(imageThumbnails)
-            .map(([key, value]) => [organCuries.filter((curie) => curie.id === key)[0].name, value])))
-    },
-    populateImageThumbnails: async function (type) {
-      this.removeImageThumbnails()
-      const thumbnails = this.convertUberonToName()
-      this.loading = true
-      this.markerLabelEntry = markRaw(await this.populateMapWithImages(thumbnails, type))
-      this.loading = false
-    },
-    onImageThumbnailOpen: function (payload) {
-      this.$emit('image-thumbnail-open', payload);
-    },
   },
 };
 </script>
@@ -2637,7 +2495,7 @@ export default {
   background-color: #ffffff;
   border: 1px solid $app-primary-color;
   box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
-  height: fit-content;
+  height: 140px;
   min-width: 200px;
   .el-popper__arrow {
     &:before {
@@ -2894,10 +2752,6 @@ export default {
       min-height: 24px
     }
   }
-
-  &.imageSelector {
-    width: 125px!important;
-  }
 }
 
 :deep(.scaffold_viewer_dropdown) {

package/src/components.d.ts

@@ -26,8 +26,6 @@ declare module 'vue' {
     ElMain: typeof import('element-plus/es')['ElMain']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPopover: typeof import('element-plus/es')['ElPopover']
-    ElRadio: typeof import('element-plus/es')['ElRadio']
-    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSlider: typeof import('element-plus/es')['ElSlider']

package/src/main.js

@@ -2,7 +2,7 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import * as VueRouter from 'vue-router'
 import App from './App.vue'
-import { useMainStore } from '@/stores/index'
+import { useMainStore } from '@/store/index'
 
 const routes = [
   { path: '/'},

package/src/mixins/imageMixin.js

@@ -1,89 +0,0 @@
-export default {
-  methods: {
-    populateMapWithImages: async function (images, type) {
-      let imageMarkerLabels = {};
-      for (const [key, list] of Object.entries(images)) {
-        const response = await this.downloadImageThumbnail(key, list, type);
-        if (response) {
-          imageMarkerLabels[key] = response;
-        } else {
-          imageMarkerLabels[key] = this.markerLabels[key];
-        }
-      }
-      return imageMarkerLabels;
-    },
-    downloadImageThumbnail: async function (key, list, type) {
-      const count = list.length;
-      if (count > 0) {
-        //Pick a random image
-        const index = Math.floor(Math.random() * count);
-        const thumbnail = list[index].thumbnail;
-        try {
-          const response = await this.getImageThumbnail(thumbnail, type);
-          const markerObject = await this.addImageThumbnailMarker(key, response);
-          return markerObject;
-        } catch (error) {
-          // Failed to download, pick another one
-          list.splice(index);
-          this.downloadImageThumbnail(key, list, type);
-        }
-      }
-    },
-    getImageThumbnail: async function (url, type) {
-      return new Promise((resolve, reject) => {
-        if (type === "Image" || type === "Segmentation") {
-          this.getBinaryThumbnail(url)
-            .then((response) => resolve(response))
-            .catch((response) => reject(response));
-        } else {
-          this.getGenericThumbnail(url)
-            .then((response) => resolve(response))
-            .catch((response) => reject(response));
-        }
-      });
-    },
-    getBinaryThumbnail: async function (url) {
-      return new Promise((resolve, reject) => {
-        fetch(url)
-          .then((response) => {
-            if (response.status >= 200 && response.status < 300) {
-              return response.text();
-            } else {
-              reject();
-            }
-          })
-          .then((data) => {
-            if (data) {
-              let img = new Image();
-              img.onload = function () {
-                resolve(`data:'image/png';base64,${data}`);
-              };
-              img.onerror = function () {
-                reject(new Error("Failed to load image at " + url));
-              };
-              img.src = `data:'image/png';base64,${data}`;
-            } else {
-              reject(new Error("Failed to load image at " + url));
-            }
-          });
-      });
-    },
-    getGenericThumbnail: async function (url) {
-      return new Promise((resolve, reject) => {
-        let img = new Image();
-        img.onload = function () {
-          resolve(url);
-        };
-        img.onerror = function () {
-          reject(new Error("Failed to load image at " + url));
-        };
-        img.src = url;
-      });
-    },
-    addImageThumbnailMarker: async function (id, source) {
-      const blob = await (await fetch(source)).blob();
-      const blobUrl = URL.createObjectURL(blob);
-      return { number: this.markerLabels[id], imgURL: blobUrl };
-    },
-  },
-};