Move total participant count to right side

DataBiosphere · Nov 20, 2024 · d284d54 · d284d54
1 parent aa9aa83
commit d284d54
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 46 deletions.
diff --git a/ui/src/demographicCharts.tsx b/ui/src/demographicCharts.tsx
@@ -1,13 +1,10 @@
 import Paper from "@mui/material/Paper";
 import Typography from "@mui/material/Typography";
-import Loading from "components/loading";
 import { Cohort } from "data/source";
-import { useStudySource } from "data/studySourceContext";
-import { useStudyId, useUnderlay } from "hooks";
+import { useUnderlay } from "hooks";
 import { GridBox } from "layout/gridBox";
 import GridLayout from "layout/gridLayout";
-import { ReactNode, useCallback } from "react";
-import useSWRImmutable from "swr/immutable";
+import { ReactNode } from "react";
 import { VizContainer } from "viz/vizContainer";
 
 export type DemographicChartsProps = {
@@ -17,35 +14,6 @@ export type DemographicChartsProps = {
 
 export function DemographicCharts(props: DemographicChartsProps) {
   const underlay = useUnderlay();
-  const studyId = useStudyId();
-  const studySource = useStudySource();
-
-  const fetchCount = useCallback(async () => {
-    if (!props.cohort) {
-      return 0;
-    }
-
-    return (
-      (
-        await studySource.cohortCount(
-          studyId,
-          props.cohort.id,
-          undefined,
-          undefined,
-          []
-        )
-      )?.[0]?.count ?? 0
-    );
-  }, [underlay, props.cohort]);
-
-  const countState = useSWRImmutable(
-    {
-      component: "DemographicCharts",
-      underlayName: underlay.name,
-      cohort: props.cohort,
-    },
-    fetchCount
-  );
 
   return (
     <Paper
@@ -56,16 +24,7 @@ export function DemographicCharts(props: DemographicChartsProps) {
     >
       <GridLayout rows spacing={2}>
         <GridLayout cols fillCol={1} rowAlign="middle">
-          <GridLayout rows>
-            <Typography variant="h6">Cohort visualizations</Typography>
-            <GridLayout cols fillCol={2} rowAlign="bottom">
-              <Loading size="small" status={countState}>
-                <Typography variant="body1">
-                  {countState.data?.toLocaleString()} participants
-                </Typography>
-              </Loading>
-            </GridLayout>
-          </GridLayout>
+          <Typography variant="h6">Cohort visualizations</Typography>
           <GridBox />
           {props.extraControls}
         </GridLayout>

diff --git a/ui/src/overview.tsx b/ui/src/overview.tsx
@@ -152,7 +152,6 @@ export function Overview() {
             extraControls={
               <Button
                 variant="outlined"
-                size="large"
                 component={RouterLink}
                 to={absoluteCohortReviewListURL(params, cohort.id)}
               >
@@ -188,10 +187,43 @@ function GroupDivider() {
 function GroupList() {
   const context = useCohortContext();
   const cohort = useCohort();
+  const studyId = useStudyId();
+  const studySource = useStudySource();
+
+  const fetchCount = useCallback(async () => {
+    return (
+      (
+        await studySource.cohortCount(
+          studyId,
+          cohort.id,
+          undefined,
+          undefined,
+          []
+        )
+      )?.[0]?.count ?? 0
+    );
+  }, [studyId, cohort]);
+
+  const countState = useSWRImmutable(
+    {
+      component: "Overview",
+      studyId,
+      cohort,
+    },
+    fetchCount
+  );
 
   return (
     <GridLayout rows spacing={2} height="auto">
-      <Typography variant="h6">Cohort filter</Typography>
+      <GridLayout cols fillCol={1} rowAlign="baseline">
+        <Typography variant="h6">Cohort filter</Typography>
+        <GridBox />
+        <Loading size="small" status={countState}>
+          <Typography variant="body1">
+            {countState.data?.toLocaleString()} participants
+          </Typography>
+        </Loading>
+      </GridLayout>
       {cohort.groupSections.map((s, index) => (
         <GridLayout key={s.id} rows spacing={2} height="auto">
           {index !== 0 ? <GroupDivider /> : null}