Fix several small issues on the cohort overiew

* Swap cohort criteria to left side. Make the visualizations secondary until they're interactive enough to be the primary editing surface. * Make the cohort criteria wider. Almost all criteria were too long to be effectively displayed. * Remove interactivity from the background of criteria so only the title selects/unselects. It was causing a number of corner cases where criteria controls behaved unpredictably and some were difficult to solve due to the way JS handles mouse events. This removes the need to squash mouse events throughout the code. Show title hover underlining on selected criteria as well to make it clear it's still clickable. * Refactor uncontained select style to a shared file. * Fix rare issue were criteria buttons could spill onto a second row. * Add a drop down to select which visualizations are displayed. Add optional config to limit the default set displayed.
DataBiosphere · Jan 14, 2025 · 74d803c · 74d803c
1 parent 59bfd4b
commit 74d803c
Show file tree

Hide file tree

Showing 10 changed files with 170 additions and 177 deletions.
diff --git a/ui/src/components/hintDataSelect.tsx b/ui/src/components/hintDataSelect.tsx
@@ -58,15 +58,7 @@ export function HintDataSelect(props: HintDataSelectProps) {
   };
 
   return (
-    <FormControl
-      onClick={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      }}
-      onMouseUp={(e) => {
-        e.stopPropagation();
-      }}
-    >
+    <FormControl>
       <Select
         multiple
         displayEmpty
@@ -81,15 +73,7 @@ export function HintDataSelect(props: HintDataSelectProps) {
                   <Chip
                     key={s}
                     label={s}
-                    onMouseDown={(e) => {
-                      e.stopPropagation();
-                      e.preventDefault();
-                    }}
-                    onMouseUp={(e) => {
-                      e.stopPropagation();
-                    }}
-                    onDelete={(e) => {
-                      e.stopPropagation();
+                    onDelete={() => {
                       onDelete(s);
                     }}
                   />

diff --git a/ui/src/components/rangeSlider.tsx b/ui/src/components/rangeSlider.tsx
@@ -86,10 +86,6 @@ export function RangeSlider(props: RangeSliderProps) {
         height: "auto",
         mt: 0.5,
       }}
-      onClick={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      }}
     >
       <GridLayout cols fillCol={1} spacing={3} height="auto">
         <Input

diff --git a/ui/src/components/select.tsx b/ui/src/components/select.tsx
@@ -0,0 +1,17 @@
+import { Theme } from "@mui/material/styles";
+
+export function uncontainedSelectSx() {
+  return {
+    color: (theme: Theme) => theme.palette.primary.main,
+    "& .MuiOutlinedInput-input": {
+      px: 0,
+      py: "2px",
+    },
+    "& .MuiSelect-select": (theme: Theme) => ({
+      ...theme.typography.body2,
+    }),
+    "& .MuiOutlinedInput-notchedOutline": {
+      borderStyle: "none",
+    },
+  };
+}
diff --git a/ui/src/criteria/textSearch.tsx b/ui/src/criteria/textSearch.tsx
@@ -193,16 +193,7 @@ function TextSearchInline(props: TextSearchInlineProps) {
   return (
     <Loading status={hintDataState}>
       {!!hintDataState.data?.hintData?.enumHintOptions ? (
-        <FormControl
-          sx={{ maxWidth: 500 }}
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-          }}
-          onMouseUp={(e) => {
-            e.stopPropagation();
-          }}
-        >
+        <FormControl sx={{ maxWidth: 500 }}>
           <GridLayout rows spacing={1} height="auto">
             <TextField
               label="Search text"
@@ -224,15 +215,7 @@ function TextSearchInline(props: TextSearchInlineProps) {
                       <Chip
                         key={c}
                         label={c}
-                        onMouseDown={(e) => {
-                          e.stopPropagation();
-                          e.preventDefault();
-                        }}
-                        onMouseUp={(e) => {
-                          e.stopPropagation();
-                        }}
-                        onDelete={(e) => {
-                          e.stopPropagation();
+                        onDelete={() => {
                           onDelete(c);
                         }}
                       />

diff --git a/ui/src/criteria/unhintedValue.tsx b/ui/src/criteria/unhintedValue.tsx
@@ -168,15 +168,7 @@ function UnhintedValueInline(props: UnhintedValueInlineProps) {
 
   return (
     <GridLayout rows height="auto">
-      <FormControl
-        onClick={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-        }}
-        onMouseUp={(e) => {
-          e.stopPropagation();
-        }}
-      >
+      <FormControl>
         <Select
           value={decodedData.operator}
           input={<OutlinedInput />}
@@ -195,7 +187,6 @@ function UnhintedValueInline(props: UnhintedValueInlineProps) {
           size="medium"
           onChange={handleMinInputChange}
           onBlur={handleMinInputBlur}
-          onClick={(e) => e.stopPropagation()}
           inputProps={{
             type: "number",
           }}
@@ -208,7 +199,6 @@ function UnhintedValueInline(props: UnhintedValueInlineProps) {
               size="medium"
               onChange={handleMaxInputChange}
               onBlur={handleMaxInputBlur}
-              onClick={(e) => e.stopPropagation()}
               inputProps={{
                 type: "number",
               }}

diff --git a/ui/src/criteria/valueData.tsx b/ui/src/criteria/valueData.tsx
@@ -254,15 +254,7 @@ export function ValueDataEdit(props: ValueDataEditProps) {
           <Typography variant="body2">{props.title}</Typography>
           <Loading status={hintDataState} size="small">
             {hasHints ? (
-              <GridBox
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                }}
-                onMouseUp={(e) => {
-                  e.stopPropagation();
-                }}
-              >
+              <GridBox>
                 <Typography variant="body2">
                   <IconButton
                     sx={
@@ -289,15 +281,7 @@ export function ValueDataEdit(props: ValueDataEditProps) {
         {hasHints && (!props.title || isValid(props.valueData)) ? (
           <GridLayout rows height="auto">
             {!!valueDataList.length && props.singleValue ? (
-              <FormControl
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                }}
-                onMouseUp={(e) => {
-                  e.stopPropagation();
-                }}
-              >
+              <FormControl>
                 <Select
                   value={valueDataList[0].attribute}
                   input={<OutlinedInput />}

diff --git a/ui/src/demographicCharts.tsx b/ui/src/demographicCharts.tsx
@@ -1,11 +1,19 @@
+import MenuItem from "@mui/material/MenuItem";
+import OutlinedInput from "@mui/material/OutlinedInput";
+import Select, { SelectChangeEvent } from "@mui/material/Select";
+import FormControl from "@mui/material/FormControl";
 import Paper from "@mui/material/Paper";
 import Typography from "@mui/material/Typography";
+import { uncontainedSelectSx } from "components/select";
 import { Cohort } from "data/source";
 import { useUnderlay } from "hooks";
 import { GridBox } from "layout/gridBox";
 import GridLayout from "layout/gridLayout";
 import { ReactNode } from "react";
 import { VizContainer } from "viz/vizContainer";
+import { useState } from "react";
+import Empty from "components/empty";
+import { Underlay } from "underlaysSlice";
 
 export type DemographicChartsProps = {
   cohort?: Cohort;
@@ -15,6 +23,23 @@ export type DemographicChartsProps = {
 export function DemographicCharts(props: DemographicChartsProps) {
   const underlay = useUnderlay();
 
+  const [selectedVisualizations, setSelectedVisualizations] = useState(
+    getInitialVisualizations(underlay)
+  );
+
+  const onSelect = (event: SelectChangeEvent<string[]>) => {
+    const {
+      target: { value: sel },
+    } = event;
+    if (typeof sel === "string") {
+      // This case is only for selects with text input.
+      return;
+    }
+
+    setSelectedVisualizations(sel);
+    storeSelectedVisualizations(underlay.name, sel);
+  };
+
   return (
     <Paper
       sx={{
@@ -23,9 +48,30 @@ export function DemographicCharts(props: DemographicChartsProps) {
       }}
     >
       <GridLayout rows spacing={2}>
-        <GridLayout cols fillCol={1} rowAlign="middle">
+        <GridLayout cols fillCol={0} spacing={1} rowAlign="middle">
           <Typography variant="h6">Cohort visualizations</Typography>
-          <GridBox />
+          <FormControl>
+            <Select
+              fullWidth
+              multiple
+              displayEmpty
+              value={selectedVisualizations}
+              input={<OutlinedInput />}
+              renderValue={(sel) => (
+                <Typography variant="body2">{`${sel.length} visualizations selected`}</Typography>
+              )}
+              onChange={onSelect}
+              sx={uncontainedSelectSx()}
+            >
+              {underlay.visualizations.map((viz) => {
+                return (
+                  <MenuItem key={viz.name} value={viz.name}>
+                    {viz.title ?? "Unknown"}
+                  </MenuItem>
+                );
+              })}
+            </Select>
+          </FormControl>
           {props.extraControls}
         </GridLayout>
         <GridBox
@@ -38,13 +84,56 @@ export function DemographicCharts(props: DemographicChartsProps) {
             gridGap: (theme) => theme.spacing(3),
           }}
         >
-          {underlay.visualizations.map((v) =>
-            props.cohort ? (
-              <VizContainer key={v.name} config={v} cohort={props.cohort} />
-            ) : null
+          {selectedVisualizations.length > 0 ? (
+            underlay.visualizations.map((v) =>
+              selectedVisualizations.find((sv) => sv === v.name) &&
+              props.cohort ? (
+                <VizContainer key={v.name} config={v} cohort={props.cohort} />
+              ) : null
+            )
+          ) : (
+            <Empty
+              maxWidth="90%"
+              minHeight="200px"
+              title="No visualizations selected"
+            />
           )}
         </GridBox>
       </GridLayout>
     </Paper>
   );
 }
+
+// TODO(tjennison): Store the selected visualizations in local storage per
+// underlay for now.  Longer term, these should be stored on the backend but
+// there a few options about whether they should be stored attached to the
+// cohort, study, user, etc. as part of the visualiation changes.
+function storageKey(underlay: string) {
+  return `tanagra-selected-visualizations-${underlay}`;
+}
+
+function loadSelectedVisualizations(underlay: string): string[] | undefined {
+  const stored = localStorage.getItem(storageKey(underlay));
+  if (!stored) {
+    return undefined;
+  }
+  return JSON.parse(stored);
+}
+
+function storeSelectedVisualizations(underlay: string, sel: string[]) {
+  localStorage.setItem(storageKey(underlay), JSON.stringify(sel));
+}
+
+function getInitialVisualizations(underlay: Underlay) {
+  const stored = loadSelectedVisualizations(underlay.name);
+  if (!stored) {
+    return (
+      underlay.uiConfiguration.defaultVisualizations ??
+      underlay.visualizations.map((viz) => viz.name)
+    );
+  }
+
+  return stored.filter((v) =>
+    underlay.visualizations.find((viz) => viz.name === v)
+  );
+}