@abi-software/flatmapvuer 1.7.4 → 1.7.5-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "1.7.4",
+  "version": "1.7.5-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.3.2",
+    "@abi-software/map-utilities": "^1.3.3-beta.4",
     "@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

@@ -633,6 +633,7 @@ import { DrawToolbar, Tooltip, TreeControls } from '@abi-software/map-utilities'
 import '@abi-software/map-utilities/dist/style.css'
 
 const ERROR_MESSAGE = 'cannot be found on the map.';
+const CACHE_LIFETIME = 24 * 60 * 60 * 1000; // One day
 
 const centroid = (geometry) => {
   let featureGeometry = { lng: 0, lat: 0, }
@@ -1471,16 +1472,19 @@ export default {
     taxonMouseEnterEmitted: function (payload) {
       if (this.mapImp) {
         if (payload.value) {
+          clearTimeout(this.taxonLeaveDelay)
           let gid = this.mapImp.taxonFeatureIds(payload.key)
           this.mapImp.enableConnectivityByTaxonIds(payload.key, payload.value) // make sure path is visible
           this.mapImp.zoomToGeoJSONFeatures(gid, {noZoomIn: true})
         } else {
-          // reset visibility of paths
-          this.mapImp.unselectGeoJSONFeatures()
-          payload.selections.forEach((item) => {
-            let show = payload.checked.includes(item.taxon)
-            this.mapImp.enableConnectivityByTaxonIds(item.taxon, show)
-          })
+          this.taxonLeaveDelay = setTimeout(() => {
+            // reset visibility of paths
+            this.mapImp.unselectGeoJSONFeatures()
+            payload.selections.forEach((item) => {
+              let show = payload.checked.includes(item.taxon)
+              this.mapImp.enableConnectivityByTaxonIds(item.taxon, show)
+            })
+          }, 1000);
         }
       }
     },
@@ -1492,9 +1496,7 @@ export default {
      */
     checkAllTaxons: function (payload) {
       if (this.mapImp) {
-        payload.keys.forEach((key) =>
-          this.mapImp.enableConnectivityByTaxonIds(key, payload.value)
-        )
+        this.mapImp.enableConnectivityByTaxonIds(payload.keys, payload.value)
       }
     },
     /**
@@ -1635,6 +1637,7 @@ 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
@@ -1685,6 +1688,23 @@ 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.
@@ -1832,6 +1852,48 @@ export default {
         this.mapImp.selectGeoJSONFeatures(allFeaturesToHighlight);
       }
     },
+    showConnectivitiesByReference: function (resource) {
+      this.searchConnectivitiesByReference(resource).then((featureIds) => {
+        this.mapImp.selectFeatures(featureIds);
+      });
+    },
+    searchConnectivitiesByReference: async function (resource) {
+      const flatmapKnowledge = sessionStorage.getItem('flatmap-knowledge');
+      let featureIds = [];
+
+      if (flatmapKnowledge) {
+        featureIds = await this.getReferenceConnectivitiesFromStorage(resource);
+      } else {
+        featureIds = await this.getReferenceConnectivitiesByAPI(resource);
+      }
+      return featureIds;
+    },
+    getReferenceConnectivitiesFromStorage: async function (resource) {
+      const flatmapKnowledgeRaw = sessionStorage.getItem('flatmap-knowledge');
+
+      if (flatmapKnowledgeRaw) {
+        const flatmapKnowledge = JSON.parse(flatmapKnowledgeRaw);
+        const dataWithRefs = flatmapKnowledge.filter((x) => x.references && x.references.length);
+        const foundData = dataWithRefs.filter((x) => x.references.includes(resource));
+
+        if (foundData.length) {
+          const featureIds = foundData.map((x) => x.id);
+          return featureIds;
+        }
+      }
+      return [];
+    },
+    getReferenceConnectivitiesByAPI: async function (resource) {
+      const knowledgeSource = this.getKnowledgeSource(this.mapImp);
+      const sql = `select knowledge from knowledge
+        where source="${knowledgeSource}" and
+        knowledge like "%${resource}%" order by source desc`;
+      const response = await this.flatmapQueries.flatmapQuery(sql);
+      const mappedData = response.values.map((x) => x[0]);
+      const parsedData = mappedData.map((x) => JSON.parse(x));
+      const featureIds = parsedData.map((x) => x.id);
+      return featureIds;
+    },
     emitConnectivityGraphError: function (errorData) {
       this.$emit('connectivity-graph-error', {
         data: {
@@ -1886,6 +1948,8 @@ export default {
         //require data.resource && data.feature.source
         let results =
           await this.flatmapQueries.retrieveFlatmapKnowledgeForEvent(this.mapImp, data)
+        // load and store knowledge
+        this.loadAndStoreKnowledge(this.mapImp);
         // The line below only creates the tooltip if some data was found on the path
         // the pubmed URLs are in knowledge response.references
         if (
@@ -1898,6 +1962,58 @@ export default {
         }
       }
     },
+    removeAllCacheData: function () {
+      const keys = [
+        'flatmap-knowledge',
+        'flatmap-knowledge-expiry',
+      ];
+      keys.forEach((key) => {
+        sessionStorage.removeItem(key);
+      });
+    },
+    refreshCache: function () {
+      const expiry = sessionStorage.getItem('flatmap-knowledge-expiry');
+      const now = new Date();
+
+      if (now.getTime() > expiry) {
+        this.removeAllCacheData();
+      }
+    },
+    updateCacheExpiry: function () {
+      const now = new Date();
+      const expiry = now.getTime() + CACHE_LIFETIME;
+
+      sessionStorage.setItem('flatmap-knowledge-expiry', expiry);
+    },
+    loadAndStoreKnowledge: function (mapImp) {
+      const knowledgeSource = this.getKnowledgeSource(mapImp);
+      const sql = `select knowledge from knowledge
+        where source="${knowledgeSource}"
+        order by source desc`;
+      const flatmapKnowledge = sessionStorage.getItem('flatmap-knowledge');
+
+      if (!flatmapKnowledge) {
+        this.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));
+          this.updateCacheExpiry();
+        });
+      }
+    },
+    getKnowledgeSource: function (mapImp) {
+      let mapKnowledgeSource = '';
+      if (mapImp.provenance?.connectivity) {
+        const sckanProvenance = mapImp.provenance.connectivity;
+        if ('knowledge-source' in sckanProvenance) {
+          mapKnowledgeSource = sckanProvenance['knowledge-source'];
+        } else if ('npo' in sckanProvenance) {
+          mapKnowledgeSource = `${sckanProvenance.npo.release}-npo`;
+        }
+      }
+
+      return mapKnowledgeSource;
+    },
     /**
      * A hack to remove flatmap tooltips while popup is open
      */
@@ -2159,12 +2275,7 @@ export default {
         }
         // Get connectivity knowledge source | SCKAN release
         if (this.mapImp.provenance?.connectivity) {
-          const sckanProvenance = this.mapImp.provenance.connectivity;
-          if ('knowledge-source' in sckanProvenance) {
-            this.tooltipEntry['knowledge-source'] = sckanProvenance['knowledge-source'];
-          } else if ('npo' in sckanProvenance) {
-            this.tooltipEntry['knowledge-source'] = `${sckanProvenance.npo.release}-npo`;
-          }
+          this.tooltipEntry['knowledge-source'] = this.getKnowledgeSource(this.mapImp);
         }
         this.$emit('connectivity-info-open', this.tooltipEntry);
       }
@@ -2597,9 +2708,10 @@ export default {
           } else {
             this.statesTracking.activeTerm = ""
           }
-          if (this.tooltipEntry.featureId) {
+          if (!this.connectivityDataSource) {
             this.$emit('connectivity-info-close');
           }
+          this.connectivityDataSource = ''; // reset
         });
       }
     },
@@ -2941,6 +3053,7 @@ export default {
       loading: false,
       flatmapMarker: flatmapMarker,
       tooltipEntry: createUnfilledTooltipData(),
+      connectivityDataSource: '',
       connectivityTooltipVisible: false,
       drawerOpen: false,
       featuresAlert: undefined,
@@ -3005,6 +3118,7 @@ export default {
         activeClick: false,
         activeTerm: "",
       }),
+      taxonLeaveDelay: undefined,
     }
   },
   computed: {
@@ -3159,6 +3273,7 @@ export default {
     } else if (this.renderAtMounted) {
       this.createFlatmap()
     }
+    this.refreshCache();
   },
 }
 </script>