Merge pull request #833 from BIDMCDigitalPsychiatry/gyroscope-changes

Performance fixes
BIDMCDigitalPsychiatry · Sep 27, 2024 · d02c20f · d02c20f
2 parents 7474aea + 1fb4a6b
commit d02c20f
Show file tree

Hide file tree

Showing 2 changed files with 178 additions and 22 deletions.
diff --git a/src/components/Prevent.tsx b/src/components/Prevent.tsx
@@ -1,5 +1,5 @@
 // Core Imports
-import React from "react"
+import React, { useEffect } from "react"
 import {
   Container,
   Typography,
@@ -18,7 +18,10 @@ import {
   Theme,
   createStyles,
 } from "@material-ui/core"
+import { Stack } from "@mui/material"
 import { Service } from "./DBService/DBService"
+import { KeyboardDatePicker, KeyboardTimePicker } from "@material-ui/pickers"
+
 import LAMP, {
   Participant as ParticipantObj,
   Activity as ActivityObj,
@@ -31,6 +34,56 @@ import PreventSelectedActivities from "./PreventSelectedActivities"
 import PreventSelectedExperimental from "./PreventSelectedExperimental"
 import MultipleSelect from "./MultipleSelect"
 
+import { MuiPickersUtilsProvider } from "@material-ui/pickers"
+import locale_lang from "../locale_map.json"
+import frLocale from "date-fns/locale/fr"
+import koLocale from "date-fns/locale/ko"
+import daLocale from "date-fns/locale/da"
+import deLocale from "date-fns/locale/de"
+import itLocale from "date-fns/locale/it"
+import zhLocale from "date-fns/locale/zh-CN"
+import zhHKLocale from "date-fns/locale/zh-HK"
+import esLocale from "date-fns/locale/es"
+import enLocale from "date-fns/locale/en-US"
+import hiLocale from "date-fns/locale/hi"
+
+const userLanguages = ["en-US", "es-ES", "hi-IN", "de-DE", "da-DK", "fr-FR", "ko-KR", "it-IT", "zh-CN", "zh-HK"]
+
+const localeMap = {
+  "en-US": enLocale,
+  "es-ES": esLocale,
+  "hi-IN": hiLocale,
+  "de-DE": deLocale,
+  "da-DK": daLocale,
+  "fr-FR": frLocale,
+  "ko-KR": koLocale,
+  "it-IT": itLocale,
+  "zh-CN": zhLocale,
+  "zh-HK": zhHKLocale,
+}
+import DateFnsUtils from "@date-io/date-fns"
+
+export const dateInUTCformat = (val) => {
+  let month =
+    (val || new Date()).getMonth() + 1 > 9
+      ? (val || new Date()).getMonth() + 1
+      : "0" + ((val || new Date()).getMonth() + 1)
+  let date = (val || new Date()).getDate() > 9 ? (val || new Date()).getDate() : "0" + (val || new Date()).getDate()
+  const dateVal =
+    (val || new Date()).getFullYear() +
+    "-" +
+    month +
+    "-" +
+    date +
+    "T" +
+    ((val || new Date()).getHours() > 9 ? (val || new Date()).getHours() : "0" + (val || new Date()).getHours()) +
+    ":" +
+    ((val || new Date()).getMinutes() > 9 ? (val || new Date()).getMinutes() : "0" + (val || new Date()).getMinutes()) +
+    ":" +
+    ((val || new Date()).getSeconds() > 9 ? (val || new Date()).getSeconds() : "0" + (val || new Date()).getSeconds()) +
+    ".000Z"
+  return dateVal
+}
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     thumbContainer: {
@@ -41,6 +94,16 @@ const useStyles = makeStyles((theme: Theme) =>
         paddingBottom: 80,
       },
     },
+    datePicker: {
+      "& div": { paddingRight: 0, maxWidth: 175 },
+      "& p.MuiTypography-alignCenter": { textTransform: "capitalize" },
+      "& h4.MuiTypography-h4 ": { textTransform: "capitalize" },
+      "& span": { textTransform: "capitalize" },
+    },
+    datePickerDiv: {
+      "& h4.MuiTypography-h4": { textTransform: "capitalize" },
+      "& span.MuiPickersCalendarHeader-dayLabel": { textTransform: "capitalize" },
+    },
     backdrop: {
       zIndex: theme.zIndex.drawer + 1,
       color: "#fff",
@@ -108,16 +171,24 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     dialogueCurve: { borderRadius: 10, maxWidth: 400 },
     linkBlue: { color: "#6083E7", cursor: "pointer" },
+    dFlex: {
+      display: "flex",
+      [theme.breakpoints.down("xs")]: {
+        marginBottom: 16,
+      },
+    },
   })
 )
 
 // Perform event coalescing/grouping by sensor or activity type.
 async function getActivityEvents(
   participant: ParticipantObj,
   _activities: ActivityObj[],
-  _hidden: string[]
+  _hidden: string[],
+  from: number,
+  to: number
 ): Promise<{ [groupName: string]: ActivityEventObj[] }> {
-  let original = (await LAMP.ActivityEvent.allByParticipant(participant.id))
+  let original = (await LAMP.ActivityEvent.allByParticipant(participant.id, null, from, to))
     .map((x) => ({
       ...x,
       activity: _activities.find((y) => x.activity === y.id),
@@ -247,6 +318,8 @@ export default function Prevent({
   const [selectedActivities, setSelectedActivities] = React.useState([])
   const [selectedExperimental, setSelectedExperimental] = React.useState([])
   const [newEvent, setNewEvent] = React.useState(false)
+  const [startDate, setStartDate] = React.useState<number>()
+  const [endDate, setEndDate] = React.useState<number>()
 
   const setTabActivities = () => {
     let gActivities = allActivities.filter((x: any) => !!x?.category && x?.category.includes("prevent"))
@@ -268,11 +341,25 @@ export default function Prevent({
   }, [newEvent])
 
   React.useEffect(() => {
+    let currentDate = new Date()
+    let prevDate = new Date()
+    let endTime = currentDate.getTime()
+    prevDate.setMonth(prevDate.getMonth() - 3)
+    let startTime = prevDate.getTime()
+    setStartDate(startTime)
+    setEndDate(endTime)
     setNewEvent(activitySubmitted)
     setTabActivities()
     loadEvents()
   }, [])
 
+  useEffect(() => {
+    setLoading(true)
+    loadActivityEvents().then((res) => {
+      setLoading(false)
+    })
+  }, [startDate, endDate])
+
   const loadEvents = () => {
     ;(async () => {
       getSelected(participant, "lamp.selectedExperimental").then(setSelectedExperimental)
@@ -294,19 +381,26 @@ export default function Prevent({
     })
   }
 
-  const loadActivityEvents = () => {
+  const loadActivityEvents = async () => {
     let activities = allActivities
-    getActivityEvents(participant, activities, hiddenEvents).then((activityEvents) => {
-      let timeSpans = Object.fromEntries(Object.entries(activityEvents || {}).map((x) => [x[0], x[1][x[1].length - 1]]))
+    getActivityEvents(participant, activities, hiddenEvents, startDate, endDate).then((activityEvents) => {
       setActivityEvents(activityEvents)
-      let activityEventCount = getActivityEventCount(activityEvents)
-      setTimeSpans(timeSpans)
-      setActivityCounts(activityEventCount)
-      activities = activities.filter(
-        (activity) => activityEventCount[activity.name] > 0 && activity.spec !== "lamp.group" // && activity.spec !== "lamp.tips"
-      )
-      setActivities(activities)
-      setSelectedActivities(activities.map((activity) => activity.name))
+      setActivities([])
+      setTimeSpans([])
+      setSelectedActivities([])
+      if (Object.keys(activityEvents).length !== 0) {
+        let timeSpans = Object.fromEntries(
+          Object.entries(activityEvents || {}).map((x) => [x[0], x[1][x[1].length - 1]])
+        )
+        let activityEventCount = getActivityEventCount(activityEvents)
+        setTimeSpans(timeSpans)
+        setActivityCounts(activityEventCount)
+        activities = activities.filter(
+          (activity) => activityEventCount[activity.name] > 0 && activity.spec !== "lamp.group" // && activity.spec !== "lamp.tips"
+        )
+        setActivities(activities)
+        setSelectedActivities(activities.map((activity) => activity.name))
+      }
     })
   }
 
@@ -328,6 +422,12 @@ export default function Prevent({
     setOpen(false)
   }
 
+  const getSelectedLanguage = () => {
+    const matched_codes = Object.keys(locale_lang).filter((code) => code.startsWith(navigator.language))
+    const lang = matched_codes.length > 0 ? matched_codes[0] : "en-US"
+    return i18n.language ? i18n.language : userLanguages.includes(lang) ? lang : "en-US"
+  }
+
   return (
     <Container className={classes.thumbContainer}>
       <Backdrop className={classes.backdrop} open={loading}>
@@ -346,14 +446,68 @@ export default function Prevent({
       {!loading && (
         <Box>
           <Box className={classes.marginTop10}>
-            <Grid container xs={12} spacing={0} className={classes.activityhd}>
-              <Grid item xs className={classes.preventHeader}>
-                <Typography variant="h5">{`${t("Activity")}`}</Typography>
+            <Grid
+              container
+              direction="row"
+              xs={12}
+              spacing={0}
+              justifyContent="space-between"
+              className={classes.activityhd}
+            >
+              <Grid item className={classes.dFlex}>
+                <Box className={classes.preventHeader}>
+                  <Typography variant="h5">{`${t("Activity")}`}</Typography>
+                </Box>
+                <Box className={classes.addbtnmain}>
+                  <IconButton onClick={() => handleClickOpen(0)}>
+                    <Icon className={classes.addicon}>add_circle_outline</Icon>
+                  </IconButton>
+                </Box>
               </Grid>
-              <Grid item xs className={classes.addbtnmain}>
-                <IconButton onClick={() => handleClickOpen(0)}>
-                  <Icon className={classes.addicon}>add_circle_outline</Icon>
-                </IconButton>
+              <Grid>
+                <Stack spacing={2} direction="row" useFlexGap>
+                  <Box>
+                    <MuiPickersUtilsProvider locale={localeMap[getSelectedLanguage()]} utils={DateFnsUtils}>
+                      <KeyboardDatePicker
+                        clearable
+                        value={new Date(startDate)}
+                        onBlur={(event) => {
+                          setStartDate(new Date(event.target.value).getTime())
+                        }}
+                        onChange={(date) => {
+                          setStartDate(new Date(date).getTime())
+                        }}
+                        format="MM/dd/yyyy"
+                        animateYearScrolling
+                        variant="inline"
+                        inputVariant="outlined"
+                        className={classes.datePicker}
+                        size="small"
+                      />
+                    </MuiPickersUtilsProvider>
+                  </Box>
+                  <Box>
+                    <MuiPickersUtilsProvider locale={localeMap[getSelectedLanguage()]} utils={DateFnsUtils}>
+                      <KeyboardDatePicker
+                        clearable
+                        value={new Date(endDate)}
+                        onBlur={(event) => {
+                          const date = new Date(event.target.value)
+                          setEndDate(date.getTime())
+                        }}
+                        onChange={(date) => {
+                          setEndDate(date.getTime())
+                        }}
+                        format="MM/dd/yyyy"
+                        animateYearScrolling
+                        variant="inline"
+                        inputVariant="outlined"
+                        className={classes.datePicker}
+                        size="small"
+                      />
+                    </MuiPickersUtilsProvider>
+                  </Box>
+                </Stack>
               </Grid>
             </Grid>
             <Grid container spacing={2}>

diff --git a/src/components/PreventSelectedActivities.tsx b/src/components/PreventSelectedActivities.tsx
@@ -544,7 +544,9 @@ export default function PreventSelectedActivities({
                       />
                     )}
                   </Box>
-                  <Typography variant="h6">{timeAgo.format(timeSpans[activity.name]?.timestamp)}</Typography>
+                  <Typography variant="h6">
+                    {activity?.name && timeAgo.format(timeSpans[activity?.name]?.timestamp)}
+                  </Typography>
                 </Card>
               </ButtonBase>
             </Grid>