Loading changes for portal screen

BIDMCDigitalPsychiatry · Jun 24, 2024 · c3964d0 · c3964d0
1 parent 5a518f7
commit c3964d0
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 72 deletions.
diff --git a/src/components/NavigationLayout.tsx b/src/components/NavigationLayout.tsx
@@ -246,7 +246,9 @@ export default function NavigationLayout({
       } else {
         setLoading(false)
       }
-      refresh()
+      if (!!isMounted) {
+        refresh()
+      }
     }
     return () => {
       isMounted = false

diff --git a/src/components/Participant.tsx b/src/components/Participant.tsx
@@ -260,7 +260,7 @@ export default function Participant({
 
   return (
     <React.Fragment>
-      <Backdrop className={classes.backdrop} open={loading}>
+      <Backdrop className={classes.backdrop} open={activities == null || loading}>
         <CircularProgress color="inherit" />
       </Backdrop>
       {activities !== null && !loading && (

diff --git a/src/components/Prevent.tsx b/src/components/Prevent.tsx
@@ -254,9 +254,9 @@ export default function Prevent({
     if (gActivities.length > 0) {
       Service.getAllTags("activitytags").then((data) => {
         setTag((data || []).filter((x: any) => !!x?.category && x?.category.includes("prevent")))
-        setLoading(false)
       })
     }
+    setLoading(false)
   }
 
   React.useEffect(() => {
@@ -279,7 +279,6 @@ export default function Prevent({
       let disabled =
         ((await LAMP.Type.getAttachment(participant.id, "lamp.dashboard.disable_data")) as any)?.data ?? false
       if (!disabled) await loadActivityEvents()
-
       loadVisualizations()
     })()
   }
@@ -292,7 +291,6 @@ export default function Prevent({
         .reduce((prev, curr) => ({ ...prev, [curr]: 1 }), {})
       setVisualCounts(Object.assign({}, visualizationCount))
       setCortex(Object.keys(data).map((x) => x.replace("lamp.dashboard.experimental.", "")))
-      setLoading(false)
     })
   }
 

diff --git a/src/components/PreventSelectedActivities.tsx b/src/components/PreventSelectedActivities.tsx
@@ -212,13 +212,29 @@ export const strategies = {
 
   "lamp.spin_wheel": (slices, activity, scopedItem) => slices[slices.length - 1]?.type ?? 0,
   "lamp.jewels_a": (slices, activity, scopedItem) =>
-    (parseInt(slices.score ?? 0).toFixed(1) || 0) > 100 ? 100 : parseInt(slices.score ?? 0).toFixed(1) || 0,
+    slices.score == "NaN"
+      ? 0
+      : (parseInt(slices.score ?? 0).toFixed(1) || 0) > 100
+      ? 100
+      : parseInt(slices.score ?? 0).toFixed(1) || 0,
   "lamp.jewels_b": (slices, activity, scopedItem) =>
-    (parseInt(slices.score ?? 0).toFixed(1) || 0) > 100 ? 100 : parseInt(slices.score ?? 0).toFixed(1) || 0,
+    slices.score == "NaN"
+      ? 0
+      : (parseInt(slices.score ?? 0).toFixed(1) || 0) > 100
+      ? 100
+      : parseInt(slices.score ?? 0).toFixed(1) || 0,
   "lamp.symbol_digit_substitution": (slices, activity, scopedItem) =>
-    (parseInt(slices.score ?? 0).toFixed(1) || 0) > 100 ? 100 : parseInt(slices.score ?? 0).toFixed(1) || 0,
+    slices.score == "NaN"
+      ? 0
+      : (parseInt(slices.score ?? 0).toFixed(1) || 0) > 100
+      ? 100
+      : parseInt(slices.score ?? 0).toFixed(1) || 0,
   "lamp.spatial_span": (slices, activity, scopedItem) =>
-    (parseInt(slices.score ?? 0).toFixed(1) || 0) > 100 ? 100 : parseInt(slices.score ?? 0).toFixed(1) || 0,
+    slices.score == "NaN"
+      ? 0
+      : (parseInt(slices.score ?? 0).toFixed(1) || 0) > 100
+      ? 100
+      : parseInt(slices.score ?? 0).toFixed(1) || 0,
   "lamp.balloon_risk": (slices, activity, scopedItem) => parseInt(slices.points ?? 0).toFixed(1) || 0,
   "lamp.pop_the_bubbles": (slices, activity, scopedItem) => {
     let temporalSlices = slices.filter(function (data) {
@@ -459,72 +475,74 @@ export default function PreventSelectedActivities({
                     )} */}
                   </Typography>
                   <Box className={classes.maxw300}>
-                    <VegaLite
-                      actions={false}
-                      style={{ backgroundColor: "#00000000" }}
-                      spec={{
-                        data: {
-                          values: activityEvents?.[activity.name]?.map((d) => ({
-                            x: new Date(d.timestamp),
-                            y: strategies[activity.spec]
-                              ? strategies[activity.spec](
-                                  activity.spec === "lamp.survey" ||
-                                    activity.spec === "lamp.pop_the_bubbles" ||
-                                    activity.spec === "lamp.maze_game" ||
-                                    activity.spec === "lamp.emotion_recognition"
-                                    ? d?.temporal_slices ?? d["temporal_slices"]
-                                    : activity.spec === "lamp.scratch_image" ||
-                                      activity.spec === "lamp.breathe" ||
-                                      activity.spec === "lamp.tips"
-                                    ? d
-                                    : d.static_data,
-                                  activity,
-                                  undefined
-                                )
-                              : 0,
-                          })),
-                        },
-                        width: 300,
-                        height: 70,
-                        background: "#00000000",
-                        config: {
-                          view: { stroke: "transparent" },
-                          title: {
-                            color: "rgba(0, 0, 0, 0.75)",
-                            fontSize: 25,
-                            font: "Inter",
-                            fontWeight: 600,
-                            align: "left",
-                            anchor: "start",
-                          },
-                          legend: {
-                            title: null,
-                            orient: "bottom",
-                            columns: 2,
-                            labelColor: "rgba(0, 0, 0, 0.75)",
-                            labelFont: "Inter",
-                            labelFontSize: 14,
-                            labelFontWeight: 600,
-                            symbolStrokeWidth: 12,
-                            symbolSize: 150,
-                            symbolType: "circle",
-                            offset: 0,
+                    {!!activityEvents?.[activity.name] && (
+                      <VegaLite
+                        actions={false}
+                        style={{ backgroundColor: "#00000000" }}
+                        spec={{
+                          data: {
+                            values: activityEvents?.[activity.name]?.map((d) => ({
+                              x: new Date(d.timestamp),
+                              y: strategies[activity.spec]
+                                ? strategies[activity.spec](
+                                    activity.spec === "lamp.survey" ||
+                                      activity.spec === "lamp.pop_the_bubbles" ||
+                                      activity.spec === "lamp.maze_game" ||
+                                      activity.spec === "lamp.emotion_recognition"
+                                      ? d?.temporal_slices ?? d["temporal_slices"]
+                                      : activity.spec === "lamp.scratch_image" ||
+                                        activity.spec === "lamp.breathe" ||
+                                        activity.spec === "lamp.tips"
+                                      ? d
+                                      : d.static_data,
+                                    activity,
+                                    undefined
+                                  )
+                                : 0,
+                            })),
                           },
-                          axisX: {
-                            disable: true,
+                          width: 300,
+                          height: 70,
+                          background: "#00000000",
+                          config: {
+                            view: { stroke: "transparent" },
+                            title: {
+                              color: "rgba(0, 0, 0, 0.75)",
+                              fontSize: 25,
+                              font: "Inter",
+                              fontWeight: 600,
+                              align: "left",
+                              anchor: "start",
+                            },
+                            legend: {
+                              title: null,
+                              orient: "bottom",
+                              columns: 2,
+                              labelColor: "rgba(0, 0, 0, 0.75)",
+                              labelFont: "Inter",
+                              labelFontSize: 14,
+                              labelFontWeight: 600,
+                              symbolStrokeWidth: 12,
+                              symbolSize: 150,
+                              symbolType: "circle",
+                              offset: 0,
+                            },
+                            axisX: {
+                              disable: true,
+                            },
+                            axisY: {
+                              disable: true,
+                            },
                           },
-                          axisY: {
-                            disable: true,
+                          mark: { type: "line", interpolate: "cardinal", tension: 0.8, color: "#3C5DDD" },
+                          encoding: {
+                            x: { field: "x", type: "ordinal", timeUnit: "utcyearmonthdate" },
+                            y: { field: "y", type: "quantitative" },
+                            strokeWidth: { value: 2 },
                           },
-                        },
-                        mark: { type: "line", interpolate: "cardinal", tension: 0.8, color: "#3C5DDD" },
-                        encoding: {
-                          x: { field: "x", type: "ordinal", timeUnit: "utcyearmonthdate" },
-                          y: { field: "y", type: "quantitative" },
-                          strokeWidth: { value: 2 },
-                        },
-                      }}
-                    />
+                        }}
+                      />
+                    )}
                   </Box>
                   <Typography variant="h6">{timeAgo.format(timeSpans[activity.name]?.timestamp)}</Typography>
                 </Card>