@abi-software/flatmapvuer 1.10.2 → 1.10.3-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "1.10.2",
+  "version": "1.10.3-beta.1",
   "license": "Apache-2.0",
   "files": [
     "dist/*",
@@ -44,7 +44,7 @@
     "./src/*": "./src/*"
   },
   "dependencies": {
-    "@abi-software/map-utilities": "^1.6.0",
+    "@abi-software/map-utilities": "^1.6.1-beta.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

@@ -633,6 +633,9 @@ import {
   refreshFlatmapKnowledgeCache,
   getKnowledgeSource,
   getReferenceConnectivitiesByAPI,
+  filterPathsByOriginFromKnowledge,
+  filterPathsByDestinationFromKnowledge,
+  filterPathsByViaFromKnowledge,
 } from '../services/flatmapKnowledge.js'
 import { capitalise } from './utilities.js'
 import yellowstar from '../icons/yellowstar'
@@ -641,7 +644,19 @@ import * as flatmap from 'https://cdn.jsdelivr.net/npm/@abi-software/flatmap-vie
 import { AnnotationService } from '@abi-software/sparc-annotation'
 import { mapState } from 'pinia'
 import { useMainStore } from '@/store/index'
-import { DrawToolbar, Tooltip, TreeControls } from '@abi-software/map-utilities'
+import {
+  queryPathsByOrigin,
+  queryPathsByViaLocation,
+  queryPathsByDestination,
+  extractOriginItems,
+  extractDestinationItems,
+  extractViaItems,
+  fetchLabels,
+  queryAllConnectedPaths,
+  DrawToolbar,
+  Tooltip,
+  TreeControls
+} from '@abi-software/map-utilities'
 import '@abi-software/map-utilities/dist/style.css'
 import EventBus from './EventBus.js'
 
@@ -740,8 +755,13 @@ export default {
     return { annotator }
   },
   methods: {
+    enableFeatureResetOnClick: function (enable) {
+      if (this.mapImp) {
+        this.mapImp.enableFeatureResetOnClick(enable)
+      }
+    },
     /**
-     * 
+     *
      * @param filter format should follow #makeStyleFilter (flatmap-viewer)
      */
     setVisibilityFilter: function (filter) {
@@ -1401,8 +1421,8 @@ export default {
           const notPathways = { NOT: isPathways };
 
           if (payload.key === "alert" || payload.key === "withoutAlert") {
-            const hasAlert = payload.key === "alert" ? 
-              { HAS: 'alert' } : 
+            const hasAlert = payload.key === "alert" ?
+              { HAS: 'alert' } :
               { NOT: { HAS: 'alert' } };
 
             filter = { OR: [notPathways, { AND: [isPathways, hasAlert] }] };
@@ -1732,9 +1752,8 @@ export default {
               const clickedItem = singleSelection ? data : data[0]
               this.setConnectivityDataSource(this.viewingMode, clickedItem);
               if (this.viewingMode === 'Neuron Connection') {
-                this.retrieveConnectedPaths([clickedItem.models]).then((paths) => {
-                  this.zoomToFeatures(paths)
-                })
+                // do nothing here
+                // the method to highlight paths is moved to checkAndCreatePopups function
               } else {
                 this.currentActive = clickedItem.models ? clickedItem.models : '' // This is for FC map
                 // This is for annotation mode - draw connectivity between features/paths
@@ -1767,7 +1786,6 @@ export default {
               data &&
               data.type !== 'marker' &&
               eventType === 'click' &&
-              !(this.viewingMode === 'Neuron Connection') &&
               // Disable popup when drawing
               !this.activeDrawTool
             ) {
@@ -1938,6 +1956,14 @@ export default {
       }
       return featureIds;
     },
+    getFlatmapKnowledge: function () {
+      let flatmapKnowledge = [];
+      const flatmapKnowledgeRaw = sessionStorage.getItem('flatmap-knowledge');
+      if (flatmapKnowledgeRaw) {
+        flatmapKnowledge = JSON.parse(flatmapKnowledgeRaw);
+      }
+      return flatmapKnowledge;
+    },
     emitConnectivityError: function (errorData) {
       this.$emit('connectivity-error', {
         data: {
@@ -1973,7 +1999,7 @@ export default {
      * _checkNeuronClicked shows a neuron path pop up if a path was recently clicked._
      * @arg {Object} `data`
      */
-    checkAndCreatePopups: async function (data) {
+    checkAndCreatePopups: async function (data, connectivityExplorerClicked) {
       // Call flatmap database to get the connection data
       if (this.viewingMode === 'Annotation') {
         const features = data.filter(d => d.feature).map(d => d.feature)
@@ -2020,6 +2046,134 @@ export default {
         } else {
           this.annotation = {}
         }
+      }
+      // clicking on a connectivity explorer card will be the same as exploration mode
+      // the card should be opened without doing other functions
+      else if (this.viewingMode === 'Neuron Connection' && !connectivityExplorerClicked) {
+        const resources = data.map(tooltip => tooltip.resource[0]);
+        // TODO: to remove pathsQueryAPI
+        // the new query, queryPathsByRoute, is used in mapviewer for CQ
+        // let pathsQueryAPI = this.retrieveConnectedPaths(resources); // TODO: to replace with queryAllConnectedPaths
+
+        // filter out paths
+        const featureId = resources.find(resource => !resource.startsWith('ilxtr:'));
+        if (featureId) {
+          // fallback if it cannot find in anatomical nodes
+          const transformResources = Array.isArray(resources) ? [...resources] : [resources];
+          if (transformResources.length === 1) {
+            transformResources.push([]);
+          }
+
+          const featureId = data[0].feature?.featureId;
+          const annotation = this.mapImp.annotations.get(featureId);
+          const anatomicalNodes = annotation?.['anatomical-nodes'];
+          const uniqueResource = anatomicalNodes ? JSON.parse(anatomicalNodes[0]) : transformResources;
+
+          // if (this.connectionType === 'Origin') {
+            // Competency Query API
+            // pathsQueryAPI = queryPathsByOrigin(this.flatmapAPI, this.mapImp.knowledgeSource, resources);
+
+            // search by unique placement before competency API is ready for this
+            // pathsQueryAPI = filterPathsByOriginFromKnowledge(uniqueResource);
+          // } else if (this.connectionType === 'Via') {
+            // Competency Query API
+            // pathsQueryAPI = queryPathsByViaLocation(this.flatmapAPI, this.mapImp.knowledgeSource, resources);
+
+            // search by unique placement before competency API is ready for this
+            // pathsQueryAPI = filterPathsByViaFromKnowledge(uniqueResource);
+          // } else if (this.connectionType === 'Destination') {
+            // Competency Query API
+            // pathsQueryAPI = queryPathsByDestination(this.flatmapAPI, this.mapImp.knowledgeSource, resources);
+
+            // search by unique placement before competency API is ready for this
+            // pathsQueryAPI = filterPathsByDestinationFromKnowledge(uniqueResource);
+          // } else {
+            // pathsQueryAPI = queryAllConnectedPaths(this.flatmapAPI, this.mapImp.knowledgeSource, resources);
+          // }
+          const terms = uniqueResource.flat(Infinity);
+          const uniqueTerms = [...new Set(terms)];
+          const fetchResults = await fetchLabels(this.flatmapAPI, uniqueTerms);
+          const objectResults = fetchResults.reduce((arr, item) => {
+            const id = item[0];
+            const valObj = JSON.parse(item[1]);
+            if (valObj.source === this.mapImp.knowledgeSource) {
+              arr.push({ id, label: valObj.label });
+            }
+            return arr;
+          }, []);
+          const labels = [];
+          for (let i = 0; i < uniqueTerms.length; i++) {
+            const foundObj = objectResults.find((obj) => obj.id === uniqueTerms[i])
+            if (foundObj) {
+              labels.push(foundObj.label);
+            }
+          }
+          const filterItemLabel = capitalise(labels.join(', '));
+          const newConnectivityfilter = {
+            facet: JSON.stringify(uniqueResource),
+            facetPropPath: `flatmap.connectivity.source.${this.connectionType.toLowerCase()}`,
+            tagLabel: filterItemLabel, // used tagLabel here instead of label since the label and value are different
+            term: this.connectionType
+          };
+          // check for existing item
+          const isNewFilterItemExist = this.connectivityfilters.some((connectivityfilter) => (
+            connectivityfilter.facet === newConnectivityfilter.facet &&
+            connectivityfilter.facetPropPath === newConnectivityfilter.facetPropPath
+          ));
+
+          if (!isNewFilterItemExist) {
+            this.connectivityfilters.push(newConnectivityfilter);
+          }
+          // TODO: to remove "neuron-connection-click"
+          this.$emit('neuron-connection-feature-click', this.connectivityfilters);
+        }
+
+        // TODO: to clean up after verification
+        // pathsQueryAPI.then(async (paths) => {
+        //   if (paths.length) {
+        //     const filteredPaths = paths.filter(path => (path in this.mapImp.pathways.paths))
+        //     const filteredPathsWithData = [];
+        //     let prom1 = [];
+        //     let prom2 = [];
+
+        //     for (let i = 0; i < filteredPaths.length; i++) {
+        //       const path = filteredPaths[i];
+        //       const modelFeatureIds = this.mapImp.modelFeatureIds(path);
+        //       const feature = this.mapImp.featureProperties(modelFeatureIds[0]);
+        //       if (feature) {
+        //         const pathData = {
+        //           resource: [feature.models],
+        //           feature: feature,
+        //           label: feature.label,
+        //           provenanceTaxonomy: feature.taxons,
+        //           alert: feature.alert,
+        //         };
+        //         filteredPathsWithData.push(pathData);
+        //         prom1.push({
+        //           title: pathData.label,
+        //           featureId: [path]
+        //         })
+        //       }
+        //     }
+        //     this.tooltipEntry = await Promise.all(prom1)
+        //     // Emit placeholders first.
+        //     this.$emit('connectivity-info-open', this.tooltipEntry);
+
+        //     /**
+        //      * This event is emitted to highlight the same paths on other display maps.
+        //      */
+        //     this.$emit('neuron-connection-click', paths);
+
+        //     // loading data
+        //     for (let i = 0; i < filteredPathsWithData.length; i++) {
+        //       const pathData = filteredPathsWithData[i];
+        //       const tooltipEntryData = await this.getKnowledgeTooltip(pathData);
+        //       prom2.push(tooltipEntryData)
+        //     }
+        //     this.tooltipEntry = await Promise.all(prom2)
+        //     this.displayTooltip(filteredPaths)
+        //   }
+        // })
       } else {
         // load and store knowledge
         loadAndStoreKnowledge(this.mapImp, this.flatmapQueries);
@@ -2034,6 +2188,7 @@ export default {
         // this should only for flatmap paths not all features
         if (this.tooltipEntry.length) {
           this.$emit('connectivity-info-open', this.tooltipEntry);
+
           // While having placeholders displayed, get details for all paths and then replace.
           for (let index = 0; index < data.length; index++) {
             prom1.push(await this.getKnowledgeTooltip(data[index]))
@@ -2046,6 +2201,31 @@ export default {
         }
       }
     },
+    /**
+     * Updates the connectivity filters in flatmap when there are changes in the sidebar.
+     * @public
+     * @param {Array} payload - The array of filter items to update.
+     */
+    updateConnectivityFilters: function (payload) {
+      if (!payload.length) return;
+      this.connectivityfilters = payload.filter((filterItem) => (
+        filterItem.facet.toLowerCase() !== 'show all'
+      ));
+    },
+    resetConnectivityfilters: function (payload) {
+      if (payload.length) {
+        // remove not found items
+        this.connectivityfilters = this.connectivityfilters.filter((connectivityfilter) =>
+          payload.some((notFoundItem) => (
+            notFoundItem.facetPropPath === connectivityfilter.facetPropPath &&
+            notFoundItem.facet !== connectivityfilter.facet
+          ))
+        )
+      } else {
+        // full reset
+        this.connectivityfilters = [];
+      }
+    },
     getKnowledgeTooltip: async function (data) {
       //require data.resource && data.feature.source
       const results = await this.flatmapQueries.retrieveFlatmapKnowledgeForEvent(this.mapImp, data)
@@ -2749,9 +2929,9 @@ export default {
       }
       return filterSources
     },
-    getFilterOptions: async function () {
+    getFilterOptions: async function (_flatmapKnowledge) {
+      let filterOptions = [];
       if (this.mapImp) {
-        let filterOptions = []
         const filterRanges = this.mapImp.featureFilterRanges()
         for (const [key, value] of Object.entries(filterRanges)) {
           let main = {
@@ -2804,8 +2984,69 @@ export default {
             filterOptions.push(main)
           }
         }
-        return filterOptions
+        const connectionFilters = [];
+        const flatmapKnowledge = _flatmapKnowledge || this.getFlatmapKnowledge();
+        const mapKnowledge = this.mapImp.pathways.paths;
+        flatmapKnowledge.forEach((knowledge) => {
+          const id = knowledge.id;
+          if (id) {
+            const matchObj = mapKnowledge[id];
+            if (matchObj) {
+              const mapConnectivity = matchObj.connectivity;
+              const mapNodePhenotypes = matchObj['node-phenotypes'];
+              knowledge.connectivity = [...knowledge.connectivity, ...mapConnectivity];
+              for (let key in knowledge['node-phenotypes']) {
+                if (mapNodePhenotypes[key]) {
+                  knowledge['node-phenotypes'][key].push(...mapNodePhenotypes[key]);
+                }
+              }
+            }
+          }
+        })
+        const originItems = await extractOriginItems(this.flatmapAPI, flatmapKnowledge);
+        const viaItems = await extractViaItems(this.flatmapAPI, flatmapKnowledge);
+        const destinationItems = await extractDestinationItems(this.flatmapAPI, flatmapKnowledge);
+
+        const transformItem = (facet, item) => {
+          const key = JSON.stringify(item.key);
+          return {
+            key: `flatmap.connectivity.source.${facet}.${key}`,
+            label: item.label || key
+          };
+        }
+
+        for (const facet of ["origin", "via", "destination"]) {
+          let childrenList = []
+          if (facet === 'origin') {
+            childrenList = originItems.map((item) => transformItem(facet, item));
+          } else if (facet === 'via') {
+            childrenList = viaItems.map((item) => transformItem(facet, item));
+          } else if (facet === 'destination') {
+            childrenList = destinationItems.map((item) => transformItem(facet, item));
+          }
+
+          // Those without label but key should be below
+          childrenList = childrenList.sort((a, b) => {
+            const isAlpha = (str) => /^[a-zA-Z]/.test(str);
+            const aAlpha = isAlpha(a.label);
+            const bAlpha = isAlpha(b.label);
+
+            if (aAlpha && !bAlpha) return -1;
+            if (!aAlpha && bAlpha) return 1;
+
+            return a.label.localeCompare(b.label);
+          });
+
+          connectionFilters.push({
+            key: `flatmap.connectivity.source.${facet}`,
+            label: facet,
+            children: childrenList,
+          })
+        }
+
+        filterOptions.push(...connectionFilters)
       }
+      return filterOptions;
     },
     /**
      * @public
@@ -2882,7 +3123,7 @@ export default {
      * @arg {String} `term`,
      * @arg {String} `displayInfo`
      */
-    searchAndShowResult: function (term, displayInfo) {
+    searchAndShowResult: function (term, displayInfo, connectivityExplorerClicked) {
       if (this.mapImp) {
         if (term === undefined || term === '') {
           this.mapImp.clearSearchResults()
@@ -2913,13 +3154,8 @@ export default {
                   provenanceTaxonomy: feature.taxons,
                   alert: feature.alert,
                 }
-                if (this.viewingMode === "Exploration" || this.viewingMode === "Annotation") {
-                  this.checkAndCreatePopups([data])
-                } else if (this.viewingMode === 'Neuron Connection') {
-                  this.retrieveConnectedPaths(data.resource).then((paths) => {
-                    this.zoomToFeatures(paths)
-                  })
-                }
+                // Show popup for all modes
+                this.checkAndCreatePopups([data], connectivityExplorerClicked)
                 this.mapImp.showPopup(featureId, capitalise(feature.label), {
                   className: 'custom-popup',
                   positionAtLastClick: false,
@@ -2934,6 +3170,21 @@ export default {
       }
       return false
     },
+    /**
+     * @public
+     * Public method to highlight connected paths for neuron connection mode,
+     * to highlight paths for other display maps on spit screen.
+     * @arg {Array} `paths`
+     */
+    highlightConnectedPaths: function (paths) {
+      if (paths.length) {
+        // filter paths for this map
+        const filteredPaths = paths.filter(path => (path in this.mapImp.pathways.paths))
+        // this.zoomToFeatures is replaced with selectGeoJSONFeatures to highlight paths
+        const featureIdsToHighlight = this.mapImp.modelFeatureIdList(filteredPaths);
+        this.mapImp.selectGeoJSONFeatures(featureIdsToHighlight);
+      }
+    },
     /**
      * @public
      * Function to show search suggestions
@@ -2947,6 +3198,9 @@ export default {
     onActionClick: function (data) {
       EventBus.emit('onActionClick', data)
     },
+    setConnectionType: function (type) {
+      this.connectionType = type;
+    },
   },
   props: {
     /**
@@ -3246,6 +3500,7 @@ 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']
       },
+      connectionType: 'All',
       offlineAnnotationEnabled: false,
       offlineAnnotations: [],
       annotationFrom: 'Anyone',
@@ -3292,6 +3547,7 @@ export default {
       }),
       searchTerm: "",
       taxonLeaveDelay: undefined,
+      connectivityfilters: [],
     }
   },
   computed: {

package/src/components/MultiFlatmapVuer.vue

@@ -70,6 +70,8 @@
       @connectivity-info-open="onConnectivityInfoOpen"
       @connectivity-info-close="onConnectivityInfoClose"
       @connectivity-error="onConnectivityError"
+      @neuron-connection-click="onNeuronConnectionClick"
+      @neuron-connection-feature-click="onNeuronConnectionFeatureClick"
       @open-map="$emit('open-map', $event)"
       @pathway-selection-changed="onSelectionsDataChanged"
       :minZoom="minZoom"
@@ -305,6 +307,12 @@ export default {
     onConnectivityError: function (errorInfo) {
       this.$emit('connectivity-error', errorInfo);
     },
+    onNeuronConnectionClick: function (payload) {
+      this.$emit('neuron-connection-click', payload);
+    },
+    onNeuronConnectionFeatureClick: function (payload) {
+      this.$emit('neuron-connection-feature-click', payload);
+    },
     onSelectionsDataChanged: function (data) {
       this.$emit('pathway-selection-changed', data);
     },
@@ -557,6 +565,10 @@ export default {
       let map = this.getCurrentFlatmap()
       map.changeViewingMode(modeName)
     },
+    setConnectionType: function (type) {
+      let map = this.getCurrentFlatmap();
+      map.setConnectionType(type);
+    },
   },
   props: {
     /**

package/src/services/flatmapKnowledge.js

@@ -1,3 +1,9 @@
+import {
+  findPathsByOriginItem,
+  findPathsByDestinationItem,
+  findPathsByViaItem,
+} from '@abi-software/map-utilities';
+
 async function getReferenceConnectivitiesFromStorage(resource) {
   const flatmapKnowledgeRaw = sessionStorage.getItem('flatmap-knowledge');
 
@@ -26,6 +32,43 @@ async function getReferenceConnectivitiesByAPI(mapImp, resource, flatmapQueries)
   return featureIds;
 }
 
+function getFlatmapKnowledge() {
+  const flatmapKnowledgeRaw = sessionStorage.getItem('flatmap-knowledge');
+
+  if (flatmapKnowledgeRaw) {
+    const flatmapKnowledge = JSON.parse(flatmapKnowledgeRaw);
+    return flatmapKnowledge;
+  }
+  return [];
+}
+
+async function filterPathsByOriginFromKnowledge(resource) {
+  const flatmapKnowledge = getFlatmapKnowledge();
+  const results = findPathsByOriginItem(flatmapKnowledge, resource);
+  if (Array.isArray(results)) {
+    return results.map(x => x.id);
+  }
+  return [];
+}
+
+async function filterPathsByDestinationFromKnowledge(resource) {
+  const flatmapKnowledge = getFlatmapKnowledge();
+  const results = findPathsByDestinationItem(flatmapKnowledge, resource);
+  if (Array.isArray(results)) {
+    return results.map(x => x.id);
+  }
+  return [];
+}
+
+async function filterPathsByViaFromKnowledge(resource) {
+  const flatmapKnowledge = getFlatmapKnowledge();
+  const results = findPathsByViaItem(flatmapKnowledge, resource);
+  if (Array.isArray(results)) {
+    return results.map(x => x.id);
+  }
+  return [];
+}
+
 function getKnowledgeSource(mapImp) {
   return getKnowledgeSourceFromProvenance(mapImp.provenance);
 }
@@ -103,4 +146,7 @@ export {
   getKnowledgeSource,
   getKnowledgeSourceFromProvenance,
   refreshFlatmapKnowledgeCache,
+  filterPathsByOriginFromKnowledge,
+  filterPathsByDestinationFromKnowledge,
+  filterPathsByViaFromKnowledge,
 }