feat: zoom to map content on dashboard item resize

[BRaimbault]

Implement: DHIS2-18641

---

Listen to 'resize' event on window and use map.fitBounds() when triggered.

---

Before:

After:

[dhis2-bot]

🚀 Deployed on https://pr-3440.maps.netlify.dhis2.org

[jenniferarnesen]

Entering fullscreen on dashboards looks good. I did notice that in normal dashboard mode, some maps (e.g. the one in upper left) don't have the exact same bounds as before.

After:

Before:

And I see the same problem in the maps app

[jenniferarnesen]

Will isFullscreen always be true? I guess that means that the window resize event only triggers when entering FS, and not leaving FS?

[jenniferarnesen]

Actually, line 78 is not calling the function with the correct params. Since it is calling the component's own onFullscreenChange (not the one in util/map), then `isFullscreen is always false since the functions args don't match up.

[jenniferarnesen]

I'm not entirely sure how this is working, but I think what you want is:
this.onFullscreenChange({ isFullscreen: false })

[BRaimbault]

First thing is, you are right, it should have been: this.onFullscreenChange({ isFullscreen: false })

And I investigated a little more!

Above is the button triggering the fullscreenchange event. The prop isFullscreen is true when you switch to fullscreen and false when you go back to normal mode.

I believe the button is hidden in all scenario where map is used in plugin, so the event listener defined below never gets triggered:

maps-app/src/components/map/Map.js

Lines 74 to 82 in b781ff3

	if (isPlugin) {
	map.toggleMultiTouch(true)
	map.on('fullscreenchange', this.onFullscreenChange)
	window.addEventListener('resize', () => {
	this.onFullscreenChange(map, { isFullscreen: true })
	})
	} else {
	map.on('contextmenu', this.onRightClick, this)
	}

Next place onFullscreenChange is used is here:

maps-app/src/components/map/Map.js

Lines 125 to 136 in b781ff3

	componentDidUpdate(prevProps) {
	const { resizeCount, isFullscreen, isPlugin } = this.props
	if (resizeCount !== prevProps.resizeCount) {
	this.map.resize()
	}
	// From map plugin resize method
	if (isPlugin && isFullscreen !== prevProps.isFullscreen) {
	onFullscreenChange(this.map, isFullscreen)
	}
	}

The thing is, isFullscreen property is set to false for plugins and never changes, so it is never used either:

maps-app/src/components/plugin/Map.js

Lines 126 to 135 in b781ff3

	<MapView
	isPlugin={true}
	isFullscreen={false}
	basemap={basemap}
	layers={layers.current}
	controls={controls}
	bounds={defaultBounds}
	openContextMenu={setContextMenu}
	resizeCount={resizeCount}
	/>

It looks like I can try to clean things up a little, and if resizeCount gets updated properly, I may be able to use onFullscreenChange in componentDidUpdate instead of adding the event listener. Let's see tomorrow.

[jenniferarnesen]

Here you can see that the correct size briefly flashes before it is changed to too large. So it is sizing initially to the org unit bounds, and then resizing to the thematic layer bounds. But regardless, this is not due to this PR and should be looked at separaytely

brief.size.correction.mov

[BRaimbault]

Comment 1:

Entering fullscreen on dashboards looks good. I did notice that in normal dashboard mode, some maps (e.g. the one in upper left) don't have the exact same bounds as before.
After: #Image1#
Before: #Image2#

And I see the same problem in the maps app
#Image3#

Comment 2:

Here you can see that the correct size briefly flashes before it is changed to too large. So it is sizing initially to the org unit bounds, and then resizing to the thematic layer bounds. But regardless, this is not due to this PR and should be looked at separaytely

#Video#

I believe what is happening is layers get loaded one by one (from top to bottom in the layer's panel) and the map is fitted to the layer's bounding box each time. As discussed, this is not a behavior affected by the PR.