@abi-software/flatmapvuer 1.8.1-beta.4 → 1.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "1.8.1-beta.4",
+  "version": "1.8.2",
   "license": "Apache-2.0",
   "files": [
     "dist/*",
@@ -43,8 +43,8 @@
     "./src/*": "./src/*"
   },
   "dependencies": {
-    "@abi-software/flatmap-viewer": "^4.0.4",
-    "@abi-software/map-utilities": "^1.4.0",
+    "@abi-software/flatmap-viewer": "3.2.13",
+    "@abi-software/map-utilities": "^1.4.2",
     "@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

@@ -283,6 +283,10 @@ export default {
           taxo: 'FunctionalConnectivity',
           displayWarning: true,
         },
+        Test: {
+          "taxo": "NCBITaxon:1",
+          "displayWarning": true
+        },
       },
       tooltipContent: undefined,
       tStyle: {

package/src/components/FlatmapVuer.vue

@@ -693,6 +693,18 @@ const processFTUs = (parent, key) => {
   return ftus
 }
 
+const createUnfilledTooltipData = function () {
+  return {
+    destinations: [],
+    origins: [],
+    components: [],
+    destinationsWithDatasets: [],
+    originsWithDatasets: [],
+    componentsWithDatasets: [],
+    resource: undefined,
+  }
+}
+
 /**
  * A vue component of the flatmap viewer.
  */
@@ -1161,7 +1173,7 @@ export default {
     },
     setInitMapState: function () {
       if (this.mapImp) {
-        const map = this.mapImp.map;
+        const map = this.mapImp._map;
         const bounds = this.mapImp.options.bounds;
         const initBounds = [
           [bounds[0], bounds[1]],
@@ -1183,7 +1195,7 @@ export default {
     resetView: function () {
       if (this.mapImp) {
         // fit to window
-        const map = this.mapImp.map;
+        const map = this.mapImp._map;
         const { initBounds } = this.initMapState;
         // reset rotation
         map.resetNorthPitch({
@@ -1610,7 +1622,6 @@ export default {
             const resource = [data.models]
             const taxonomy = this.entry
             const biologicalSex = this.biologicalSex
-            const featuresAlert = data.alert
             let taxons = undefined
             if (data.taxons) {
               // check if data.taxons is string or array
@@ -1620,7 +1631,7 @@ export default {
                 taxons = data.taxons
               }
             }
-            let payload = [{
+            const payload = {
               dataset: data.dataset,
               biologicalSex: biologicalSex,
               taxonomy: taxonomy,
@@ -1630,36 +1641,10 @@ export default {
               userData: args,
               eventType: eventType,
               provenanceTaxonomy: taxons,
-              alert: featuresAlert
-            }]
-            if (Array.isArray(data)) {
-              payload = []
-              data.forEach((d) => {
-                const label = d.label
-                const resource = [d.models]
-                let taxons = undefined
-                if (d.taxons) {
-                  // check if data.taxons is string or array
-                  if (typeof d.taxons !== 'object') {
-                    taxons = JSON.parse(d.taxons)
-                  } else {
-                    taxons = d.taxons
-                  }
-                }
-                payload.push({
-                  dataset: d.dataset,
-                  biologicalSex: biologicalSex,
-                  taxonomy: taxonomy,
-                  resource: resource,
-                  label: label,
-                  feature: d,
-                  userData: args,
-                  eventType: eventType,
-                  provenanceTaxonomy: taxons,
-                  alert: d.alert
-                })
-              })
+            }
+            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
@@ -1940,32 +1925,22 @@ export default {
           this.annotation = {}
         }
       } else {
+        //require data.resource && data.feature.source
+        let results = await this.flatmapQueries.retrieveFlatmapKnowledgeForEvent(this.mapImp, data)
         // load and store knowledge
         loadAndStoreKnowledge(this.mapImp, this.flatmapQueries);
-        let prom1 = []
-        for (let index = 0; index < data.length; index++) {
-          const entry = data[index]
-          prom1.push(await this.getKnowledgeTooltip(entry))
-        }
-        this.tooltipEntry = await Promise.all(prom1)
-        const featureIds = this.tooltipEntry.filter(tooltip => tooltip).map(tooltip => tooltip.featureId[0])
-        if (featureIds.length > 0) {
-          this.displayTooltip(featureIds)
+        // The line below only creates the tooltip if some data was found on the path
+        // the pubmed URLs are in knowledge response.references
+        if (
+          (results && results[0]) ||
+          (data.feature.hyperlinks && data.feature.hyperlinks.length > 0)
+        ) {
+          this.resourceForTooltip = data.resource[0]
+          data.resourceForTooltip = this.resourceForTooltip
+          this.createTooltipFromNeuronCuration(data)
         }
       }
     },
-    getKnowledgeTooltip: async function (data) {
-      //require data.resource && data.feature.source
-      let results = await this.flatmapQueries.retrieveFlatmapKnowledgeForEvent(this.mapImp, data)
-      // The line below only creates the tooltip if some data was found on the path
-      // the pubmed URLs are in knowledge response.references
-      if ((results && results[0]) || (data.feature.hyperlinks && data.feature.hyperlinks.length > 0)) {
-        let tooltip = await this.flatmapQueries.createTooltipData(this.mapImp, data)
-        tooltip['featuresAlert'] = data.alert;
-        tooltip['knowledgeSource'] = getKnowledgeSource(this.mapImp);
-        return tooltip;
-      }
-    },
     /**
      * A hack to remove flatmap tooltips while popup is open
      */
@@ -2210,18 +2185,25 @@ export default {
         featureId = feature
         options.annotationFeatureGeometry = geometry
       } else {
-        const entry = Array.isArray(feature) ? feature[0] : feature
-        featureId = this.mapImp.modelFeatureIds(entry)[0]
+        featureId = this.mapImp.modelFeatureIds(feature)[0]
         if (!this.activeDrawTool) {
           options.positionAtLastClick = true
         }
       }
       // If connectivityInfoSidebar is set to `true`
       // Connectivity info will show in sidebar
-      if (
-        (this.connectivityInfoSidebar && this.tooltipEntry.length) &&
-        this.viewingMode !== 'Annotation'
-      ) {
+      if ((this.connectivityInfoSidebar && this.hasTooltipEntry()) && this.viewingMode !== 'Annotation') {
+        // move the map center to highlighted area
+        // this method is moved to sidebar connectivity info
+        // const featureIds = [feature];
+        // this.moveMap(featureIds);
+        if (this.featuresAlert) {
+          this.tooltipEntry['featuresAlert'] = this.featuresAlert;
+        }
+        // Get connectivity knowledge source | SCKAN release
+        if (this.mapImp.provenance?.connectivity) {
+          this.tooltipEntry['knowledge-source'] = getKnowledgeSource(this.mapImp);
+        }
         this.$emit('connectivity-info-open', this.tooltipEntry);
       }
       if (this.annotationSidebar && this.viewingMode === 'Annotation') {
@@ -2232,10 +2214,16 @@ export default {
       // Provenance popup will be shown on map
       // Tooltip will be shown for Annotation view
       if (
-        !this.disableUI &&
-        (
-          (this.viewingMode === 'Annotation' && !this.annotationSidebar) ||
-          (this.viewingMode === 'Exploration' && !this.connectivityInfoSidebar)
+        !this.disableUI && (
+          (
+            this.viewingMode === 'Annotation' &&
+            !this.annotationSidebar
+          ) ||
+          (
+            this.viewingMode === 'Exploration' &&
+            !this.connectivityInfoSidebar &&
+            this.hasTooltipEntry()
+          )
         )
       ) {
         this.tooltipDisplay = true;
@@ -2245,6 +2233,23 @@ export default {
         });
       }
     },
+    hasTooltipEntry: function () {
+      const {
+        components,
+        destinations,
+        origins,
+        provenanceTaxonomy,
+        provenanceTaxonomyLabel
+      } = this.tooltipEntry;
+
+      return Boolean(
+        components?.length ||
+        destinations?.length ||
+        origins?.length ||
+        provenanceTaxonomy?.length ||
+        provenanceTaxonomyLabel?.length
+      );
+    },
     /**
      * Move the map to the left side
      * to the visible area of the feature IDs
@@ -2254,8 +2259,8 @@ export default {
      moveMap: function (featureIds, options = {}) {
       if (this.mapImp) {
         const { offsetX = 0, offsetY = 0, zoom = 4 } = options;
-        const Map = this.mapImp.map;
-        const bbox = this.mapImp.bounds.toArray();
+        const Map = this.mapImp._map;
+        const bbox = this.mapImp._bounds.toArray();
 
         // Zoom the map to features first
         this.mapImp.zoomToFeatures(featureIds, { noZoomIn: true });
@@ -2509,6 +2514,7 @@ export default {
 
         let promise1 = this.mapManagerRef.loadMap(
           identifier,
+          this.$refs.display,
           this.eventCallback(),
           {
             //fullscreenControl: false,
@@ -2517,7 +2523,6 @@ export default {
             minZoom: this.minZoom,
             tooltips: this.tooltips,
             minimap: minimap,
-            container: this.$refs.display,
             // tooltipDelay: 15, // new feature to delay tooltips showing
           }
         )
@@ -2563,6 +2568,9 @@ export default {
         if (this.mapImp) {
           this.mapImp.resize()
           this.showMinimap(this.displayMinimap)
+          if (this.mapImp._minimap) {
+            this.mapImp._minimap._miniMap.resize()
+          }
         }
       } catch {
         console.error('Map resize error')
@@ -2578,6 +2586,7 @@ 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()
@@ -2605,7 +2614,7 @@ export default {
      * after the map is loaded.
      */
     handleMapClick: function () {
-      const _map = this.mapImp.map;
+      const _map = this.mapImp._map;
       if (_map) {
         _map.on('click', (e) => {
           //A little logic to make sure we are keeping track
@@ -2913,6 +2922,7 @@ export default {
     return {
       flatmapAPI: this.flatmapAPI,
       sparcAPI: this.sparcAPI,
+      getFeaturesAlert: () => this.featuresAlert,
       userApiKey: this.userToken,
     }
   },
@@ -2966,10 +2976,11 @@ export default {
       availableBackground: ['white', 'lightskyblue', 'black'],
       loading: false,
       flatmapMarker: flatmapMarker,
-      tooltipEntry: [],
+      tooltipEntry: createUnfilledTooltipData(),
       connectivityDataSource: '',
       connectivityTooltipVisible: false,
       drawerOpen: false,
+      featuresAlert: undefined,
       flightPath3DRadio: false,
       displayFlightPathOption: false,
       colourRadio: true,
@@ -3164,7 +3175,7 @@ export default {
     if (this.mapManager) {
       this.mapManagerRef = this.mapManager;
     } else {
-      this.mapManagerRef = markRaw(new flatmap.MapViewer(this.flatmapAPI, { container: undefined }));
+      this.mapManagerRef = markRaw(new flatmap.MapManager(this.flatmapAPI));
       /**
        * The event emitted after a new mapManager is loaded.
        * This mapManager can be used to create new flatmaps.

package/src/components/MultiFlatmapVuer.vue

@@ -231,7 +231,7 @@ export default {
         if (this.mapManager) {
           this.mapManagerRef = this.mapManager;
         } else {
-          this.mapManagerRef = markRaw(new flatmap.MapViewer(this.flatmapAPI, { container: undefined }));
+          this.mapManagerRef = markRaw(new flatmap.MapManager(this.flatmapAPI));
           /**
            * The event emitted after a new mapManager is loaded.
            * This mapManager can be used to create new flatmaps.

package/src/services/flatmapQueries.js

@@ -193,7 +193,7 @@ let FlatmapQueries = function () {
     return [...new Set(found.flat())]
   }
 
-  this.flattenConntectivity = function (connectivity) {
+  this.flattenConnectivity = function (connectivity) {
     let dnodes = connectivity.flat() // get nodes from edgelist
     let nodes = [...new Set(dnodes)] // remove duplicates
     let found = []
@@ -207,7 +207,7 @@ let FlatmapQueries = function () {
     return found.flat()
   }
 
-  this.findComponents = function (connectivity) {
+  this.findComponents = function (connectivity, axons, dendrites, somas) {
     let dnodes = connectivity.connectivity.flat() // get nodes from edgelist
     let nodes = removeDuplicates(dnodes)
 
@@ -216,13 +216,13 @@ let FlatmapQueries = function () {
     nodes.forEach((node) => {
       terminal = false
       // Check if the node is an destination or origin (note that they are labelled dendrite and axon as opposed to origin and destination)
-      if (inArray(connectivity.axons, node)) {
+      if (inArray(axons, node)) {
         terminal = true
       }
-      if (connectivity.somas && inArray(connectivity.somas, node)) {
+      if (somas && inArray(somas, node)) {
         terminal = true
       }
-      if (inArray(connectivity.dendrites, node)) {
+      if (inArray(dendrites, node)) {
         terminal = true
       }
       if (!terminal) {
@@ -246,16 +246,16 @@ let FlatmapQueries = function () {
     this.origins = []
     this.components = []
     this.rawURLs = []
-    if (!keastIds || keastIds.length === 0 || !keastIds[0]) return
+    if (!keastIds || keastIds.length == 0 || !keastIds[0]) return
 
-    let prom1 = this.queryForConnectivityNew(mapImp, keastIds[0]) // This on returns a promise so dont need 'await'
+    let prom1 = this.queryForConnectivityNew(mapImp, keastIds, signal) // This on returns a promise so dont need 'await'
     let results = await Promise.all([prom1])
     return results
   }
 
-  this.queryForConnectivityNew = function (mapImp, keastId, processConnectivity = true) {
+  this.queryForConnectivityNew = function (mapImp, keastIds, signal, processConnectivity=true) {
     return new Promise((resolve) => {
-      mapImp.queryKnowledge(keastId)
+      mapImp.queryKnowledge(keastIds[0])
         .then((response) => {
           if (this.checkConnectivityExists(response)) {
             let connectivity = response;
@@ -265,8 +265,11 @@ let FlatmapQueries = function () {
                 if (response.references) {
                   // with publications from both PubMed and Others
                   this.rawURLs = [...response.references];
+                  resolve(processedConnectivity)
+                } else {
+                  // without publications
+                  resolve(processedConnectivity)
                 }
-                resolve(processedConnectivity)
               })
             }
             else resolve(connectivity)
@@ -280,7 +283,7 @@ let FlatmapQueries = function () {
           } else {
             // console.error('Error:', error)
             // TODO: to update after queryKnowledge method update
-            console.warn(`Unable to get the knowledge for the entity ${keastId}.`)
+            console.warn(`Unable to get the knowledge for the entity ${keastIds[0]}.`)
           }
           resolve(false)
         })
@@ -380,86 +383,84 @@ let FlatmapQueries = function () {
     return label
   }
 
-  this.flattenAndFindDatasets = function (components, axons, dendrites) {
+  this.flattenAndFindDatasets = function (dendrites, components, axons) {
     // process the nodes for finding datasets (Note this is not critical to the tooltip, only for the 'search on components' button)
-    let componentsFlat = this.flattenConntectivity(components)
-    let axonsFlat = this.flattenConntectivity(axons)
-    let dendritesFlat = this.flattenConntectivity(dendrites)
+    let dendritesFlat = this.flattenConnectivity(dendrites)
+    let componentsFlat = this.flattenConnectivity(components)
+    let axonsFlat = this.flattenConnectivity(axons)
 
     // Filter for the anatomy which is annotated on datasets
-    this.destinationsWithDatasets = this.uberons.filter(
-      (ub) => axonsFlat.indexOf(ub.id) !== -1
-    )
     this.originsWithDatasets = this.uberons.filter(
       (ub) => dendritesFlat.indexOf(ub.id) !== -1
     )
     this.componentsWithDatasets = this.uberons.filter(
       (ub) => componentsFlat.indexOf(ub.id) !== -1
     )
+    this.destinationsWithDatasets = this.uberons.filter(
+      (ub) => axonsFlat.indexOf(ub.id) !== -1
+    )
   }
 
   this.processConnectivity = function (mapImp, connectivity) {
     return new Promise((resolve) => {
-      // Filter the origin and destinations from components
-      let components = this.findComponents(connectivity)
-
-      // Remove duplicates
-      let axons = removeDuplicates(connectivity.axons)
-      //Somas will become part of origins, support this for future proof
       let dendrites = []
-      if (connectivity.somas && connectivity.somas.length > 0) {
-        dendrites.push(...connectivity.somas)
-      }
-      if (connectivity.dendrites && connectivity.dendrites.length > 0) {
-        dendrites.push(...connectivity.dendrites)
+      let axons = []
+      let somas = undefined
+      if (connectivity && connectivity["node-phenotypes"]) {
+        const sourceKey = ["ilxtr:hasSomaLocatedIn"]
+        const destinationKey = ["ilxtr:hasAxonPresynapticElementIn", "ilxtr:hasAxonSensorySubcellularElementIn"]
+        sourceKey.forEach((key)=>{
+          dendrites.push(...connectivity["node-phenotypes"][key])
+        })
+        dendrites = removeDuplicates(dendrites)
+        destinationKey.forEach((key)=>{
+          axons.push(...connectivity["node-phenotypes"][key])
+        })
+        axons = removeDuplicates(axons)
+      } else {
+        // Remove duplicates
+        axons = removeDuplicates(connectivity.axons)
+        //Somas will become part of origins, support this for future proof
+        if (connectivity.somas && connectivity.somas.length > 0) {
+          dendrites.push(...connectivity.somas)
+        }
+        if (connectivity.dendrites && connectivity.dendrites.length > 0) {
+          dendrites.push(...connectivity.dendrites)
+        }
+        somas = connectivity.somas
       }
-      dendrites = removeDuplicates(dendrites)
 
+      const components = this.findComponents(connectivity, axons, dendrites, somas)
       // Create list of ids to get labels for
-      let conIds = this.findAllIdsFromConnectivity(connectivity)
-
+      const conIds = this.findAllIdsFromConnectivity(connectivity)
       // Create readable labels from the nodes. Setting this to 'this.origins' updates the display
       this.createLabelLookup(mapImp, conIds).then((lookUp) => {
-        this.destinations = axons.map((a) =>
-          this.createLabelFromNeuralNode(a, lookUp)
-        )
         this.origins = dendrites.map((d) =>
           this.createLabelFromNeuralNode(d, lookUp)
         )
         this.components = components.map((c) =>
           this.createLabelFromNeuralNode(c, lookUp)
         )
-        this.flattenAndFindDatasets(components, axons, dendrites)
+        this.destinations = axons.map((a) =>
+          this.createLabelFromNeuralNode(a, lookUp)
+        )
+        this.flattenAndFindDatasets(dendrites, components, axons)
         resolve({
           ids: {
-            axons: axons,
             dendrites: dendrites,
             components: components,
+            axons: axons,
           },
           labels: {
-            destinations: this.destinations,
             origins: this.origins,
             components: this.components,
+            destinations: this.destinations,
           }
         })
       })
     })
   }
 
-  this.flattenConntectivity = function (connectivity) {
-    let dnodes = connectivity.flat() // get nodes from edgelist
-    let nodes = [...new Set(dnodes)] // remove duplicates
-    let found = []
-    nodes.forEach((n) => {
-      if (Array.isArray(n)) {
-        found.push(n.flat())
-      } else {
-        found.push(n)
-      }
-    })
-    return found.flat()
-  }
-
   this.buildPubmedSqlStatement = function (keastIds) {
     let sql = 'select distinct publication from publications where entity in ('
     if (keastIds.length === 1) {