Merge pull request #27 from NeuroJSON/dev-fan

Feature: Filter on landing page to interact with nodes (Close #17)

Author: elainefan331

.github/workflows/build-deploy-zodiac.yml

@@ -7,6 +7,7 @@ on:
       - dev-fan
       - dev_mario
       - dev_fang
+      - staging
 
 jobs:
   deploy:

src/components/NodeInfoPanel.tsx

@@ -81,7 +81,8 @@ const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
       anchor="right"
       open={open}
       onClose={onClose}
-      container={document.body}
+      ModalProps={{ keepMounted: true }} // Keeps Drawer in DOM even when closed
+      disableEnforceFocus //  prevents MUI from trapping focus inside the drawer
       sx={{
         "& .MuiDrawer-paper": {
           width: "30%",

src/components/NodesFilter/FilterMenu.tsx

@@ -0,0 +1,172 @@
+import KeywordFilter from "./KeywordFilter";
+import ModalitiesFilter from "./ModalitiesFilter";
+import FilterListIcon from "@mui/icons-material/FilterList";
+import {
+  IconButton,
+  Menu,
+  MenuItem,
+  Box,
+  Typography,
+  Divider,
+} from "@mui/material";
+import { Colors } from "design/theme";
+import React, { useState, useEffect } from "react";
+
+interface FilterMenuProps {
+  onKeywordFilter: (query: string) => void;
+  onModalitiesFilter: (selectedModalities: string[]) => void;
+  filterKeyword: string; // receive from parent
+  homeSelectedModalities: string[]; // receive from parent
+}
+
+const FilterMenu: React.FC<FilterMenuProps> = ({
+  onKeywordFilter,
+  onModalitiesFilter,
+  filterKeyword, //receive from home parent
+  homeSelectedModalities, // receive from parent
+}) => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  //   const [filterType, setFilterType] = useState<string | null>(null);
+  const [menuKey, setMenuKey] = useState(0); // Forces re-render
+
+  useEffect(() => {
+    const handleResize = () => {
+      setMenuKey((prevKey) => prevKey + 1);
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  // Handle menu open and close
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+    // setFilterType(null); //reset menu state when closing
+  };
+
+  return (
+    <Box>
+      {/* Filter Icon Button */}
+      <IconButton
+        onClick={handleClick}
+        sx={{
+          color: Colors.lightGray,
+          "&:hover": {
+            color: Colors.green,
+            backgroundColor: Colors.darkPurple,
+            boxShadow: `0px 0px 15px ${Colors.darkGreen}`,
+            padding: "10px",
+          },
+        }}
+      >
+        <FilterListIcon />
+        {/* <Typography
+          sx={{
+            color: Colors.lightGray,
+            fontWeight: "bold",
+          }}
+        >
+          Databases Filter
+        </Typography> */}
+      </IconButton>
+
+      {/* Dropdown Menu */}
+      <Menu
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={handleClose}
+        disablePortal // Ensures positioning inside the DOM
+        sx={{
+          transition: "transform 0.3s ease, opacity 0.3s ease",
+          transformOrigin: "top right",
+          "& .MuiPaper-root": {
+            // backgroundColor: "rgba(40, 44, 86, 0.1)", // Override Paper's default background
+            backgroundColor: Colors.lightGray,
+            // boxShadow: `0px 0px 5px ${Colors.lightGray}`,
+            backdropFilter: "blur(15px)",
+          },
+        }}
+      >
+        {/* unified panel */}
+        <Box
+          sx={{
+            // backgroundColor: Colors.darkPurple,
+            // backdropFilter: "blur(15px)",
+            minWidth: 300,
+            padding: "10px",
+          }}
+        >
+          <Typography
+            sx={{
+              fontSize: "x-large",
+              fontWeight: "bold",
+              color: Colors.orange,
+            }}
+          >
+            Databases Filter
+          </Typography>
+
+          <Divider
+            sx={{
+              marginY: 2,
+              //   borderColor: Colors.darkPurple,
+            }}
+          />
+
+          {/* Keyword Filter */}
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+              gap: "2px",
+            }}
+          >
+            <Typography
+              variant="subtitle1"
+              sx={{ color: Colors.darkGreen, fontWeight: "bold" }}
+            >
+              Filter by Keyword
+            </Typography>
+            <KeywordFilter
+              onFilter={onKeywordFilter}
+              filterKeyword={filterKeyword}
+            />
+          </Box>
+
+          <Divider
+            sx={{
+              marginY: 2,
+              // borderColor: Colors.lightGray
+            }}
+          />
+
+          {/* Modalities Filter */}
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+              gap: "2px",
+            }}
+          >
+            <Typography
+              variant="subtitle1"
+              sx={{ color: Colors.darkGreen, fontWeight: "bold" }}
+            >
+              Filter by Modalities
+            </Typography>
+            <ModalitiesFilter
+              onFilter={onModalitiesFilter}
+              homeSeletedModalities={homeSelectedModalities}
+            />
+          </Box>
+        </Box>
+      </Menu>
+    </Box>
+  );
+};
+
+export default FilterMenu;

src/components/NodesFilter/KeywordFilter.tsx

@@ -0,0 +1,41 @@
+import { Autocomplete, TextField } from "@mui/material";
+import React, { useEffect, useState } from "react";
+
+interface FilterSearchProps {
+  onFilter: (query: string) => void;
+  filterKeyword: string; // add prop to receive parent state
+}
+
+const KeywordFilter: React.FC<FilterSearchProps> = ({
+  onFilter,
+  filterKeyword,
+}) => {
+  const [inputValue, setInputValue] = useState<string>(filterKeyword);
+
+  useEffect(() => {
+    setInputValue(filterKeyword);
+  }, [filterKeyword]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setInputValue(value);
+    onFilter(value); // Pass value to parent component
+  };
+
+  return (
+    <TextField
+      label="Browse databases by keyword"
+      variant="outlined"
+      size="small"
+      value={inputValue}
+      onChange={handleChange}
+      sx={{
+        width: 250,
+        background: "white",
+        borderRadius: 1,
+      }}
+    />
+  );
+};
+
+export default KeywordFilter;

src/components/NodesFilter/ModalitiesFilter.tsx

@@ -0,0 +1,124 @@
+import {
+  Box,
+  FormControlLabel,
+  Checkbox,
+  Typography,
+  Button,
+} from "@mui/material";
+import { Colors } from "design/theme";
+import { DATA_TYPE_COLORS } from "modules/universe/NeuroJsonGraph";
+import React, { useEffect, useState } from "react";
+
+interface ModalitiesFilterProps {
+  onFilter: (selectedModalities: string[]) => void;
+  homeSeletedModalities: string[]; // add prop to receive parent state
+}
+
+const modalitiesList = ["mri", "pet", "meg", "eeg", "ieeg", "dwi", "fnirs"];
+
+const ModalitiesFilter: React.FC<ModalitiesFilterProps> = ({
+  onFilter,
+  homeSeletedModalities,
+}) => {
+  const [selectedModalities, setSelectedModalities] = useState<string[]>(
+    homeSeletedModalities
+  );
+
+  useEffect(() => {
+    setSelectedModalities(homeSeletedModalities);
+  }, [homeSeletedModalities]);
+
+  const handleModalityChange = (modality: string) => {
+    const updatedModalities = selectedModalities.includes(modality)
+      ? selectedModalities.filter((m) => m !== modality)
+      : [...selectedModalities, modality];
+    setSelectedModalities(updatedModalities);
+    onFilter(updatedModalities);
+  };
+
+  // reset function to clear all selected checkedboxes
+  const handleReset = () => {
+    setSelectedModalities([]); // clear the local state
+    onFilter([]); // notify parent that selection is reset
+  };
+
+  return (
+    <Box>
+      {modalitiesList.map((modality) => {
+        const bgColor = DATA_TYPE_COLORS[modality]
+          ? `rgb(${DATA_TYPE_COLORS[modality].join(",")})`
+          : "transparent";
+        return (
+          <Box
+            key={modality}
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+            }}
+          >
+            <FormControlLabel
+              // key={modality}
+              control={
+                <Checkbox
+                  sx={
+                    {
+                      // color: Colors.lightGray,
+                      // "&.Mui-checked": {
+                      //   color: "black", // Change checkmark color
+                      // },
+                      // "&.Mui-checked.MuiCheckbox-root": {
+                      //   backgroundColor: "white", // Ensures white background when checked
+                      //   borderRadius: "3px",
+                      // },
+                      // "&.MuiCheckbox-root:hover": {
+                      //   backgroundColor: "white",
+                      // },
+                    }
+                  }
+                  checked={selectedModalities.includes(modality)}
+                  onChange={() => handleModalityChange(modality)}
+                />
+              }
+              label={
+                <Typography
+                  sx={{
+                    color: Colors.lightGray,
+                    backgroundColor: bgColor,
+                    borderRadius: "5px",
+                    padding: "5px",
+                    marginBottom: "5px",
+                    fontWeight: "bold",
+                    minWidth: "45px",
+                    textAlign: "center",
+                  }}
+                >
+                  {modality}
+                </Typography>
+              }
+            />
+          </Box>
+        );
+      })}
+      {/* Reset button */}
+      <Button
+        variant="contained"
+        sx={{
+          marginTop: "10px",
+          backgroundColor: Colors.white,
+          color: Colors.purple,
+          fontWeight: "bold",
+          "&:hover": {
+            backgroundColor: Colors.darkPurple,
+            color: Colors.green,
+            boxShadow: `0px 0px 15px ${Colors.darkGreen}`,
+          },
+        }}
+        onClick={handleReset}
+      >
+        Clear
+      </Button>
+    </Box>
+  );
+};
+
+export default ModalitiesFilter;