@abi-software/mapintegratedvuer 1.9.2 → 1.9.3-beta.1

package/src/components/viewers/MultiFlatmap.vue

@@ -17,6 +17,7 @@
       @shown-map-tooltip="onMapTooltipShown"
       @annotation-open="onAnnotationOpen"
       @annotation-close="onAnnotationClose"
+      @update-offline-annotation-enabled="updateOfflineAnnotationEnabled"
       :annotationSidebar="annotationSidebar"
       @connectivity-info-open="onConnectivityInfoOpen"
       @connectivity-error="onConnectivityError"
@@ -29,12 +30,15 @@
       :openMapOptions="openMapOptions"
       :flatmapAPI="flatmapAPI"
       :sparcAPI="apiLocation"
+      :showLocalSettings="showLocalSettings"
+      :showOpenMapButton="showOpenMapButton"
       @pan-zoom-callback="flatmapPanZoomCallback"
       @open-map="openMap"
       @finish-help-mode="endHelp"
       @pathway-selection-changed="onPathwaySelectionChanged"
       @open-pubmed-url="onOpenPubmedUrl"
       @mapmanager-loaded="onMapmanagerLoaded"
+      :showPathwayFilter="false"
     />
 
     <HelpModeDialog
@@ -337,7 +341,8 @@ export default {
         const flatmapImp = flatmap.mapImp;
         this.flatmapMarkerUpdate(flatmapImp);
         this.updateProvCard();
-        this.loadConnectivityKnowledge(flatmapImp);
+        this.updateSettings();
+        this.loadConnectivityExplorerConfig(flatmap);
         EventBus.emit("mapLoaded", flatmap);
       }
     },
@@ -422,17 +427,36 @@ export default {
       flatmap.changeViewingMode(modeName);
     },
     showConnectivityTooltips: function (payload) {
-      if (this.flatmapReady) {
+      if (this?.alive && this.flatmapReady) {
         const flatmap = this.$refs.multiflatmap.getCurrentFlatmap();
         flatmap.showConnectivityTooltips(payload);
       }
     },
     changeConnectivitySource: function (payload) {
-      if (this.flatmapReady) {
+      if (this?.alive && this.flatmapReady) {
         const flatmap = this.$refs.multiflatmap.getCurrentFlatmap();
         flatmap.changeConnectivitySource(payload);
       }
     },
+    updateSettings: function () {
+      const {
+        backgroundDisplay,
+        viewingMode,
+        flightPathDisplay,
+        organsDisplay,
+        outlines,
+      } = this.settingsStore.globalSettings;
+
+      if (this.flatmapReady) {
+        const currentFlatmap = this.$refs.multiflatmap.getCurrentFlatmap();
+
+        currentFlatmap.changeViewingMode(viewingMode);
+        currentFlatmap.setFlightPath3D(flightPathDisplay);
+        currentFlatmap.setColour(organsDisplay);
+        currentFlatmap.setOutlines(outlines);
+        currentFlatmap.backgroundChangeCallback(backgroundDisplay);
+      }
+    },
   },
   computed: {
     facetSpecies() {
@@ -459,7 +483,7 @@ export default {
     this.getFeaturedDatasets();
 
     EventBus.on('annotation-close', () => {
-      if (this.flatmapReady && this.$refs.multiflatmap) {
+      if (this?.alive && this.flatmapReady && this.$refs.multiflatmap) {
         const currentFlatmap = this.$refs.multiflatmap.getCurrentFlatmap();
         currentFlatmap.annotationEventCallback({}, { type: 'aborted' })
       }
@@ -467,7 +491,7 @@ export default {
 
     EventBus.on('show-connectivity', (payload) => {
       const { featureIds, offset } = payload;
-      if (this.flatmapReady && this.$refs.multiflatmap) {
+      if (this?.alive && this.flatmapReady && this.$refs.multiflatmap) {
         const currentFlatmap = this.$refs.multiflatmap.getCurrentFlatmap();
         if (currentFlatmap) {
           currentFlatmap.moveMap(featureIds, {
@@ -479,7 +503,7 @@ export default {
     });
 
     EventBus.on('show-reference-connectivities', (payload) => {
-      if (this.flatmapReady && this.$refs.multiflatmap) {
+      if (this?.alive && this.flatmapReady && this.$refs.multiflatmap) {
         const currentFlatmap = this.$refs.multiflatmap.getCurrentFlatmap();
         if (currentFlatmap) {
           currentFlatmap.showConnectivitiesByReference(payload);
@@ -496,15 +520,45 @@ export default {
     });
 
     EventBus.on("markerUpdate", () => {
-      if (this.flatmapReady) {
+      if (this?.alive && this.flatmapReady) {
         this.flatmapMarkerUpdate(this.$refs.multiflatmap.getCurrentFlatmap().mapImp);
       }
     });
     EventBus.on("hoverUpdate", () => {
-      if (this.flatmapReady) {
+      if (this?.alive && this.flatmapReady) {
         this.cardHoverHighlight();
       }
     });
+    EventBus.on('viewingModeUpdate', (payload) => {
+      if (this?.alive && this.flatmapReady) {
+        const currentFlatmap = this.$refs.multiflatmap.getCurrentFlatmap();
+        currentFlatmap.changeViewingMode(payload);
+      }
+    });
+    EventBus.on('flightPathUpdate', (payload) => {
+      if (this?.alive && this.flatmapReady) {
+        const currentFlatmap = this.$refs.multiflatmap.getCurrentFlatmap();
+        currentFlatmap.setFlightPath3D(payload);
+      }
+    });
+    EventBus.on('organsDisplayUpdate', (payload) => {
+      if (this?.alive && this.flatmapReady) {
+        const currentFlatmap = this.$refs.multiflatmap.getCurrentFlatmap();
+        currentFlatmap.setColour(payload);
+      }
+    });
+    EventBus.on('outlinesDisplayUpdate', (payload) => {
+      if (this?.alive && this.flatmapReady) {
+        const currentFlatmap = this.$refs.multiflatmap.getCurrentFlatmap();
+        currentFlatmap.setOutlines(payload);
+      }
+    });
+    EventBus.on('backgroundDisplayUpdate', (payload) => {
+      if (this?.alive && this.flatmapReady) {
+        const currentFlatmap = this.$refs.multiflatmap.getCurrentFlatmap();
+        currentFlatmap.backgroundChangeCallback(payload);
+      }
+    });
   },
 };
 </script>

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() {
@@ -218,10 +231,20 @@ export default {
       this.startHelp();
     });
     EventBus.on("hoverUpdate", () => {
-      if (this.scaffoldLoaded) {
+      if (this.scaffoldLoaded && this?.alive) {
         this.cardHoverHighlight();
       }
     });
+    EventBus.on('backgroundDisplayUpdate', (payload) => {
+      if (this?.alive) {
+        this.$refs.scaffold.backgroundChangeCallback(payload);
+      }
+    });
+    EventBus.on('viewingModeUpdate', (payload) => {
+      if (this?.alive) {
+        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,18 +53,38 @@ export default {
     annotationSidebar() {
       return this.settingsStore.annotationSidebar;
     },
+    // Hide local settings if global settings are shown
+    showLocalSettings() {
+      return !this.showGlobalSettings;
+    },
+  },
+  beforeUnmount: function() {
+    this.alive = false;
   },
   mounted: function () {
-    EventBus.on("startHelp", () => {
-      this.startHelp();
-    });
-
+    EventBus.on("startHelp", this.startHelp);
+    EventBus.on('connectivity-item-close', this.onConnectivityItemClose);
     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: {
+    onConnectivityItemClose() {
+      if (this?.alive) {
+        if (this.multiflatmapRef) {
+          const currentFlatmap = this.multiflatmapRef.getCurrentFlatmap();
+          if (currentFlatmap) {
+            currentFlatmap.closeTooltip();
+          }
+        }
+        if (this.flatmapRef) {
+          this.flatmapRef.closeTooltip();
+        }
+      }
+    },
     toggleSyncMode: function () {
       return;
     },
@@ -405,10 +426,12 @@ export default {
       return;
     },
     startHelp: function () {
-      if (this.isInHelp === false) {
-        this.helpMode = true;
-        window.addEventListener("mousedown", this.checkEndHelpMouseDown);
-        this.isInHelp = true;
+      if (this?.alive) {
+        if (this.isInHelp === false) {
+          this.helpMode = true;
+          window.addEventListener("mousedown", this.checkEndHelpMouseDown);
+          this.isInHelp = true;
+        }
       }
     },
     endHelp: function () {
@@ -520,7 +543,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 +576,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,42 +588,36 @@ 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');
     },
   },
@@ -618,7 +641,10 @@ export default {
       isInHelp: false,
       mapManager: undefined,
       connectivityKnowledge: {},
-      highlightDelay: undefined
+      connectivityFilterOptions: {},
+      connectivityFilterSources: {},
+      highlightDelay: undefined,
+      alive: true,
     };
   },
   created: function () {

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/src/stores/splitFlow.js

@@ -87,15 +87,16 @@ const autoAssignEntryIdsToPane = (entries, layout) => {
   const invalidIdKeys = [];
   for (const [key, value] of Object.entries(layout)) {
     if (value.content) {
-      if (assignedIds.includes(value.id)) {
-        //id has got an assigned pane, cache it and find one
-        //later
+      if ((1 > value.id) || assignedIds.includes(value.id)) {
+        //id has got an assigned pane or pane contains an invalid id,
+        //cache it and find one later 
         invalidIdKeys.push(key);
       } else {
         assignedIds.push(value.id);
       }
     }
   }
+
   invalidIdKeys.forEach((key) => {
     let done = false;
     for (let i = 0; i < entries.length && !done; i++) {
@@ -370,7 +371,7 @@ export const useSplitFlowStore = defineStore('splitFlow', {
             availableId == 0; i++) {
             //Find the first entry not currently in use
             if ((payload.entries[i].id !== payload.id) &&
-              findKeyWithId(payload.entries[i].id) === undefined) {
+              findKeyWithId(this.customLayout, payload.entries[i].id) === undefined) {
               availableId = payload.entries[i].id;
             }
           }
@@ -402,7 +403,7 @@ export const useSplitFlowStore = defineStore('splitFlow', {
           }
           const customLayout = newLayoutWithOrigInfo(
             this.customLayout, this.activeView);
-          const key = findKeyWithId(customLayout, payload.id);
+          const key = findKeyWithId(this.customLayout, payload.id);
           // The following move the entry id to the appropriate slot
           // and remove the target id
           switch (key) {
@@ -556,7 +557,6 @@ export const useSplitFlowStore = defineStore('splitFlow', {
             this.customLayout[key] = value;
           }
         }
-        this.updateSplitPanels();
       }
     },
     updateSplitPanels() {

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",
         },
       },
     },