@abi-software/mapintegratedvuer 1.9.1 → 1.9.3-beta.0

package/src/components/viewers/Scaffold.vue

@@ -17,6 +17,7 @@
       :helpModeDialog="useHelpModeDialog"
       @annotation-open="onAnnotationOpen"
       @annotation-close="onAnnotationClose"
+      @update-offline-annotation-enabled="updateOfflineAnnotationEnabled"
       :annotationSidebar="annotationSidebar"
       @help-mode-last-item="onHelpModeLastItem"
       @shown-tooltip="onTooltipShown"
@@ -31,6 +32,8 @@
       :markerCluster="true"
       :markerLabels="markerLabels"
       :flatmapAPI="flatmapAPI"
+      :showLocalSettings="showLocalSettings"
+      :showOpenMapButton="showOpenMapButton"
     />
 
     <HelpModeDialog
@@ -139,6 +142,7 @@ export default {
         if (this.entry.rotation) rotation = this.entry.rotation;
         this.$refs.scaffold.toggleSyncControl(this.splitFlowStore.globalCallback, rotation);
         if (this.splitFlowStore.syncMode) this.$refs.scaffold.fitWindow();
+        this.updateSettings();
       }
       EventBus.emit("mapLoaded", this.$refs.scaffold);
     },
@@ -191,6 +195,15 @@ export default {
     changeViewingMode: function (modeName) {
       this.$refs.scaffold.changeViewingMode(modeName);
     },
+    updateSettings: function () {
+      const {
+        backgroundDisplay,
+        viewingMode,
+      } = this.settingsStore.globalSettings;
+
+      this.$refs.scaffold.backgroundChangeCallback(backgroundDisplay);
+      this.$refs.scaffold.changeViewingMode(viewingMode);
+    },
   },
   computed: {
     warningMessage: function() {
@@ -222,6 +235,12 @@ export default {
         this.cardHoverHighlight();
       }
     });
+    EventBus.on('backgroundDisplayUpdate', (payload) => {
+      this.$refs.scaffold.backgroundChangeCallback(payload);
+    });
+    EventBus.on('viewingModeUpdate', (payload) => {
+      this.$refs.scaffold.changeViewingMode(payload);
+    });
   },
 };
 </script>

package/src/components.d.ts

@@ -19,14 +19,23 @@ declare module 'vue' {
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDropdown: typeof import('element-plus/es')['ElDropdown']
+    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
+    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
     ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElIconArrowDown: typeof import('@element-plus/icons-vue')['ArrowDown']
     ElIconArrowUp: typeof import('@element-plus/icons-vue')['ArrowUp']
+    ElIconCompass: typeof import('@element-plus/icons-vue')['Compass']
+    ElIconEditPen: typeof import('@element-plus/icons-vue')['EditPen']
+    ElIconMoreFilled: typeof import('@element-plus/icons-vue')['MoreFilled']
+    ElIconShare: typeof import('@element-plus/icons-vue')['Share']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']

package/src/mixins/ContentMixin.js

@@ -35,6 +35,7 @@ export default {
       default: false,
     },
   },
+  inject: ['showGlobalSettings', 'showOpenMapButton'],
   computed: {
     ...mapStores(useSettingsStore, useSplitFlowStore, useConnectivitiesStore),
     idNamePair() {
@@ -52,16 +53,34 @@ export default {
     annotationSidebar() {
       return this.settingsStore.annotationSidebar;
     },
+    // Hide local settings if global settings are shown
+    showLocalSettings() {
+      return !this.showGlobalSettings;
+    },
   },
   mounted: function () {
     EventBus.on("startHelp", () => {
       this.startHelp();
     });
 
+    EventBus.on('connectivity-item-close', () => {
+      if (this.multiflatmapRef) {
+        const currentFlatmap = this.multiflatmapRef.getCurrentFlatmap();
+        if (currentFlatmap) {
+          currentFlatmap.closeTooltip();
+        }
+      }
+      if (this.flatmapRef) {
+        this.flatmapRef.closeTooltip();
+      }
+    });
+
     this.multiflatmapRef = this.$refs.multiflatmap;
     this.flatmapRef = this.$refs.flatmap;
     this.scaffoldRef = this.$refs.scaffold;
     this.connectivityKnowledge = this.connectivitiesStore.globalConnectivities;
+    this.connectivityFilterOptions = this.connectivitiesStore.filterOptions;
+    this.connectivityFilterSources = this.connectivitiesStore.filterSources;
   },
   methods: {
     toggleSyncMode: function () {
@@ -520,7 +539,10 @@ export default {
             if ((this.multiflatmapRef || this.flatmapRef) && flatmap) {
               this.flatmapHighlight(flatmap, hoverAnatomies, hoverDOI, hoverConnectivity).then((paths) => {
                 try {
-                  flatmap.zoomToFeatures(paths);
+                  flatmap.showConnectivityTooltips({
+                    connectivityInfo: { featureId: paths },
+                    data: []
+                  });
                 } catch (error) {
                   console.log(error)
                   // only for connectivity hover highlight
@@ -550,6 +572,9 @@ export default {
     onAnnotationClose: function () {
       EventBus.emit('annotation-close');
     },
+    updateOfflineAnnotationEnabled: function (payload) {
+      EventBus.emit('update-offline-annotation-enabled', payload);
+    },
     onConnectivityInfoOpen: function (connectivityInfoData) {
       EventBus.emit('connectivity-info-open', connectivityInfoData);
     },
@@ -559,92 +584,38 @@ export default {
     onConnectivityInfoClose: function () {
       EventBus.emit('connectivity-info-close');
     },
-    loadConnectivityKnowledge: async function (flatmapImp) {
+    loadConnectivityExplorerConfig: async function (flatmap) {
+      const flatmapImp = flatmap.mapImp;
       const sckanVersion = getKnowledgeSource(flatmapImp);
       const flatmapQueries = markRaw(new FlatmapQueries());
       flatmapQueries.initialise(this.flatmapAPI);
       const knowledge = await loadAndStoreKnowledge(flatmapImp, flatmapQueries);
       const uuid = flatmapImp.uuid;
+      const pathways = flatmapImp.pathways;
 
       if (!this.connectivityKnowledge[sckanVersion]) {
         this.connectivityKnowledge[sckanVersion] = knowledge
           .filter((item) => {
-            return (
-              item.source === sckanVersion &&
-              item.connectivity?.length
-            );
+            return item.source === sckanVersion && item.connectivity?.length;
           })
           .sort((a, b) => a.label.localeCompare(b.label));
       }
-
-      if (!this.connectivitiesStore.globalConnectivities[uuid]) {
-        const mapPathsData = await flatmapQueries.queryMapPaths(uuid);
-        const pathsFromMap = mapPathsData ? mapPathsData.paths : {};
-
-        this.connectivityKnowledge[uuid] = knowledge
-          .filter((item) => {
-            return (
-              item.source === sckanVersion &&
-              item.connectivity?.length &&
-              item.id in pathsFromMap
-            );
-          })
-          .sort((a, b) => a.label.localeCompare(b.label));
+      if (!this.connectivityKnowledge[uuid]) {
+        const pathsFromMap = pathways ? pathways.paths : {};
+        this.connectivityKnowledge[uuid] = this.connectivityKnowledge[sckanVersion]
+          .filter((item) => item.id in pathsFromMap);
       }
-
       this.connectivitiesStore.updateGlobalConnectivities(this.connectivityKnowledge);
-
-      // EventBus.emit("connectivity-knowledge", { data: this.connectivityKnowledge[uuid] });
+      if (!this.connectivityFilterOptions[uuid]) {
+        this.connectivityFilterOptions[uuid] = await flatmap.getFilterOptions();
+      }
+      this.connectivitiesStore.updateFilterOptions(this.connectivityFilterOptions);
+      if (!this.connectivityFilterSources[uuid]) {
+        this.connectivityFilterSources[uuid] = flatmap.getFilterSources();
+      }
+      this.connectivitiesStore.updateFilterSources(this.connectivityFilterSources);
       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 uniqueConnectivities = this.connectivitiesStore.getUniqueConnectivitiesByKeys;
-      // only for those flatmaps that are shown on the split screen
-      if (flatmap.$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(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 = uniqueConnectivities.filter((item) => paths.includes(item.id));
-          payload.data = results;
-        }
-        EventBus.emit("connectivity-knowledge", payload);
-      }
-    }
   },
   data: function () {
     return {
@@ -666,8 +637,8 @@ export default {
       isInHelp: false,
       mapManager: undefined,
       connectivityKnowledge: {},
-      query: "",
-      filter: [],
+      connectivityFilterOptions: {},
+      connectivityFilterSources: {},
       highlightDelay: undefined
     };
   },

package/src/stores/connectivities.js

@@ -3,33 +3,81 @@ import { defineStore } from 'pinia';
 export const useConnectivitiesStore = defineStore('connectivities', {
   state: () => {
     return {
-      globalConnectivities: {},
       activeConnectivityKeys: [],
-    }
+      globalConnectivities: {},
+      filterOptions: {},
+      filterSources: {},
+    };
   },
   getters: {
     getUniqueConnectivitiesByKeys: (state) => {
       let combinedConnectivities = [];
       state.activeConnectivityKeys.forEach((uuid) => {
-        if (uuid in state.globalConnectivities) {
-          const connectivity = state.globalConnectivities[uuid];
-          combinedConnectivities.push(...connectivity);
+        if (uuid in state['globalConnectivities']) {
+          const connectivities = state['globalConnectivities'][uuid];
+          combinedConnectivities.push(...connectivities);
         }
       });
-
       const uniqueConnectivities = Array.from(
-        new Map(combinedConnectivities.map((item) => [item.id, item])).values()
+        new Map(combinedConnectivities.map((item) => [item['id'], item])).values()
       );
-
       return uniqueConnectivities;
     },
+    getUniqueFilterOptionsByKeys: (state) => {
+      const uniqueFilterOptions = state.activeConnectivityKeys.reduce((acc, uuid) => {
+        const filters = state.filterOptions[uuid];
+        if (!filters) return acc;
+
+        for (const filter of filters) {
+          const existing = acc[filter.key];
+
+          if (!existing) {
+            acc[filter.key] = { ...filter };
+          } else {
+            const mergedChildren = [...existing.children, ...filter.children];
+            const uniqueChildren = Array.from(
+              new Map(mergedChildren.map(child => [child.key, child])).values()
+            );
+            existing.children = uniqueChildren;
+          }
+        }
+
+        return acc;
+      }, {});
+      return Object.values(uniqueFilterOptions);
+    },
+    getUniqueFilterSourcesByKeys: (state) => {
+      const uniqueFilterSources = state.activeConnectivityKeys.reduce((acc, uuid) => {
+        const filters = state.filterSources[uuid];
+        if (!filters) return acc;
+
+        for (const [filter, options] of Object.entries(filters)) {
+          if (!acc[filter]) acc[filter] = {};
+
+          for (const [option, ids] of Object.entries(options)) {
+            acc[filter][option] = acc[filter][option]
+              ? Array.from(new Set([...acc[filter][option], ...ids]))
+              : [...ids];
+          }
+        }
+
+        return acc;
+      }, {});
+      return uniqueFilterSources;
+    },
   },
   actions: {
+    updateActiveConnectivityKeys(activeConnectivityKeys) {
+      this.activeConnectivityKeys = activeConnectivityKeys;
+    },
     updateGlobalConnectivities(globalConnectivities) {
       this.globalConnectivities = globalConnectivities;
     },
-    updateActiveConnectivityKeys(activeConnectivityKeys) {
-      this.activeConnectivityKeys = activeConnectivityKeys;
+    updateFilterOptions(filterOptions) {
+      this.filterOptions = filterOptions;
     },
-  }
+    updateFilterSources(filterSources) {
+      this.filterSources = filterSources;
+    },
+  },
 });

package/src/stores/settings.js

@@ -32,11 +32,17 @@ export const useSettingsStore = defineStore('settings', {
       connectivityInfoSidebar: true,
       annotationSidebar: true,
       allClosable: true,
+      offlineAnnotationEnabled: false,
       globalSettings: {
-        displayMarkers: true,
-        highlightConnectedPaths: false,
-        highlightDOIPaths: false, // comment out to hide in settings
-        interactiveMode: 'dataset', // dataset, connectivity, multiscale
+        displayMarkers: true, // comment out to hide in settings
+        // highlightConnectedPaths: false, // comment out to hide in settings
+        // highlightDOIPaths: false, // comment out to hide in settings
+        interactiveMode: 'dataset', // dataset, connectivity, multiscale // comment out to hide in settings
+        viewingMode: 'Exploration',
+        flightPathDisplay: false,
+        organsDisplay: true,
+        outlinesDisplay: true,
+        backgroundDisplay: 'white',
       },
     }
   },
@@ -186,10 +192,15 @@ export const useSettingsStore = defineStore('settings', {
     updateAllClosable(allClosable) {
       this.allClosable = allClosable;
     },
+    updateOfflineAnnotationEnabled(offlineAnnotationEnabled) {
+      this.offlineAnnotationEnabled = offlineAnnotationEnabled;
+    },
     updateGlobalSettings(globalSettings) {
       for (const [key, value] of Object.entries(globalSettings)) {
         this.globalSettings[key] = value;
       }
+      // add global settins to storage
+      localStorage.setItem('mapviewer.globalSettings', JSON.stringify(this.globalSettings));
     },
   }
 });

package/vite.bundle-build.js

@@ -12,13 +12,16 @@ export default defineConfig((configEnv) => {
       fileName: "mapintegratedvuer",
     },
     rollupOptions: {
-      external: ["vue", "pinia", "@abi-software/plotvuer", "@abi-software/simulationvuer"],
+      external: ["vue", "pinia", "@abi-software/flatmapvuer", "@abi-software/plotvuer",
+        "@abi-software/scaffoldvuer", "@abi-software/simulationvuer"],
       output: {
         globals: {
           vue: "Vue",
           pinia: "pinia",
-          "@abi-software/simulationvuer": "simulationvuer",
+          "@abi-software/flatmapvuer": "flatmapvuer",
           "@abi-software/plotvuer": "plotvuer",
+          "@abi-software/scaffoldvuer": "scaffoldvuer",
+          "@abi-software/simulationvuer": "simulationvuer",
         },
       },
     },