@abi-software/flatmapvuer 1.6.1-isan.2 → 1.6.2-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "1.6.1-isan.2",
+  "version": "1.6.2-beta.0",
   "license": "Apache-2.0",
   "files": [
     "dist/*",
@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "@abi-software/flatmap-viewer": "^3.2.8",
-    "@abi-software/map-utilities": "^1.2.1",
+    "@abi-software/map-utilities": "^1.2.2-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/App.vue

@@ -290,10 +290,6 @@ export default {
           taxo: 'FunctionalConnectivity',
           displayWarning: true,
         },
-        "pmr:CardiovascularModelWithFeedback": {
-          flatmapId: "pmr:CardiovascularModelWithFeedback",
-          displayWarning: true,
-        }
       },
       tooltipContent: undefined,
       tStyle: {
@@ -311,9 +307,8 @@ export default {
       mapSettings: [],
       //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/isan/flatmap/',
+      //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/"

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"
@@ -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="backgroundText">Annotations From</el-row>
             <el-row class="backgroundControl">
               <el-select
                 :teleported="false"
-                v-model="drawnType"
+                v-model="annotationFrom"
                 placeholder="Select"
                 class="select-box"
                 popper-class="flatmap_dropdown"
-                @change="setDrawnType"
+                @change="setAnnotationFrom"
               >
                 <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="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"
+                  v-for="item in annotatedSource"
                   :key="item"
                   :label="item"
                   :value="item"
@@ -885,8 +862,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] }
@@ -1015,12 +991,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
     },
     /**
@@ -1030,21 +1000,19 @@ 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.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 +1030,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 +1544,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') {
@@ -1624,6 +1579,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 = {}
     },
@@ -1647,7 +1603,6 @@ export default {
             const label = data.label
             const resource = [data.models]
             const taxonomy = this.entry
-            const flatmapId = this.flatmapId
             const biologicalSex = this.biologicalSex
             let taxons = undefined
             if (data.taxons) {
@@ -1661,7 +1616,6 @@ export default {
             const payload = {
               dataset: data.dataset,
               biologicalSex: biologicalSex,
-              flatmapId: flatmapId,
               taxonomy: taxonomy,
               resource: resource,
               label: label,
@@ -1713,6 +1667,14 @@ export default {
               !this.activeDrawTool
             ) {
               this.checkAndCreatePopups(payload)
+              if (this.annotationSidebar && this.previousEditEvent.type === 'updated') {
+                this.annotationEntry = {
+                  ...this.previousEditEvent,
+                  resourceId: this.serverURL
+                }
+                this.annotationEventCallback({}, { type: 'aborted' })
+              }
+              this.previousEditEvent = {}
             }
             this.$emit('resource-selected', payload)
           } else {
@@ -1872,12 +1834,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) {
@@ -2180,8 +2138,7 @@ export default {
         !this.disableUI && (
           (
             this.viewingMode === 'Annotation' &&
-            !this.annotationSidebar &&
-            this.userInformation
+            !this.annotationSidebar
           ) ||
           (
             this.viewingMode === 'Exploration' &&
@@ -2195,7 +2152,6 @@ export default {
           this.mapImp.showPopup(featureId, this.$refs.tooltip.$el, options);
           this.popUpCssHacks();
         });
-
       }
     },
     hasTooltipEntry: function () {
@@ -2342,7 +2298,6 @@ export default {
       if (this.mapImp) {
         let state = {
           entry: this.entry,
-          flatmapId: this.flatmapId,
           viewport: this.mapImp.getState(),
         }
         const identifier = this.mapImp.getIdentifier()
@@ -2370,8 +2325,8 @@ export default {
       if (state) {
         if (
           this.mapImp &&
-          ((state.entry && this.entry == state.entry) ||
-          (state.flatmapId && this.flatmapId == state.flatmapId)) &&
+          state.entry &&
+          this.entry == state.entry &&
           (!state.biologicalSex || state.biologicalSex === this.biologicalSex)
         ) {
           this.restoreMapState(state)
@@ -2465,32 +2420,22 @@ export default {
         // @arg identifier.uuid {string} The unique uuid the flatmap. If given then this exact map will
         //  be loaded, overriding ``taxon`` and ``biologicalSex``.
 
-        let identifier = {}
-        if (this.entry) {
-          identifier.taxon = this.entry
-        } else if (this.flatmapId) {
-          identifier.id = this.flatmapId
-        }
+        let identifier = { taxon: this.entry }
         if (this.uuid) {
           identifier.uuid = this.uuid
         }
-        //This now handles the uses of uuid when resuming states
+        //This now handle the uses of uuid when resuming states
         if (state) {
           if (state.uuid) {
             identifier = { uuid: state.uuid }
-          } else if (state.entry || state.flatmapId) {
-            if (state.entry) {
-              identifier.taxon = state.entry
-            } else if (state.flatmapId) {
-              identifier.id = state.flatmapId
-            }
-            
-            if (state.biologicalSex) {
-              identifier['biologicalSex'] = state.biologicalSex
-            } else if (identifier.taxon === 'NCBITaxon:9606') {
-              //For backward compatibility
-              identifier['biologicalSex'] = 'PATO:0000384'
-            }
+          } else if (state.entry) {
+            identifier.taxon = state.entry
+          }
+          if (state.biologicalSex) {
+              identifier['biologicalSex'] = state.biologicalSex;
+          } else if (identifier.taxon === 'NCBITaxon:9606') {
+            //For backward compatibility
+            identifier['biologicalSex'] = 'PATO:0000384';
           }
         } else {
           // Set the bioloicalSex now if map is not resumed from
@@ -2499,9 +2444,6 @@ export default {
             identifier['biologicalSex'] = this.biologicalSex
           }
         }
-        if (!identifier.taxon && !identifier.uuid) {
-          identifier = identifier.id;
-        }
 
         let promise1 = this.mapManagerRef.loadMap(
           identifier,
@@ -2698,13 +2640,10 @@ export default {
     /**
      * The taxon identifier of the species represented by the map.
      */
-    entry: String,
-    /**
-     * The ``id`` of the flatmap.
-     * If given then this exact map will be loaded,
-     * overriding ``taxon`` and ``biologicalSex``.
-     */
-    flatmapId: String,
+    entry: {
+      type: String,
+      required: true,
+    },
     /**
      * The unique ``uuid`` of the flatmap.
      * If given then this exact map will be loaded,
@@ -2972,12 +2911,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: [
@@ -2994,6 +2931,7 @@ export default {
       activeDrawTool: undefined,
       featureAnnotationSubmitted: false,
       drawnCreatedEvent: {},
+      previousEditEvent: {},
       previousDeletedEvent: {},
       connectionEntry: {},
       existDrawnFeatures: [], // Store all exist drawn features
@@ -3048,7 +2986,17 @@ 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 () {

package/src/components/MultiFlatmapVuer.vue

@@ -49,7 +49,6 @@
       :key="key"
       v-show="activeSpecies == key"
       :entry="item.taxo"
-      :flatmapId="item.flatmapId"
       :uuid="item.uuid"
       :biologicalSex="item.biologicalSex"
       :displayWarning="item.displayWarning"
@@ -160,15 +159,13 @@ export default {
             .then((data) => {
               //Check each key in the provided availableSpecies against the one
               Object.keys(this.availableSpecies).forEach((key) => {
-                // First look through the uuid
+                // FIrst look through the uuid
                 const uuid = this.availableSpecies[key].uuid
                 if (uuid && data.map((e) => e.uuid).indexOf(uuid) > 0) {
                   this.speciesList[key] = this.availableSpecies[key]
                 } else {
                   for (let i = 0; i < data.length; i++) {
-                    if ((this.availableSpecies[key].taxo && this.availableSpecies[key].taxo === data[i].taxon) ||
-                    (this.availableSpecies[key].flatmapId && this.availableSpecies[key].flatmapId === data[i].id))
-                    {
+                    if (this.availableSpecies[key].taxo === data[i].taxon) {
                       if (this.availableSpecies[key].biologicalSex) {
                         if (
                           data[i].biologicalSex &&

package/src/store/index.js

@@ -8,7 +8,7 @@ import { defineStore } from 'pinia'
 export const useMainStore = defineStore('main', {
   state: () => ({
     userProfile: {
-      token: ''
+      token: 'eyJraWQiOiJ1UUMzRDl1RGpTTlhoNzZJRW1ldExcL05uOGRMazFyaU1LWSt5T2ZTUytHaz0iLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOiJjNDhmZDkyOS0wYjIwLTQxNjEtOTEyZi03NTBmMGZiY2VkNWQiLCJ0b2tlbl91c2UiOiJhY2Nlc3MiLCJzY29wZSI6Im9wZW5pZCIsImF1dGhfdGltZSI6MTczMzEwMDk1OSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfRlZMaEo3Q1FBIiwiZXhwIjoxNzMzMTA0NTU5LCJpYXQiOjE3MzMxMDA5NTksInZlcnNpb24iOjIsImp0aSI6IjQyYWE3OTk2LTI0M2QtNDdhYy05MzRjLTEyYmRkOTQxYjg1YSIsImNsaWVudF9pZCI6IjcwM2xtNWQ4b2RjY3UyMXBhZ2NmamtlYWVhIiwidXNlcm5hbWUiOiJjNDhmZDkyOS0wYjIwLTQxNjEtOTEyZi03NTBmMGZiY2VkNWQifQ.BmymFWRhSHRcYaLOxEuhIndcWeVoGJ_vlbFAJMOz2CxzU_23oYVeTTiJCfGw5zCa5OfHHGZfd95hQktuhBUTv0D5UMCfIKM89Zu3-3sVfRYyEHjcn70QyerXhnbrsKdAUfovsc74v9Ko9udtreZFlURfC9vHoiMHExxpnzXv39icZsZlvUc2qmrFGS1iScF8FWy5uwgHtqKwUi7dVvb1Kb84HHBmmaqujVW2R5eXliWZqZM-EEdV_AjZks0G6EBuRza7CXdPCQKztxX-UGqiUKyMLvACrThlYsFFNjy0s9FEI0_maAl5G13ieR874zTgcdijAq4gDvAXWWrvih3a-A'
     },
   }),
   getters: {