Feature/sckan 391

frontend/src/components/Filters/FilterDrawer.tsx

@@ -1,61 +1,74 @@
-import React, { useState } from "react";
+import React, {useState} from "react";
 import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
 import Button from "@mui/material/Button";
 import CloseIcon from "@mui/icons-material/Close";
 import IconButton from "@mui/material/IconButton";
 import Typography from "@mui/material/Typography";
-import Divider from "@mui/material/Divider";
-import { tags } from "../../services/TagService";
+import {tags} from "../../services/TagService";
+import {mapStateFilterSelectionToCheckbox, mapTagFilterSelectionToCheckbox,} from "../../helpers/helpers";
+import {useAppDispatch} from "../../redux/hooks";
 import {
-  mapStateFilterSelectionToCheckbox,
-  mapTagFilterSelectionToCheckbox,
-} from "../../helpers/helpers";
-import { useAppDispatch } from "../../redux/hooks";
-import {
-  ComposerSentenceListStateEnum as sentenceStates,
   ComposerConnectivityStatementListStateEnum as statementStates,
+  ComposerSentenceListStateEnum as sentenceStates,
 } from "../../apiclient/backend/api";
-import { setFilters as setSentenceFilters } from "../../redux/sentenceSlice";
-import { setFilters as setStatementFilters } from "../../redux/statementSlice";
+import {setFilters as setSentenceFilters} from "../../redux/sentenceSlice";
+import {setFilters as setStatementFilters} from "../../redux/statementSlice";
 import StateFilter from "./StateFilter";
 import TagFilter from "./TagFilter";
+import {ENTITY_TYPES, SENTENCE_STATE_ORDER, STATEMENT_STATE_ORDER} from "../../helpers/settings";
+import PopulationSetFilter from "./PopulationSetFilter";
+import {vars} from "../../theme/variables";
 
 const {Draft, ...statementStatesExDraft } = statementStates
 
 const FilterDrawer = (props: any) => {
   const { toggleDrawer, queryOptions, entity } = props;
 
-  const { stateFilter, tagFilter } = queryOptions;
+  const { stateFilter, tagFilter, populationSetFilter } = queryOptions;
   const dispatch = useAppDispatch();
 
   const tagList = tags.getTagList();
-
+
+
   const setInitialStateSelection = (currentSelection: any) => {
-    if (entity === "sentence") {
-      return mapStateFilterSelectionToCheckbox(
-        sentenceStates,
-        currentSelection
+    const sortStates = (states: Record<string, boolean>, order: string[]) => {
+      return order.reduce((acc, key) => {
+        acc[key] = states.hasOwnProperty(key) ? states[key] : false;
+        return acc;
+      }, {} as Record<string, boolean>);
+    };
+
+    if (entity === ENTITY_TYPES.SENTENCE) {
+      return sortStates(
+        mapStateFilterSelectionToCheckbox(sentenceStates, currentSelection),
+        SENTENCE_STATE_ORDER
       );
-    } else if (entity === "statement") {
-      return mapStateFilterSelectionToCheckbox(
-        statementStatesExDraft,
-        currentSelection
+    } else if (entity === ENTITY_TYPES.STATEMENT) {
+      return sortStates(
+        mapStateFilterSelectionToCheckbox(statementStatesExDraft, currentSelection),
+        STATEMENT_STATE_ORDER
       );
     }
   };
-
+  
   const [selectedStates, setSelectedStates] = useState(
     setInitialStateSelection(stateFilter)
   );
 
   const [selectedTags, setSelectedTags] = useState(
     mapTagFilterSelectionToCheckbox(tagList, tagFilter)
   );
-
+
+  const [selectedPopulations, setSelectedPopulations] = useState(
+    populationSetFilter
+  );
+
+
   const handleClearFilter = () => {
     setSelectedStates(setInitialStateSelection(undefined));
     setSelectedTags(mapTagFilterSelectionToCheckbox(tagList, undefined));
+    setSelectedPopulations(undefined);
   };
 
   const mapObjToArray = (filterObj: any) => {
@@ -70,13 +83,14 @@ const FilterDrawer = (props: any) => {
   const handleApplyFilter = () => {
     const stateFilter = mapObjToArray(selectedStates);
     let tagFilter = mapObjToArray(selectedTags);
-    entity === "sentence" &&
-      dispatch(setSentenceFilters({ stateFilter, tagFilter }));
-    entity === "statement" &&
-      dispatch(setStatementFilters({ stateFilter, tagFilter }));
+    const populationSetFilter = mapObjToArray(selectedPopulations);
+
+    entity === ENTITY_TYPES.SENTENCE &&
+      dispatch(setSentenceFilters({ stateFilter, tagFilter, populationSetFilter }));
+    entity === ENTITY_TYPES.STATEMENT &&
+      dispatch(setStatementFilters({ stateFilter, tagFilter, populationSetFilter }));
     toggleDrawer(false);
   };
-
   return (
     <Box
       width={400}
@@ -109,9 +123,25 @@ const FilterDrawer = (props: any) => {
           selectedTags={selectedTags}
           setSelectedTags={setSelectedTags}
         />
+        <PopulationSetFilter
+          selectedPopulations={selectedPopulations}
+          setSelectedPopulations={setSelectedPopulations}
+        />
       </Stack>
-      <Divider />
-      <Box px={3} py={2} textAlign="right">
+      {/*<Divider />*/}
+      <Box
+       sx={{
+         position: "sticky",
+         bottom: 0,
+         background: "white",
+         boxShadow: "0px 1px 2px 0px rgba(16, 24, 40, 0.05)",
+         borderTop: `1px solid ${vars.gray200}`,
+         px: 3,
+         py: 2,
+         textAlign: "right",
+         zIndex: 10,
+       }}
+      >
         <Button
           variant="outlined"
           color="secondary"

frontend/src/components/Filters/PopulationSetFilter.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+import { Autocomplete, Chip, Stack, Typography } from "@mui/material";
+import TextField from "@mui/material/TextField";
+import { vars } from "../../theme/variables";
+import IconButton from "@mui/material/IconButton";
+import ClearOutlinedIcon from "@mui/icons-material/ClearOutlined";
+
+const populationSetList = [
+  { id: "mmset1", label: "mmset1" },
+  { id: "mmset2", label: "mmset2" },
+  { id: "mmset3", label: "mmset3" },
+  { id: "mmset4", label: "mmset4" },
+  { id: "brain", label: "brain" },
+  { id: "vagus", label: "vagus" },
+  { id: "keast", label: "keast" },
+  { id: "liver", label: "liver" },
+  { id: "mmset6", label: "mmset6" },
+];
+
+const PopulationSetFilter = (props: any) => {
+  const { selectedPopulations, setSelectedPopulations } = props;
+
+  const handleChange = (event: any, newValue: any[]) => {
+    const newSelectedPopulations = populationSetList.reduce((acc: any, option) => {
+      acc[option.id] = newValue.some((item) => item.id === option.id);
+      return acc;
+    }, {});
+    setSelectedPopulations(newSelectedPopulations);
+  };
+
+  return (
+    <Stack spacing={2}>
+      <Typography variant="subtitle1" color="#344054">
+        Population Sets
+      </Typography>
+      <Autocomplete
+        multiple
+        options={populationSetList}
+        getOptionLabel={(option) => option.label}
+        value={populationSetList.filter((option) => selectedPopulations && selectedPopulations[option.id])}
+        onChange={handleChange}
+        renderTags={(value, getTagProps) =>
+          value.map((option, index) => (
+            <Chip
+              variant="outlined"
+              label={option.label}
+              {...getTagProps({ index })}
+              key={option.id}
+              deleteIcon={
+                <IconButton size="small">
+                  <ClearOutlinedIcon sx={{ fontSize: 16, color: vars.grey400 }} />
+                </IconButton>
+              }
+              sx={{
+                border: `1px solid ${vars.buttonOutlinedBorderColor}`,
+                borderRadius: "6px",
+                margin: "4px",
+                "& .MuiChip-label": {
+                  color: vars.buttonOutlinedColor,
+                  fontSize: "14px",
+                },
+                "& .MuiChip-deleteIcon": {
+                  color: vars.grey400,
+                  fontSize: "14px",
+                },
+              }}
+            />
+          ))
+        }
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            variant="outlined"
+            placeholder="Select Population Sets"
+            sx={{
+              "label + &": {
+                marginTop: 4,
+              },
+              "& .MuiOutlinedInput-notchedOutline": {
+                border: 0,
+              },
+            }}
+          />
+        )}
+      />
+    </Stack>
+  );
+};
+
+export default PopulationSetFilter;

frontend/src/components/Filters/TagFilter.tsx

@@ -1,31 +1,72 @@
 import React from "react";
-import { Stack, Typography } from "@mui/material";
-import ControlledCheckbox from "../Widgets/ControlledCheckbox";
+import {Autocomplete, Chip, Stack, Typography} from "@mui/material";
 import { tags } from "../../services/TagService";
+import TextField from "@mui/material/TextField";
+import {vars} from "../../theme/variables";
+import IconButton from "@mui/material/IconButton";
+import ClearOutlinedIcon from "@mui/icons-material/ClearOutlined";
 
 const TagFilter = (props: any) => {
   const { selectedTags, setSelectedTags } = props;
   const tagList = tags.getTagList();
-
-  const tagsCheckboxData = tagList.map((i) => ({
-    name: i.id,
-    label: i.tag,
-    checked: selectedTags[i.id],
-  }));
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setSelectedTags((prev: any) => ({
-      ...prev,
-      [event.target.name]: event.target.checked,
-    }));
+
+  const handleChange = (event: any, newValue: any[]) => {
+    const newSelectedTags = tagList.reduce((acc: any, tag) => {
+      acc[tag.id] = newValue.some((item) => item.id === tag.id);
+      return acc;
+    }, {});
+    setSelectedTags(newSelectedTags);
   };
 
+
   return (
     <Stack spacing={2}>
       <Typography variant="subtitle1" color="#344054">
         Tags
       </Typography>
-      <ControlledCheckbox data={tagsCheckboxData} handleChange={handleChange} />
+      <Autocomplete
+        multiple
+        options={tagList}
+        getOptionLabel={(option) => option.tag}
+        value={tagList.filter((tag) => selectedTags[tag.id])}
+        onChange={handleChange}
+        renderTags={(value, getTagProps) =>
+          value.map((option, index) => (
+            <Chip
+              variant="outlined"
+              label={option.tag}
+              {...getTagProps({ index })}
+              key={option.id}
+                deleteIcon={
+                  <IconButton size="small">
+                    <ClearOutlinedIcon sx={{ fontSize: 16, color: vars.grey400 }} />
+                  </IconButton>
+                }
+                sx={{
+                  border: `1px solid ${vars.buttonOutlinedBorderColor}`,
+                  borderRadius: "6px",
+                  margin: "4px",
+                  "& .MuiChip-label": {
+                    color: vars.buttonOutlinedColor,
+                    fontSize: "14px",
+                  },
+                  "& .MuiChip-deleteIcon": {
+                    color: vars.grey400,
+                    fontSize: "14px",
+                  },
+                }}
+            />
+          ))
+        }
+        renderInput={(params) => <TextField {...params} variant="outlined" placeholder="Select Tags" sx={{
+          "label + &": {
+            marginTop: 4,
+          },
+          "& .MuiOutlinedInput-notchedOutline": {
+            border: 0,
+          },
+        }} />}
+      />
     </Stack>
   );
 };

frontend/src/helpers/settings.ts

@@ -32,4 +32,31 @@ export const DestinationsGroupLabel = "Destinations";
 export const ChangeRequestStatus = {
   CANCELLED: "canceled",
   SAVED: "saved",
-}
+}
+
+export enum ENTITY_TYPES {
+  STATEMENT = "statement",
+  SENTENCE = "sentence",
+}
+
+
+export const STATEMENT_STATE_ORDER = [
+  "compose_now",
+  "in_progress",
+  "to_be_reviewed",
+  "npo_approved",
+  "exported",
+  "revise",
+  "invalid",
+  "rejected",
+];
+
+export const SENTENCE_STATE_ORDER = [
+  "open",
+  "compose_later",
+  "ready_to_compose",
+  "needs_further_review",
+  "compose_now",
+  "completed",
+  "excluded",
+];