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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.4.0-beta.2",
+  "version": "1.4.1-image.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -55,7 +55,7 @@
     "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",

package/src/App.vue

@@ -412,7 +412,6 @@ export default {
       ElIconFolderOpened: shallowRef(ElIconFolderOpened),
       auto: NaN,
       sparcAPI: import.meta.env.VITE_SPARC_API,
-      // sparcAPI: "http://localhost:8000/",
     };
   },
   computed: {
@@ -463,7 +462,9 @@ export default {
   },
   mounted: function () {
     this._objects = [];
-    getOrganCuries(this.sparcAPI).then((organCuries) => this.settingsStore.updateOrganCuries(organCuries))
+    if (this.sparcAPI) {
+      getOrganCuries(this.sparcAPI).then((organCuries) => this.settingsStore.updateOrganCuries(organCuries))
+    }
   },
   created: function () {
     texture_prefix = import.meta.env.VITE_TEXTURE_FOOT_PREFIX;

package/src/components/ScaffoldVuer.vue

@@ -313,41 +313,45 @@
               {{ 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"
+          <template v-if="viewingMode === 'Exploration' && sparcAPI">
+            <el-row class="backgroundSpacer"></el-row>
+            <el-row class="backgroundText">Markers display</el-row>
+            <el-row class="backgroundChooser">
+              <el-col :span="14">
+                <el-radio-group
+                  v-model="imageRadio"
+                  class="flatmap-radio"
+                  :disabled="imagesDownloading"
+                  @change="setImage"
                 >
-                  <el-row>
-                    <el-col :span="12">{{ item }}</el-col>
-                  </el-row>
-                </el-option>
-              </el-select>
-            </el-col>
-          </el-row>
+                  <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"
+                  :disabled="imagesDownloading"
+                  @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>
+          </template>
           <el-row class="backgroundSpacer"></el-row>
           <el-row class="backgroundText"> Change background </el-row>
           <el-row class="backgroundChooser">
@@ -617,12 +621,12 @@ export default {
      * GroupName to value pair.
      * The value can be a single number or and object in the following
      * form:
-     * 
+     *
      * {
      *  number: Number,
      *  imgURL: String
      * }
-     * 
+     *
      * When imgURL is specified, scaffoldvuer will attempt to render
      * the image in imgURL as marker instead.
      *
@@ -745,7 +749,7 @@ export default {
      */
     sparcAPI: {
       type: String,
-      default: 'https://api.sparc.science/',
+      default: '',
     },
     /**
      * The option to show image thumbnail in sidebar
@@ -805,6 +809,7 @@ export default {
       inHelp: false,
       helpModeActiveIndex: this.helpModeInitialIndex,
       loading: false,
+      imagesDownloading: false,
       duration: 3000,
       drawerOpen: true,
       currentBackground: "white",
@@ -879,6 +884,10 @@ export default {
       imageType: 'Image',
       imageTypes: ['Image', 'Segmentation', 'Scaffold', 'Plot'],
       imageClicked: '',
+      /**
+       * List of group names 
+       */
+      groupNames: markRaw([]),
     };
   },
   watch: {
@@ -959,7 +968,10 @@ export default {
       immediate: true,
     },
     markerLabels: function (labels) {
-      this.markerLabelEntry = markRaw({...labels})
+      if (this.imageRadio === false) {
+        //Only updates the following if marker mode is standard
+        this.markerLabelEntry = markRaw({...labels});
+      }
     },
     markerLabelEntry: function (entry) {
       for (const [key, value] of Object.entries(this.previousMarkerLabelEntry)) {
@@ -1040,6 +1052,9 @@ export default {
       if (this.timeVarying === false && zincObject.isTimeVarying()) {
         this.timeVarying = true;
       }
+      if (zincObject.groupName) {
+        this.groupNames.push(zincObject.groupName.toLowerCase());
+      }
       //Emit when a new object is added to the scene
       //@arg The object added to the sceene
       this.$emit("zinc-object-added", zincObject);
@@ -1151,7 +1166,7 @@ export default {
         region, group, this.url, comment);
       if (this.enableLocalAnnotations) {
         annotation.group = group;
-        let regionPath = region; 
+        let regionPath = region;
         if (regionPath.slice(-1) === "/") {
           regionPath = regionPath.slice(0, -1);
         }
@@ -1254,7 +1269,7 @@ export default {
         }
       }
       this.cancelCreate();
-    },  
+    },
     formatTooltip(val) {
       if (this.timeMax >= 1000) {
         if (val) {
@@ -1341,7 +1356,7 @@ export default {
       return objects;
     },
     /**
-     * Switch active drawing type 
+     * Switch active drawing type
      * @arg shapeName shape to toggle
      *
      * @vuese
@@ -1466,7 +1481,7 @@ export default {
           this.createData.points.push(coords);
         }
       }
-    },    
+    },
     /**
      * Return renderer information
      *
@@ -2029,7 +2044,7 @@ export default {
     /**
      * Set the marker modes for objects with the provided name, mode can
      * be "on", "off" or "inherited".
-     * Value can either be number or an object containing number and 
+     * Value can either be number or an object containing number and
      * imgURL.
      */
     setMarkerModeForObjectsWithName: function (name, value, mode) {
@@ -2288,7 +2303,7 @@ export default {
           const region = annotation.region;
           let fullName = region.slice(-1) === "/" ? region : region + "/";
           const noSlash = fullName.slice(0, -1);
-          annotation.region = noSlash; 
+          annotation.region = noSlash;
           fullName = fullName + group;
           const featureID = encodeURIComponent(fullName);
           annotation.item.id = featureID;
@@ -2330,6 +2345,7 @@ export default {
             visibility: visibility,
           })
         );
+        this.groupNames.length = 0;
         if (this.fileFormat === "gltf") {
           this.$module.loadGLTFFromURL(newValue, "scene", true);
         } else {
@@ -2426,54 +2442,59 @@ export default {
       }
     },
     removeImageThumbnails: function () {
-      this.imageThumbnails = {}
-      this.markerLabelEntry = markRaw(this.markerLabels)
+      this.imageThumbnails = {};
+      this.markerLabelEntry = markRaw(this.markerLabels);
     },
-    setImage: function (flag) {
+    setImage: async function (flag) {
       if (flag) {
-        this.setImageType(this.imageType)
+        await this.setImageType(this.imageType);
+        this.$module.scene.enableMarkerCluster(false);
       } else {
-        this.removeImageThumbnails()
+        this.removeImageThumbnails();
+        this.$module.scene.enableMarkerCluster(this.markerCluster);
       }
     },
     setImageType: async function (type) {
-      this.imageType = type
+      this.imageType = type;
+      this.imagesDownloading = true;
       if (!this.settingsStore.imageTypeCached(type)) {
-        this.loading = true
-        await this.fetchImageThumbnails(type)
-        this.loading = false
+        this.loading = true;
+        await this.fetchImageThumbnails(type);
+        this.loading = false;
       }
-      this.populateImageThumbnails(type)
+      this.populateImageThumbnails(type);
     },
     fetchImageThumbnails: async function (type) {
-      let thumbnails = {}
-      const organCuries = this.settingsStore.organCuries
+      let thumbnails = {};
+      const organCuries = this.settingsStore.organCuries;
       if (type === 'Image') {
-        thumbnails = await getBiolucidaThumbnails(this.sparcAPI, organCuries, type)
+        thumbnails = await getBiolucidaThumbnails(this.sparcAPI, organCuries, type);
       } else if (type === 'Segmentation') {
-        thumbnails = await getSegmentationThumbnails(this.sparcAPI, organCuries, type)
+        thumbnails = await getSegmentationThumbnails(this.sparcAPI, organCuries, type);
       } else if (type === 'Scaffold') {
-        thumbnails = await getScaffoldThumbnails(this.sparcAPI, organCuries, type)
+        thumbnails = await getScaffoldThumbnails(this.sparcAPI, organCuries, type);
       } else if (type === 'Plot') {
-        thumbnails = await getPlotThumbnails(this.sparcAPI, organCuries, type)
+        thumbnails = await getPlotThumbnails(this.sparcAPI, organCuries, type);
       }
-      this.settingsStore.updateImageThumbnails(type, thumbnails)
+      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(
+      const organCuries = this.settingsStore.organCuries;
+      const identifiers = organCuries.filter(
+        (curie) => this.groupNames.includes(curie.name.toLowerCase())
+        ).map((curie) => curie.id);
+      const imageThumbnails = this.settingsStore.getImageThumbnails(this.imageType, identifiers);
+      return Object.fromEntries(
           Object.entries(imageThumbnails)
-            .map(([key, value]) => [organCuries.filter((curie) => curie.id === key)[0].name, value])))
+            .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
+      this.removeImageThumbnails();
+      const thumbnails = this.convertUberonToName();
+      this.loading = true;
+      this.markerLabelEntry = markRaw(await this.populateMapWithImages(thumbnails, type));
+      this.loading = false;
+      this.imagesDownloading = false;
     },
     onImageThumbnailOpen: function (payload) {
       this.$emit('image-thumbnail-open', payload);

package/src/mixins/imageMixin.js

@@ -6,8 +6,6 @@ export default {
         const response = await this.downloadImageThumbnail(key, list, type);
         if (response) {
           imageMarkerLabels[key] = response;
-        } else {
-          imageMarkerLabels[key] = this.markerLabels[key];
         }
       }
       return imageMarkerLabels;