fix(interpretations): plugin flashes when interacting with Interpreta…

…tions modal (#1653)

Part of fix for https://dhis2.atlassian.net/browse/DHIS2-15570

Memoize the filter object to prevent unnecessary refetching/re-rendering.

src/components/Interpretations/InterpretationModal/InterpretationModal.js

@@ -14,7 +14,7 @@ import {
 } from '@dhis2/ui'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useMemo } from 'react'
 import css from 'styled-jsx/css'
 import { InterpretationThread } from './InterpretationThread.js'
 import { useModalContentWidth } from './useModalContentWidth.js'
@@ -115,6 +115,12 @@ const InterpretationModal = ({
         }
     }, [interpretationId, refetch])
 
+    const filters = useMemo(() => {
+        return {
+            relativePeriodDate: interpretation?.created,
+        }
+    }, [interpretation?.created])
+
     return (
         <>
             {loadingInProgress && (
@@ -162,10 +168,7 @@ const InterpretationModal = ({
                             <div className="row">
                                 <div className="visualisation-wrap">
                                     <VisualizationPlugin
-                                        filters={{
-                                            relativePeriodDate:
-                                                interpretation.created,
-                                        }}
+                                        filters={filters}
                                         visualization={visualization}
                                         onResponsesReceived={
                                             onResponsesReceived
@@ -174,6 +177,7 @@ const InterpretationModal = ({
                                             currentUser.settings
                                                 ?.keyAnalysisDisplayProperty
                                         }
+                                        isInModal={true}
                                     />
                                 </div>
                                 <div className="thread-wrap">