Merge pull request #213 from akhuoa/task/1387269083

Use a single map manager for different flatmap instances
ABI-Software · Nov 27, 2024 · 1ae8a30 · 1ae8a30
2 parents 83ec896 + 995e214
commit 1ae8a30
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 6 deletions.
diff --git a/src/components/FlatmapVuer.vue b/src/components/FlatmapVuer.vue
@@ -2483,7 +2483,7 @@ export default {
           }
         }
 
-        let promise1 = this.mapManager.loadMap(
+        let promise1 = this.mapManagerRef.loadMap(
           identifier,
           this.$refs.display,
           this.eventCallback(),
@@ -2831,6 +2831,14 @@ export default {
       type: Object,
       default: undefined,
     },
+    /**
+     * Flatmap's Map Manager to use as single Map Manager
+     * if the FlatmapVuer is loaded from MultiFlatmapVuer.
+     */
+    mapManager: {
+      type: Object,
+      default: undefined,
+    },
     /**
      * Specify the endpoint of the flatmap server.
      */
@@ -2878,7 +2886,7 @@ export default {
   data: function () {
     return {
       sensor: null,
-      mapManager: undefined,
+      mapManagerRef: undefined,
       flatmapQueries: undefined,
       annotationEntry: {},
       //tooltip display has to be set to false until it is rendered
@@ -3019,7 +3027,7 @@ export default {
     state: {
       handler: function (state, oldVal) {
         if (state !== oldVal) {
-          if (this.mapManager) {
+          if (this.mapManagerRef) {
             this.setState(state)
           } else {
             //this component has not been mounted yet
@@ -3088,11 +3096,22 @@ export default {
       }
     }
   },
+  created: function () {
+    if (this.mapManager) {
+      this.mapManagerRef = this.mapManager;
+    } else {
+      this.mapManagerRef = markRaw(new flatmap.MapManager(this.flatmapAPI));
+      /**
+       * The event emitted after a new mapManager is loaded.
+       * This mapManager can be used to create new flatmaps.
+       */
+      this.$emit('mapmanager-loaded', this.mapManagerRef);
+    }
+  },
   mounted: function () {
     this.openMapRef = shallowRef(this.$refs.openMapRef)
     this.backgroundIconRef = shallowRef(this.$refs.backgroundIconRef)
     this.tooltipWait.length = this.hoverVisibilities.length
-    this.mapManager = markRaw(new flatmap.MapManager(this.flatmapAPI))
     this.flatmapQueries = markRaw(new FlatmapQueries())
     this.flatmapQueries.initialise(this.flatmapAPI)
     if (this.state) {

diff --git a/src/components/MultiFlatmapVuer.vue b/src/components/MultiFlatmapVuer.vue
@@ -83,6 +83,7 @@
       :displayMinimap="displayMinimap"
       :showStarInLegend="showStarInLegend"
       style="height: 100%"
+      :mapManager="mapManagerRef"
       :flatmapAPI="flatmapAPI"
       :sparcAPI="sparcAPI"
     />
@@ -124,6 +125,9 @@ export default {
     Popover,
     FlatmapVuer,
   },
+  created: function () {
+    this.loadMapManager();
+  },
   mounted: function () {
     this.initialise()
     EventBus.on('onActionClick', (action) => {
@@ -219,6 +223,23 @@ export default {
         }
       })
     },
+    /**
+     * Function to load `mapManager` to create flatmap.
+     */
+    loadMapManager: function () {
+      if (!this.mapManagerRef) {
+        if (this.mapManager) {
+          this.mapManagerRef = this.mapManager;
+        } else {
+          this.mapManagerRef = markRaw(new flatmap.MapManager(this.flatmapAPI));
+          /**
+           * The event emitted after a new mapManager is loaded.
+           * This mapManager can be used to create new flatmaps.
+           */
+          this.$emit('mapmanager-loaded', this.mapManagerRef);
+        }
+      }
+    },
     /**
      * @public
      * Function to emit ``resource-selected`` event with provided ``resource``.
@@ -410,12 +431,11 @@ export default {
             //uuid is in the state but should be checked if it is the latest map
             //for that taxon
             return new Promise(() => {
-              const mapManager = new flatmap.MapManager(this.flatmapAPI)
               //mapManager.findMap_ is an async function so we need to wrap this with a promise
               const identifier = { taxon: mapState.entry }
               if (mapState.biologicalSex)
                 identifier['biologicalSex'] = mapState.biologicalSex
-              mapManager
+              this.mapManagerRef
                 .findMap_(identifier)
                 .then((map) => {
                   if (map.uuid !== mapState.uuid) {
@@ -461,6 +481,9 @@ export default {
      */
     setState: function (state) {
       if (state) {
+        // Update undefined mapManagerRef for setState happens before created event
+        this.loadMapManager();
+
         //Update state if required
         this.updateState(state).then((currentState) => {
           this.initialise().then(() => {
@@ -696,6 +719,14 @@ export default {
       type: Object,
       default: undefined,
     },
+    /**
+     * Flatmap's Map Manager to use as single Map Manager
+     * when the value is provided.
+     */
+    mapManager: {
+      type: Object,
+      default: undefined,
+    },
     /**
      * Specify the endpoint of the flatmap server.
      */
@@ -739,6 +770,7 @@ export default {
       requireInitialisation: true,
       resolveList: markRaw([]),
       initialised: false,
+      mapManagerRef: undefined,
     }
   },
   watch: {