@abi-software/mapintegratedvuer 1.9.0 → 1.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/mapintegratedvuer",
-  "version": "1.9.0",
+  "version": "1.9.2",
   "license": "Apache-2.0",
   "scripts": {
     "serve": "vite --host --force",
@@ -50,8 +50,8 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/flatmapvuer": "^1.9.0",
-    "@abi-software/map-side-bar": "^2.8.0",
+    "@abi-software/flatmapvuer": "^1.9.2",
+    "@abi-software/map-side-bar": "^2.8.2",
     "@abi-software/map-utilities": "^1.5.0",
     "@abi-software/plotvuer": "1.0.4",
     "@abi-software/scaffoldvuer": "^1.9.0",

package/src/components/SplitDialog.vue

@@ -48,7 +48,10 @@ export default {
   },
   data: function() {
     return {
-      styles: { }
+      styles: { },
+      query: "",
+      filter: [],
+      target: [],
     }
   },
   methods: {
@@ -213,35 +216,111 @@ export default {
 
       // mix connectivites of available maps
       if (uuids.length) {
-        uuids.forEach((_uuid) => {
-          if (_uuid in this.connectivitiesStore.globalConnectivities) {
-            const connectivity = this.connectivitiesStore.globalConnectivities[_uuid];
-            combinedConnectivities.push(...connectivity);
-          }
-        });
-
-        const uniqueConnectivities = Array.from(
-          new Map(combinedConnectivities.map((item) => [item.id, item])).values()
-        );
+        this.connectivitiesStore.updateActiveConnectivityKeys(uuids);
+        const uniqueConnectivities = this.connectivitiesStore.getUniqueConnectivitiesByKeys;
 
         EventBus.emit("connectivity-knowledge", {
           data: uniqueConnectivities
         });
-
-        if (uuids.length === 1) {
-          this.connectivitiesStore.updateActiveConnectivityKey(uuid);
-        }
       } else {
         if (sckanVersion) {
           EventBus.emit("connectivity-knowledge", {
             data: this.connectivitiesStore.globalConnectivities[sckanVersion]
           });
-          this.connectivitiesStore.updateActiveConnectivityKey(sckanVersion);
+          this.connectivitiesStore.updateActiveConnectivityKeys([sckanVersion]);
         } else {
           console.warn(`There has no connectivity to show!`);
         }
       }
     },
+    getSearchedId: function (flatmap, term) {
+      let ids = [];
+      const searchResult = flatmap.mapImp.search(term);
+      const featureIds = searchResult.__featureIds || searchResult.featureIds;
+      featureIds.forEach((id) => {
+        const annotation = flatmap.mapImp.annotation(id);
+        if (
+          annotation.label?.toLowerCase().includes(term.toLowerCase()) &&
+          annotation.models && !ids.includes(annotation.models)
+        ) {
+          ids.push(annotation.models);
+        }
+      });
+      return ids;
+    },
+    connectivityQueryFilter: async function (data) {
+      const activeContents = this.getActiveContents();
+      let searchResults = [];
+      let searchState = '';
+
+      for (const activeContent of activeContents) {
+        const viewer = activeContent.$refs.viewer;
+
+        if (viewer) {
+          const multiflatmap = viewer.$refs.multiflatmap;
+          const flatmap = viewer.$refs.flatmap;
+          let currentFlatmap = null;
+
+          if (multiflatmap) {
+            const _currentFlatmap = multiflatmap.getCurrentFlatmap();
+            if (_currentFlatmap && _currentFlatmap.mapImp) {
+              currentFlatmap = _currentFlatmap;
+            }
+          }
+
+          if (flatmap && flatmap.mapImp) {
+            currentFlatmap = flatmap;
+          }
+
+          const uniqueConnectivities = this.connectivitiesStore.getUniqueConnectivitiesByKeys;
+
+          if (currentFlatmap && currentFlatmap.$el.checkVisibility()) {
+            let payload = {
+              state: "default",
+              data: [...uniqueConnectivities],
+            };
+
+            if (data) {
+              if (data.type === "query-update") {
+                if (this.query !== data.value) this.target = [];
+                this.query = data.value;
+              } else if (data.type === "filter-update") {
+                this.filter = data.value;
+              }
+            }
+
+            if (this.query) {
+              payload.state = "processed";
+              let prom1 = [], options = {};
+              const searchTerms = this.query.split(",").map((term) => term.trim());
+              for (let index = 0; index < searchTerms.length; index++) {
+                prom1.push(this.getSearchedId(currentFlatmap, searchTerms[index]));
+              }
+              const nestedIds = await Promise.all(prom1);
+              const ids = [...new Set(nestedIds.flat())];
+              let paths = await currentFlatmap.retrieveConnectedPaths(ids, options);
+              paths = [...ids, ...paths.filter((path) => !ids.includes(path))];
+              let results = uniqueConnectivities.filter((item) => paths.includes(item.id));
+              payload.data = results;
+            }
+
+            searchState = payload.state;
+            searchResults = [...searchResults, ...payload.data];
+          }
+        }
+      }
+
+      const uniqueResults = Array.from(
+        new Map(searchResults.map((item) => [item.id, item])).values()
+      );
+
+      const connectivitiesPayload = {
+        state: searchState,
+        data: uniqueResults,
+      };
+
+      EventBus.emit("connectivity-knowledge", connectivitiesPayload);
+    },
   },
   computed: {
     ...mapStores(useSplitFlowStore, useConnectivitiesStore),
@@ -299,6 +378,9 @@ export default {
     EventBus.on('species-layout-connectivity-update', () => {
       this.onSpeciesLayoutConnectivityUpdate();
     })
+    EventBus.on("connectivity-query-filter", (payload) => {
+      this.connectivityQueryFilter(payload);
+    });
   },
 };
 </script>

package/src/components/SplitFlow.vue

@@ -146,6 +146,7 @@ export default {
   },
   methods: {
     onConnectivityExplorerClicked: function (payload) {
+      this.search = payload.id
       this.onDisplaySearch({ term: payload.id }, false, true);
     },
     /**
@@ -374,6 +375,7 @@ export default {
           this.filterTriggered = false; // reset for next action
         }
       } else if (data.id === 2) {
+        this.search = '';
         this.connectivityEntry = [];
         EventBus.emit("connectivity-query-filter", data);
       }
@@ -635,7 +637,15 @@ export default {
       }
     });
     EventBus.on('connectivity-info-open', payload => {
-      this.connectivityEntry = payload;
+      if (!this.search || payload.length > 1) {
+        this.connectivityEntry = payload;
+      } else if (this.search && payload.length === 1) {
+        // if search exist, payload should always be an array of one element
+        // skip those payload not contain the search
+        if (payload[0].featureId[0] === this.search) {
+          this.connectivityEntry = payload;
+        }
+      }
       // click on the flatmap paths/features directly
       // or onDisplaySearch is performed
       if (!this.connectivityExplorerClicked.length) {
@@ -647,12 +657,17 @@ export default {
           this.onShowConnectivity(this.connectivityHighlight);
         }
         if (this.$refs.sideBar) {
-          this.$refs.sideBar.tabClicked({id:  2, type: 'connectivityExplorer'});
+          this.$refs.sideBar.tabClicked({ id: 2, type: 'connectivityExplorer' });
           this.$refs.sideBar.setDrawerOpen(true);
         }
       }
       this.connectivityExplorerClicked.pop();
     });
+    EventBus.on('connectivity-info-close', payload => {
+      if (this.$refs.sideBar) {
+        this.$refs.sideBar.resetConnectivitySearch();
+      }
+    });
     EventBus.on('connectivity-error', payload => {
       if (this.$refs.sideBar) {
         this.$refs.sideBar.updateConnectivityError(payload.data);

package/src/components/viewers/Flatmap.vue

@@ -21,6 +21,7 @@
       :annotationSidebar="annotationSidebar"
       @connectivity-info-open="onConnectivityInfoOpen"
       @connectivity-error="onConnectivityError"
+      @connectivity-info-close="onConnectivityInfoClose"
       :connectivityInfoSidebar="connectivityInfoSidebar"
       :pathControls="true"
       ref="flatmap"
@@ -74,7 +75,7 @@ export default {
      * Perform a local search on this contentvuer
      */
     search: function (term) {
-      return this.$refs.flatmap.searchAndShowResult(term);
+      return this.$refs.flatmap.searchAndShowResult(term, true);
     },
     getFlatmapImp() {
       return this.$refs.flatmap?.mapImp;
@@ -102,9 +103,11 @@ export default {
     },
     flatmapReadyCall: function (flatmap) {
       let provClone = {id: this.entry.id, prov: this.getFlatmapImp().provenance}; //create clone of provenance and add id
+      const flatmapImp = flatmap.mapImp;
       EventBus.emit("mapImpProv", provClone); // send clone to context card
       this.$emit("flatmap-provenance-ready", provClone);
       this.flatmapReadyForMarkerUpdates(flatmap);
+      this.loadConnectivityKnowledge(flatmapImp);
       EventBus.emit("mapLoaded", flatmap);
     },
     onPathwaySelectionChanged: function (data) {

package/src/components/viewers/MultiFlatmap.vue

@@ -20,6 +20,7 @@
       :annotationSidebar="annotationSidebar"
       @connectivity-info-open="onConnectivityInfoOpen"
       @connectivity-error="onConnectivityError"
+      @connectivity-info-close="onConnectivityInfoClose"
       :connectivityInfoSidebar="connectivityInfoSidebar"
       ref="multiflatmap"
       :displayMinimap="true"
@@ -504,14 +505,6 @@ export default {
         this.cardHoverHighlight();
       }
     });
-    EventBus.on("connectivity-query-filter", (payload) => {
-      if (this.flatmapReady && this.$refs.multiflatmap) {
-        const currentFlatmap = this.$refs.multiflatmap.getCurrentFlatmap();
-        if (currentFlatmap && currentFlatmap.mapImp) {
-          this.connectivityQueryFilter(currentFlatmap, payload)
-        }
-      }
-    });
   },
 };
 </script>

package/src/mixins/ContentMixin.js

@@ -556,6 +556,9 @@ export default {
     onConnectivityError: function (errorInfo) {
       EventBus.emit('connectivity-error', errorInfo);
     },
+    onConnectivityInfoClose: function () {
+      EventBus.emit('connectivity-info-close');
+    },
     loadConnectivityKnowledge: async function (flatmapImp) {
       const sckanVersion = getKnowledgeSource(flatmapImp);
       const flatmapQueries = markRaw(new FlatmapQueries());
@@ -594,56 +597,6 @@ export default {
       // EventBus.emit("connectivity-knowledge", { data: this.connectivityKnowledge[uuid] });
       EventBus.emit('species-layout-connectivity-update');
     },
-    getSearchedId: function (flatmap, term) {
-      let ids = [];
-      const searchResult = flatmap.mapImp.search(term);
-      const featureIds = searchResult.__featureIds || searchResult.featureIds;
-      featureIds.forEach((id) => {
-        const annotation = flatmap.mapImp.annotation(id);
-        if (
-          annotation.label?.toLowerCase().includes(term.toLowerCase()) &&
-          annotation.models && !ids.includes(annotation.models)
-        ) {
-          ids.push(annotation.models);
-        }
-      });
-      return ids;
-    },
-    connectivityQueryFilter: async function (flatmap, data) {
-      const uuid = flatmap.mapImp.uuid;
-      // to search from sckan or uuid based on the maps showing on split screens
-      const activeConnectivityKey = this.connectivitiesStore.activeConnectivityKey || uuid;
-      // only for those flatmaps that are shown on the split screen
-      if (flatmap.$el.checkVisibility()) {
-        let payload = {
-          state: "default",
-          data: [...this.connectivityKnowledge[activeConnectivityKey]],
-        };
-        if (data) {
-          if (data.type === "query-update") {
-            if (this.query !== data.value) this.target = [];
-            this.query = data.value;
-          } else if (data.type === "filter-update") {
-            this.filter = data.value;
-          }
-        }
-        if (this.query) {
-          payload.state = "processed";
-          let prom1 = [], options = {};
-          const searchTerms = this.query.split(",").map((term) => term.trim());
-          for (let index = 0; index < searchTerms.length; index++) {
-            prom1.push(this.getSearchedId(flatmap, searchTerms[index]));
-          }
-          const nestedIds = await Promise.all(prom1);
-          const ids = [...new Set(nestedIds.flat())];
-          let paths = await flatmap.retrieveConnectedPaths(ids, options);
-          paths = [...ids, ...paths.filter((path) => !ids.includes(path))];
-          let results = this.connectivityKnowledge[activeConnectivityKey].filter((item) => paths.includes(item.id));
-          payload.data = results;
-        }
-        EventBus.emit("connectivity-knowledge", payload);
-      }
-    }
   },
   data: function () {
     return {
@@ -665,8 +618,6 @@ export default {
       isInHelp: false,
       mapManager: undefined,
       connectivityKnowledge: {},
-      query: "",
-      filter: [],
       highlightDelay: undefined
     };
   },

package/src/stores/connectivities.js

@@ -4,18 +4,32 @@ export const useConnectivitiesStore = defineStore('connectivities', {
   state: () => {
     return {
       globalConnectivities: {},
-      activeConnectivityKey: '',
+      activeConnectivityKeys: [],
     }
   },
   getters: {
+    getUniqueConnectivitiesByKeys: (state) => {
+      let combinedConnectivities = [];
+      state.activeConnectivityKeys.forEach((uuid) => {
+        if (uuid in state.globalConnectivities) {
+          const connectivity = state.globalConnectivities[uuid];
+          combinedConnectivities.push(...connectivity);
+        }
+      });
 
+      const uniqueConnectivities = Array.from(
+        new Map(combinedConnectivities.map((item) => [item.id, item])).values()
+      );
+
+      return uniqueConnectivities;
+    },
   },
   actions: {
     updateGlobalConnectivities(globalConnectivities) {
       this.globalConnectivities = globalConnectivities;
     },
-    updateActiveConnectivityKey(activeConnectivityKey) {
-      this.activeConnectivityKey = activeConnectivityKey;
+    updateActiveConnectivityKeys(activeConnectivityKeys) {
+      this.activeConnectivityKeys = activeConnectivityKeys;
     },
   }
 });