Image on scaffold

package.json

@@ -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",
@@ -60,7 +60,7 @@
   "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"
+  }
 }

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;

src/components.d.ts

@@ -27,6 +27,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']

src/components/ScaffoldTooltip.vue

@@ -14,18 +14,22 @@
       <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)"
           @cancel-create="$emit('cancel-create')"
         />
         <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,29 @@ 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) {
+        if (imageEntries.length) {
+          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 +187,7 @@ export default {
             "resource": encodeURIComponent(this.scaffoldUrl),
           };
         }
-      }
-      else {
-        this.display = false;
+      } else {
         this.annotationEntry = { };
       }
     },