fix: plugin flashes when interacting with Interpretations modal (#3017)

Fixes DHIS2-15570
Fixes DHIS2-17137

Prevent re-requests for analytics, and resulting re-renders that were giving a flashing effect.

* InterpretationModal: memoize the callback to avoid a re-render due to a "new" function
being passed with each render of InterpretationModal.
The effect of this change is minor, probably just 1 rerender

* VisualizationPlugin: ensure that the size of the plugin is set when it is coming
from the modal so that when changing the width of the viewport,
the visualization adjusts its size accordingly. (Previously this "worked" but only
because of all the re-fetch/re-renders)

* VisualizationPluginWrapper: need to listen to the individual properties,
rather than the whole props object since that was triggering lots of unnecessary re-fetch/renders.

* set the max-height to respect viewport so that vertical resize causes the chart to adjust accordingly

package.json

@@ -40,7 +40,7 @@
         "typescript": "^4.8.4"
     },
     "dependencies": {
-        "@dhis2/analytics": "^26.6.0",
+        "@dhis2/analytics": "^26.6.5",
         "@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@^26.6.5":
+  version "26.6.5"
+  resolved "https://registry.yarnpkg.com/@dhis2/analytics/-/analytics-26.6.5.tgz#44ee29a279c37f3969096d859bc0f07d953e3f42"
+  integrity sha512-ob6kNEEkIAC50RtKuUZWi8Y04uwsPHK/EiYhzxZkSOdS5wFm8X+88KZrD//fILXQjwMhJvl/4+F/T0qVxOF/jQ==
   dependencies:
     "@dhis2/d2-ui-rich-text" "^7.4.1"
     "@dhis2/multi-calendar-dates" "1.0.0"