filter datasets based on type

MetaCell · Aug 1, 2024 · ff6b235 · ff6b235
1 parent 034e68a
commit ff6b235
Showing 1 changed file with 38 additions and 4 deletions.
diff --git a/applications/visualizer/frontend/src/components/ViewerContainer/DataSets.tsx b/applications/visualizer/frontend/src/components/ViewerContainer/DataSets.tsx
@@ -7,6 +7,7 @@ import type { Dataset } from "../../rest";
 import { vars } from "../../theme/variables.ts";
 import CustomListItem from "./CustomListItem.tsx";
 import {LayersOutlined} from "@mui/icons-material";
+import {CheckIcon} from "../../icons";
 
 const { gray900, gray500, gray400, gray100, gray600 } = vars;
 
@@ -58,6 +59,8 @@ const DataSets = () => {
 
   const [filterActiveDatasets, setFilterActiveDatasets] = useState(activeDatasetsList);
 
+  let [selectedType, setSelectedType] = useState<string | null>(null);
+
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
   const handleMenuOpen = (event) => {
@@ -120,7 +123,7 @@ const DataSets = () => {
     }
   };
 
-  const getDatasetsypes = (datasets: { [key: string]: Dataset }) => {
+  const getDataseTsypes = (datasets: { [key: string]: Dataset }) => {
     const types = new Set<string>();
     Object.values(datasets).forEach((dataset) => {
       if (dataset.type) {
@@ -129,6 +132,26 @@ const DataSets = () => {
     });
     return Array.from(types);
   };
+
+  const handleTypeSelect = (type: string) => {
+    setSelectedType(type);
+
+    const filteredCategories = {
+      L1: [],
+      L2: [],
+      L3: [],
+      Adult: [],
+    };
+
+    for (const [category, datasets] of Object.entries(categorizedDatasets)) {
+      filteredCategories[category] = datasets.filter((dataset) => dataset.type === type);
+    }
+
+    const filteredActiveList = activeDatasetsList.filter((dataset) => dataset.type === type);
+
+    setFilteredDatasets(filteredCategories);
+    setFilterActiveDatasets(filteredActiveList);
+  };
 
   useEffect(() => {
     if (filterGroupsValue === "All") {
@@ -140,7 +163,7 @@ const DataSets = () => {
     }
   }, [activeDatasetsList, filterGroupsValue]);
 
-  const datasetsTypes = getDatasetsypes(datasets);
+  const datasetsTypes = getDataseTsypes(datasets);
   return (
     <Box>
       <Stack spacing=".25rem" p=".75rem" mb="1.5rem" pb="0">
@@ -239,7 +262,7 @@ const DataSets = () => {
           }}
           sx={{
             '& .MuiPaper-root': {
-              maxWidth: '7rem',
+              maxWidth: '10rem',
 
               '& .MuiMenuItem-root': {
                 textTransform: 'capitalize',
@@ -248,8 +271,19 @@ const DataSets = () => {
           }}
         >
           {datasetsTypes.map((type, i) => (
-            <MenuItem key={i} value={type}>
+            <MenuItem key={i} value={type} onClick={() => handleTypeSelect(type)}>
+              <Box display="flex" alignItems="center" gap=".5rem">
+              <Box
+                sx={{
+                  visibility: selectedType === type ? "initial" : "hidden",
+                  display: "flex",
+                  alignItems: "center",
+                }}
+              >
+                <CheckIcon />
+              </Box>
               {type}
+            </Box>
             </MenuItem>
           ))}
         </Menu>