@abi-software/flatmapvuer 1.6.2 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "1.6.2",
+  "version": "1.7.0",
   "license": "Apache-2.0",
   "files": [
     "dist/*",
@@ -43,8 +43,8 @@
     "./src/*": "./src/*"
   },
   "dependencies": {
-    "@abi-software/flatmap-viewer": "^3.2.10",
-    "@abi-software/map-utilities": "^1.2.1",
+    "@abi-software/flatmap-viewer": "3.2.10",
+    "@abi-software/map-utilities": "^1.3.0",
     "@abi-software/sparc-annotation": "0.3.2",
     "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",

package/src/components/FlatmapVuer.vue

@@ -152,7 +152,6 @@ Please use `const` to assign meaningful names to them...
           class: '.maplibregl-canvas',
         }"
         :toolbarOptions="toolbarOptions"
-        :drawnType="drawnType"
         :activeDrawTool="activeDrawTool"
         :activeDrawMode="activeDrawMode"
         :newlyDrawnEntry="drawnCreatedEvent"
@@ -260,7 +259,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 && requiresDrawer"
           >
             <div
               class="pathway-container"
@@ -270,27 +269,27 @@ Please use `const` to assign meaningful names to them...
             >
               <svg-legends v-if="!isFC" class="svg-legends-container" />
               <template v-if="showStarInLegend">
-              <el-popover
-                content="Location of the featured dataset"
-                placement="right"
-                :teleported="true"
-                trigger="manual"
-                width="max-content"
-                :offset="-10"
-                popper-class="flatmap-popper flatmap-teleport-popper"
-                :visible="hoverVisibilities[9].value"
-                ref="featuredMarkerPopover"
-              >
-                <template #reference>
-                  <div
-                    v-popover:featuredMarkerPopover
-                    class="yellow-star-legend"
-                    v-html="yellowstar"
-                    @mouseover="showTooltip(9)"
-                    @mouseout="hideTooltip(9)"
-                  ></div>
-                </template>
-              </el-popover>
+                <el-popover
+                  content="Location of the featured dataset"
+                  placement="right"
+                  :teleported="true"
+                  trigger="manual"
+                  width="max-content"
+                  :offset="-10"
+                  popper-class="flatmap-popper flatmap-teleport-popper"
+                  :visible="hoverVisibilities[9].value"
+                  ref="featuredMarkerPopover"
+                >
+                  <template #reference>
+                    <div
+                      v-popover:featuredMarkerPopover
+                      class="yellow-star-legend"
+                      v-html="yellowstar"
+                      @mouseover="showTooltip(9)"
+                      @mouseout="hideTooltip(9)"
+                    ></div>
+                  </template>
+                </el-popover>
               </template>
               <!-- The line below places the yellowstar svg on the left, and the text "Featured markers on the right" with css so they are both centered in the div -->
               <el-popover
@@ -454,44 +453,22 @@ Please use `const` to assign meaningful names to them...
               </template>
             </div>
             <el-row class="viewing-mode-description">
-              {{ viewingModes[viewingMode] }}
+              {{ modeDescription }}
             </el-row>
           </el-row>
           <template v-if="viewingMode === 'Annotation' && userInformation">
-            <el-row class="backgroundText">Drawn By*</el-row>
-            <el-row class="backgroundControl">
-              <el-select
-                :teleported="false"
-                v-model="drawnType"
-                placeholder="Select"
-                class="select-box"
-                popper-class="flatmap_dropdown"
-                @change="setDrawnType"
-              >
-                <el-option
-                  v-for="item in drawnTypes"
-                  :key="item"
-                  :label="item"
-                  :value="item"
-                >
-                  <el-row>
-                    <el-col :span="12">{{ item }}</el-col>
-                  </el-row>
-                </el-option>
-              </el-select>
-            </el-row>
-            <el-row class="backgroundText">Annotated By*</el-row>
+            <el-row class="backgroundText">Annotations From</el-row>
             <el-row class="backgroundControl">
               <el-select
                 :teleported="false"
-                v-model="annotatedType"
+                v-model="annotationFrom"
                 placeholder="Select"
                 class="select-box"
                 popper-class="flatmap_dropdown"
-                @change="setAnnotatedType"
+                @change="setAnnotationFrom"
               >
                 <el-option
-                  v-for="item in annotatedTypes"
+                  v-for="item in annotatedSource"
                   :key="item"
                   :label="item"
                   :value="item"
@@ -614,7 +591,7 @@ Please use `const` to assign meaningful names to them...
       <Tooltip
         ref="tooltip"
         class="tooltip"
-        v-show="tooltipDisplay"
+        v-if="tooltipDisplay"
         :annotationEntry="annotationEntry"
         :tooltipEntry="tooltipEntry"
         :annotationDisplay="viewingMode === 'Annotation'"
@@ -668,20 +645,24 @@ const centroid = (geometry) => {
   let featureGeometry = { lng: 0, lat: 0, }
   let coordinates
   if (geometry.type === "Polygon") {
-    coordinates = geometry.coordinates[0]
+    if (geometry.coordinates.length) {
+      coordinates = geometry.coordinates[0]
+    }
   } else {
     coordinates = geometry.coordinates
   }
-  if (!(geometry.type === 'Point')) {
-    coordinates.map((coor) => {
-      featureGeometry.lng += parseFloat(coor[0])
-      featureGeometry.lat += parseFloat(coor[1])
-    })
-    featureGeometry.lng = featureGeometry.lng / coordinates.length
-    featureGeometry.lat = featureGeometry.lat / coordinates.length
-  } else {
-    featureGeometry.lng += parseFloat(coordinates[0])
-    featureGeometry.lat += parseFloat(coordinates[1])
+  if (coordinates) {    
+    if (!(geometry.type === 'Point')) {
+      coordinates.map((coor) => {
+        featureGeometry.lng += parseFloat(coor[0])
+        featureGeometry.lat += parseFloat(coor[1])
+      })
+      featureGeometry.lng = featureGeometry.lng / coordinates.length
+      featureGeometry.lat = featureGeometry.lat / coordinates.length
+    } else {
+      featureGeometry.lng += parseFloat(coordinates[0])
+      featureGeometry.lat += parseFloat(coordinates[1])
+    }
   }
   return featureGeometry
 }
@@ -773,6 +754,7 @@ export default {
       if (this.annotationSidebar) this.$emit("annotation-close")
       this.closeTooltip()
       this.annotationEventCallback({}, { type: 'aborted' })
+      this.initialiseDrawing()
     },
     /**
      * @public
@@ -848,21 +830,19 @@ export default {
      * @arg {String} `name`
      */
     toolbarEvent: function (type, name) {
+      if (this.isValidDrawnCreated) return;
       this.manualAbortedOnClose()
       this.doubleClickedFeature = false
-      this.connectionEntry = {}
+      // Deselect any feature when draw mode/tool is changed
+      this.changeAnnotationDrawMode({ mode: 'simple_select' })
       if (type === 'mode') {
-        // Deselect any feature when draw mode is changed
-        this.changeAnnotationDrawMode({ mode: 'simple_select' })
         this.activeDrawMode = name
       } else if (type === 'tool') {
+        // Remove any unsubmitted drawn
+        this.cancelDrawnFeature()
         if (name) {
           const tool = name.replace(/[A-Z]/g, letter => `_${letter.toLowerCase()}`)
           this.changeAnnotationDrawMode({ mode: `draw${tool}` })
-          this.initialiseDrawing()
-        } else {
-          this.changeAnnotationDrawMode({ mode: 'simple_select' })
-          this.cancelDrawnFeature()
         }
         this.activeDrawTool = name
       }
@@ -885,8 +865,7 @@ export default {
           }
           this.doubleClickedFeature = false
         }
-      }
-      if (this.activeDrawMode === 'Delete') {
+      } else if (this.activeDrawMode === 'Delete') {
         this.changeAnnotationDrawMode({
           mode: 'simple_select',
           options: { featureIds: [data.feature.feature.id] }
@@ -972,9 +951,12 @@ export default {
       ) {
         this.featureAnnotationSubmitted = true
         this.mapImp.commitAnnotationEvent(this.annotationEntry)
-        if (this.annotationEntry.type === 'deleted') {
+        if (annotation.body.comment === "Position Updated") {
+          this.annotationEntry.positionUpdated = false
+        } else if (this.annotationEntry.type === 'deleted') {
           if (this.annotationSidebar) this.$emit("annotation-close")
           this.closeTooltip()
+          // Only delete need, keep the annotation tooltip/sidebar open if created/updated
           this.annotationEntry = {}
         }
         this.addAnnotationFeature()
@@ -1015,12 +997,6 @@ export default {
       let drawnFeatures = await this.annotator.drawnFeatures(this.userToken, this.serverURL, annotatedItemIds)
       // The annotator has `resource` and `features` fields
       if ('resource' in drawnFeatures) drawnFeatures = drawnFeatures.features
-      // Use to switch the displayed feature type
-      if (this.drawnType !== 'All tools') {
-        drawnFeatures = drawnFeatures.filter((feature) => {
-          return feature.geometry.type === this.drawnType
-        })
-      }
       return drawnFeatures
     },
     /**
@@ -1029,22 +1005,22 @@ export default {
      */
     addAnnotationFeature: async function () {
       if (this.mapImp) {
-        if (!this.featureAnnotationSubmitted) this.clearAnnotationFeature()
-        if (this.drawnType !== 'None') {
-          if (!this.featureAnnotationSubmitted) this.loading = true
-          const userId = this.annotatedType === 'Anyone' ?
-            undefined : this.userInformation.orcid ?
-              this.userInformation.orcid : '0000-0000-0000-0000'
-          const participated = this.annotatedType === 'Anyone' ?
-            undefined : this.annotatedType === 'Me' ?
-              true : false
-          const drawnFeatures = await this.fetchDrawnFeatures(userId, participated)
-          this.existDrawnFeatures = drawnFeatures
-          this.loading = false
-          if (!this.featureAnnotationSubmitted) {
-            for (const feature of drawnFeatures) {
-              this.mapImp.addAnnotationFeature(feature)
-            }
+        if (!this.featureAnnotationSubmitted) {
+          this.clearAnnotationFeature()
+          this.loading = true
+        }
+        const userId = this.annotationFrom === 'Anyone' ?
+          undefined : this.userInformation.orcid ?
+            this.userInformation.orcid : '0000-0000-0000-0000'
+        const participated = this.annotationFrom === 'Anyone' ?
+          undefined : this.annotationFrom === 'Me' ?
+            true : false
+        const drawnFeatures = await this.fetchDrawnFeatures(userId, participated)
+        this.existDrawnFeatures = drawnFeatures
+        this.loading = false
+        if (!this.featureAnnotationSubmitted) {
+          for (const feature of drawnFeatures) {
+            this.mapImp.addAnnotationFeature(feature)
           }
         }
       }
@@ -1062,26 +1038,13 @@ export default {
         this.$el.querySelector('.maplibregl-ctrl-group').style.display = 'none'
       }
     },
-    /**
-     * @public
-     * Function to switch the type of annotation.
-     * @arg {Boolean} `flag`
-     */
-    setDrawnType: function (flag) {
-      this.drawnType = flag
-      if (this.mapImp) {
-        this.manualAbortedOnClose()
-        this.addAnnotationFeature()
-        this.initialiseDrawing()
-      }
-    },
     /**
      * @public
      * Function to switch the type of person who annotated.
      * @arg {Boolean} `flag`
      */
-    setAnnotatedType: function (flag) {
-      this.annotatedType = flag
+    setAnnotationFrom: function (flag) {
+      this.annotationFrom = flag
       if (this.mapImp) {
         this.manualAbortedOnClose()
         this.addAnnotationFeature()
@@ -1589,7 +1552,7 @@ export default {
         this.annotationEntry = {}
       } else if (data.type === 'modeChanged') {
         if (data.feature.mode === 'direct_select') this.doubleClickedFeature = true
-        if (this.annotationSidebar && data.feature.mode === 'simple_select') {
+        if (this.annotationSidebar && data.feature.mode === 'simple_select' && this.activeDrawMode === 'Deleted') {
           this.annotationEventCallback({}, { type: 'aborted' })
         }
       } else if (data.type === 'selectionChanged') {
@@ -1607,6 +1570,15 @@ export default {
               this.connectionEntry = drawnFeature.connection
             }
             this.annotationDrawModeEvent(payload)
+          } else {
+            if (this.annotationSidebar && this.previousEditEvent.type === 'updated') {
+              this.annotationEntry = {
+                ...this.previousEditEvent,
+                resourceId: this.serverURL
+              }
+              this.annotationEventCallback({}, { type: 'aborted' })
+            }
+            this.previousEditEvent = {}
           }
         }
       } else {
@@ -1624,6 +1596,7 @@ export default {
         if (data.type === 'created') this.drawnCreatedEvent = payload
         else this.checkAndCreatePopups(payload)
       }
+      if (data.type === 'updated') this.previousEditEvent = data
       if (data.type === 'deleted') this.previousDeletedEvent = data
       else this.previousDeletedEvent = {}
     },
@@ -1835,7 +1808,7 @@ export default {
         }
 
         // highlight all available features
-        this.mapImp.zoomToFeatures(featuresToHighlight, { noZoomIn: true });
+        this.mapImp.selectFeatures(featuresToHighlight);
       }
     },
     emitConnectivityGraphError: function (errorData) {
@@ -1870,12 +1843,8 @@ export default {
           if (data.feature.featureId && data.feature.models) {
             this.displayTooltip(data.feature.models)
           } else if (data.feature.feature) {
-            // in drawing or edit/delete mode is on or has connectivity
-            if (
-              this.activeDrawTool ||
-              this.activeDrawMode ||
-              Object.keys(this.connectionEntry).length > 0
-            ) {
+            // in drawing or edit/delete mode is on or valid drawn
+            if (this.activeDrawTool || this.activeDrawMode || this.isValidDrawnCreated) {
               this.featureAnnotationSubmitted = false
               this.annotationEntry.featureId = data.feature.feature.id
               if (this.activeDrawTool) {
@@ -1932,7 +1901,9 @@ export default {
      * Function to close tooltip.
      */
     closeTooltip: function () {
-      this.$refs.tooltip.$el.style.display = 'none'
+      if (this.$refs.tooltip) {
+        this.$refs.tooltip.$el.style.display = 'none'
+      }
       document.querySelectorAll('.maplibregl-popup').forEach((item) => {
         item.style.display = 'none'
       })
@@ -2042,7 +2013,11 @@ export default {
             isPathwayContainer(parentElement) ||
             isPathwayContainer(nextElementSibling)
           ) {
-            this.drawerOpen = true;
+            if (this.requiresDrawer) {
+              this.drawerOpen = true;
+            } else {
+              this.helpModeActiveIndex += 1;
+            }
           }
         } else {
           // skip the unavailable tooltips
@@ -2174,8 +2149,7 @@ export default {
         !this.disableUI && (
           (
             this.viewingMode === 'Annotation' &&
-            !this.annotationSidebar &&
-            this.userInformation
+            !this.annotationSidebar
           ) ||
           (
             this.viewingMode === 'Exploration' &&
@@ -2189,7 +2163,6 @@ export default {
           this.mapImp.showPopup(featureId, this.$refs.tooltip.$el, options);
           this.popUpCssHacks();
         });
-
       }
     },
     hasTooltipEntry: function () {
@@ -2483,7 +2456,7 @@ export default {
           }
         }
 
-        let promise1 = this.mapManager.loadMap(
+        let promise1 = this.mapManagerRef.loadMap(
           identifier,
           this.$refs.display,
           this.eventCallback(),
@@ -2510,8 +2483,9 @@ export default {
         this._stateToBeSet = {
           ...state
         }
-        if (this.mapImp && !this.loading)
+        if (this.mapImp && !this.loading) {
           this.restoreMapState(this._stateToBeSet)
+        }
       }
     },
     /**
@@ -2568,7 +2542,6 @@ export default {
       this.addResizeButtonToMinimap()
       this.loading = false
       this.computePathControlsMaximumHeight()
-      this.drawerOpen = true;
       this.mapResize()
       this.handleMapClick();
       this.setInitMapState();
@@ -2642,21 +2615,25 @@ export default {
             this.mapImp.showSearchResults(searchResults)
             if (
               displayLabel &&
-              searchResults.results[0].featureId &&
-              searchResults.results[0].text
+              searchResults.results
             ) {
-              const annotation = this.mapImp.annotation(
-                searchResults.results[0].featureId
-              )
-              this.mapImp.showPopup(
-                searchResults.results[0].featureId,
-                annotation.label,
-                {
-                  className: 'custom-popup',
-                  positionAtLastClick: false,
-                  preserveSelection: true,
-                }
-              )
+              let annotation = undefined;
+              let featureId = undefined;
+              for (let i = 0; i < searchResults.results.length && !(annotation?.label); i++) {
+                featureId = searchResults.results[i].featureId
+                annotation = this.mapImp.annotation(featureId)
+              }
+              if (annotation?.label) {
+                this.mapImp.showPopup(
+                  featureId,
+                  capitalise(annotation.label),
+                  {
+                    className: 'custom-popup',
+                    positionAtLastClick: false,
+                    preserveSelection: true,
+                  }
+                )
+              }
             }
             return true
           } else this.mapImp.clearSearchResults()
@@ -2831,6 +2808,14 @@ export default {
       type: Object,
       default: undefined,
     },
+    /**
+     * Flatmap's Map Manager to use as single Map Manager
+     * if the FlatmapVuer is loaded from MultiFlatmapVuer.
+     */
+    mapManager: {
+      type: Object,
+      default: undefined,
+    },
     /**
      * Specify the endpoint of the flatmap server.
      */
@@ -2878,7 +2863,7 @@ export default {
   data: function () {
     return {
       sensor: null,
-      mapManager: undefined,
+      mapManagerRef: undefined,
       flatmapQueries: undefined,
       annotationEntry: {},
       //tooltip display has to be set to false until it is rendered
@@ -2942,12 +2927,10 @@ export default {
       viewingModes: {
         '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'
+        'Annotation': ['View feature annotations', 'Add, comment on and view feature annotations']
       },
-      drawnType: 'All tools',
-      drawnTypes: ['All tools', 'Point', 'LineString', 'Polygon', 'None'],
-      annotatedType: 'Anyone',
-      annotatedTypes: ['Anyone', 'Me', 'Others'],
+      annotationFrom: 'Anyone',
+      annotatedSource: ['Anyone', 'Me', 'Others'],
       openMapRef: undefined,
       backgroundIconRef: undefined,
       toolbarOptions: [
@@ -2964,6 +2947,7 @@ export default {
       activeDrawTool: undefined,
       featureAnnotationSubmitted: false,
       drawnCreatedEvent: {},
+      previousEditEvent: {},
       previousDeletedEvent: {},
       connectionEntry: {},
       existDrawnFeatures: [], // Store all exist drawn features
@@ -2998,6 +2982,37 @@ export default {
     isValidDrawnCreated: function () {
       return Object.keys(this.drawnCreatedEvent).length > 0
     },
+    requiresDrawer: function() {
+      if (this.loading) {
+        this.drawerOpen = false
+        return false
+      }
+      if (!this.isFC) {
+        this.drawerOpen = true
+        return true
+      } else {
+        if ((this.systems?.length > 0) ||
+          (this.containsAlert && this.alertOptions) ||
+          (this.pathways?.length > 0) ||
+          (this.taxonConnectivity?.length > 0)
+        ) {
+          this.drawerOpen = true
+          return true
+        }
+      }
+      this.drawerOpen = false
+      return true
+    },
+    modeDescription: function () {
+      let description = this.viewingModes[this.viewingMode]
+      if (this.viewingMode === 'Annotation') {
+        if (this.userInformation) {
+          return description[1]
+        }
+        return description[0]
+      }
+      return description
+    },
   },
   watch: {
     entry: function () {
@@ -3019,7 +3034,7 @@ export default {
     state: {
       handler: function (state, oldVal) {
         if (state !== oldVal) {
-          if (this.mapManager) {
+          if (this.mapManagerRef) {
             this.setState(state)
           } else {
             //this component has not been mounted yet
@@ -3088,11 +3103,22 @@ export default {
       }
     }
   },
+  created: function () {
+    if (this.mapManager) {
+      this.mapManagerRef = this.mapManager;
+    } else {
+      this.mapManagerRef = markRaw(new flatmap.MapManager(this.flatmapAPI));
+      /**
+       * The event emitted after a new mapManager is loaded.
+       * This mapManager can be used to create new flatmaps.
+       */
+      this.$emit('mapmanager-loaded', this.mapManagerRef);
+    }
+  },
   mounted: function () {
     this.openMapRef = shallowRef(this.$refs.openMapRef)
     this.backgroundIconRef = shallowRef(this.$refs.backgroundIconRef)
     this.tooltipWait.length = this.hoverVisibilities.length
-    this.mapManager = markRaw(new flatmap.MapManager(this.flatmapAPI))
     this.flatmapQueries = markRaw(new FlatmapQueries())
     this.flatmapQueries.initialise(this.flatmapAPI)
     if (this.state) {
@@ -3189,6 +3215,7 @@ export default {
 
 .svg-legends-container {
   width: 70%;
+  min-width:183px;
   height: auto;
   position: relative;
   max-height: 140px;