@abi-software/flatmapvuer 1.8.0 → 1.8.1-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "1.8.0",
+  "version": "1.8.1-beta.0",
   "license": "Apache-2.0",
   "files": [
     "dist/*",
@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "@abi-software/flatmap-viewer": "3.2.13",
-    "@abi-software/map-utilities": "^1.4.0",
+    "@abi-software/map-utilities": "^1.4.1-beta.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

@@ -139,7 +139,7 @@ Please use `const` to assign meaningful names to them...
       </el-icon>
 
       <DrawToolbar
-        v-if="viewingMode === 'Annotation' && userInformation && !disableUI"
+        v-if="viewingMode === 'Annotation' && (authorisedUser || offlineAnnotate) && !disableUI"
         :mapCanvas="{
           containerHTML: this.$el,
           class: '.maplibregl-canvas',
@@ -448,8 +448,11 @@ Please use `const` to assign meaningful names to them...
             <el-row class="viewing-mode-description">
               {{ modeDescription }}
             </el-row>
+            <el-row v-if="viewingMode === 'Annotation' && offlineAnnotate" class="viewing-mode-description">
+              (Offline annotate)
+            </el-row>
           </el-row>
-          <template v-if="viewingMode === 'Annotation' && userInformation">
+          <template v-if="viewingMode === 'Annotation' && authorisedUser">
             <el-row class="backgroundText">Annotations From</el-row>
             <el-row class="backgroundControl">
               <el-select
@@ -791,16 +794,10 @@ export default {
       if (this.mapImp) {
         if (value) {
           const numericId = Number(value)
-          let payload = { feature: {} }
-          if (numericId) {
-            const data = this.mapImp.featureProperties(numericId)
-            payload.feature = data
-          } else {
-            const drawnFeature = this.existDrawnFeatures.find(
-              (feature) => feature.id === value.replace(' ', '')
-            )
-            payload.feature.feature = drawnFeature
-          }
+          const featureObject = numericId
+            ? this.mapImp.featureProperties(numericId)
+            : { feature: this.existDrawnFeatures.find(feature => feature.id === value.trim()) };
+          let payload = { feature: featureObject }
           this.checkAndCreatePopups(payload)
         } else {
           this.closeTooltip()
@@ -903,10 +900,7 @@ export default {
      * Function to remove all drawn annotations from flatmap annotation layer.
      */
     clearAnnotationFeature: function () {
-      if (
-        this.mapImp &&
-        this.existDrawnFeatures.length > 0
-      ) {
+      if (this.mapImp) {
         this.mapImp.clearAnnotationFeature()
       }
     },
@@ -943,23 +937,30 @@ export default {
      * @arg {Object} `annotation`
      */
     commitAnnotationEvent: function (annotation) {
-      if (
-        this.mapImp &&
-        ['created', 'updated', 'deleted'].includes(this.annotationEntry.type) &&
-        // Only when annotation comments stored successfully
-        annotation
-      ) {
-        this.featureAnnotationSubmitted = true
-        this.mapImp.commitAnnotationEvent(this.annotationEntry)
-        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 = {}
+      if (this.mapImp) {
+        if (this.offlineAnnotate) {
+          this.offlineAnnotation = JSON.parse(sessionStorage.getItem('offline-annotation')) || []
+          this.offlineAnnotation.push(annotation)
+          if (this.annotationEntry.type === 'deleted') {
+            this.offlineAnnotation = this.offlineAnnotation.filter((offline) => {
+              return offline.resource !== this.serverURL || offline.item.id !== annotation.item.id
+            })
+          }
+          sessionStorage.setItem('offline-annotation', JSON.stringify(this.offlineAnnotation))
+        }
+        if (['created', 'updated', 'deleted'].includes(this.annotationEntry.type)) {
+          this.featureAnnotationSubmitted = true
+          this.mapImp.commitAnnotationEvent(this.annotationEntry)
+          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()
         }
-        this.addAnnotationFeature()
       }
     },
     /**
@@ -969,9 +970,17 @@ export default {
      * @arg {String} `participated`
      */
     fetchAnnotatedItemIds: async function (userId = undefined, participated = undefined) {
-      let annotatedItemIds = await this.annotator.annotatedItemIds(this.userToken, this.serverURL, userId, participated)
-      // The annotator has `resource` and `items` fields
-      if ('resource' in annotatedItemIds) annotatedItemIds = annotatedItemIds.itemIds
+      let annotatedItemIds
+      if (this.offlineAnnotate) {
+        this.offlineAnnotation = JSON.parse(sessionStorage.getItem('offline-annotation')) || []
+        annotatedItemIds = this.offlineAnnotation.filter((offline) => {
+          return offline.resource === this.serverURL
+        }).map(offline => offline.item.id)
+      } else {
+        annotatedItemIds = await this.annotator.annotatedItemIds(this.userToken, this.serverURL, userId, participated)
+        // The annotator has `resource` and `items` fields
+        if ('resource' in annotatedItemIds) annotatedItemIds = annotatedItemIds.itemIds
+      }
       return annotatedItemIds
     },
     /**
@@ -993,10 +1002,18 @@ export default {
      * @arg {String} `participated`
      */
     fetchDrawnFeatures: async function (userId, participated) {
-      const annotatedItemIds = await this.fetchAnnotatedItemIds(userId, participated)
-      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
+      let drawnFeatures
+      if (this.offlineAnnotate) {
+        this.offlineAnnotation = JSON.parse(sessionStorage.getItem('offline-annotation')) || []
+        drawnFeatures = this.offlineAnnotation.filter((offline) => {
+          return offline.feature && offline.resource === this.serverURL
+        }).map(offline => offline.feature)
+      } else {
+        const annotatedItemIds = await this.fetchAnnotatedItemIds(userId, participated)
+        drawnFeatures = await this.annotator.drawnFeatures(this.userToken, this.serverURL, annotatedItemIds)
+        // The annotator has `resource` and `features` fields
+        if ('resource' in drawnFeatures) drawnFeatures = drawnFeatures.features
+      }
       return drawnFeatures
     },
     /**
@@ -1010,8 +1027,8 @@ export default {
           this.loading = true
         }
         const userId = this.annotationFrom === 'Anyone' ?
-          undefined : this.userInformation.orcid ?
-            this.userInformation.orcid : '0000-0000-0000-0000'
+          undefined : this.authorisedUser.orcid ?
+            this.authorisedUser.orcid : '0000-0000-0000-0000'
         const participated = this.annotationFrom === 'Anyone' ?
           undefined : this.annotationFrom === 'Me' ?
             true : false
@@ -1902,14 +1919,15 @@ export default {
           this.annotationEntry = {
             ...data.feature,
             resourceId: this.serverURL,
+            offline: this.offlineAnnotate
           }
           if (data.feature.featureId && data.feature.models) {
             this.displayTooltip(data.feature.models)
           } else if (data.feature.feature) {
+            this.annotationEntry.featureId = data.feature.feature.id
             // 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) {
                 this.createConnectivityBody()
               }
@@ -2390,6 +2408,16 @@ export default {
         state['colour'] = this.colourRadio
         state['outlinesRadio'] = this.outlinesRadio
         state['background'] = this.currentBackground
+        if (this.offlineAnnotate) {
+          if (!sessionStorage.getItem('offline-annotation-expiry')) {
+            const expiry = new Date().getTime() + 24 * 60 * 60 * 1000;
+            sessionStorage.setItem('offline-annotation-expiry', expiry);
+          }
+          state['offlineAnnotation'] = {
+            expiry: sessionStorage.getItem('offline-annotation-expiry'),
+            value: sessionStorage.getItem('offline-annotation')
+          }
+        }
         this.getVisibilityState(state)
         return state
       }
@@ -2424,6 +2452,11 @@ export default {
     restoreMapState: function (state) {
       if (state) {
         if (state.viewport) this.mapImp.setState(state.viewport)
+        if (state.offlineAnnotation) {
+          if (state.offlineAnnotation.expiry > new Date().getTime()) {
+            sessionStorage.setItem('offline-annotation', state.offlineAnnotation.value)
+          }
+        }
         if (state.viewingMode) this.changeViewingMode(state.viewingMode)
         //The following three are boolean
         if ('flightPath3D' in state) this.setFlightPath3D(state.flightPath3D)
@@ -2996,6 +3029,8 @@ export default {
         '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']
       },
+      offlineAnnotate: false,
+      offlineAnnotation: [],
       annotationFrom: 'Anyone',
       annotatedSource: ['Anyone', 'Me', 'Others'],
       openMapRef: undefined,
@@ -3009,7 +3044,7 @@ export default {
         "Connection",
       ],
       annotator: undefined,
-      userInformation: undefined,
+      authorisedUser: undefined,
       activeDrawMode: undefined,
       activeDrawTool: undefined,
       featureAnnotationSubmitted: false,
@@ -3074,7 +3109,7 @@ export default {
     modeDescription: function () {
       let description = this.viewingModes[this.viewingMode]
       if (this.viewingMode === 'Annotation') {
-        if (this.userInformation) {
+        if (this.authorisedUser) {
           return description[1]
         }
         return description[0]
@@ -3114,18 +3149,22 @@ export default {
       deep: true,
     },
     viewingMode: function (mode) {
+      this.clearAnnotationFeature()
       if (mode === 'Annotation') {
         this.loading = true
         this.annotator.authenticate(this.userToken).then((userData) => {
           if (userData.name && userData.email && userData.canUpdate) {
-            this.showAnnotator(true)
-            this.userInformation = userData
-            this.setFeatureAnnotated()
-            this.addAnnotationFeature()
+            this.authorisedUser = userData
+            this.offlineAnnotate = false
+          } else {
+            this.authorisedUser = undefined
+            this.offlineAnnotate = true
           }
+          this.setFeatureAnnotated()
+          this.addAnnotationFeature()
           this.loading = false
         })
-      } else this.showAnnotator(false)
+      }
     },
     disableUI: function (isUIDisabled) {
       if (isUIDisabled) {