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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "1.8.1-beta.0",
+  "version": "1.8.1-beta.1",
   "license": "Apache-2.0",
   "files": [
     "dist/*",
@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "@abi-software/flatmap-viewer": "3.2.13",
-    "@abi-software/map-utilities": "^1.4.1-beta.0",
+    "@abi-software/map-utilities": "^1.4.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' && (authorisedUser || offlineAnnotate) && !disableUI"
+        v-if="viewingMode === 'Annotation' && userInformation && !disableUI"
         :mapCanvas="{
           containerHTML: this.$el,
           class: '.maplibregl-canvas',
@@ -448,11 +448,8 @@ 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' && authorisedUser">
+          <template v-if="viewingMode === 'Annotation' && userInformation">
             <el-row class="backgroundText">Annotations From</el-row>
             <el-row class="backgroundControl">
               <el-select
@@ -794,10 +791,16 @@ export default {
       if (this.mapImp) {
         if (value) {
           const numericId = Number(value)
-          const featureObject = numericId
-            ? this.mapImp.featureProperties(numericId)
-            : { feature: this.existDrawnFeatures.find(feature => feature.id === value.trim()) };
-          let payload = { feature: featureObject }
+          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
+          }
           this.checkAndCreatePopups(payload)
         } else {
           this.closeTooltip()
@@ -900,7 +903,10 @@ export default {
      * Function to remove all drawn annotations from flatmap annotation layer.
      */
     clearAnnotationFeature: function () {
-      if (this.mapImp) {
+      if (
+        this.mapImp &&
+        this.existDrawnFeatures.length > 0
+      ) {
         this.mapImp.clearAnnotationFeature()
       }
     },
@@ -937,30 +943,23 @@ export default {
      * @arg {Object} `annotation`
      */
     commitAnnotationEvent: function (annotation) {
-      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()
+      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 = {}
         }
+        this.addAnnotationFeature()
       }
     },
     /**
@@ -970,17 +969,9 @@ export default {
      * @arg {String} `participated`
      */
     fetchAnnotatedItemIds: async function (userId = undefined, participated = undefined) {
-      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
-      }
+      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
       return annotatedItemIds
     },
     /**
@@ -1002,18 +993,10 @@ export default {
      * @arg {String} `participated`
      */
     fetchDrawnFeatures: async function (userId, participated) {
-      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
-      }
+      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
       return drawnFeatures
     },
     /**
@@ -1027,8 +1010,8 @@ export default {
           this.loading = true
         }
         const userId = this.annotationFrom === 'Anyone' ?
-          undefined : this.authorisedUser.orcid ?
-            this.authorisedUser.orcid : '0000-0000-0000-0000'
+          undefined : this.userInformation.orcid ?
+            this.userInformation.orcid : '0000-0000-0000-0000'
         const participated = this.annotationFrom === 'Anyone' ?
           undefined : this.annotationFrom === 'Me' ?
             true : false
@@ -1284,52 +1267,74 @@ export default {
         )
       }
     },
+    /**
+     * Function to highlight paths and features
+     * @param data 
+     */
+    zoomToFeatures: function (data) {
+      if (this.mapImp) {
+        this.mapImp.zoomToFeatures(data)
+      }
+    },
     /**
      * @public
      * Function to highlight the connected paths
-     * by providing path model identifier, ``pathId``.
-     * @arg {String} `pathId`
+     * by providing path model identifier, ``pathId`` or ``anatomicalId``.
+     * @arg {string | string[]} `pathId` (string) or `anatomicalId` (array)
      */
-    highlightConnectedPaths: async function (payload) {
+    retrieveConnectedPaths: async function (payload, options = {}) {
       if (this.mapImp) {
-        let paths = [...this.mapImp.pathModelNodes(payload)]
-
-        // The line below is to get the path features from the geojson ids
-        let pathFeatures = paths.map((p) => this.mapImp.featureProperties(p))
-
-        // Query the flatmap knowledge graph for connectivity, we use this to grab the origins
-        let connectivity = await this.flatmapQueries.queryForConnectivityNew(this.mapImp, payload)
-
-        // Check and flatten the origins node graph
-        let originsFlat = connectivity?.ids?.dendrites?.flat().flat()
-
-        let toHighlight = []
-        let highlight = false
-
-        // Loop through the path features and check if we have origin nodes
-        pathFeatures.forEach((p) => {
-
-          // Get the nodes from each path feature
-          this.mapImp.nodePathModels(p.featureId).forEach((f) => {
-            highlight = true
-            // s2 here is the second level paths
-            let s2 = this.mapImp.pathModelNodes(f)
-            s2.forEach((s) => {
-              let s2Feature = this.mapImp.featureProperties([s]) // get the feature properties for s2
-              if (originsFlat.includes(s2Feature.models)) {
-                highlight = false // if we have an origin node, we don't want to highlight the path
-                return
-              }
-            })
-
-            if (highlight) {
-              toHighlight.push(f)
-            }
-          })
-        })
-
-        // display connected paths
-        this.mapImp.zoomToFeatures(toHighlight, { noZoomIn: true })
+        let connectedPaths = [];
+        let connectedTarget = options.target?.length ? options.target : [];
+        if (typeof payload === 'string') {          
+          // The line below is to get the path features from the geojson ids
+          const nodeFeatureIds = [...this.mapImp.pathModelNodes(payload)];
+          if (!connectedTarget.length) {
+            const connectedType = options.type?.length ? options.type : ["all"];
+            const connectivity = await this.flatmapQueries.queryForConnectivityNew(this.mapImp, [payload]);
+            const originsFlat = connectivity?.ids?.dendrites.flat(Infinity);
+            const componentsFlat = connectivity?.ids?.components.flat(Infinity);
+            const destinationsFlat = connectivity?.ids?.axons.flat(Infinity);
+            let connected = [];
+            if (connectedType.includes("origins")) connected.push(...originsFlat);
+            if (connectedType.includes("components")) connected.push(...componentsFlat);
+            if (connectedType.includes("destinations")) connected.push(...destinationsFlat);
+            if (connectedType.includes("all")) connected.push(...originsFlat, ...componentsFlat, ...destinationsFlat);
+            connectedTarget = [...new Set(connected)];
+          }
+          // Loop through the node features and check if we have certain nodes
+          nodeFeatureIds.forEach((featureId) => {
+            // Get the paths from each node feature
+            const pathsL2 = this.mapImp.nodePathModels(featureId);
+            pathsL2.forEach((path) => {
+              // nodes of the second level path
+              const nodeFeatureIdsL2 = this.mapImp.pathModelNodes(path);
+              const nodeModelsL2 = nodeFeatureIdsL2.map((featureIdL2) => {
+                return this.mapImp.featureProperties(featureIdL2).models;
+              });
+              const intersection = connectedTarget.filter(element => nodeModelsL2.includes(element));
+              if (intersection.length && !connectedPaths.includes(path)) connectedPaths.push(path);
+            });
+          });
+          connectedPaths = [...connectedPaths, payload];
+        } else if (Array.isArray(payload)) {
+          const pathsOfEntities = await this.mapImp.queryPathsForFeatures(payload);
+          if (connectedTarget.length) {
+            pathsOfEntities.forEach((path) => {
+              const nodeFeatureIds = this.mapImp.pathModelNodes(path);
+              const nodeModels = nodeFeatureIds.map((featureId) => {
+                return this.mapImp.featureProperties(featureId).models;
+              });
+              const intersection = connectedTarget.filter(element => nodeModels.includes(element));
+              if (intersection.length && !connectedPaths.includes(path)) connectedPaths.push(path);
+            });
+          } else {
+            connectedPaths = pathsOfEntities;
+          }
+          connectedPaths = [...connectedPaths, ...payload];
+        }
+        connectedPaths = [...new Set(connectedPaths)];
+        return connectedPaths;
       }
     },
     resetMapFilter: function() {
@@ -1660,13 +1665,11 @@ export default {
               provenanceTaxonomy: taxons,
             }
             if (eventType === 'click') {
-              this.setConnectivityDataSource(this.viewingMode, data);
               this.featuresAlert = data.alert
-              //The following will be used to track either a feature is selected
-              this.statesTracking.activeClick = true
-              this.statesTracking.activeTerm = data?.models
               if (this.viewingMode === 'Neuron Connection') {
-                this.highlightConnectedPaths([data.models])
+                this.retrieveConnectedPaths([data.models]).then((paths) => {
+                  this.zoomToFeatures(paths)
+                })
               } else {
                 this.currentActive = data.models ? data.models : ''
                 // Drawing connectivity between features
@@ -1711,23 +1714,6 @@ export default {
         }
       }
     },
-    /**
-     * The data for connectivity data source is just a placeholder data
-     * to check which part of the map is clicked, e.g., path or feture or empty area,
-     * based on the viewing mode.
-     * The "connectivity-info-close" event will be emitted based on this data
-     * when there has a click event on map.
-     * @param viewingMode
-     * @param data
-     */
-    setConnectivityDataSource: function (viewingMode, data) {
-      // for Exploration mode, only path click will be used as data source
-      this.connectivityDataSource = data.source;
-      // for other modes, it can be feature or path
-      if (viewingMode === 'Neuron Connection' || viewingMode === 'Annotation') {
-        this.connectivityDataSource = data.featureId;
-      }
-    },
     /**
      * @public
      * Function triggered by viewing mode change.
@@ -1919,15 +1905,14 @@ 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()
               }
@@ -2403,21 +2388,11 @@ export default {
           state['biologicalSex'] = identifier.biologicalSex
         if (identifier && identifier.uuid) state['uuid'] = identifier.uuid
         state['viewingMode'] = this.viewingMode
-        state['searchTerm'] = this.statesTracking.activeTerm
+        state['searchTerm'] = this.searchTerm
         state['flightPath3D'] = this.flightPath3DRadio
         state['colour'] = this.colourRadio
-        state['outlinesRadio'] = this.outlinesRadio
+        state['outlines'] = 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
       }
@@ -2452,11 +2427,6 @@ 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)
@@ -2466,7 +2436,9 @@ export default {
         if (state.searchTerm) {
           const searchTerm = state.searchTerm
           if (state.viewingMode === "Neuron Connection") {
-            this.highlightConnectedPaths([searchTerm])
+            this.retrieveConnectedPaths([searchTerm]).then((paths) => {
+              this.zoomToFeatures(paths)
+            })
           } else {
             this.searchAndShowResult(searchTerm, true)
           }
@@ -2619,7 +2591,6 @@ export default {
       if (this.mapImp.options?.style === 'functional') {
         this.isFC = true
       }
-      console.log(this.mapImp)
       this.mapImp.setBackgroundOpacity(1)
       this.backgroundChangeCallback(this.currentBackground)
       this.pathways = this.mapImp.pathTypes()
@@ -2633,7 +2604,6 @@ export default {
       this.loading = false
       this.computePathControlsMaximumHeight()
       this.mapResize()
-      this.handleMapClick();
       this.setInitMapState();
       /**
        * This is ``onFlatmapReady`` event.
@@ -2641,29 +2611,6 @@ export default {
        */
       this.$emit('ready', this)
     },
-    /**
-     * @public
-     * Function to handle mouse click on map area
-     * after the map is loaded.
-     */
-    handleMapClick: function () {
-      const _map = this.mapImp._map;
-      if (_map) {
-        _map.on('click', (e) => {
-          //A little logic to make sure we are keeping track
-          //of selected term
-          if (this.statesTracking.activeClick) {
-            this.statesTracking.activeClick = false
-          } else {
-            this.statesTracking.activeTerm = ""
-          }
-          if (!this.connectivityDataSource) {
-            this.$emit('connectivity-info-close');
-          }
-          this.connectivityDataSource = ''; // reset
-        });
-      }
-    },
     /**
      * @public
      * Function to show or hide the minimap
@@ -2698,12 +2645,11 @@ export default {
           } else if (this.viewingMode === "Annotation") {
             this.manualAbortedOnClose()
           }
-          this.statesTracking.activeTerm = ""
+          this.searchTerm = ""
           return true
         } else {
           const searchResults = this.mapImp.search(term)
           if (searchResults?.results?.length) {
-            this.statesTracking.activeTerm = term
             this.mapImp.showSearchResults(searchResults)
             if (displayInfo) {
               let featureId = undefined;
@@ -2723,9 +2669,9 @@ export default {
                 if (this.viewingMode === "Exploration" || this.viewingMode === "Annotation") {
                   this.checkAndCreatePopups(data)
                 } else if (this.viewingMode === 'Neuron Connection') {
-                  setTimeout(() => {
-                    this.highlightConnectedPaths(data.resource)
-                  }, 1000)
+                  this.retrieveConnectedPaths(data.resource).then((paths) => {
+                    this.zoomToFeatures(paths)
+                  })
                 }
                 this.mapImp.showPopup(featureId, capitalise(feature.label), {
                   className: 'custom-popup',
@@ -2734,6 +2680,7 @@ export default {
                 })
               }
             }
+            this.searchTerm = term
             return true
           } else this.mapImp.clearSearchResults()
         }
@@ -3029,8 +2976,6 @@ 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,
@@ -3044,7 +2989,7 @@ export default {
         "Connection",
       ],
       annotator: undefined,
-      authorisedUser: undefined,
+      userInformation: undefined,
       activeDrawMode: undefined,
       activeDrawTool: undefined,
       featureAnnotationSubmitted: false,
@@ -3073,10 +3018,7 @@ export default {
           without: true,
         }
       }),
-      statesTracking: markRaw({
-        activeClick: false,
-        activeTerm: "",
-      }),
+      searchTerm: "",
       taxonLeaveDelay: undefined,
     }
   },
@@ -3109,7 +3051,7 @@ export default {
     modeDescription: function () {
       let description = this.viewingModes[this.viewingMode]
       if (this.viewingMode === 'Annotation') {
-        if (this.authorisedUser) {
+        if (this.userInformation) {
           return description[1]
         }
         return description[0]
@@ -3149,22 +3091,18 @@ 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.authorisedUser = userData
-            this.offlineAnnotate = false
-          } else {
-            this.authorisedUser = undefined
-            this.offlineAnnotate = true
+            this.showAnnotator(true)
+            this.userInformation = userData
+            this.setFeatureAnnotated()
+            this.addAnnotationFeature()
           }
-          this.setFeatureAnnotated()
-          this.addAnnotationFeature()
           this.loading = false
         })
-      }
+      } else this.showAnnotator(false)
     },
     disableUI: function (isUIDisabled) {
       if (isUIDisabled) {

package/src/components.d.ts

@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     DynamicLegends: typeof import('./components/legends/DynamicLegends.vue')['default']
+    ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
@@ -23,6 +24,7 @@ declare module 'vue' {
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
     FlatmapVuer: typeof import('./components/FlatmapVuer.vue')['default']
     MultiFlatmapVuer: typeof import('./components/MultiFlatmapVuer.vue')['default']
     SelectionsGroup: typeof import('./components/SelectionsGroup.vue')['default']

package/src/services/flatmapKnowledge.js

@@ -36,25 +36,29 @@ function getKnowledgeSource(mapImp) {
       mapKnowledgeSource = `${sckanProvenance.npo.release}-npo`;
     }
   }
-
   return mapKnowledgeSource;
 }
 
-function loadAndStoreKnowledge(mapImp, flatmapQueries) {
+async function loadAndStoreKnowledge(mapImp, flatmapQueries) {
   const knowledgeSource = getKnowledgeSource(mapImp);
   const sql = `select knowledge from knowledge
-    where source="${knowledgeSource}"
-    order by source desc`;
+  where source="${knowledgeSource}"
+  order by source desc`;
+
+  refreshFlatmapKnowledgeCache()
   const flatmapKnowledge = sessionStorage.getItem('flatmap-knowledge');
 
   if (!flatmapKnowledge) {
-    flatmapQueries.flatmapQuery(sql).then((response) => {
-      const mappedData = response.values.map(x => x[0]);
-      const parsedData = mappedData.map(x => JSON.parse(x));
-      sessionStorage.setItem('flatmap-knowledge', JSON.stringify(parsedData));
-      updateFlatmapKnowledgeCache();
-    });
+    const response = await flatmapQueries.flatmapQuery(sql);
+    const mappedData = response.values.map(x => x[0]);
+    const parsedData = mappedData.map(x => JSON.parse(x));
+
+    sessionStorage.setItem('flatmap-knowledge', JSON.stringify(parsedData));
+    updateFlatmapKnowledgeCache();
+
+    return parsedData;
   }
+  return JSON.parse(flatmapKnowledge);
 }
 
 function updateFlatmapKnowledgeCache() {
@@ -70,6 +74,7 @@ function removeFlatmapKnowledgeCache() {
     'flatmap-knowledge',
     'flatmap-knowledge-expiry',
   ];
+
   keys.forEach((key) => {
     sessionStorage.removeItem(key);
   });