@abi-software/flatmapvuer 1.6.2-beta.2 → 1.6.2-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "1.6.2-beta.2",
+  "version": "1.6.2-beta.3",
   "license": "Apache-2.0",
   "files": [
     "dist/*",
@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "@abi-software/flatmap-viewer": "^3.2.8",
-    "@abi-software/map-utilities": "^1.2.2-beta.1",
+    "@abi-software/map-utilities": "^1.2.1",
     "@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,6 +152,7 @@ Please use `const` to assign meaningful names to them...
           class: '.maplibregl-canvas',
         }"
         :toolbarOptions="toolbarOptions"
+        :drawnType="drawnType"
         :activeDrawTool="activeDrawTool"
         :activeDrawMode="activeDrawMode"
         :newlyDrawnEntry="drawnCreatedEvent"
@@ -453,22 +454,44 @@ Please use `const` to assign meaningful names to them...
               </template>
             </div>
             <el-row class="viewing-mode-description">
-              {{ modeDescription }}
+              {{ viewingModes[viewingMode] }}
             </el-row>
           </el-row>
           <template v-if="viewingMode === 'Annotation' && userInformation">
-            <el-row class="backgroundText">Annotations From</el-row>
+            <el-row class="backgroundText">Drawn By*</el-row>
             <el-row class="backgroundControl">
               <el-select
                 :teleported="false"
-                v-model="annotationFrom"
+                v-model="drawnType"
                 placeholder="Select"
                 class="select-box"
                 popper-class="flatmap_dropdown"
-                @change="setAnnotationFrom"
+                @change="setDrawnType"
               >
                 <el-option
-                  v-for="item in annotatedSource"
+                  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="backgroundControl">
+              <el-select
+                :teleported="false"
+                v-model="annotatedType"
+                placeholder="Select"
+                class="select-box"
+                popper-class="flatmap_dropdown"
+                @change="setAnnotatedType"
+              >
+                <el-option
+                  v-for="item in annotatedTypes"
                   :key="item"
                   :label="item"
                   :value="item"
@@ -645,24 +668,20 @@ const centroid = (geometry) => {
   let featureGeometry = { lng: 0, lat: 0, }
   let coordinates
   if (geometry.type === "Polygon") {
-    if (geometry.coordinates.length) {
-      coordinates = geometry.coordinates[0]
-    }
+    coordinates = geometry.coordinates[0]
   } else {
     coordinates = geometry.coordinates
   }
-  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])
-    }
+  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
 }
@@ -754,7 +773,6 @@ export default {
       if (this.annotationSidebar) this.$emit("annotation-close")
       this.closeTooltip()
       this.annotationEventCallback({}, { type: 'aborted' })
-      this.initialiseDrawing()
     },
     /**
      * @public
@@ -832,6 +850,7 @@ export default {
     toolbarEvent: function (type, name) {
       this.manualAbortedOnClose()
       this.doubleClickedFeature = false
+      this.connectionEntry = {}
       if (type === 'mode') {
         // Deselect any feature when draw mode is changed
         this.changeAnnotationDrawMode({ mode: 'simple_select' })
@@ -840,6 +859,7 @@ export default {
         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()
@@ -865,7 +885,8 @@ export default {
           }
           this.doubleClickedFeature = false
         }
-      } else if (this.activeDrawMode === 'Delete') {
+      }
+      if (this.activeDrawMode === 'Delete') {
         this.changeAnnotationDrawMode({
           mode: 'simple_select',
           options: { featureIds: [data.feature.feature.id] }
@@ -954,7 +975,6 @@ export default {
         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()
@@ -995,6 +1015,12 @@ 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
     },
     /**
@@ -1004,19 +1030,21 @@ export default {
     addAnnotationFeature: async function () {
       if (this.mapImp) {
         if (!this.featureAnnotationSubmitted) this.clearAnnotationFeature()
-        if (!this.featureAnnotationSubmitted) 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)
+        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)
+            }
           }
         }
       }
@@ -1034,13 +1062,26 @@ 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`
      */
-    setAnnotationFrom: function (flag) {
-      this.annotationFrom = flag
+    setAnnotatedType: function (flag) {
+      this.annotatedType = flag
       if (this.mapImp) {
         this.manualAbortedOnClose()
         this.addAnnotationFeature()
@@ -1548,7 +1589,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' && this.activeDrawMode === 'Deleted') {
+        if (this.annotationSidebar && data.feature.mode === 'simple_select') {
           this.annotationEventCallback({}, { type: 'aborted' })
         }
       } else if (data.type === 'selectionChanged') {
@@ -1566,15 +1607,6 @@ 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 {
@@ -1592,7 +1624,6 @@ 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 = {}
     },
@@ -1804,7 +1835,7 @@ export default {
         }
 
         // highlight all available features
-        this.mapImp.zoomToFeatures(featuresToHighlight, { noZoomIn: true });
+        this.mapImp.selectFeatures(featuresToHighlight);
       }
     },
     emitConnectivityGraphError: function (errorData) {
@@ -1839,8 +1870,12 @@ 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 valid drawn
-            if (this.activeDrawTool || this.activeDrawMode || this.isValidDrawnCreated) {
+            // in drawing or edit/delete mode is on or has connectivity
+            if (
+              this.activeDrawTool ||
+              this.activeDrawMode ||
+              Object.keys(this.connectionEntry).length > 0
+            ) {
               this.featureAnnotationSubmitted = false
               this.annotationEntry.featureId = data.feature.feature.id
               if (this.activeDrawTool) {
@@ -2143,7 +2178,8 @@ export default {
         !this.disableUI && (
           (
             this.viewingMode === 'Annotation' &&
-            !this.annotationSidebar
+            !this.annotationSidebar &&
+            this.userInformation
           ) ||
           (
             this.viewingMode === 'Exploration' &&
@@ -2157,6 +2193,7 @@ export default {
           this.mapImp.showPopup(featureId, this.$refs.tooltip.$el, options);
           this.popUpCssHacks();
         });
+
       }
     },
     hasTooltipEntry: function () {
@@ -2916,10 +2953,12 @@ 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 feature annotations', 'Add, comment on and view feature annotations']
+        'Annotation': 'View internal identifiers of features'
       },
-      annotationFrom: 'Anyone',
-      annotatedSource: ['Anyone', 'Me', 'Others'],
+      drawnType: 'All tools',
+      drawnTypes: ['All tools', 'Point', 'LineString', 'Polygon', 'None'],
+      annotatedType: 'Anyone',
+      annotatedTypes: ['Anyone', 'Me', 'Others'],
       openMapRef: undefined,
       backgroundIconRef: undefined,
       toolbarOptions: [
@@ -2936,7 +2975,6 @@ export default {
       activeDrawTool: undefined,
       featureAnnotationSubmitted: false,
       drawnCreatedEvent: {},
-      previousEditEvent: {},
       previousDeletedEvent: {},
       connectionEntry: {},
       existDrawnFeatures: [], // Store all exist drawn features
@@ -2991,17 +3029,7 @@ export default {
       }
       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 () {