From e23e739c23a2caf1e81536cffd93b4395302f38b Mon Sep 17 00:00:00 2001 From: akhuoa Date: Fri, 22 Nov 2024 15:03:06 +1300 Subject: [PATCH 1/4] Use a single map manager for different flatmap instances --- src/components/FlatmapVuer.vue | 22 ++++++++++++++++++---- src/components/MultiFlatmapVuer.vue | 8 ++++++-- 2 files changed, 24 insertions(+), 6 deletions(-) diff --git a/src/components/FlatmapVuer.vue b/src/components/FlatmapVuer.vue index 1d6f71f1..d3d7a161 100644 --- 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,17 @@ export default { } } }, + created: function () { + if (this.mapManager) { + this.mapManagerRef = this.mapManager; + } else { + this.mapManagerRef = markRaw(new flatmap.MapManager(this.flatmapAPI)); + } + }, 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 index c775ed6e..2b348215 100644 --- a/src/components/MultiFlatmapVuer.vue +++ b/src/components/MultiFlatmapVuer.vue @@ -83,6 +83,7 @@ :displayMinimap="displayMinimap" :showStarInLegend="showStarInLegend" style="height: 100%" + :mapManager="mapManager" :flatmapAPI="flatmapAPI" :sparcAPI="sparcAPI" /> @@ -124,6 +125,9 @@ export default { Popover, FlatmapVuer, }, + created: function () { + this.mapManager = markRaw(new flatmap.MapManager(this.flatmapAPI)); + }, mounted: function () { this.initialise() EventBus.on('onActionClick', (action) => { @@ -410,12 +414,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.mapManager .findMap_(identifier) .then((map) => { if (map.uuid !== mapState.uuid) { @@ -739,6 +742,7 @@ export default { requireInitialisation: true, resolveList: markRaw([]), initialised: false, + mapManager: undefined, } }, watch: { From 49ce6b4341ad450f811a95d4ff13e0797a6628f1 Mon Sep 17 00:00:00 2001 From: akhuoa Date: Tue, 26 Nov 2024 12:53:49 +1300 Subject: [PATCH 2/4] Update mapManager for both flatmapvuer and multiflatmapvuer --- src/components/FlatmapVuer.vue | 5 +++++ src/components/MultiFlatmapVuer.vue | 25 +++++++++++++++++++++---- 2 files changed, 26 insertions(+), 4 deletions(-) diff --git a/src/components/FlatmapVuer.vue b/src/components/FlatmapVuer.vue index d3d7a161..9ea9a312 100644 --- a/src/components/FlatmapVuer.vue +++ b/src/components/FlatmapVuer.vue @@ -3101,6 +3101,11 @@ export default { 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 () { diff --git a/src/components/MultiFlatmapVuer.vue b/src/components/MultiFlatmapVuer.vue index 2b348215..6701dc16 100644 --- a/src/components/MultiFlatmapVuer.vue +++ b/src/components/MultiFlatmapVuer.vue @@ -83,7 +83,7 @@ :displayMinimap="displayMinimap" :showStarInLegend="showStarInLegend" style="height: 100%" - :mapManager="mapManager" + :mapManager="mapManagerRef" :flatmapAPI="flatmapAPI" :sparcAPI="sparcAPI" /> @@ -126,7 +126,16 @@ export default { FlatmapVuer, }, created: function () { - this.mapManager = markRaw(new flatmap.MapManager(this.flatmapAPI)); + 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.initialise() @@ -418,7 +427,7 @@ export default { const identifier = { taxon: mapState.entry } if (mapState.biologicalSex) identifier['biologicalSex'] = mapState.biologicalSex - this.mapManager + this.mapManagerRef .findMap_(identifier) .then((map) => { if (map.uuid !== mapState.uuid) { @@ -699,6 +708,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. */ @@ -742,7 +759,7 @@ export default { requireInitialisation: true, resolveList: markRaw([]), initialised: false, - mapManager: undefined, + mapManagerRef: undefined, } }, watch: { From 87dfdb339b09edd581b0efc385a9375e95de89ac Mon Sep 17 00:00:00 2001 From: akhuoa Date: Wed, 27 Nov 2024 13:30:22 +1300 Subject: [PATCH 3/4] Fix mapManager for state watch event --- src/components/MultiFlatmapVuer.vue | 25 ++++++++++++++++--------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/src/components/MultiFlatmapVuer.vue b/src/components/MultiFlatmapVuer.vue index 6701dc16..1e863688 100644 --- a/src/components/MultiFlatmapVuer.vue +++ b/src/components/MultiFlatmapVuer.vue @@ -126,15 +126,17 @@ export default { FlatmapVuer, }, 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); + 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); + } } }, mounted: function () { @@ -473,6 +475,11 @@ export default { */ setState: function (state) { if (state) { + // Update undefined mapManagerRef for setState happens before created event + if (!this.mapManagerRef && this.mapManager) { + this.mapManagerRef = this.mapManager; + } + //Update state if required this.updateState(state).then((currentState) => { this.initialise().then(() => { From 995e214511790f35bacdd3b30d5038f3d0a0b104 Mon Sep 17 00:00:00 2001 From: akhuoa Date: Wed, 27 Nov 2024 15:05:27 +1300 Subject: [PATCH 4/4] Refactor mapManager load method --- src/components/MultiFlatmapVuer.vue | 34 ++++++++++++++++------------- 1 file changed, 19 insertions(+), 15 deletions(-) diff --git a/src/components/MultiFlatmapVuer.vue b/src/components/MultiFlatmapVuer.vue index 1e863688..c0f1dae0 100644 --- a/src/components/MultiFlatmapVuer.vue +++ b/src/components/MultiFlatmapVuer.vue @@ -126,18 +126,7 @@ export default { FlatmapVuer, }, created: 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); - } - } + this.loadMapManager(); }, mounted: function () { this.initialise() @@ -234,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``. @@ -476,9 +482,7 @@ export default { setState: function (state) { if (state) { // Update undefined mapManagerRef for setState happens before created event - if (!this.mapManagerRef && this.mapManager) { - this.mapManagerRef = this.mapManager; - } + this.loadMapManager(); //Update state if required this.updateState(state).then((currentState) => {