Jmpi optimise check patient count on dashboard

JeMPI_Apps/JeMPI_UI/.env.local

@@ -4,6 +4,9 @@ REACT_APP_MAX_UPLOAD_CSV_SIZE_IN_MEGABYTES="128"
 REACT_APP_SHOW_BRAND_LOGO=false
 REACT_APP_MOCK_BACKEND=false
 REACT_APP_ENABLE_SSO=false
+REACT_APP_REFETCH_INTERVAL="300000"
+REACT_APP_CACHE_TIME='300000'
+REACT_APP_STALE_TIME='300000'
 
 
 KC_FRONTEND_URL=http://localhost:8080

JeMPI_Apps/JeMPI_UI/docker-entrypoint.sh

@@ -10,6 +10,9 @@ export KC_FRONTEND_URL=${KC_FRONTEND_URL:-""}
 export KC_REALM_NAME=${KC_REALM_NAME:-""}
 export KC_JEMPI_CLIENT_ID=${KC_JEMPI_CLIENT_ID:-""}
 export REACT_APP_SHOW_BRAND_LOGO=${REACT_APP_SHOW_BRAND_LOGO:-"false"}
+export REACT_APP_REFETCH_INTERVAL=${REACT_APP_REFETCH_INTERVAL:-"300000"}
+export REACT_APP_CACHE_TIME=${REACT_APP_CACHE_TIME:-"300000"}
+export REACT_APP_STALE_TIME=${REACT_APP_STALE_TIME:-"300000"}
 
 cat /app/config-template.json | envsubst | tee /app/config.json 
 

JeMPI_Apps/JeMPI_UI/public/config-template.json

@@ -8,5 +8,8 @@
   "KeyCloakUrl": "${KC_FRONTEND_URL}",
   "KeyCloakRealm": "${KC_REALM_NAME}",
   "KeyCloakClientId": "${KC_JEMPI_CLIENT_ID}",
-  "showBrandLogo": ${REACT_APP_SHOW_BRAND_LOGO}
+  "showBrandLogo": ${REACT_APP_SHOW_BRAND_LOGO},
+  "refetchInterval": ${REACT_APP_REFETCH_INTERVAL},
+  "cacheTime": ${REACT_APP_CACHE_TIME},
+  "staleTime": ${REACT_APP_STALE_TIME}
 }

JeMPI_Apps/JeMPI_UI/src/components/dashboard/Dashboard.tsx

@@ -2,8 +2,6 @@ import {
   Box,
   Container,
   Grid,
-  LinearProgress,
-  LinearProgressProps,
   Stack,
   Tab,
   Tabs,
@@ -20,10 +18,7 @@ import { pink } from '@mui/material/colors'
 import MandU from './widgets/MandUWidget'
 import BetaFscore from './widgets/BetaFscoreWidget'
 import ConfusionMatrix from './widgets/ConfusionMatrixWidget'
-import { useEffect, useState } from 'react'
-import CircularProgress, {
-  CircularProgressProps
-} from '@mui/material/CircularProgress'
+import { useState } from 'react'
 import { ImportProcessWidget } from './widgets/ImportProcessWidget'
 import { useDashboardData } from 'hooks/useDashboardData'
 interface TabPanelProps {
@@ -57,8 +52,6 @@ const tabProps = (index: number) => {
 
 const Dashboard = () => {
   const dashboardData = useDashboardData()
-
-  console.log(dashboardData)
   const [currentTabIndex, setCurrentTabIndex] = useState(0)
   const handleChangeTab = (event: React.SyntheticEvent, newValue: number) => {
     setCurrentTabIndex(newValue)

JeMPI_Apps/JeMPI_UI/src/config/index.ts

@@ -7,7 +7,10 @@ export type Config = {
   KeyCloakClientId: string
   useSso: boolean
   maxUploadCsvSize: number
-  showBrandLogo: boolean
+  showBrandLogo: boolean,
+  refetchInterval: number,
+  cacheTime: number,
+  staleTime: number
 }
 
 export default async function getConfig() {
@@ -26,7 +29,10 @@ export default async function getConfig() {
       KeyCloakClientId: conf.KeyCloakClientId,
       useSso: conf.useSso,
       maxUploadCsvSize: conf.maxUploadCsvSize,
-      showBrandLogo: conf.showBrandLogo
+      showBrandLogo: conf.showBrandLogo,
+      refetchInterval: conf.refetchInterval,
+      cacheTime: conf.cacheTime,
+      staleTime: conf.staleTime
     } as Config
   } catch {
     // eslint-disable-next-line no-console
@@ -46,7 +52,16 @@ export default async function getConfig() {
       maxUploadCsvSize: +(
         process.env.REACT_APP_MAX_UPLOAD_CSV_SIZE_IN_MEGABYTES || 128
       ),
-      showBrandLogo: process.env.REACT_APP_SHOW_BRAND_LOGO === 'true'
+      showBrandLogo: process.env.REACT_APP_SHOW_BRAND_LOGO === 'true',
+      refetchInterval: +(
+        process.env.REACT_APP_REFETCH_INTERVAL || 300000
+      ),
+      cacheTime: +(
+        process.env.REACT_APP_CACHE_TIME || 300000
+      ),
+      staleTime: +(
+        process.env.REACT_APP_STALE_TIME || 300000
+      ),
     }
   }
 }

JeMPI_Apps/JeMPI_UI/src/hooks/useDashboardData.tsx

@@ -5,24 +5,25 @@ import { useConfig } from './useConfig'
 import { DashboardData } from 'types/BackendResponse'
 import { useSnackbar } from 'notistack'
 
-export interface DashboadDataContextValue {
+
+export interface DashboardDataContextValue {
     data: DashboardData | undefined,
     isLoading: boolean,
     isError: boolean,
     isReady: boolean
 }
 
 
-const DashboardDataContext = React.createContext<DashboadDataContextValue | null>(null)
+const DashboardDataContext = React.createContext<DashboardDataContextValue | null>(null)
 DashboardDataContext.displayName = 'DashboardDataContext'
 
-export interface DashboaedDataProviderProps {
+export interface DashboardDataProviderProps {
   children: React.ReactNode
 }
 
 export const DashboardDataProvider = ({
   children
-}: DashboaedDataProviderProps): JSX.Element => {
+}: DashboardDataProviderProps): JSX.Element => {
 
     const { apiClient, config } = useConfig()
     const { enqueueSnackbar } = useSnackbar()
@@ -38,9 +39,9 @@ export const DashboardDataProvider = ({
             r.dashboardData = JSON.parse(r.dashboardData)
             return r
         }),
-    refetchOnWindowFocus: false,
-    // TODO: Consider updating later
-    refetchInterval: 3000,
+    refetchInterval: config.refetchInterval,
+    cacheTime: config.cacheTime,
+    staleTime: config.staleTime,
   })
 
 

JeMPI_Apps/JeMPI_UI/tests/test.utils/mocks/enviroments/Utils.ts

@@ -12,6 +12,15 @@ export const getTestEnvConfig = () => {
         maxUploadCsvSize: +(
           process.env.REACT_APP_MAX_UPLOAD_CSV_SIZE_IN_MEGABYTES || 128
         ),
-        showBrandLogo: process.env.REACT_APP_SHOW_BRAND_LOGO === 'true'
+        showBrandLogo: process.env.REACT_APP_SHOW_BRAND_LOGO === 'true',
+        refetchInterval: +(
+        process.env.REACT_APP_REFETCH_INTERVAL || 300000
+        ),
+        cacheTime: +(
+          process.env.REACT_APP_CACHE_TIME || 300000
+        ),
+        staleTime: +(
+          process.env.REACT_APP_STALE_TIME || 300000
+        )
       } 
-}
+}