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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.4.0",
+  "version": "1.4.1-image.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/map-utilities": "^1.1.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.1"
+    "zincjs": "^1.11.4"
   },
   "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",
@@ -92,5 +92,8 @@
   "browserslist": [
     "> 1%",
     "last 2 versions"
-  ]
+  ],
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-gnu": "^4.21.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,13 @@ export default {
       router: useRouter(),
       ElIconSetting: shallowRef(ElIconSetting),
       ElIconFolderOpened: shallowRef(ElIconFolderOpened),
-      auto: NaN
+      auto: NaN,
+      sparcAPI: import.meta.env.VITE_SPARC_API,
     };
   },
+  computed: {
+    ...mapStores(useSettingsStore),
+  },
   watch: {
     input: function () {
       this.parseInput();
@@ -422,7 +430,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 +462,9 @@ export default {
   },
   mounted: function () {
     this._objects = [];
+    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/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/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,45 @@
               {{ viewingModes[viewingMode] }}
             </el-row>
           </el-row>
+          <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-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">
@@ -382,7 +424,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 +463,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 +482,7 @@ import { useMainStore } from "@/store/index";
  */
 export default {
   name: "ScaffoldVuer",
+  mixins: [imageMixin],
   components: {
     Button,
     Col,
@@ -570,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.
      *
@@ -689,10 +740,24 @@ export default {
     /**
      * Enable local annotations
      */
-     enableLocalAnnotations: {
+    enableLocalAnnotations: {
       type: Boolean,
       default: false
     },
+    /**
+     * Specify the endpoint of the SPARC API.
+     */
+    sparcAPI: {
+      type: String,
+      default: '',
+    },
+    /**
+     * The option to show image thumbnail in sidebar
+     */
+    imageThumbnailSidebar: {
+      type: Boolean,
+      default: false,
+    },
   },
   provide() {
     return {
@@ -700,6 +765,7 @@ export default {
       scaffoldUrl: this.url,
       $annotator: this.annotator,
       boundingDims: this.boundingDims,
+      getFeaturesAlert: () => undefined,
     };
   },
   data: function () {
@@ -743,6 +809,7 @@ export default {
       inHelp: false,
       helpModeActiveIndex: this.helpModeInitialIndex,
       loading: false,
+      imagesDownloading: false,
       duration: 3000,
       drawerOpen: true,
       currentBackground: "white",
@@ -790,7 +857,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 +880,14 @@ export default {
         centre: [0, 0, 0],
         size:[1, 1, 1],
       },
+      imageRadio: false,
+      imageType: 'Image',
+      imageTypes: ['Image', 'Segmentation', 'Scaffold', 'Plot'],
+      imageClicked: '',
+      /**
+       * List of group names 
+       */
+      groupNames: markRaw([]),
     };
   },
   watch: {
@@ -891,14 +967,20 @@ export default {
       },
       immediate: true,
     },
-    markerLabels: function(labels) {
-      for (const [key, value] of Object.entries(this.previousMarkerLabels)) {
+    markerLabels: function (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)) {
         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 +1020,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: {
@@ -966,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);
@@ -1077,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);
         }
@@ -1180,7 +1269,7 @@ export default {
         }
       }
       this.cancelCreate();
-    },  
+    },
     formatTooltip(val) {
       if (this.timeMax >= 1000) {
         if (val) {
@@ -1267,7 +1356,7 @@ export default {
       return objects;
     },
     /**
-     * Switch active drawing type 
+     * Switch active drawing type
      * @arg shapeName shape to toggle
      *
      * @vuese
@@ -1392,7 +1481,7 @@ export default {
           this.createData.points.push(coords);
         }
       }
-    },    
+    },
     /**
      * Return renderer information
      *
@@ -1480,6 +1569,9 @@ 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;
@@ -1503,6 +1595,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 +1652,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 = ''
+            }
           }
         }
       }
@@ -1939,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) {
@@ -2198,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;
@@ -2240,6 +2345,7 @@ export default {
             visibility: visibility,
           })
         );
+        this.groupNames.length = 0;
         if (this.fileFormat === "gltf") {
           this.$module.loadGLTFFromURL(newValue, "scene", true);
         } else {
@@ -2327,15 +2433,72 @@ 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: async function (flag) {
+      if (flag) {
+        await this.setImageType(this.imageType);
+        this.$module.scene.enableMarkerCluster(false);
+      } else {
+        this.removeImageThumbnails();
+        this.$module.scene.enableMarkerCluster(this.markerCluster);
+      }
+    },
+    setImageType: async function (type) {
+      this.imageType = type;
+      this.imagesDownloading = true;
+      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) => 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]));
+    },
+    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.imagesDownloading = false;
+    },
+    onImageThumbnailOpen: function (payload) {
+      this.$emit('image-thumbnail-open', payload);
+    },
   },
 };
 </script>
@@ -2495,7 +2658,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 +2915,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: '/'},