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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/mapintegratedvuer",
-  "version": "1.9.3-beta.0",
+  "version": "1.10.1-beta.0",
   "license": "Apache-2.0",
   "scripts": {
     "serve": "vite --host --force",
@@ -50,11 +50,11 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/flatmapvuer": "^1.9.3-beta.6",
-    "@abi-software/map-side-bar": "^2.8.3-beta.5",
-    "@abi-software/map-utilities": "^1.5.0",
+    "@abi-software/flatmapvuer": "^1.9.3-beta.7",
+    "@abi-software/map-side-bar": "^2.8.3-beta.6",
+    "@abi-software/map-utilities": "^1.6.0-beta.0",
     "@abi-software/plotvuer": "1.0.4",
-    "@abi-software/scaffoldvuer": "^1.9.1-beta.3",
+    "@abi-software/scaffoldvuer": "^1.10.0-beta.0",
     "@abi-software/simulationvuer": "^2.0.11-beta.0",
     "@abi-software/sparc-annotation": "0.3.2",
     "@abi-software/svg-sprite": "^1.0.1",

package/src/components/ContentBar.vue

@@ -190,6 +190,9 @@ export default {
     closeAndRemove: function() {
       this.splitFlowStore.closeSlot({ id: this.entry.id, entries: this.entries});
       EventBus.emit("RemoveEntryRequest", this.entry.id);
+      this.$nextTick(() => {
+        this.splitFlowStore.updateSplitPanels();
+      });
     },
     getEntryTitle: function(entry) {
       if (entry) {

package/src/components/SplitDialog.vue

@@ -301,11 +301,19 @@ export default {
                   });
                 }
               });
-              let ids = []
+              let ids = [];
               for (const [key, value] of Object.entries(filters)) {
-                value.forEach((v) => ids.push(...uniqueFilterSources[key][v]));
+                if (value.length) {
+                  let valueToIds = [];
+                  // within AND
+                  value.forEach((v) => valueToIds.push(...uniqueFilterSources[key][v]));
+                  ids.push(valueToIds);
+                }
               }
-              this.filter = [...new Set(ids)];
+              // between AND
+              this.filter = ids.length ?
+                [...new Set(ids.reduce((acc, curr) => acc.filter(id => curr.includes(id))))] :
+                [];
               if (data.type === "query-update") {
                 this.query = data.value;
               } else if (data.type === "filter-update") {

package/src/components/SplitFlow.vue

@@ -135,6 +135,7 @@ export default {
       connectivityKnowledge: [],
       connectivityExplorerClicked: [], // to support multi views
       filterOptions: [],
+      annotationHighlight: [],
     }
   },
   watch: {
@@ -153,6 +154,11 @@ export default {
         this.hoverChanged({ tabType: 'connectivity' });
       },
     },
+    annotationHighlight: {
+      handler: function () {
+        this.hoverChanged({ tabType: 'annotation' });
+      },
+    },
   },
   methods: {
     onConnectivityCollapseChange: function (payload) {
@@ -343,6 +349,8 @@ export default {
         hoverDOI = data.doi ? data.doi : '';
       } else if (data.tabType === 'connectivity') {
         hoverConnectivity = data.id ? [data.id] : this.connectivityHighlight;
+      } else if (data.tabType === 'annotation') {
+        hoverConnectivity = data.models ? [data.models] : this.annotationHighlight;
       }
       this.settingsStore.updateHoverFeatures(hoverAnatomies, hoverOrgans, hoverDOI, hoverConnectivity);
       EventBus.emit("hoverUpdate");
@@ -658,6 +666,7 @@ export default {
     });
     EventBus.on('annotation-open', payload => {
       this.annotationEntry = payload.annotationEntry;
+      this.annotationHighlight = this.annotationEntry.map(entry => entry.models);
       this.annotationCallback = markRaw(payload.commitCallback);
       if (!payload.createData) {
         this.createData = markRaw({});

package/src/components/viewers/Flatmap.vue

@@ -197,46 +197,52 @@ export default {
   },
   mounted: function() {
     EventBus.on('annotation-close', () => {
-      const currentFlatmap = this.$refs.flatmap;
-      if (currentFlatmap) {
-        this.$refs.flatmap.annotationEventCallback({}, { type: 'aborted' })
+      if (this?.alive) {
+        const currentFlatmap = this.$refs.flatmap;
+        if (currentFlatmap) {
+          this.$refs.flatmap.annotationEventCallback({}, { type: 'aborted' })
+        }
       }
     });
     EventBus.on("markerUpdate", () => {
-      this.flatmapMarkerUpdate(undefined);
+      if (this?.alive) this.flatmapMarkerUpdate(undefined);
     });
     EventBus.on("hoverUpdate", () => {
-      this.cardHoverHighlight();
+      if (this?.alive) this.cardHoverHighlight();
     });
     EventBus.on('viewingModeUpdate', (payload) => {
-      this.$refs.flatmap.changeViewingMode(payload);
+      if (this?.alive) this.$refs.flatmap.changeViewingMode(payload);
     });
     EventBus.on('flightPathUpdate', (payload) => {
-      this.$refs.flatmap.setFlightPath3D(payload);
+      if (this?.alive) this.$refs.flatmap.setFlightPath3D(payload);
     });
     EventBus.on('organsDisplayUpdate', (payload) => {
-      this.$refs.flatmap.setColour(payload);
+      if (this?.alive) this.$refs.flatmap.setColour(payload);
     });
     EventBus.on('outlinesDisplayUpdate', (payload) => {
-      this.$refs.flatmap.setOutlines(payload);
+      if (this?.alive) this.$refs.flatmap.setOutlines(payload);
     });
     EventBus.on('backgroundDisplayUpdate', (payload) => {
-      this.$refs.flatmap.backgroundChangeCallback(payload);
+      if (this?.alive) this.$refs.flatmap.backgroundChangeCallback(payload);
     });
     EventBus.on('show-connectivity', (payload) => {
-      const { featureIds, offset } = payload;
-      const currentFlatmap = this.$refs.flatmap;
-      if (currentFlatmap) {
-        currentFlatmap.moveMap(featureIds, {
-          offsetX: offset ? -150 : 0,
-          zoom: 4,
-        });
+      if (this?.alive) {
+        const { featureIds, offset } = payload;
+        const currentFlatmap = this.$refs.flatmap;
+        if (currentFlatmap) {
+          currentFlatmap.moveMap(featureIds, {
+            offsetX: offset ? -150 : 0,
+            zoom: 4,
+          });
+        }
       }
     });
     EventBus.on('show-reference-connectivities', (payload) => {
-      const currentFlatmap = this.$refs.flatmap;
-      if (currentFlatmap) {
-        currentFlatmap.showConnectivitiesByReference(payload);
+      if (this?.alive) {
+        const currentFlatmap = this.$refs.flatmap;
+        if (currentFlatmap) {
+          currentFlatmap.showConnectivitiesByReference(payload);
+        }
       }
     });
   },

package/src/components/viewers/MultiFlatmap.vue

@@ -427,13 +427,13 @@ 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);
       }
@@ -483,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' })
       }
@@ -491,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, {
@@ -503,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);
@@ -520,41 +520,41 @@ 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.flatmapReady) {
+      if (this?.alive && this.flatmapReady) {
         const currentFlatmap = this.$refs.multiflatmap.getCurrentFlatmap();
         currentFlatmap.changeViewingMode(payload);
       }
     });
     EventBus.on('flightPathUpdate', (payload) => {
-      if (this.flatmapReady) {
+      if (this?.alive && this.flatmapReady) {
         const currentFlatmap = this.$refs.multiflatmap.getCurrentFlatmap();
         currentFlatmap.setFlightPath3D(payload);
       }
     });
     EventBus.on('organsDisplayUpdate', (payload) => {
-      if (this.flatmapReady) {
+      if (this?.alive && this.flatmapReady) {
         const currentFlatmap = this.$refs.multiflatmap.getCurrentFlatmap();
         currentFlatmap.setColour(payload);
       }
     });
     EventBus.on('outlinesDisplayUpdate', (payload) => {
-      if (this.flatmapReady) {
+      if (this?.alive && this.flatmapReady) {
         const currentFlatmap = this.$refs.multiflatmap.getCurrentFlatmap();
         currentFlatmap.setOutlines(payload);
       }
     });
     EventBus.on('backgroundDisplayUpdate', (payload) => {
-      if (this.flatmapReady) {
+      if (this?.alive && this.flatmapReady) {
         const currentFlatmap = this.$refs.multiflatmap.getCurrentFlatmap();
         currentFlatmap.backgroundChangeCallback(payload);
       }

package/src/components/viewers/Scaffold.vue

@@ -231,15 +231,19 @@ export default {
       this.startHelp();
     });
     EventBus.on("hoverUpdate", () => {
-      if (this.scaffoldLoaded) {
+      if (this.scaffoldLoaded && this?.alive) {
         this.cardHoverHighlight();
       }
     });
     EventBus.on('backgroundDisplayUpdate', (payload) => {
-      this.$refs.scaffold.backgroundChangeCallback(payload);
+      if (this?.alive) {
+        this.$refs.scaffold.backgroundChangeCallback(payload);
+      }
     });
     EventBus.on('viewingModeUpdate', (payload) => {
-      this.$refs.scaffold.changeViewingMode(payload);
+      if (this?.alive) {
+        this.$refs.scaffold.changeViewingMode(payload);
+      }
     });
   },
 };

package/src/mixins/ContentMixin.js

@@ -58,23 +58,12 @@ export default {
       return !this.showGlobalSettings;
     },
   },
+  beforeUnmount: function() {
+    this.alive = false;
+  },
   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();
-      }
-    });
-
+    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;
@@ -83,6 +72,19 @@ export default {
     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;
     },
@@ -424,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 () {
@@ -639,7 +643,8 @@ export default {
       connectivityKnowledge: {},
       connectivityFilterOptions: {},
       connectivityFilterSources: {},
-      highlightDelay: undefined
+      highlightDelay: undefined,
+      alive: true,
     };
   },
   created: function () {

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() {