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

package/src/components/ScaffoldVuer.vue

@@ -15,9 +15,12 @@
       :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"
@@ -284,29 +287,66 @@
         ref="backgroundPopover"
         :virtual-ref="backgroundIconRef"
         placement="top-start"
-        width="128"
+        width="330"
         :teleported="false"
         trigger="click"
-        popper-class="background-popper non-selectable"
+        popper-class="background-popper non-selectable h-auto"
         virtual-triggering
       >
         <div>
           <el-row class="backgroundText">Viewing Mode</el-row>
-          <el-row class="backgroundControl">
-            <el-select
-              :teleported="false"
-              v-model="viewingMode"
-              placeholder="Select"
-              class="scaffold-select-box viewing-mode"
-              popper-class="scaffold_viewer_dropdown"
-              @change="viewingModeChange"
-            >
-              <el-option v-for="item in viewingModes" :key="item" :label="item" :value="item">
-                <el-row>
-                  <el-col :span="12">{{ item }}</el-col>
-                </el-row>
-              </el-option>
-            </el-select>
+          <el-row class="backgroundChooser">
+            <div style="margin-bottom: 2px;">
+              <template
+                  v-for="(value, key, index) in viewingModes"
+                  :key="key"
+                >
+                  <template v-if="key === viewingMode">
+                    <span class="viewing-mode-title"><b >{{ key }}</b></span>
+                  </template>
+                  <template v-else>
+                    <span class="viewing-mode-unselected" @click="changeViewingMode(key)">{{ key }}</span>
+                  </template>
+              </template>
+            </div>
+            <el-row class="viewing-mode-description">
+              {{ 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>
@@ -380,7 +420,7 @@
 
 <script>
 /* eslint-disable no-alert, no-console */
-import { markRaw, shallowRef } from 'vue';
+import { markRaw, toRaw, shallowRef } from 'vue';
 import {
   WarningFilled as ElIconWarningFilled,
   ArrowDown as ElIconArrowDown,
@@ -419,8 +459,16 @@ 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 } from 'pinia';
-import { useMainStore } from "@/store/index";
+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'
 
 /**
  * A vue component of the scaffold viewer.
@@ -430,6 +478,7 @@ import { useMainStore } from "@/store/index";
  */
 export default {
   name: "ScaffoldVuer",
+  mixins: [imageMixin],
   components: {
     Button,
     Col,
@@ -564,6 +613,20 @@ export default {
       type: Boolean,
       default: false,
     },
+    /**
+     * 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.
+     *
+     */
     markerLabels : {
       type: Object,
       default: function () {
@@ -673,10 +736,24 @@ 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 {
@@ -684,6 +761,7 @@ export default {
       scaffoldUrl: this.url,
       $annotator: this.annotator,
       boundingDims: this.boundingDims,
+      getFeaturesAlert: () => undefined,
     };
   },
   data: function () {
@@ -774,12 +852,13 @@ export default {
         active: false,
       },
       fileFormat: "metadata",
-      previousMarkerLabels: markRaw({}),
+      markerLabelEntry: markRaw({}),
+      previousMarkerLabelEntry: markRaw({}),
       viewingMode: "Exploration",
-      viewingModes: [
-        "Annotation",
-        "Exploration",
-      ],
+      viewingModes: {
+        "Exploration": "View and explore detailed visualization of 3D scaffolds",
+        "Annotation": "View internal identifiers of features",
+      },
       openMapRef: undefined,
       backgroundIconRef: undefined,
       userInformation: undefined,
@@ -796,6 +875,10 @@ export default {
         centre: [0, 0, 0],
         size:[1, 1, 1],
       },
+      imageRadio: false,
+      imageType: 'Image',
+      imageTypes: ['Image', 'Segmentation', 'Scaffold', 'Plot'],
+      imageClicked: '',
     };
   },
   watch: {
@@ -875,14 +958,17 @@ export default {
       },
       immediate: true,
     },
-    markerLabels: function(labels) {
-      for (const [key, value] of Object.entries(this.previousMarkerLabels)) {
+    markerLabels: function (labels) {
+      this.markerLabelEntry = markRaw({...labels})
+    },
+    markerLabelEntry: function (entry) {
+      for (const [key, value] of Object.entries(this.previousMarkerLabelEntry)) {
         this.setMarkerModeForObjectsWithName(key, value, "off");
       }
-      for (const [key, value] of Object.entries(labels)) {
+      for (const [key, value] of Object.entries(entry)) {
         this.setMarkerModeForObjectsWithName(key, value, "on");
       }
-      this.previousMarkerLabels = markRaw({...labels});
+      this.previousMarkerLabelEntry = markRaw({...entry});
     },
   },
   beforeCreate: function () {
@@ -922,9 +1008,13 @@ 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: {
@@ -1487,6 +1577,13 @@ 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);
@@ -1537,6 +1634,12 @@ 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 = ''
+            }
           }
         }
       }
@@ -1863,9 +1966,13 @@ export default {
     },
     /**
      * Callback on viewing mode change
+     * Optional, can be used to update the view mode.
      */
-    viewingModeChange: function () {
+    changeViewingMode: function (modeName) {
       if (this.$module) {
+        if (modeName) {
+          this.viewingMode = modeName
+        }
         if (this.viewingMode === "Annotation") {
           let authenticated = false;
           if (this.userInformation) {
@@ -1919,13 +2026,19 @@ 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 
+     * imgURL.
      */
-    setMarkerModeForObjectsWithName: function (name, number, mode) {
+    setMarkerModeForObjectsWithName: function (name, value, mode) {
       if (name && this.$module.scene) {
+        let options = value;
+        if (typeof value === 'number') {
+          options = { number: value, imgURL: undefined };
+        }
         const rootRegion = this.$module.scene.getRootRegion();
         const groups = [name];
         const objects = findObjectsWithNames(rootRegion, groups, "", true);
-        objects.forEach(object => object.setMarkerMode(mode, { number }));
+        objects.forEach(object => object.setMarkerMode(mode, options));
       }
     },
     /**
@@ -2301,15 +2414,67 @@ 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.markerLabels)) {
+      for (const [key, value] of Object.entries(this.markerLabelEntry)) {
         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>
@@ -2469,7 +2634,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: 140px;
+  height: fit-content;
   min-width: 200px;
   .el-popper__arrow {
     &:before {
@@ -2478,6 +2643,10 @@ export default {
   }
 }
 
+:deep(.background-popper.el-popover.el-popper.h-auto) {
+  height: auto !important;
+}
+
 :deep(.open-map-popper.el-popover.el-popper) {
   padding-top: 5px;
   padding-bottom: 5px;
@@ -2680,15 +2849,38 @@ export default {
   }
 }
 
+.viewing-mode-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: $app-primary-color;
+  margin: 8px;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.viewing-mode-unselected {
+  font-size: 11px;
+  font-weight: 600;
+  color: rgb(48, 49, 51);
+  margin: 8px;
+  opacity: 0.5;
+  cursor: pointer;
+}
+
+.viewing-mode-description {
+  font-size: 12px;
+  color: rgb(48, 49, 51);
+  text-align: left;
+  padding-bottom: 4px;
+  margin-left: 8px;
+}
+
 .scaffold-select-box {
   border-radius: 4px;
   border: 1px solid rgb(144, 147, 153);
   background-color: var(--white);
   font-weight: 500;
   color: rgb(48, 49, 51);
-  &.viewing-mode {
-    width: 150px!important;
-  }
 
   &.speed {
     margin-left: 8px;
@@ -2699,6 +2891,10 @@ export default {
       min-height: 24px
     }
   }
+
+  &.imageSelector {
+    width: 125px!important;
+  }
 }
 
 :deep(.scaffold_viewer_dropdown) {

package/src/components/TextureSlidesControls.vue

@@ -79,6 +79,7 @@ import {
   ElSlider as Slider,
   ElOption as Option,
 } from "element-plus";
+import { markRaw } from 'vue';
 
 /**
  * A component to control the opacity of the target object.
@@ -116,39 +117,37 @@ export default {
           label: "z",
         },
       ],
+      zincObject: undefined,
     };
   },
-  mounted: function () {
-    this._zincObject = undefined;
-  },
   methods: {
     setObject: function (object) {
       if (object.isTextureSlides) {
-        this._zincObject = object;
-        this.settings = this._zincObject.getTextureSettings();
+        this.zincObject = markRaw(object);
+        this.settings = this.zincObject.getTextureSettings();
       } else {
-        this._zincObject = undefined;
+        this.zincObject = undefined;
         this.settings = [];
       }
     },
     addNewSlide: function () {
       const newSettings = { direction: "x", value: 0 };
-      const returnSettings = this._zincObject.createSlide(newSettings);
+      const returnSettings = this.zincObject.createSlide(newSettings);
       this.settings.push(returnSettings);
     },
     modifyDirection: function(direction, slide) {
       if (slide) {
         slide.direction = direction;
-        this._zincObject.modifySlideSettings(slide);
+        this.zincObject.modifySlideSettings(slide);
       }
     },
     modifySlide: function (slide) {
       if (slide) {
-        this._zincObject.modifySlideSettings(slide);
+        this.zincObject.modifySlideSettings(slide);
       }
     },
     removeSlide: function (index, slide) {
-      this._zincObject.removeSlideWithId(slide.id);
+      this.zincObject.removeSlideWithId(slide.id);
       this.settings.splice(index, 1);
     },
   },

package/src/components/TransformationControls.vue

@@ -119,6 +119,7 @@ import {
   ElMain as Main,
   ElSlider as Slider,
 } from "element-plus";
+import { markRaw } from "vue";
 
 /**
  * A component to control the opacity of the target object.
@@ -141,6 +142,7 @@ export default {
       scale: 1,
       min: [0, 0, 0],
       max: [1, 1, 1],
+      zincObject: undefined,
     };
   },
   watch: {
@@ -163,14 +165,11 @@ export default {
       deep: true,
     },
   },
-  mounted: function () {
-    this._zincObject = undefined;
-  },
   methods: {
     setObject: function (object) {
       if (object.isZincObject) {
-        this._zincObject = object;
-        const morph = this._zincObject.getGroup();
+        this.zincObject = markRaw(object);
+        const morph = this.zincObject.getGroup();
         if (morph && morph.position) {
           this.x = morph.position.x;
           this.y = morph.position.y;
@@ -178,7 +177,7 @@ export default {
           this.scale = morph.scale.x;
         }
       } else {
-        this._zincObject = undefined;
+        this.zincObject = undefined;
         this.x = 0;
         this.y = 0;
         this.z = 0;
@@ -186,10 +185,10 @@ export default {
       }
     },
     modifyPosition: function() {
-      this._zincObject.setPosition(this.x, this.y, this.z);
+      this.zincObject.setPosition(this.x, this.y, this.z);
     },
     modifyScale: function() {
-      this._zincObject.setScaleAll(this.scale);
+      this.zincObject.setScaleAll(this.scale);
     },
   },
 };

package/src/components.d.ts

@@ -26,6 +26,8 @@ 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 '@/store/index'
+import { useMainStore } from '@/stores/index'
 
 const routes = [
   { path: '/'},

package/src/mixins/imageMixin.js

@@ -0,0 +1,89 @@
+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 };
+    },
+  },
+};