Resize export radio buttons and fix empty cohort summaries

DataBiosphere · Sep 11, 2024 · 9784441 · 9784441
1 parent 8e16da1
commit 9784441
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 42 deletions.
diff --git a/ui/src/cohortSummary.tsx b/ui/src/cohortSummary.tsx
@@ -13,51 +13,64 @@ export type CohortSummaryProps = {
 };
 
 export function CohortSummary(props: CohortSummaryProps) {
+  let hasCriteria = false;
+  props.cohort?.groupSections?.forEach((gs) => {
+    gs.groups.forEach((g) => {
+      if (g.criteria.length) {
+        hasCriteria = true;
+      }
+    });
+  });
+
   return (
     <GridLayout rows height="auto">
-      {props.cohort.groupSections.map((s, si) => (
-        <GridLayout key={s.id} rows height="auto">
-          <Typography
-            variant="body2em"
-            component="p"
-            sx={{ "::first-letter": { textTransform: "capitalize" } }}
-          >
-            {si != 0 ? "and " : ""}
-            {s.filter.excluded ? "exclude " : "include "}participants with
-            {s.filter.kind === GroupSectionFilterKind.Any ? " any " : " all "}
-            of the following criteria:
-          </Typography>
-          {s.groups.map((g, gi) => (
-            <GridBox key={g.id} sx={{ height: "auto" }}>
-              <Typography variant="body2" component="span">
-                {getCriteriaTitleFull(g.criteria[0])}
-              </Typography>
-              {g.criteria.length > 1 ? (
-                <span>
+      {!hasCriteria ? (
+        <Typography variant="body2em">All participants</Typography>
+      ) : (
+        props.cohort.groupSections.map((s, si) => (
+          <GridLayout key={s.id} rows height="auto">
+            <Typography
+              variant="body2em"
+              component="p"
+              sx={{ "::first-letter": { textTransform: "capitalize" } }}
+            >
+              {si != 0 ? "and " : ""}
+              {s.filter.excluded ? "exclude " : "include "}participants with
+              {s.filter.kind === GroupSectionFilterKind.Any ? " any " : " all "}
+              of the following criteria:
+            </Typography>
+            {s.groups.map((g, gi) => (
+              <GridBox key={g.id} sx={{ height: "auto" }}>
+                <Typography variant="body2" component="span">
+                  {getCriteriaTitleFull(g.criteria[0])}
+                </Typography>
+                {g.criteria.length > 1 ? (
+                  <span>
+                    <Typography variant="body2em" component="span">
+                      {" where "}
+                    </Typography>
+                    <Typography variant="body2" component="span">
+                      {g.criteria
+                        .slice(1)
+                        .map((c) =>
+                          getCriteriaTitle(c, getCriteriaPlugin(c, g.entity))
+                        )
+                        .join(", ")}
+                    </Typography>
+                  </span>
+                ) : null}
+                {gi != s.groups.length - 1 ? (
                   <Typography variant="body2em" component="span">
-                    {" where "}
+                    {s.filter.kind === GroupSectionFilterKind.Any
+                      ? " or "
+                      : " and "}
                   </Typography>
-                  <Typography variant="body2" component="span">
-                    {g.criteria
-                      .slice(1)
-                      .map((c) =>
-                        getCriteriaTitle(c, getCriteriaPlugin(c, g.entity))
-                      )
-                      .join(", ")}
-                  </Typography>
-                </span>
-              ) : null}
-              {gi != s.groups.length - 1 ? (
-                <Typography variant="body2em" component="span">
-                  {s.filter.kind === GroupSectionFilterKind.Any
-                    ? " or "
-                    : " and "}
-                </Typography>
-              ) : null}
-            </GridBox>
-          ))}
-        </GridLayout>
-      ))}
+                ) : null}
+              </GridBox>
+            ))}
+          </GridLayout>
+        ))
+      )}
     </GridLayout>
   );
 }
diff --git a/ui/src/export.tsx b/ui/src/export.tsx
@@ -860,11 +860,12 @@ function ExportDialog(
       <DialogContent>
         {stage === ExportDialogStage.MODEL_SELECT ? (
           <Loading status={exportModelsState}>
-            <FormControl>
+            <FormControl sx={{ width: "100%" }}>
               <RadioGroup
                 value={model?.id ?? ""}
                 onChange={onSelectModel}
                 sx={{
+                  width: "100%",
                   gap: 1,
                 }}
               >