From 17d8e12da54def840b9f329ffe93b635342c2d2c Mon Sep 17 00:00:00 2001
From: Jen Jones Arnesen <jennifer@dhis2.org>
Date: Mon, 22 Apr 2024 11:48:32 +0200
Subject: [PATCH] fix(interpretations): plugin flashes when interacting with
 Interpretations modal (#1653)

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

Memoize the filter object to prevent unnecessary refetching/re-rendering.
---
 .../InterpretationModal/InterpretationModal.js     | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/Interpretations/InterpretationModal/InterpretationModal.js b/src/components/Interpretations/InterpretationModal/InterpretationModal.js
index 13f6285af..3d29328c6 100644
--- a/src/components/Interpretations/InterpretationModal/InterpretationModal.js
+++ b/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">