From c31f7b7c32e1012391e0399fe9698b582818b483 Mon Sep 17 00:00:00 2001
From: Timothy Jennison <tjennison@google.com>
Date: Mon, 21 Oct 2024 19:33:48 +0000
Subject: [PATCH] Add exclusion support to FilterableGroup UI

---
 ui/src/components/search.tsx        |   3 +
 ui/src/criteria/filterableGroup.tsx | 181 +++++++++++++++++++++-------
 2 files changed, 140 insertions(+), 44 deletions(-)

diff --git a/ui/src/components/search.tsx b/ui/src/components/search.tsx
index d6e3715c9..ae26cc7a8 100644
--- a/ui/src/components/search.tsx
+++ b/ui/src/components/search.tsx
@@ -19,6 +19,7 @@ export type SearchProps = {
   searchKey?: string;
   delayMs?: number;
 
+  disabled?: boolean;
   showSearchButton?: boolean;
 };
 
@@ -70,6 +71,7 @@ export function Search(props: SearchProps) {
           <form onSubmit={handleSubmit}>
             <Stack direction="row" justifyContent="center" alignItems="center">
               <TextField
+                disabled={props.disabled}
                 autoFocus
                 fullWidth
                 name="query"
@@ -87,6 +89,7 @@ export function Search(props: SearchProps) {
                   endAdornment: values.query?.length ? (
                     <InputAdornment position="end">
                       <IconButton
+                        disabled={props.disabled}
                         onClick={() => {
                           form.reset();
                           onSearch("");
diff --git a/ui/src/criteria/filterableGroup.tsx b/ui/src/criteria/filterableGroup.tsx
index 573d136d3..ddf4e4aee 100644
--- a/ui/src/criteria/filterableGroup.tsx
+++ b/ui/src/criteria/filterableGroup.tsx
@@ -1,5 +1,7 @@
 import AddIcon from "@mui/icons-material/Add";
+import ClearIcon from "@mui/icons-material/Clear";
 import DeleteIcon from "@mui/icons-material/Delete";
+import EditIcon from "@mui/icons-material/Edit";
 import FilterListIcon from "@mui/icons-material/FilterList";
 import Button from "@mui/material/Button";
 import IconButton from "@mui/material/IconButton";
@@ -11,6 +13,7 @@ import Typography from "@mui/material/Typography";
 import { CriteriaPlugin, generateId, registerCriteriaPlugin } from "cohort";
 import Checkbox from "components/checkbox";
 import Empty from "components/empty";
+import { containedIconButtonSx } from "components/iconButton";
 import Loading from "components/loading";
 import { Search } from "components/search";
 import { useSimpleDialog } from "components/simpleDialog";
@@ -188,6 +191,9 @@ function FilterableGroupEdit(props: FilterableGroupEditProps) {
   const [rowsPerPage, setRowsPerPage] = useState(25);
 
   const [filters, setFilters] = useState<ValueData[]>([]);
+  const [selectedExclusion, setSelectedExclusion] = useState<
+    string | undefined
+  >();
 
   const [unconfirmedChangesDialog, showUnconfirmedChangesDialog] =
     useSimpleDialog();
@@ -330,6 +336,7 @@ function FilterableGroupEdit(props: FilterableGroupEditProps) {
           >
             <Search
               placeholder="Search variants"
+              disabled={!!selectedExclusion}
               onSearch={(query: string) => {
                 updateSearchState((data: SearchState) => {
                   data.query = query;
@@ -349,48 +356,62 @@ function FilterableGroupEdit(props: FilterableGroupEditProps) {
             {instancesState.data?.length && instancesState.data?.[0]?.total ? (
               <GridLayout rows fillRow={1}>
                 <GridLayout cols spacing={2} sx={{ px: 5 }}>
-                  <FilterButton
-                    hintData={instancesState.data?.[0]?.hintData}
-                    entity={entityGroup.selectionEntity.name}
-                    config={props.config}
-                    filters={filters}
-                    setFilters={setFilters}
-                  />
-                  <Tooltip
-                    title={
-                      !selectAllEnabled
-                        ? "Number of results must be between 25 and 10,000 to Select all. For results less than 25, selections must be made individually."
-                        : ""
-                    }
-                  >
-                    <span>
-                      <Button
-                        variant="outlined"
-                        disabled={!selectAllEnabled}
-                        endIcon={<AddIcon />}
-                        onClick={() =>
-                          updateLocalCriteria((data) => {
-                            data.selected.push({
-                              id: generateId(),
-                              all: {
-                                query: searchState?.query ?? "",
-                                values: filters,
-                                exclusions: [],
-                              },
-                            });
-                          })
-                        }
-                      >
-                        Select all
-                      </Button>
-                    </span>
-                  </Tooltip>
+                  {!selectedExclusion ? (
+                    <FilterButton
+                      hintData={instancesState.data?.[0]?.hintData}
+                      entity={entityGroup.selectionEntity.name}
+                      config={props.config}
+                      filters={filters}
+                      setFilters={setFilters}
+                    />
+                  ) : null}
+                  {!selectedExclusion ? (
+                    <Tooltip
+                      title={
+                        !selectAllEnabled
+                          ? "Number of results must be between 25 and 10,000 to Select all. For results less than 25, selections must be made individually."
+                          : ""
+                      }
+                    >
+                      <span>
+                        <Button
+                          variant="outlined"
+                          disabled={!selectAllEnabled}
+                          endIcon={<AddIcon />}
+                          onClick={() =>
+                            updateLocalCriteria((data) => {
+                              data.selected.push({
+                                id: generateId(),
+                                all: {
+                                  query: searchState?.query ?? "",
+                                  values: filters,
+                                  exclusions: [],
+                                },
+                              });
+                            })
+                          }
+                        >
+                          Select all
+                        </Button>
+                      </span>
+                    </Tooltip>
+                  ) : null}
+                  {selectedExclusion ? (
+                    <Button
+                      variant="contained"
+                      onClick={() => setSelectedExclusion(undefined)}
+                    >
+                      Confirm exclusions
+                    </Button>
+                  ) : null}
                 </GridLayout>
                 {instancesState.data[currentPage] ? (
                   <ResultsPage
                     columns={columns}
                     nodes={instancesState.data[currentPage].nodes}
                     selectedSet={selectedSet}
+                    selectedExclusion={selectedExclusion}
+                    localCriteria={localCriteria}
                     updateLocalCriteria={updateLocalCriteria}
                   />
                 ) : null}
@@ -459,6 +480,7 @@ function FilterableGroupEdit(props: FilterableGroupEditProps) {
                                 {selectionTitle(s)}
                               </Typography>
                               <IconButton
+                                disabled={!!selectedExclusion}
                                 onClick={() =>
                                   updateLocalCriteria((data) => {
                                     data.selected.splice(i, 1);
@@ -472,6 +494,21 @@ function FilterableGroupEdit(props: FilterableGroupEditProps) {
                               <SelectAllStats
                                 config={props.config}
                                 selectAll={s.all}
+                                selected={s.id === selectedExclusion}
+                                setSelected={(selected: boolean) => {
+                                  const all = s.all;
+
+                                  setSelectedExclusion(
+                                    selected ? s.id : undefined
+                                  );
+                                  if (selected && all) {
+                                    updateSearchState((data: SearchState) => {
+                                      data.query = all.query;
+                                    });
+
+                                    setFilters(all.values);
+                                  }
+                                }}
                               />
                             ) : null}
                           </GridLayout>
@@ -508,6 +545,8 @@ type ResultsPageProps = {
   columns: TreeGridColumn[];
   nodes: EntityNode[];
   selectedSet: Set<DataKey>;
+  selectedExclusion?: string;
+  localCriteria: Data;
   updateLocalCriteria: (fn: (data: Data) => void) => void;
 };
 
@@ -517,17 +556,52 @@ function ResultsPage(props: ResultsPageProps) {
     "key"
   );
 
+  const selectAll = useMemo(() => {
+    return props.localCriteria.selected.find(
+      (s) => s.id === props.selectedExclusion
+    )?.all;
+  }, [props.localCriteria, props.selectedExclusion]);
+
   return (
     <TreeGrid
       columns={props.columns}
       data={data}
       rowCustomization={(key: TreeGridId, rowData: TreeGridRowData) => {
-        const found = !!props.selectedSet.has(key);
+        const found = selectAll
+          ? !!selectAll.exclusions.find((e) => e.key === key)
+          : props.selectedSet.has(key);
+        const newSelection = {
+          key,
+          name: String(rowData[props.columns[0].key] ?? "Unknown"),
+        };
 
         return [
           {
             column: 0,
-            prefixElements: (
+            prefixElements: selectAll ? (
+              <IconButton
+                color={!found ? "error" : undefined}
+                sx={found ? containedIconButtonSx("error") : undefined}
+                onClick={() => {
+                  props.updateLocalCriteria((data) => {
+                    const all = data.selected.find(
+                      (s) => s.id === props.selectedExclusion
+                    )?.all;
+                    if (all) {
+                      if (found) {
+                        all.exclusions = all.exclusions.filter(
+                          (e) => e.key !== key
+                        );
+                      } else {
+                        all.exclusions.push(newSelection);
+                      }
+                    }
+                  });
+                }}
+              >
+                <ClearIcon fontSize="small" />
+              </IconButton>
+            ) : (
               <Checkbox
                 size="small"
                 fontSize="inherit"
@@ -541,12 +615,7 @@ function ResultsPage(props: ResultsPageProps) {
                     } else {
                       data.selected.push({
                         id: generateId(),
-                        single: {
-                          key,
-                          name: String(
-                            rowData[props.columns[0].key] ?? "Unknown"
-                          ),
-                        },
+                        single: newSelection,
                       });
                     }
                   });
@@ -629,6 +698,8 @@ function FilterButton(props: FilterButtonProps) {
 type SelectAllStatsProps = {
   config: configProto.FilterableGroup;
   selectAll: SelectAll;
+  selected?: boolean;
+  setSelected?: (selected: boolean) => void;
 };
 
 function SelectAllStats(props: SelectAllStatsProps) {
@@ -656,6 +727,28 @@ function SelectAllStats(props: SelectAllStatsProps) {
           </Typography>
         );
       })}
+      <GridLayout cols rowAlign="middle">
+        {props.setSelected ? (
+          <IconButton
+            sx={props.selected ? containedIconButtonSx("primary") : undefined}
+            onClick={() => {
+              if (props.setSelected) {
+                props.setSelected(!props.selected);
+              }
+            }}
+          >
+            <EditIcon fontSize="small" />
+          </IconButton>
+        ) : null}
+        <Typography variant="body2em">
+          {"Exclusions: "}
+          <Typography variant="body2" component="span">
+            {props.selectAll.exclusions.length
+              ? props.selectAll.exclusions.map((e) => e.name).join(", ")
+              : "None"}
+          </Typography>
+        </Typography>
+      </GridLayout>
     </GridLayout>
   );
 }