@abi-software/flatmapvuer 1.4.1-beta.5 → 1.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "1.4.1-beta.5",
+  "version": "1.4.2",
   "license": "Apache-2.0",
   "files": [
     "dist/*",
@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "@abi-software/flatmap-viewer": "3.1.4",
-    "@abi-software/map-utilities": "^1.1.0-beta.2",
+    "@abi-software/map-utilities": "1.1.0",
     "@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.9.1",
+    "@vuese/parser": "^2.10.3",
     "auto-changelog": "^2.4.0",
     "babel-eslint": "^10.1.0",
     "chokidar": "^3.6.0",
@@ -92,8 +92,5 @@
   "browserslist": [
     "> 1%",
     "last 2 versions"
-  ],
-  "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "^4.21.1"
-  }
+  ]
 }

package/src/App.vue

@@ -77,7 +77,6 @@
       :displayMinimap="true"
       :enableOpenMapUI="true"
       :flatmapAPI="flatmapAPI"
-      :sparcAPI="sparcAPI"
       :disableUI="disableUI"
       @open-pubmed-url="onOpenPubmedUrl"
       @pathway-selection-changed="onPathwaySelectionChanged"
@@ -110,9 +109,6 @@ 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',
@@ -149,7 +145,6 @@ 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);
@@ -290,7 +285,6 @@ 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://mapcore-demo.org/current/flatmap/v3/",
@@ -299,15 +293,11 @@ export default {
       //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

@@ -176,13 +176,17 @@ Please use `const` to assign meaningful names to them...
           ref="zoomInPopover"
         >
           <template #reference>
-            <map-svg-icon
-              icon="zoomIn"
-              class="icon-button zoomIn"
+            <div
+              class="icon-button-container"
               @click="zoomIn()"
               @mouseover="showTooltip(1)"
               @mouseout="hideTooltip(1)"
-            />
+            >
+              <map-svg-icon
+                class="icon-button zoomIn"
+                icon="zoomIn"
+              />
+            </div>
           </template>
         </el-popover>
         <el-popover
@@ -196,13 +200,17 @@ Please use `const` to assign meaningful names to them...
           ref="zoomOutPopover"
         >
           <template #reference>
-            <map-svg-icon
-              icon="zoomOut"
-              class="icon-button zoomOut"
+            <div
+              class="icon-button-container"
               @click="zoomOut()"
               @mouseover="showTooltip(2)"
               @mouseout="hideTooltip(2)"
-            />
+            >
+              <map-svg-icon
+                class="icon-button zoomOut"
+                icon="zoomOut"
+              />
+            </div>
           </template>
         </el-popover>
         <el-popover
@@ -221,13 +229,17 @@ Please use `const` to assign meaningful names to them...
             window
           </div>
           <template #reference>
-            <map-svg-icon
-              icon="fitWindow"
-              class="icon-button fitWindow"
+            <div
+              class="icon-button-container"
               @click="resetView()"
               @mouseover="showTooltip(3)"
               @mouseout="hideTooltip(3)"
-            />
+            >
+              <map-svg-icon
+                class="icon-button fitWindow"
+                icon="fitWindow"
+              />
+            </div>
           </template>
         </el-popover>
       </div>
@@ -285,7 +297,7 @@ Please use `const` to assign meaningful names to them...
                 width="200"
                 trigger="manual"
                 popper-class="flatmap-popper flatmap-marker-popper"
-                :visible="hoverVisibilities[5].value"
+                :visible="hoverVisibilities[0].value"
                 ref="markerPopover"
               >
                 <template #reference>
@@ -426,7 +438,7 @@ Please use `const` to assign meaningful names to them...
         ref="backgroundPopover"
         :virtual-ref="backgroundIconRef"
         placement="top-start"
-        width="330"
+        width="320"
         :teleported="false"
         trigger="click"
         popper-class="background-popper h-auto"
@@ -453,14 +465,13 @@ Please use `const` to assign meaningful names to them...
             </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 annotationSelector"
+                class="select-box"
                 popper-class="flatmap_dropdown"
                 @change="setDrawnType"
               >
@@ -476,14 +487,13 @@ 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 annotationSelector"
+                class="select-box"
                 popper-class="flatmap_dropdown"
                 @change="setAnnotatedType"
               >
@@ -500,41 +510,6 @@ 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,14 +577,18 @@ Please use `const` to assign meaningful names to them...
             ref="openMapPopover"
           >
             <template #reference>
-              <map-svg-icon
+              <div
                 v-if="enableOpenMapUI && openMapOptions.length > 0"
                 ref="openMapRef"
-                icon="openMap"
-                class="icon-button open-map-button"
+                class="icon-button-container"
                 @mouseover="showTooltip(4)"
                 @mouseout="hideTooltip(4)"
-              />
+              >
+                <map-svg-icon
+                  icon="openMap"
+                  class="icon-button open-map-button"
+                />
+              </div>
             </template>
           </el-popover>
         </el-row>
@@ -624,13 +603,17 @@ Please use `const` to assign meaningful names to them...
             ref="settingsPopover"
           >
             <template #reference>
-              <map-svg-icon
+              <div
                 ref="backgroundIconRef"
-                icon="changeBckgd"
-                class="icon-button"
+                class="icon-button-container"
                 @mouseover="showTooltip(5)"
                 @mouseout="hideTooltip(5)"
-              />
+              >
+                <map-svg-icon
+                  icon="changeBckgd"
+                  class="icon-button"
+                />
+              </div>
             </template>
           </el-popover>
         </el-row>
@@ -639,10 +622,9 @@ Please use `const` to assign meaningful names to them...
         ref="tooltip"
         class="tooltip"
         v-show="tooltipDisplay"
-        :tooltipType="tooltipType"
-        :provenanceEntry="provenanceEntry"
         :annotationEntry="annotationEntry"
-        :imageEntry="imageEntry"
+        :tooltipEntry="tooltipEntry"
+        :annotationDisplay="viewingMode === 'Annotation'"
         @annotation="commitAnnotationEvent"
       />
     </div>
@@ -681,18 +663,10 @@ 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, mapStores } from 'pinia'
-import { useMainStore } from '@/stores/index'
-import { useSettingsStore } from '@/stores/settings'
+import { mapState } from 'pinia'
+import { useMainStore } from '@/store/index'
 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, }
@@ -781,7 +755,6 @@ const createUnfilledTooltipData = function () {
  */
 export default {
   name: 'FlatmapVuer',
-  mixins:[imageMixin],
   components: {
     Button,
     Col,
@@ -814,69 +787,6 @@ 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();
-        }
-        this.$emit('imageThumbnailDisplay', flag)
-      }
-    },
     /**
      * @vuese
      * Function to initialise drawing.
@@ -1745,7 +1655,6 @@ export default {
               userData: args,
               eventType: eventType,
               provenanceTaxonomy: taxons,
-              markerType: this.imageRadio ? this.imageType : "Standard",
             }
             if (eventType === 'click') {
               this.featuresAlert = data.alert
@@ -1780,6 +1689,7 @@ export default {
             }
             if (
               data &&
+              data.type !== 'marker' &&
               eventType === 'click' &&
               !(this.viewingMode === 'Neuron Connection') &&
               // Disable popup when drawing
@@ -1813,16 +1723,6 @@ export default {
      * @arg data
      */
     checkAndCreatePopups: async function (data) {
-      this.imageEntry = []
-      this.provenanceEntry = {}
-      if (data.feature.type === 'marker' && this.imageRadio) {
-        this.tooltipType = 'image'
-        const imageThumbnails = this.settingsStore.getImageThumbnails(this.imageType, [data.resource[0]])
-        if (data.resource[0] in imageThumbnails) {
-          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) {
@@ -1830,7 +1730,6 @@ 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) {
@@ -1864,11 +1763,9 @@ 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)
-          }
         }
       }
     },
@@ -1907,7 +1804,7 @@ export default {
      * @arg data
      */
     createTooltipFromNeuronCuration: async function (data) {
-      this.provenanceEntry = await this.flatmapQueries.createTooltipData(data)
+      this.tooltipEntry = await this.flatmapQueries.createTooltipData(data)
       this.displayTooltip(data.resource[0])
     },
     /**
@@ -2108,7 +2005,7 @@ export default {
         options.annotationFeatureGeometry = geometry
       } else {
         featureId = this.mapImp.modelFeatureIds(feature)[0]
-        if (!this.activeDrawTool && !this.imageEntry.length) {
+        if (!this.activeDrawTool) {
           options.positionAtLastClick = true
         }
       }
@@ -2120,12 +2017,9 @@ export default {
         // const featureIds = [feature];
         // this.moveMap(featureIds);
         if (this.featuresAlert) {
-          this.provenanceEntry['featuresAlert'] = this.featuresAlert;
+          this.tooltipEntry['featuresAlert'] = this.featuresAlert;
         }
-        this.$emit('connectivity-info-open', this.provenanceEntry);
-      }
-      if (this.imageThumbnailSidebar && this.viewingMode === 'Exploration') {
-        this.$emit('image-thumbnail-open', this.imageEntry)
+        this.$emit('connectivity-info-open', this.tooltipEntry);
       }
       // If UI is not disabled,
       // And connectivityInfoSidebar is not set (default) or set to `false`
@@ -2136,10 +2030,8 @@ export default {
           this.viewingMode === 'Annotation' ||
           (
             this.viewingMode === 'Exploration' &&
-            (
-              (!this.connectivityInfoSidebar && this.hasTooltipEntry()) ||
-              (!this.imageThumbnailSidebar && this.imageEntry.length)
-            )
+            !this.connectivityInfoSidebar &&
+            this.hasTooltipEntry()
           )
         )
       ) {
@@ -2158,7 +2050,7 @@ export default {
         origins,
         provenanceTaxonomy,
         provenanceTaxonomyLabel
-      } = this.provenanceEntry;
+      } = this.tooltipEntry;
 
       return Boolean(
         components?.length ||
@@ -2462,9 +2354,9 @@ export default {
       this.addResizeButtonToMinimap()
       this.loading = false
       this.computePathControlsMaximumHeight()
-      this.drawerOpen = !this.isCentreLine      
+      this.drawerOpen = !this.isCentreLine
       this.mapResize()
-      this.handleMapClick()
+      this.handleMapClick();
       /**
        * This is ``onFlatmapReady`` event.
        * @arg ``this`` (Component Vue Instance)
@@ -2481,8 +2373,7 @@ export default {
 
       if (_map) {
         _map.on('click', (e) => {
-          // Tmeporary add imageEntry length
-          if (this.provenanceEntry.featureId || this.imageEntry.length) {
+          if (this.tooltipEntry.featureId) {
             this.$emit('connectivity-info-close');
           }
         });
@@ -2729,12 +2620,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,
     },
@@ -2745,17 +2636,11 @@ 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,
@@ -2774,8 +2659,6 @@ export default {
       serverURL: undefined,
       layers: [],
       pathways: [],
-      imageEntry: markRaw([]),
-      tooltipType: 'provenance',
       sckanDisplay: [
         {
           label: 'Display Path with SCKAN',
@@ -2820,7 +2703,7 @@ export default {
       availableBackground: ['white', 'lightskyblue', 'black'],
       loading: false,
       flatmapMarker: flatmapMarker,
-      provenanceEntry: createUnfilledTooltipData(),
+      tooltipEntry: createUnfilledTooltipData(),
       connectivityTooltipVisible: false,
       drawerOpen: false,
       featuresAlert: undefined,
@@ -2843,9 +2726,6 @@ export default {
       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: [
@@ -2883,12 +2763,11 @@ export default {
           with: true,
           without: true,
         }
-      }),
+      })
     }
   },
   computed: {
     ...mapState(useMainStore, ['userToken']),
-    ...mapStores(useSettingsStore),
     isValidDrawnCreated: function () {
       return Object.keys(this.drawnCreatedEvent).length > 0
     },
@@ -3392,6 +3271,10 @@ export default {
   }
 }
 
+.icon-button-container {
+  display: inline-block;
+}
+
 .icon-button {
   height: 24px !important;
   width: 24px !important;
@@ -3726,12 +3609,7 @@ export default {
   background-color: var(--white);
   font-weight: 500;
   color: rgb(48, 49, 51);
-  &.annotationSelector {
-    width: 150px!important;
-  }
-  &.imageSelector {
-    width: 125px!important;
-  }
+  width: 150px!important;
 }
 
 :deep(.flatmap_dropdown) {

package/src/components/MultiFlatmapVuer.vue

@@ -81,9 +81,6 @@
       style="height: 100%"
       :flatmapAPI="flatmapAPI"
       :sparcAPI="sparcAPI"
-      @imageThumbnailDisplay="onImageThumbnailDisplay"
-      :imageThumbnailSidebar="imageThumbnailSidebar"
-      @image-thumbnail-open="onImageThumbnailOpen"
     />
   </div>
 </template>
@@ -267,12 +264,6 @@ export default {
     onConnectivityInfoOpen: function (entryData) {
       this.$emit('connectivity-info-open', entryData);
     },
-    onImageThumbnailDisplay: function (payload) {
-      this.$emit('imageThumbnailDisplay', payload);
-    },
-    onImageThumbnailOpen: function (payload) {
-      this.$emit('image-thumbnail-open', payload);
-    },
     onSelectionsDataChanged: function (data) {
       this.$emit('pathway-selection-changed', data);
     },
@@ -709,7 +700,7 @@ export default {
      */
     sparcAPI: {
       type: String,
-      default: 'https://api.sparc.science',
+      default: 'https://api.sparc.science/',
     },
     /**
      * Flag to disable UIs on Map
@@ -725,13 +716,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    /**
-     * The option to show image thumbnail in sidebar
-     */
-    imageThumbnailSidebar: {
-      type: Boolean,
-      default: false,
-    },
   },
   data: function () {
     return {

package/src/main.js

@@ -1,7 +1,7 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import App from './App.vue'
-import { useMainStore } from '@/stores/index'
+import { useMainStore } from '@/store/index'
 
 const pinia = createPinia()
 const app = createApp(App)

package/src/services/flatmapQueries.js

@@ -256,7 +256,11 @@ let FlatmapQueries = function () {
           }
         })
         .catch((error) => {
-          console.error('Error:', error)
+          if (error.name === 'AbortError') {
+            // This error is from AbortController's abort method.
+          } else {
+            console.error('Error:', error)
+          }
           resolve(false)
         })
     })