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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "1.8.1-beta.2",
+  "version": "1.8.1-beta.4",
   "license": "Apache-2.0",
   "files": [
     "dist/*",
@@ -43,7 +43,7 @@
     "./src/*": "./src/*"
   },
   "dependencies": {
-    "@abi-software/flatmap-viewer": "3.2.13",
+    "@abi-software/flatmap-viewer": "^4.0.4",
     "@abi-software/map-utilities": "^1.4.0",
     "@abi-software/sparc-annotation": "0.3.2",
     "@abi-software/svg-sprite": "^1.0.1",

package/src/components/FlatmapVuer.vue

@@ -693,18 +693,6 @@ 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.
  */
@@ -1173,7 +1161,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]],
@@ -1195,7 +1183,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({
@@ -1267,72 +1255,52 @@ 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`` or ``anatomicalId``.
-     * @arg {string} `pathId` or `anatomicalId`
+     * by providing path model identifier, ``pathId``.
+     * @arg {String} `pathId`
      */
-    retrieveConnectedPaths: async function (payload, options = {}) {
+    highlightConnectedPaths: async function (payload) {
       if (this.mapImp) {
-        let connectedPaths = [];
-        let connectedTarget = options.target?.length ? options.target : [];
+        let paths = [...this.mapImp.pathModelNodes(payload)]
+
         // The line below is to get the path features from the geojson ids
-        const nodeFeatureIds = [...this.mapImp.pathModelNodes(payload)];
-        const pathsOfEntities = await this.mapImp.queryPathsForFeatures(payload);
-        if (nodeFeatureIds.length) {
-          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);
-            });
-          });
-        } else if (pathsOfEntities.length) {
-          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 = [...new Set([...connectedPaths, ...payload])];
-        return connectedPaths;
+        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 })
       }
     },
     resetMapFilter: function() {
@@ -1642,6 +1610,7 @@ 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
@@ -1651,7 +1620,7 @@ export default {
                 taxons = data.taxons
               }
             }
-            const payload = {
+            let payload = [{
               dataset: data.dataset,
               biologicalSex: biologicalSex,
               taxonomy: taxonomy,
@@ -1661,13 +1630,41 @@ export default {
               userData: args,
               eventType: eventType,
               provenanceTaxonomy: taxons,
-            }
-            if (eventType === 'click') {
-              this.featuresAlert = data.alert
-              if (this.viewingMode === 'Neuron Connection') {
-                this.retrieveConnectedPaths([data.models]).then((paths) => {
-                  this.zoomToFeatures(paths)
+              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
                 })
+              })
+              this.setConnectivityDataSource(this.viewingMode, data);
+              //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])
               } else {
                 this.currentActive = data.models ? data.models : ''
                 // Drawing connectivity between features
@@ -1712,6 +1709,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.
@@ -1926,24 +1940,32 @@ 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);
-        // 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)
-        } else {
-          this.createTooltipFromEntityCuration(data)
+        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)
         }
       }
     },
+    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
      */
@@ -1984,41 +2006,6 @@ export default {
       this.tooltipEntry = await this.flatmapQueries.createTooltipData(this.mapImp, data)
       this.displayTooltip(data.resource[0])
     },
-    /**
-     * @public
-     * Function to create tooltip from Entity Curation ``data``.
-     * @arg {Object} `data`
-     */
-    createTooltipFromEntityCuration: async function (data) {
-      this.tooltipEntry = await this.flatmapQueries.createTooltipData(this.mapImp, data)
-      let featureIds = []
-      let destinations = []
-      let destinationsWithDatasets = []
-      const pathsOfEntities = await this.mapImp.queryPathsForFeatures(data.resource)
-      if (pathsOfEntities.length) {
-        pathsOfEntities.forEach((path) => {
-          featureIds.push(...this.mapImp.pathModelNodes(path))
-        })
-        featureIds = [...new Set(featureIds)].filter(id => id !== data.feature.featureId)
-        featureIds.forEach((id) => {
-          const feature = this.mapImp.featureProperties(id)
-          if (!destinations.includes(feature.label)) {
-            destinations.push(feature.label)
-            destinationsWithDatasets.push({ id: feature.models, name: feature.label })
-          }
-        })
-        this.tooltipEntry = {
-          ...this.tooltipEntry,
-          origins: [data.label],
-          originsWithDatasets: [{ id: data.resource[0], name: data.label }],
-          components: [],
-          componentsWithDatasets: [],
-          destinations: destinations,
-          destinationsWithDatasets: destinationsWithDatasets,
-        }
-        this.displayTooltip(data.resource[0])
-      }
-    },
     /**
      * @public
      * Function to show popup on map.
@@ -2223,25 +2210,18 @@ export default {
         featureId = feature
         options.annotationFeatureGeometry = geometry
       } else {
-        featureId = this.mapImp.modelFeatureIds(feature)[0]
+        const entry = Array.isArray(feature) ? feature[0] : feature
+        featureId = this.mapImp.modelFeatureIds(entry)[0]
         if (!this.activeDrawTool) {
           options.positionAtLastClick = true
         }
       }
       // If connectivityInfoSidebar is set to `true`
       // Connectivity info will show in sidebar
-      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);
-        }
+      if (
+        (this.connectivityInfoSidebar && this.tooltipEntry.length) &&
+        this.viewingMode !== 'Annotation'
+      ) {
         this.$emit('connectivity-info-open', this.tooltipEntry);
       }
       if (this.annotationSidebar && this.viewingMode === 'Annotation') {
@@ -2252,16 +2232,10 @@ 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.hasTooltipEntry()
-          )
+        !this.disableUI &&
+        (
+          (this.viewingMode === 'Annotation' && !this.annotationSidebar) ||
+          (this.viewingMode === 'Exploration' && !this.connectivityInfoSidebar)
         )
       ) {
         this.tooltipDisplay = true;
@@ -2271,23 +2245,6 @@ 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
@@ -2297,8 +2254,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 });
@@ -2423,10 +2380,10 @@ export default {
           state['biologicalSex'] = identifier.biologicalSex
         if (identifier && identifier.uuid) state['uuid'] = identifier.uuid
         state['viewingMode'] = this.viewingMode
-        state['searchTerm'] = this.searchTerm
+        state['searchTerm'] = this.statesTracking.activeTerm
         state['flightPath3D'] = this.flightPath3DRadio
         state['colour'] = this.colourRadio
-        state['outlines'] = this.outlinesRadio
+        state['outlinesRadio'] = this.outlinesRadio
         state['background'] = this.currentBackground
         this.getVisibilityState(state)
         return state
@@ -2471,9 +2428,7 @@ export default {
         if (state.searchTerm) {
           const searchTerm = state.searchTerm
           if (state.viewingMode === "Neuron Connection") {
-            this.retrieveConnectedPaths([searchTerm]).then((paths) => {
-              this.zoomToFeatures(paths)
-            })
+            this.highlightConnectedPaths([searchTerm])
           } else {
             this.searchAndShowResult(searchTerm, true)
           }
@@ -2554,7 +2509,6 @@ export default {
 
         let promise1 = this.mapManagerRef.loadMap(
           identifier,
-          this.$refs.display,
           this.eventCallback(),
           {
             //fullscreenControl: false,
@@ -2563,6 +2517,7 @@ export default {
             minZoom: this.minZoom,
             tooltips: this.tooltips,
             minimap: minimap,
+            container: this.$refs.display,
             // tooltipDelay: 15, // new feature to delay tooltips showing
           }
         )
@@ -2608,9 +2563,6 @@ 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')
@@ -2639,6 +2591,7 @@ export default {
       this.loading = false
       this.computePathControlsMaximumHeight()
       this.mapResize()
+      this.handleMapClick();
       this.setInitMapState();
       /**
        * This is ``onFlatmapReady`` event.
@@ -2646,6 +2599,29 @@ 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
@@ -2680,11 +2656,12 @@ export default {
           } else if (this.viewingMode === "Annotation") {
             this.manualAbortedOnClose()
           }
-          this.searchTerm = ""
+          this.statesTracking.activeTerm = ""
           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;
@@ -2704,9 +2681,9 @@ export default {
                 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)
-                  })
+                  setTimeout(() => {
+                    this.highlightConnectedPaths(data.resource)
+                  }, 1000)
                 }
                 this.mapImp.showPopup(featureId, capitalise(feature.label), {
                   className: 'custom-popup',
@@ -2715,7 +2692,6 @@ export default {
                 })
               }
             }
-            this.searchTerm = term
             return true
           } else this.mapImp.clearSearchResults()
         }
@@ -2937,7 +2913,6 @@ export default {
     return {
       flatmapAPI: this.flatmapAPI,
       sparcAPI: this.sparcAPI,
-      getFeaturesAlert: () => this.featuresAlert,
       userApiKey: this.userToken,
     }
   },
@@ -2991,11 +2966,10 @@ export default {
       availableBackground: ['white', 'lightskyblue', 'black'],
       loading: false,
       flatmapMarker: flatmapMarker,
-      tooltipEntry: createUnfilledTooltipData(),
+      tooltipEntry: [],
       connectivityDataSource: '',
       connectivityTooltipVisible: false,
       drawerOpen: false,
-      featuresAlert: undefined,
       flightPath3DRadio: false,
       displayFlightPathOption: false,
       colourRadio: true,
@@ -3053,7 +3027,10 @@ export default {
           without: true,
         }
       }),
-      searchTerm: "",
+      statesTracking: markRaw({
+        activeClick: false,
+        activeTerm: "",
+      }),
       taxonLeaveDelay: undefined,
     }
   },
@@ -3187,7 +3164,7 @@ export default {
     if (this.mapManager) {
       this.mapManagerRef = this.mapManager;
     } else {
-      this.mapManagerRef = markRaw(new flatmap.MapManager(this.flatmapAPI));
+      this.mapManagerRef = markRaw(new flatmap.MapViewer(this.flatmapAPI, { container: undefined }));
       /**
        * 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.MapManager(this.flatmapAPI));
+          this.mapManagerRef = markRaw(new flatmap.MapViewer(this.flatmapAPI, { container: undefined }));
           /**
            * The event emitted after a new mapManager is loaded.
            * This mapManager can be used to create new flatmaps.

package/src/services/flatmapKnowledge.js

@@ -36,29 +36,25 @@ function getKnowledgeSource(mapImp) {
       mapKnowledgeSource = `${sckanProvenance.npo.release}-npo`;
     }
   }
+
   return mapKnowledgeSource;
 }
 
-async function loadAndStoreKnowledge(mapImp, flatmapQueries) {
+function loadAndStoreKnowledge(mapImp, flatmapQueries) {
   const knowledgeSource = getKnowledgeSource(mapImp);
   const sql = `select knowledge from knowledge
-  where source="${knowledgeSource}"
-  order by source desc`;
-
-  refreshFlatmapKnowledgeCache()
+    where source="${knowledgeSource}"
+    order by source desc`;
   const flatmapKnowledge = sessionStorage.getItem('flatmap-knowledge');
 
   if (!flatmapKnowledge) {
-    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;
+    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();
+    });
   }
-  return JSON.parse(flatmapKnowledge);
 }
 
 function updateFlatmapKnowledgeCache() {
@@ -74,7 +70,6 @@ function removeFlatmapKnowledgeCache() {
     'flatmap-knowledge',
     'flatmap-knowledge-expiry',
   ];
-
   keys.forEach((key) => {
     sessionStorage.removeItem(key);
   });