Merge pull request #250 from akhuoa/feature/connectivity-graph

Connectivity Graph
ABI-Software · Nov 14, 2024 · ab12257 · ab12257
2 parents e35b138 + cc85fca
commit ab12257
Show file tree

Hide file tree

Showing 7 changed files with 379 additions and 197 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -50,9 +50,9 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/flatmapvuer": "^1.5.6",
-    "@abi-software/map-side-bar": "^2.4.2",
-    "@abi-software/map-utilities": "^1.1.2",
+    "@abi-software/flatmapvuer": "^1.5.6-beta.6",
+    "@abi-software/map-side-bar": "^2.4.2-beta.15",
+    "@abi-software/map-utilities": "^1.1.3-beta.5",
     "@abi-software/plotvuer": "^1.0.3",
     "@abi-software/scaffoldvuer": "^1.5.1",
     "@abi-software/simulationvuer": "^1.0.1",

diff --git a/src/App.vue b/src/App.vue
@@ -96,6 +96,7 @@ export default {
         flatmapAPI: import.meta.env.VITE_FLATMAPAPI_LOCATION,
         nlLinkPrefix: import.meta.env.VITE_NL_LINK_PREFIX,
         rootUrl: import.meta.env.VITE_ROOT_URL,
+        flatmapAPI2: import.meta.env.VITE_FLATMAPAPI_LOCATION2,
       }
     }
   },

diff --git a/src/components/MapContent.vue b/src/components/MapContent.vue
@@ -305,6 +305,7 @@ export default {
       this.options.algoliaId ? this.settingsStore.updateAlgoliaId(this.options.algoliaId) : null
       this.options.pennsieveApi ? this.settingsStore.updatePennsieveApi(this.options.pennsieveApi) : null
       this.options.flatmapAPI ? this.settingsStore.updateFlatmapAPI(this.options.flatmapAPI) : null,
+      this.options.flatmapAPI2 ? this.settingsStore.updateFlatmapAPI2(this.options.flatmapAPI2) : null,
       this.options.nlLinkPrefix ? this.settingsStore.updateNLLinkPrefix(this.options.nlLinkPrefix) : null
       this.options.rootUrl ? this.settingsStore.updateRootUrl(this.options.rootUrl) : null
     }

diff --git a/src/components/SplitFlow.vue b/src/components/SplitFlow.vue
@@ -36,6 +36,7 @@
           @contextUpdate="contextUpdate($event)"
           @datalink-clicked="datalinkClicked($event)"
           @show-connectivity="onShowConnectivity"
+          @connectivity-component-click="onConnectivityComponentClick"
         />
         <SplitDialog
           :entries="entries"
@@ -277,6 +278,12 @@ export default {
         offset: activeView === 'singlepanel' || activeView === '2horpanel'
       });
     },
+    onConnectivityComponentClick: function (data) {
+      EventBus.emit('connectivity-component-click', {
+        connectivityInfo: this.connectivityInfo,
+        data
+      });
+    },
     hoverChanged: function (data) {
       const hoverAnatomies = data && data.anatomy ? data.anatomy : [];
       const hoverOrgans = data && data.organs ? data.organs : [];
@@ -535,6 +542,11 @@ export default {
       this.connectivityInfo = null;
       this.resetActivePathways();
     });
+    EventBus.on('connectivity-graph-error', payload => {
+      if (this.$refs.sideBar) {
+        this.$refs.sideBar.updateConnectivityGraphError(payload.data);
+      }
+    });
     EventBus.on("OpenNewMap", type => {
       this.openNewMap(type);
     });
@@ -565,6 +577,7 @@ export default {
         PENNSIEVE_API_LOCATION: this.settingsStore.pennsieveApi,
         NL_LINK_PREFIX: this.settingsStore.nlLinkPrefix,
         ROOT_URL: this.settingsStore.rootUrl,
+        FLATMAPAPI_LOCATION: this.settingsStore.flatmapAPI2, // temporary
       };
     },
     entries: function() {

diff --git a/src/components/viewers/MultiFlatmap.vue b/src/components/viewers/MultiFlatmap.vue
@@ -48,6 +48,7 @@ import Tagging from '../../services/tagging.js';
 import ContentMixin from "../../mixins/ContentMixin";
 import EventBus from "../EventBus";
 import {
+  capitalise,
   availableSpecies,
   getBodyScaffoldInfo,
   transformObjToString
@@ -179,7 +180,8 @@ export default {
       const flatmap = this.$refs.multiflatmap.getCurrentFlatmap();
       if (term && flatmap.mapImp) {
         const results = flatmap.mapImp.search(term);
-        results.__featureIds.forEach(id => {
+        const featureIds = results.__featureIds || results.featureIds;
+        featureIds.forEach(id => {
           const annotation = flatmap.mapImp.annotation(id);
           if (annotation && annotation.label)
             suggestions.push(annotation.label);
@@ -412,6 +414,128 @@ export default {
       const flatmap = this.$refs.multiflatmap.getCurrentFlatmap();
       flatmap.changeViewingMode(modeName);
     },
+    removeConnectivityTooltips: function () {
+      const flatmap = this.$refs.multiflatmap.getCurrentFlatmap();
+      if (flatmap?.$el) {
+        // close all tooltips on the current flatmap element
+        const tooltips = flatmap.$el.querySelectorAll('.flatmap-tooltip-popup');
+        tooltips.forEach(tooltip => tooltip.remove());
+      }
+    },
+    createTooltipForConnectivity: function (filteredConnectivityData, mapImp) {
+      // combine all labels to show together
+      // content type must be DOM object to use HTML
+      const labelsContainer = document.createElement('div');
+      labelsContainer.classList.add('flatmap-feature-label');
+
+      filteredConnectivityData.forEach((connectivity, i) => {
+        const { label } = connectivity;
+        labelsContainer.append(capitalise(label));
+
+        if ((i + 1) < filteredConnectivityData.length) {
+          const hr = document.createElement('hr');
+          labelsContainer.appendChild(hr);
+        }
+      });
+
+      mapImp.showPopup(
+        filteredConnectivityData[0].featureId,
+        labelsContainer,
+        {
+          className: 'custom-popup flatmap-tooltip-popup',
+          positionAtLastClick: false,
+          preserveSelection: true,
+        }
+      );
+    },
+    emitConnectivityGraphError: function (errorData) {
+      if (errorData.length) {
+        const errorDataToEmit = [...new Set(errorData)];
+        let errorMessage = '';
+
+        errorDataToEmit.forEach((connectivity, i) => {
+          const { label } = connectivity;
+          errorMessage += (i === 0) ? capitalise(label) : label;
+
+          if (errorDataToEmit.length > 1) {
+            if ((i + 2) === errorDataToEmit.length) {
+              errorMessage += ' and ';
+            } else if ((i + 1) < errorDataToEmit.length) {
+              errorMessage += ', ';
+            }
+          }
+        });
+        errorMessage += ' cannot be found on the map!';
+        EventBus.emit('connectivity-graph-error', {
+          data: errorMessage
+        });
+      }
+    },
+    showConnectivityTooltips: function (payload) {
+      const { connectivityInfo, data } = payload;
+      const featuresToHighlight = [];
+      const connectivityData = [];
+      const filteredConnectivityData = [];
+      const errorData = [];
+
+      if (!data.length) {
+        this.removeConnectivityTooltips();
+      }
+
+      // to keep the highlighted path on map
+      if (connectivityInfo && connectivityInfo.featureId) {
+        featuresToHighlight.push(...connectivityInfo.featureId);
+      }
+
+      // Connectivity component click emits an array of data,
+      // a combination of ids and labels.
+      // The first half is ids and the second half is labels.
+      for (let i = 0; i < data.length / 2; i++) {
+        connectivityData.push({
+          id: data[i],
+          label: data[i + data.length / 2]
+        });
+      }
+
+      // search the features on the map first
+      if (this.flatmapReady) {
+        const flatmap = this.$refs.multiflatmap.getCurrentFlatmap();
+        if (flatmap.mapImp) {
+          connectivityData.forEach((connectivity, i) => {
+            const {id, label} = connectivity;
+            const response = flatmap.mapImp.search(id);
+
+            if (response?.results.length) {
+              const featureId = response?.results[0].featureId;
+
+              filteredConnectivityData.push({
+                featureId,
+                id,
+                label,
+              });
+              featuresToHighlight.push(id);
+            } else {
+              errorData.push(connectivity);
+            }
+          });
+
+          if (filteredConnectivityData.length) {
+            // show tooltip of the first item
+            // with all labels
+            this.createTooltipForConnectivity(filteredConnectivityData, flatmap.mapImp);
+          } else {
+            errorData.push(...connectivityData);
+            this.removeConnectivityTooltips();
+          }
+
+          // Emit error message for connectivity graph
+          this.emitConnectivityGraphError(errorData);
+
+          // highlight all available features
+          flatmap.mapImp.zoomToFeatures(featuresToHighlight, { noZoomIn: true });
+        }
+      }
+    },
   },
   computed: {
     facetSpecies() {
@@ -449,6 +573,10 @@ export default {
       }
     });
 
+    EventBus.on('connectivity-component-click', (payload) => {
+      this.showConnectivityTooltips(payload);
+    });
+
     EventBus.on("markerUpdate", () => {
       if (this.flatmapReady) {
         this.flatmapMarkerUpdate(this.$refs.multiflatmap.getCurrentFlatmap().mapImp);

diff --git a/src/stores/settings.js b/src/stores/settings.js
@@ -13,6 +13,7 @@ export const useSettingsStore = defineStore('settings', {
       pennsieveApi: undefined,
       flatmapAPI: undefined,
       nlLinkPrefix: undefined,
+      flatmapAPI2: "https://mapcore-demo.org/curation/flatmap/",
       rootUrl: undefined,
       facets: { species: [], gender: [], organ: [] },
       numberOfDatasetsForFacets: [],
@@ -62,6 +63,9 @@ export const useSettingsStore = defineStore('settings', {
     updateFlatmapAPI(flatmapAPI) {
       this.flatmapAPI = flatmapAPI;
     },
+    updateFlatmapAPI2(flatmapAPI2) {
+      this.flatmapAPI2 = flatmapAPI2;
+    },
     updateNLLinkPrefix(nlLinkPrefix) {
       this.nlLinkPrefix = nlLinkPrefix;
     },