fix: plugin flashes when interacting with Interpretations modal [DHIS2-15570]

package.json

@@ -40,7 +40,7 @@
         "typescript": "^4.8.4"
     },
     "dependencies": {
-        "@dhis2/analytics": "^26.6.0",
+        "@dhis2/analytics": "999.99.9-flashing-fix-alpha.2",
         "@dhis2/app-runtime": "^3.7.0",
         "@dhis2/app-runtime-adapter-d2": "^1.1.0",
         "@dhis2/app-service-datastore": "^1.0.0-beta.3",

src/components/InterpretationModal/InterpretationModal.js

@@ -1,6 +1,6 @@
 import { InterpretationModal as AnalyticsInterpretationModal } from '@dhis2/analytics'
 import PropTypes from 'prop-types'
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
 import { useSelector } from 'react-redux'
 import { sGetCurrent } from '../../reducers/current.js'
 import { ModalDownloadDropdown } from '../DownloadMenu/index.js'
@@ -19,6 +19,10 @@ const InterpretationModal = ({ onInterpretationUpdate }, context) => {
         setIsVisualizationLoading(!!interpretationId)
     }, [interpretationId])
 
+    const onResponsesReceived = useCallback(() => {
+        setIsVisualizationLoading(false)
+    }, [])
+
     return interpretationId ? (
         <AnalyticsInterpretationModal
             currentUser={context.d2.currentUser}
@@ -27,7 +31,7 @@ const InterpretationModal = ({ onInterpretationUpdate }, context) => {
             interpretationId={interpretationId}
             isVisualizationLoading={isVisualizationLoading}
             onClose={removeInterpretationQueryParams}
-            onResponsesReceived={() => setIsVisualizationLoading(false)}
+            onResponsesReceived={onResponsesReceived}
             visualization={visualization}
             downloadMenuComponent={ModalDownloadDropdown}
             pluginComponent={VisualizationPluginWrapper}

src/components/VisualizationPlugin/VisualizationPlugin.js

@@ -33,6 +33,7 @@ export const VisualizationPlugin = ({
     filters,
     forDashboard,
     id,
+    isInModal,
     style,
     onChartGenerated,
     onError,
@@ -324,15 +325,22 @@ export const VisualizationPlugin = ({
     const hasLegendSet =
         legendSets?.length > 0 &&
         isLegendSetType(fetchResult.visualization.type)
-    const transformedStyle =
-        forDashboard && hasLegendSet
-            ? {
-                  ...style,
-                  width: style.width || size.width - (showLegendKey ? 200 : 36),
-                  // 200: width of legend key component with margin and scrollbar
-                  // 36: width of the toggle button with margin
-              }
-            : style
+
+    let transformedStyle = style
+    if (forDashboard && hasLegendSet) {
+        transformedStyle = {
+            ...style,
+            width: style.width || size.width - (showLegendKey ? 200 : 36),
+            // 200: width of legend key component with margin and scrollbar
+            // 36: width of the toggle button with margin
+        }
+    } else if (isInModal) {
+        transformedStyle = {
+            ...style,
+            width: style.width || size.width,
+            height: style.height || size.height,
+        }
+    }
 
     // force wdth and height when no value available otherwise the PivotTable container sets 0 as height hiding the table content
     // and Highcharts does not render correctly the chart/legend
@@ -447,7 +455,12 @@ export const VisualizationPlugin = ({
     }
 
     return (
-        <div className={styles.container} ref={containerCallbackRef}>
+        <div
+            className={cx(styles.container, {
+                [styles.modal]: isInModal,
+            })}
+            ref={containerCallbackRef}
+        >
             <div className={styles.chartWrapper}>{renderPlugin()}</div>
             {getLegendKey()}
             {contextualMenuRect && (
@@ -486,6 +499,7 @@ VisualizationPlugin.propTypes = {
     filters: PropTypes.object,
     forDashboard: PropTypes.bool,
     id: PropTypes.number,
+    isInModal: PropTypes.bool,
     style: PropTypes.object,
     onChartGenerated: PropTypes.func,
     onDataSorted: PropTypes.func,

src/components/VisualizationPlugin/VisualizationPluginWrapper.js

@@ -1,4 +1,5 @@
 import { CenteredContent, CircularLoader, ComponentCover } from '@dhis2/ui'
+import PropTypes from 'prop-types'
 import React, { useCallback, useEffect, useState } from 'react'
 import { VisualizationPlugin } from '../VisualizationPlugin/VisualizationPlugin.js'
 
@@ -27,10 +28,39 @@ const VisualizationPluginWrapper = (props) => {
         [pluginProps]
     )
 
+    useEffect(() => {
+        setPluginProps({
+            displayProperty: props.displayProperty,
+            visualization: props.visualization,
+            filters: props.filters,
+            forDashboard: props.forDashboard,
+            id: props.id,
+            isInModal: props.isInModal,
+            style: props.style,
+            onChartGenerated: props.onChartGenerated,
+            onDrill: props.onDrill,
+            onError: props.onError,
+            onResponsesReceived: props.onResponsesReceived,
+        })
+    }, [
+        props.displayProperty,
+        props.visualization,
+        props.filters,
+        props.forDashboard,
+        props.id,
+        props.isInModal,
+        props.style,
+        props.onChartGenerated,
+        props.onDrill,
+        props.onError,
+        props.onResponsesReceived,
+    ])
+
+    // set loading state only for props that will cause
+    // VisualizationPlugin to fetch and call onLoadingComplete
     useEffect(() => {
         setIsLoading(true)
-        setPluginProps(props)
-    }, [props])
+    }, [props.filters, props.forDashboard, props.visualization])
 
     const onLoadingComplete = () => setIsLoading(false)
 
@@ -52,4 +82,19 @@ const VisualizationPluginWrapper = (props) => {
     )
 }
 
+VisualizationPluginWrapper.propTypes = {
+    displayProperty: PropTypes.string.isRequired,
+    visualization: PropTypes.object.isRequired,
+    className: PropTypes.string,
+    filters: PropTypes.object,
+    forDashboard: PropTypes.bool,
+    id: PropTypes.number,
+    isInModal: PropTypes.bool,
+    style: PropTypes.object,
+    onChartGenerated: PropTypes.func,
+    onDrill: PropTypes.func,
+    onError: PropTypes.func,
+    onResponsesReceived: PropTypes.func,
+}
+
 export { VisualizationPluginWrapper }

src/components/VisualizationPlugin/styles/VisualizationPlugin.module.css

@@ -4,6 +4,9 @@
     height: 100%;
     display: flex;
 }
+.modal {
+    max-height: calc(-285px + 100vh);
+}
 
 .chartWrapper {
     display: flex;

yarn.lock

@@ -2028,10 +2028,10 @@
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2/analytics@^26.6.0":
-  version "26.6.0"
-  resolved "https://registry.yarnpkg.com/@dhis2/analytics/-/analytics-26.6.0.tgz#1d70463fca8a4d5f5838928e9ab6c5c07873715f"
-  integrity sha512-fO8ozVfnTulXQptPcT3W/y+Ru6sN/Qjhr6dWHL4LsG2siL1v8QOWKcnM/yScClJtRZvsbEnQ6vX47c7ujRsGUA==
+"@dhis2/analytics@999.99.9-flashing-fix-alpha.2":
+  version "999.99.9-flashing-fix-alpha.2"
+  resolved "https://registry.yarnpkg.com/@dhis2/analytics/-/analytics-999.99.9-flashing-fix-alpha.2.tgz#e3d24f6faae820933a78d6a1b74331e443b8b678"
+  integrity sha512-0z0Os5X0sskUv6M0wgVN+4y+CMi7RoZ0huZ72p5maXoNumw3geg3OqbojMFGSX1ShChR/ip+qkUgoLEAwoUseA==
   dependencies:
     "@dhis2/d2-ui-rich-text" "^7.4.1"
     "@dhis2/multi-calendar-dates" "1.0.0"