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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.3.3-beta.1",
+  "version": "1.4.0-beta.0",
   "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.11.0"
+    "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();
@@ -422,7 +431,7 @@ export default {
           "body proper": 9,
           "Spinal cord": 8,
           "lung": 11,
-          "stomach": {number:12, imgURL: 'https://mapcore-bucket1.s3.us-west-2.amazonaws.com/texture/arm1/jpg/0984.jpg'},
+          "stomach": 12,
           "urinary bladder": 11,
           "Brainstem": 11,
           "heart": 9,
@@ -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;

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,26 @@ 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])))
+      if (this.label in imageThumbnailsEntries) {
+        imageEntries = imageThumbnailsEntries[this.label];
+      }
+      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 +184,7 @@ export default {
             "resource": encodeURIComponent(this.scaffoldUrl),
           };
         }
-      }
-      else {
-        this.display = false;
+      } else {
         this.annotationEntry = { };
       }
     },

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,7 +287,7 @@
         ref="backgroundPopover"
         :virtual-ref="backgroundIconRef"
         placement="top-start"
-        width="128"
+        width="330"
         :teleported="false"
         trigger="click"
         popper-class="background-popper non-selectable h-auto"
@@ -292,7 +295,7 @@
       >
         <div>
           <el-row class="backgroundText">Viewing Mode</el-row>
-          <el-row class="backgroundControl">
+          <el-row class="backgroundChooser">
             <div style="margin-bottom: 2px;">
               <template
                   v-for="(value, key, index) in viewingModes"
@@ -310,6 +313,41 @@
               {{ 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">
@@ -382,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,
@@ -421,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.
@@ -432,6 +478,7 @@ import { useMainStore } from "@/store/index";
  */
 export default {
   name: "ScaffoldVuer",
+  mixins: [imageMixin],
   components: {
     Button,
     Col,
@@ -689,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 {
@@ -700,6 +761,7 @@ export default {
       scaffoldUrl: this.url,
       $annotator: this.annotator,
       boundingDims: this.boundingDims,
+      getFeaturesAlert: () => undefined,
     };
   },
   data: function () {
@@ -790,7 +852,8 @@ export default {
         active: false,
       },
       fileFormat: "metadata",
-      previousMarkerLabels: markRaw({}),
+      markerLabelEntry: markRaw({}),
+      previousMarkerLabelEntry: markRaw({}),
       viewingMode: "Exploration",
       viewingModes: {
         "Exploration": "View and explore detailed visualization of 3D scaffolds",
@@ -812,6 +875,10 @@ export default {
         centre: [0, 0, 0],
         size:[1, 1, 1],
       },
+      imageRadio: false,
+      imageType: 'Image',
+      imageTypes: ['Image', 'Segmentation', 'Scaffold', 'Plot'],
+      imageClicked: '',
     };
   },
   watch: {
@@ -891,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 () {
@@ -938,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: {
@@ -1503,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);
@@ -1553,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 = ''
+            }
           }
         }
       }
@@ -2327,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>
@@ -2495,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 {
@@ -2752,6 +2891,10 @@ export default {
       min-height: 24px
     }
   }
+
+  &.imageSelector {
+    width: 125px!important;
+  }
 }
 
 :deep(.scaffold_viewer_dropdown) {

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 };
+    },
+  },
+};