@abi-software/flatmapvuer 1.3.2 → 1.4.1-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "1.3.2",
+  "version": "1.4.1-beta.0",
   "license": "Apache-2.0",
   "files": [
     "dist/*",
@@ -43,8 +43,8 @@
     "./src/*": "./src/*"
   },
   "dependencies": {
-    "@abi-software/flatmap-viewer": "2.9.5",
-    "@abi-software/map-utilities": "1.0.0",
+    "@abi-software/flatmap-viewer": "3.1.4",
+    "@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",
@@ -59,7 +59,7 @@
     "@cypress/webpack-dev-server": "^3.6.1",
     "@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",
     "chokidar": "^3.6.0",
@@ -92,5 +92,8 @@
   "browserslist": [
     "> 1%",
     "last 2 versions"
-  ]
+  ],
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-gnu": "^4.21.1"
+  }
 }

package/src/App.vue

@@ -77,6 +77,7 @@
       :displayMinimap="true"
       :enableOpenMapUI="true"
       :flatmapAPI="flatmapAPI"
+      :sparcAPI="sparcAPI"
       :disableUI="disableUI"
       @open-pubmed-url="onOpenPubmedUrl"
       @pathway-selection-changed="onPathwaySelectionChanged"
@@ -109,6 +110,9 @@ import './icons/mapicon-species-style.css'
 import MultiFlatmapVuer from './components/MultiFlatmapVuer.vue'
 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'
 
 export default {
   name: 'app',
@@ -145,11 +149,13 @@ export default {
       if (this.consoleOn) console.log(component)
       let taxon = component.mapImp.describes
       let id = component.mapImp.addMarker('UBERON:0000948')
+
       window.flatmapImp = component.mapImp
       component.enablePanZoomEvents(true)
       //component.showPathwaysDrawer(false);
       if (this.consoleOn) console.log(taxon, id)
       //component.searchAndShowResult("heart");
+      // component.changeViewingMode('Annotation')
     },
     panZoomcallback: function (payload) {
       this.payload = payload
@@ -260,6 +266,10 @@ export default {
           iconClass: 'mapicon-icon_cat',
           displayWarning: true,
         },
+        Vagus: {
+          taxo: 'UBERON:1759',
+          displayWarning: true,
+        },
         Sample: { taxo: 'NCBITaxon:1', displayWarning: true },
         'Functional Connectivity': {
           taxo: 'FunctionalConnectivity',
@@ -280,18 +290,24 @@ export default {
       useHelpModeDialog: true,
       multiflatmapRef: null,
       mapSettings: [],
+      sparcAPI: import.meta.env.VITE_SPARC_API,
       //flatmapAPI: "https://mapcore-demo.org/current/flatmap/v2/"
       //flatmapAPI: "https://mapcore-demo.org/devel/flatmap/v3/"
-      //flatmapAPI: "https://mapcoe-demo.org/current/flatmap/v3/",
-      flatmapAPI: 'https://mapcore-demo.org/devel/flatmap/v4/',
+      flatmapAPI: "https://mapcore-demo.org/current/flatmap/v3/",
+      //flatmapAPI: 'https://mapcore-demo.org/devel/flatmap/v4/',
+      //flatmapAPI: 'https://mapcore-demo.org/curation/flatmap/',
       //flatmapAPI: "https://mapcore-demo.org/fccb/flatmap/"
       //flatmapAPI: "https://mapcore-demo.org/staging/flatmap/v1/"
       // flatmapAPI: "https://mapcore-demo.org/devel/flatmap/v1/",
-      ElIconSetting: shallowRef(ElIconSetting)
+      ElIconSetting: shallowRef(ElIconSetting),
     }
   },
   mounted: function () {
     this.multiflatmapRef = this.$refs.multi;
+    getOrganCuries(this.sparcAPI).then((organCuries) => this.settingsStore.updateOrganCuries(organCuries))
+  },
+  computed: {
+    ...mapStores(useSettingsStore),
   },
   watch: {
     helpMode: function (newVal) {

package/src/components/FlatmapVuer.vue

@@ -54,7 +54,7 @@ Please use `const` to assign meaningful names to them...
                 SCKAN </a
               >.
             </p>
-            <p v-else @mouseover="showTooltip(6)" @mouseout="hideTooltip(6)">
+            <p v-else @mouseover="showTooltip(7)" @mouseout="hideTooltip(7)">
               This map displays the connectivity of neuron populations.
               Specifically, those from the primarily rat-based
               <a
@@ -76,8 +76,8 @@ Please use `const` to assign meaningful names to them...
               <div
                 class="warning-icon"
                 v-if="displayWarning"
-                @mouseover="showTooltip(6)"
-                @mouseout="hideTooltip(6)"
+                @mouseover="showTooltip(7)"
+                @mouseout="hideTooltip(7)"
               >
                 <el-icon><el-icon-warning-filled /></el-icon>
                 <template v-if="isLegacy">
@@ -245,7 +245,7 @@ Please use `const` to assign meaningful names to them...
           <div
             class="pathway-location"
             :class="{ open: drawerOpen, close: !drawerOpen }"
-            v-show="!disableUI"
+            v-show="!(disableUI || isCentreLine)"
           >
             <div
               class="pathway-container"
@@ -363,7 +363,7 @@ Please use `const` to assign meaningful names to them...
                 key="pathwaysSelection"
               />
               <selections-group
-                v-if="!isFC && taxonConnectivity && taxonConnectivity.length > 0"
+                v-if="taxonConnectivity && taxonConnectivity.length > 0"
                 title="Studied in"
                 labelKey="label"
                 identifierKey="taxon"
@@ -377,7 +377,7 @@ Please use `const` to assign meaningful names to them...
                 key="taxonSelection"
               />
               <selections-group
-                v-if="!isFC && centreLines && centreLines.length > 0"
+                v-if="!(isCentreLine || isFC)  && centreLines && centreLines.length > 0"
                 title="Nerves"
                 labelKey="label"
                 identifierKey="key"
@@ -426,7 +426,7 @@ Please use `const` to assign meaningful names to them...
         ref="backgroundPopover"
         :virtual-ref="backgroundIconRef"
         placement="top-start"
-        width="320"
+        width="330"
         :teleported="false"
         trigger="click"
         popper-class="background-popper h-auto"
@@ -437,29 +437,30 @@ Please use `const` to assign meaningful names to them...
           <el-row class="backgroundControl">
             <div style="margin-bottom: 2px;">
               <template
-                  v-for="(item, i) in viewingModes"
-                  :key="item + i"
+                  v-for="(value, key, index) in viewingModes"
+                  :key="key"
                 >
-                  <template v-if="item.name === viewingMode">
-                    <span class="viewing-mode-title"><b >{{ item.name }}</b></span>
+                  <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(i)">{{ item.name }}</span>
+                    <span class="viewing-mode-unselected" @click="changeViewingMode(key)">{{ key }}</span>
                   </template>
               </template>
             </div>
             <el-row class="viewing-mode-description">
-              {{ viewingModes[viewingModeIndex].description}}
+              {{ viewingModes[viewingMode] }}
             </el-row>
           </el-row>
           <template v-if="viewingMode === 'Annotation' && userInformation">
+            <el-row class="backgroundSpacer"></el-row>
             <el-row class="backgroundText">Drawn By*</el-row>
             <el-row class="backgroundControl">
               <el-select
                 :teleported="false"
                 v-model="drawnType"
                 placeholder="Select"
-                class="select-box"
+                class="select-box annotationSelector"
                 popper-class="flatmap_dropdown"
                 @change="setDrawnType"
               >
@@ -475,13 +476,14 @@ Please use `const` to assign meaningful names to them...
                 </el-option>
               </el-select>
             </el-row>
+            <el-row class="backgroundSpacer"></el-row>
             <el-row class="backgroundText">Annotated By*</el-row>
             <el-row class="backgroundControl">
               <el-select
                 :teleported="false"
                 v-model="annotatedType"
                 placeholder="Select"
-                class="select-box"
+                class="select-box annotationSelector"
                 popper-class="flatmap_dropdown"
                 @change="setAnnotatedType"
               >
@@ -498,6 +500,41 @@ Please use `const` to assign meaningful names to them...
               </el-select>
             </el-row>
           </template>
+          <el-row class="backgroundSpacer" v-if="viewingMode === 'Exploration' && !isFC"></el-row>
+          <el-row class="backgroundText" v-if="viewingMode === 'Exploration' && !isFC">Markers display</el-row>
+          <el-row class="backgroundControl" v-if="viewingMode === 'Exploration' && !isFC">
+            <el-col :span="14">
+              <el-radio-group
+                v-model="imageRadio"
+                class="flatmap-radio"
+                @change="setImage"
+              >
+                <el-radio :label="false">Standard</el-radio>
+                <el-radio :label="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="select-box imageSelector"
+                popper-class="flatmap_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" v-if="displayFlightPathOption"></el-row>
           <el-row class="backgroundText" v-if="displayFlightPathOption">Flight path display</el-row>
           <el-row class="backgroundControl" v-if="displayFlightPathOption">
@@ -602,9 +639,10 @@ Please use `const` to assign meaningful names to them...
         ref="tooltip"
         class="tooltip"
         v-show="tooltipDisplay"
+        :tooltipType="tooltipType"
+        :provenanceEntry="provenanceEntry"
         :annotationEntry="annotationEntry"
-        :tooltipEntry="tooltipEntry"
-        :annotationDisplay="viewingMode === 'Annotation'"
+        :imageEntry="imageEntry"
         @annotation="commitAnnotationEvent"
       />
     </div>
@@ -643,10 +681,18 @@ import yellowstar from '../icons/yellowstar'
 import ResizeSensor from 'css-element-queries/src/ResizeSensor'
 import * as flatmap from '@abi-software/flatmap-viewer'
 import { AnnotationService } from '@abi-software/sparc-annotation'
-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 { DrawToolbar, Tooltip, TreeControls } from '@abi-software/map-utilities'
 import '@abi-software/map-utilities/dist/style.css'
+import {
+  getBiolucidaThumbnails,
+  getSegmentationThumbnails,
+  getScaffoldThumbnails,
+  getPlotThumbnails
+} from '../services/scicrunchQueries'
+import imageMixin from '../mixins/imageMixin'
 
 const centroid = (geometry) => {
   let featureGeometry = { lng: 0, lat: 0, }
@@ -735,6 +781,7 @@ const createUnfilledTooltipData = function () {
  */
 export default {
   name: 'FlatmapVuer',
+  mixins:[imageMixin],
   components: {
     Button,
     Col,
@@ -757,8 +804,6 @@ export default {
     DrawToolbar
   },
   beforeCreate: function () {
-    this.mapManager = undefined
-    this.mapImp = undefined
     //The state watcher may triggered before
     //created causing issue, This flag will
     //resolve this issue.
@@ -769,6 +814,68 @@ export default {
     return { annotator }
   },
   methods: {
+    /**
+     * @vuese
+     * Function to add image thumbnails to the map.
+     */
+    populateImageThumbnails: async function (type) {
+      if (this.mapImp) {
+        this.closeTooltip()
+        this.mapImp.clearMarkers();
+        const identifiers = this.mapImp.anatomicalIdentifiers
+        const imageThumbnails = this.settingsStore.getImageThumbnails(type, identifiers)
+        this.populateMapWithImages(this.mapImp, imageThumbnails, type)
+      }
+    },
+    /**
+     * @vuese
+     * Function to fetching image thumbnails.
+     */
+    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)
+    },
+    /**
+     * @vuese
+     * Function to switch the type of displayed image.
+     * @arg type
+     */
+    setImageType: async function (type) {
+      this.imageType = type
+      if (this.mapImp) {
+        if (!this.settingsStore.imageTypeCached(type)) {
+          this.loading = true
+          await this.fetchImageThumbnails(type)
+          this.loading = false
+        }
+        this.populateImageThumbnails(type)
+      }
+    },
+    /**
+     * @vuese
+     * Function to switch show or hide images.
+     * @arg flag
+     */
+    setImage: function (flag) {
+      this.imageRadio = flag
+      if (this.mapImp) {
+        if (flag) {
+          this.setImageType(this.imageType)
+        } else {
+          this.mapImp.clearMarkers();
+        }
+      }
+    },
     /**
      * @vuese
      * Function to initialise drawing.
@@ -1671,7 +1778,6 @@ export default {
             }
             if (
               data &&
-              data.type !== 'marker' &&
               eventType === 'click' &&
               !(this.viewingMode === 'Neuron Connection') &&
               // Disable popup when drawing
@@ -1691,13 +1797,10 @@ export default {
      * Function triggered by viewing mode change.
      * (e.g., from 'Exploration' to 'Annotation')
      * All tooltips and popups currently showing on map will be closed
-     * when this function is triggered. Optional index can be provided, this will
-     * switch the provided view mode to the first index.
      */
-     changeViewingMode: function (newModeIndex=null) {
-      if (newModeIndex !== null) {
-        //this.viewingMode = this.viewingModes[newModeIndex].name
-        this.viewingModeIndex = newModeIndex
+    changeViewingMode: function (modeName) {
+      if (modeName) {
+        this.viewingMode = modeName
       }
       this.closeTooltip()
     },
@@ -1708,6 +1811,12 @@ export default {
      * @arg data
      */
     checkAndCreatePopups: async function (data) {
+      if (data.feature.type === 'marker') {
+        this.tooltipType = 'image'
+        const imageThumbnails = this.settingsStore.getImageThumbnails(this.imageType, [data.resource[0]])
+        this.imageEntry = markRaw(imageThumbnails[data.resource[0]])
+        this.displayTooltip(data.feature.models)
+      } else {
       // Call flatmap database to get the connection data
       if (this.viewingMode === 'Annotation') {
         if (data.feature) {
@@ -1715,6 +1824,7 @@ export default {
             ...data.feature,
             resourceId: this.serverURL,
           }
+          this.tooltipType = 'annotation'
           if (data.feature.featureId && data.feature.models) {
             this.displayTooltip(data.feature.models)
           } else if (data.feature.feature) {
@@ -1748,9 +1858,11 @@ export default {
           results[1] ||
           (data.feature.hyperlinks && data.feature.hyperlinks.length > 0)
         ) {
+          this.tooltipType = 'provenance'
           this.resourceForTooltip = data.resource[0]
           data.resourceForTooltip = this.resourceForTooltip
           this.createTooltipFromNeuronCuration(data)
+          }
         }
       }
     },
@@ -1789,7 +1901,7 @@ export default {
      * @arg data
      */
     createTooltipFromNeuronCuration: async function (data) {
-      this.tooltipEntry = await this.flatmapQueries.createTooltipData(data)
+      this.provenanceEntry = await this.flatmapQueries.createTooltipData(data)
       this.displayTooltip(data.resource[0])
     },
     /**
@@ -2001,7 +2113,13 @@ export default {
         // this method is moved to sidebar connectivity info
         // const featureIds = [feature];
         // this.moveMap(featureIds);
-        this.$emit('connectivity-info-open', this.tooltipEntry);
+        if (this.featuresAlert) {
+          this.provenanceEntry['featuresAlert'] = this.featuresAlert;
+        }
+        this.$emit('connectivity-info-open', this.provenanceEntry);
+      }
+      if (this.imageThumbnailSidebar && this.imageEntry.length && this.viewingMode === 'Exploration') {
+        this.$emit('image-thumbnail-open', this.imageEntry)
       }
       // If UI is not disabled,
       // And connectivityInfoSidebar is not set (default) or set to `false`
@@ -2012,8 +2130,10 @@ export default {
           this.viewingMode === 'Annotation' ||
           (
             this.viewingMode === 'Exploration' &&
-            !this.connectivityInfoSidebar &&
-            this.hasTooltipEntry()
+            (
+              (!this.connectivityInfoSidebar && this.hasTooltipEntry()) ||
+              (!this.imageThumbnailSidebar && this.imageEntry.length)
+            )
           )
         )
       ) {
@@ -2032,7 +2152,7 @@ export default {
         origins,
         provenanceTaxonomy,
         provenanceTaxonomyLabel
-      } = this.tooltipEntry;
+      } = this.provenanceEntry;
 
       return Boolean(
         components?.length ||
@@ -2315,14 +2435,19 @@ export default {
      */
     onFlatmapReady: function () {
       // onFlatmapReady is used for functions that need to run immediately after the flatmap is loaded
-      this.sensor = new ResizeSensor(this.$refs.display, this.mapResize)
-      if (this.mapImp.options && this.mapImp.options.style === 'functional') {
+      this.sensor = markRaw(new ResizeSensor(this.$refs.display, this.mapResize))
+      console.log(this.mapImp.options)
+      if (this.mapImp.options?.style === 'functional') {
         this.isFC = true
+      } else if (this.mapImp.options?.style === 'centreline') {
+        this.isCentreLine = true
       }
       this.mapImp.setBackgroundOpacity(1)
       this.backgroundChangeCallback(this.currentBackground)
       this.pathways = this.mapImp.pathTypes()
-      this.mapImp.enableCentrelines(false)
+      if (!this.isCentreLine) {
+        this.mapImp.enableCentrelines(false)
+      }
       //Disable layers for now
       //this.layers = this.mapImp.getLayers();
       this.processSystems(this.mapImp.getSystems())
@@ -2331,9 +2456,9 @@ export default {
       this.addResizeButtonToMinimap()
       this.loading = false
       this.computePathControlsMaximumHeight()
-      this.drawerOpen = true
+      this.drawerOpen = !this.isCentreLine      
       this.mapResize()
-      this.handleMapClick();
+      this.handleMapClick()
       /**
        * This is ``onFlatmapReady`` event.
        * @arg ``this`` (Component Vue Instance)
@@ -2350,7 +2475,7 @@ export default {
 
       if (_map) {
         _map.on('click', (e) => {
-          if (this.tooltipEntry.featureId) {
+          if (this.provenanceEntry.featureId) {
             this.$emit('connectivity-info-close');
           }
         });
@@ -2597,12 +2722,12 @@ export default {
      */
     sparcAPI: {
       type: String,
-      default: 'https://api.sparc.science/',
+      default: 'https://api.sparc.science',
     },
     /**
      * Flag to disable UIs on Map
      */
-     disableUI: {
+    disableUI: {
       type: Boolean,
       default: false,
     },
@@ -2613,11 +2738,17 @@ export default {
       type: Boolean,
       default: false,
     },
+    /**
+     * The option to show image thumbnail in sidebar
+     */
+    imageThumbnailSidebar: {
+      type: Boolean,
+      default: false,
+    },
   },
   provide() {
     return {
       flatmapAPI: this.flatmapAPI,
-      sparcAPI: this.sparcAPI,
       $annotator: this.annotator,
       getFeaturesAlert: () => this.featuresAlert,
       userApiKey: this.userToken,
@@ -2625,6 +2756,9 @@ export default {
   },
   data: function () {
     return {
+      sensor: null,
+      mapManager: undefined,
+      flatmapQueries: undefined,
       annotationEntry: {},
       //tooltip display has to be set to false until it is rendered
       //for the first time, otherwise it may display an arrow at a
@@ -2633,6 +2767,8 @@ export default {
       serverURL: undefined,
       layers: [],
       pathways: [],
+      imageEntry: markRaw([]),
+      tooltipType: 'provenance',
       sckanDisplay: [
         {
           label: 'Display Path with SCKAN',
@@ -2649,6 +2785,7 @@ export default {
       systems: [],
       taxonConnectivity: [],
       pathwaysMaxHeight: 1000,
+      tooltipWait: markRaw([]),
       hoverVisibilities: [
         { value: false, ref: 'markerPopover' }, // 0
         { value: false, ref: 'zoomInPopover' }, // 1
@@ -2670,12 +2807,13 @@ export default {
       helpModeActiveIndex: this.helpModeInitialIndex,
       yellowstar: yellowstar,
       isFC: false,
+      isCentreLine: false,
       inHelp: false,
       currentBackground: 'white',
       availableBackground: ['white', 'lightskyblue', 'black'],
       loading: false,
       flatmapMarker: flatmapMarker,
-      tooltipEntry: createUnfilledTooltipData(),
+      provenanceEntry: createUnfilledTooltipData(),
       connectivityTooltipVisible: false,
       drawerOpen: false,
       featuresAlert: undefined,
@@ -2688,25 +2826,19 @@ export default {
       currentActive: '',
       selectedDrawnFeature: undefined, // Clicked drawn annotation
       currentHover: '',
-      viewingModeIndex: 0,
+      viewingMode: 'Exploration',
       viewingModes: {
-        0: {
-          name: 'Exploration',
-          description:'Find relevant research and view detail of neural pathways by selecting a pathway to view its connections and data sources'
-        },
-        1: {
-          name: 'Neuron Connection',
-          description: 'Discover Neuron connections by selecting a neuron and viewing its associated network connections'
-        },
-        2: {
-          name: 'Annotation',
-          description: 'View internal identifiers of features'
-        }
+        'Exploration': 'Find relevant research and view detail of neural pathways by selecting a pathway to view its connections and data sources',
+        'Neuron Connection': 'Discover Neuron connections by selecting a neuron and viewing its associated network connections',
+        'Annotation': 'View internal identifiers of features'
       },
       drawnType: 'All tools',
       drawnTypes: ['All tools', 'Point', 'LineString', 'Polygon', 'None'],
       annotatedType: 'Anyone',
       annotatedTypes: ['Anyone', 'Me', 'Others'],
+      imageRadio: false,
+      imageType: 'Image',
+      imageTypes: ['Image', 'Segmentation', 'Scaffold', 'Plot'],
       openMapRef: undefined,
       backgroundIconRef: undefined,
       toolbarOptions: [
@@ -2744,17 +2876,15 @@ export default {
           with: true,
           without: true,
         }
-      })
+      }),
     }
   },
   computed: {
     ...mapState(useMainStore, ['userToken']),
+    ...mapStores(useSettingsStore),
     isValidDrawnCreated: function () {
       return Object.keys(this.drawnCreatedEvent).length > 0
     },
-    viewingMode: function() {
-      return this.viewingModes[this.viewingModeIndex].name
-    },
   },
   watch: {
     entry: function () {
@@ -2812,10 +2942,9 @@ export default {
   mounted: function () {
     this.openMapRef = shallowRef(this.$refs.openMapRef)
     this.backgroundIconRef = shallowRef(this.$refs.backgroundIconRef)
-    this.tooltipWait = []
     this.tooltipWait.length = this.hoverVisibilities.length
-    this.mapManager = new flatmap.MapManager(this.flatmapAPI)
-    this.flatmapQueries = new FlatmapQueries()
+    this.mapManager = markRaw(new flatmap.MapManager(this.flatmapAPI))
+    this.flatmapQueries = markRaw(new FlatmapQueries())
     this.flatmapQueries.initialise(this.flatmapAPI)
     if (this.state) {
       //State is set and require to set the state
@@ -3590,7 +3719,12 @@ export default {
   background-color: var(--white);
   font-weight: 500;
   color: rgb(48, 49, 51);
-  width: 150px!important;
+  &.annotationSelector {
+    width: 150px!important;
+  }
+  &.imageSelector {
+    width: 125px!important;
+  }
 }
 
 :deep(.flatmap_dropdown) {