fix: maps, ev and er were not resizing for fullscreen or item resize in edit mode

src/components/Item/VisualizationItem/Item.js

@@ -21,10 +21,7 @@ import {
 } from '../../../reducers/itemFilters'
 import { acAddVisualization } from '../../../actions/visualizations'
 import { acSetSelectedItemActiveType } from '../../../actions/selected'
-import {
-    pluginIsAvailable,
-    resize as pluginResize,
-} from './Visualization/plugin'
+import { pluginIsAvailable } from './Visualization/plugin'
 import { getDataStatisticsName } from '../../../modules/itemTypes'
 import { getVisualizationId, getVisualizationName } from '../../../modules/item'
 import memoizeOne from '../../../modules/memoizeOne'
@@ -34,7 +31,6 @@ import {
     isViewMode,
 } from '../../Dashboard/dashboardModes'
 import { getItemHeightPx } from '../../../modules/gridUtil'
-import getGridItemDomId from '../../../modules/getGridItemDomId'
 
 export class Item extends Component {
     state = {
@@ -121,50 +117,17 @@ export class Item extends Component {
         }
     }
 
-    componentDidUpdate(prevProps) {
-        if (prevProps.gridWidth !== this.props.gridWidth) {
-            const el = document.querySelector(
-                `#${getGridItemDomId(this.props.item.id)}`
-            )
-            if (typeof el?.setViewportSize === 'function') {
-                setTimeout(
-                    () =>
-                        el.setViewportSize(
-                            el.clientWidth - 5,
-                            el.clientHeight - 5
-                        ),
-                    10
-                )
-            }
-            // call resize on Map item
-            pluginResize(
-                this.props.item.id,
-                this.getActiveType(),
-                this.state.isFullscreen
-            )
-        }
-    }
-
     isFullscreenSupported = () => {
         const el = document.querySelector(this.itemDomElSelector)
         return !!(el?.requestFullscreen || el?.webkitRequestFullscreen)
     }
 
-    handleFullscreenChange = () => {
-        this.setState(
-            {
-                isFullscreen:
-                    !!document.fullscreenElement ||
-                    !!document.webkitFullscreenElement,
-            },
-            () =>
-                pluginResize(
-                    this.props.item.id,
-                    this.getActiveType(),
-                    this.state.isFullscreen
-                )
-        )
-    }
+    handleFullscreenChange = () =>
+        this.setState({
+            isFullscreen:
+                !!document.fullscreenElement ||
+                !!document.webkitFullscreenElement,
+        })
 
     onToggleFullscreen = () => {
         if (!this.state.isFullscreen) {
@@ -230,6 +193,7 @@ export class Item extends Component {
         const rect = document
             .querySelector(this.itemDomElSelector)
             ?.getBoundingClientRect()
+
         return rect && rect.width - this.itemContentPadding * 2
     }
 
@@ -289,6 +253,8 @@ export class Item extends Component {
                                             dimensions
                                         )}
                                         availableWidth={this.getAvailableWidth()}
+                                        isFullscreen={this.state.isFullscreen}
+                                        gridWidth={this.props.gridWidth}
                                     />
                                 )}
                             </WindowDimensionsCtx.Consumer>

src/components/Item/VisualizationItem/Visualization/LegacyPlugin.js

@@ -0,0 +1,36 @@
+import React, { useEffect } from 'react'
+import PropTypes from 'prop-types'
+import DefaultPlugin from './DefaultPlugin'
+import getGridItemDomId from '../../../../modules/getGridItemDomId'
+
+const LegacyPlugin = ({
+    isFullscreen,
+    availableHeight,
+    availableWidth,
+    gridWidth,
+    ...props
+}) => {
+    useEffect(() => {
+        const el = document.querySelector(`#${getGridItemDomId(props.item.id)}`)
+        if (typeof el?.setViewportSize === 'function') {
+            setTimeout(
+                () =>
+                    el.setViewportSize(el.clientWidth - 5, el.clientHeight - 5),
+                10
+            )
+        }
+    }, [availableHeight, availableWidth, isFullscreen, gridWidth])
+
+    return <DefaultPlugin {...props} />
+}
+
+LegacyPlugin.propTypes = {
+    activeType: PropTypes.string,
+    availableHeight: PropTypes.number,
+    availableWidth: PropTypes.number,
+    gridWidth: PropTypes.number,
+    isFullscreen: PropTypes.bool,
+    item: PropTypes.object,
+}
+
+export default LegacyPlugin

src/components/Item/VisualizationItem/Visualization/MapPlugin.js

@@ -1,12 +1,23 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
 import i18n from '@dhis2/d2-i18n'
 import DefaultPlugin from './DefaultPlugin'
 import { MAP } from '../../../../modules/itemTypes'
-import { pluginIsAvailable } from './plugin'
+import { pluginIsAvailable, resize } from './plugin'
 import NoVisualizationMessage from './NoVisualizationMessage'
 
-const MapPlugin = ({ applyFilters, ...props }) => {
+const MapPlugin = ({
+    applyFilters,
+    isFullscreen,
+    availableHeight,
+    availableWidth,
+    gridWidth,
+    ...props
+}) => {
+    useEffect(() => {
+        resize(props.item.id, MAP, isFullscreen)
+    }, [availableHeight, availableWidth, isFullscreen, gridWidth])
+
     if (props.item.type === MAP) {
         // apply filters only to thematic and event layers
         // for maps AO
@@ -35,7 +46,7 @@ const MapPlugin = ({ applyFilters, ...props }) => {
         )
     }
 
-    return pluginIsAvailable(props.activeType || props.item.type) ? (
+    return pluginIsAvailable(MAP) ? (
         <DefaultPlugin
             options={{
                 hideTitle: true,
@@ -50,8 +61,11 @@ const MapPlugin = ({ applyFilters, ...props }) => {
 }
 
 MapPlugin.propTypes = {
-    activeType: PropTypes.string,
     applyFilters: PropTypes.func,
+    availableHeight: PropTypes.number,
+    availableWidth: PropTypes.number,
+    gridWidth: PropTypes.number,
+    isFullscreen: PropTypes.bool,
     item: PropTypes.object,
     itemFilters: PropTypes.object,
     visualization: PropTypes.object,

src/components/Item/VisualizationItem/Visualization/Visualization.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import i18n from '@dhis2/d2-i18n'
 
-import DefaultPlugin from './DefaultPlugin'
+import LegacyPlugin from './LegacyPlugin'
 import MapPlugin from './MapPlugin'
 import DataVisualizerPlugin from './DataVisualizerPlugin'
 import NoVisualizationMessage from './NoVisualizationMessage'
@@ -37,8 +37,7 @@ class Visualization extends React.Component {
             activeType,
             item,
             itemFilters,
-            availableHeight,
-            availableWidth,
+            ...rest
         } = this.props
 
         if (!visualization) {
@@ -49,9 +48,9 @@ class Visualization extends React.Component {
             )
         }
 
-        const style = { height: availableHeight }
-        if (availableWidth) {
-            style.width = availableWidth
+        const style = { height: this.props.availableHeight }
+        if (this.props.availableWidth) {
+            style.width = this.props.availableWidth
         }
 
         const pluginProps = {
@@ -64,6 +63,7 @@ class Visualization extends React.Component {
                 item.type,
                 activeType
             ),
+            ...rest,
         }
 
         switch (activeType) {
@@ -97,7 +97,7 @@ class Visualization extends React.Component {
                 return pluginIsAvailable(
                     pluginProps.activeType || pluginProps.item.type
                 ) ? (
-                    <DefaultPlugin {...pluginProps} />
+                    <LegacyPlugin {...pluginProps} />
                 ) : (
                     <NoVisualizationMessage
                         message={i18n.t(

src/components/Item/VisualizationItem/Visualization/plugin.js

@@ -31,7 +31,7 @@ const getPlugin = async type => {
     }
     const pluginName = itemTypeToGlobalVariable[type]
 
-    return global[pluginName]
+    return await global[pluginName]
 }
 
 const fetchPlugin = async (type, baseUrl) => {
@@ -59,14 +59,15 @@ const fetchPlugin = async (type, baseUrl) => {
     const scriptsPromise = Promise.all(scripts.map(loadExternalScript)).then(
         () => global[globalName] // At this point, has been replaced with the real thing
     )
+
     global[globalName] = scriptsPromise
     return await scriptsPromise
 }
 
 export const pluginIsAvailable = type =>
     hasIntegratedPlugin(type) || itemTypeToGlobalVariable[type]
 
-export const loadPlugin = async (type, config, credentials) => {
+const loadPlugin = async (type, config, credentials) => {
     if (!pluginIsAvailable(type)) {
         return
     }
@@ -107,16 +108,15 @@ export const load = async (
     await loadPlugin(type, config, credentials)
 }
 
-export const resize = (id, type, isFullscreen = false) => {
-    const plugin = getPlugin(type)
-
+export const resize = async (id, type, isFullscreen = false) => {
+    const plugin = await getPlugin(type)
     if (plugin?.resize) {
         plugin.resize(getGridItemDomId(id), isFullscreen)
     }
 }
 
-export const unmount = (item, activeType) => {
-    const plugin = getPlugin(activeType)
+export const unmount = async (item, activeType) => {
+    const plugin = await getPlugin(activeType)
 
     if (plugin && plugin.unmount) {
         plugin.unmount(getGridItemDomId(item.id))