Add Folder selection to FileBrowser component

neuromodulation · Nov 25, 2024 · f3e25c7 · f3e25c7
1 parent 2691d38
commit f3e25c7
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 22 deletions.
diff --git a/gui_dev/package.json b/gui_dev/package.json
@@ -38,7 +38,7 @@
     "eslint-plugin-jsdoc": "^50.5.0",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-compiler": "latest",
-    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
     "prettier": "^3.3.3",
     "vite": "^5.4.11"

diff --git a/gui_dev/src/components/FileBrowser/FileBrowser.jsx b/gui_dev/src/components/FileBrowser/FileBrowser.jsx
@@ -2,6 +2,7 @@ import { useReducer, useEffect } from "react";
 import { getBackendURL } from "@/utils/getBackendURL";
 import {
   Box,
+  Button,
   Paper,
   Typography,
   TextField,
@@ -15,6 +16,7 @@ import {
   TableSortLabel,
   Modal,
   Select,
+  Stack,
   FormControl,
   InputLabel,
   Snackbar,
@@ -90,8 +92,10 @@ const columns = [
 export const FileBrowser = ({
   isModal = false,
   directory = null,
+  onlyDirectories = false,
+  allowedExtensions = ALLOWED_EXTENSIONS,
   onClose,
-  onFileSelect,
+  onSelect,
 }) => {
   const [state, dispatch] = useReducer(reducer, initialState);
 
@@ -142,11 +146,16 @@ export const FileBrowser = ({
 
   const fetchFiles = async (path) => {
     try {
-      const files = await fileManager.getFiles({
+      let files = await fileManager.getFiles({
         path,
-        allowedExtensions: ALLOWED_EXTENSIONS.join(","),
+        allowedExtensions: allowedExtensions.join(","),
         showHidden: state.showHiddenFiles,
       });
+
+      if (onlyDirectories) {
+        files = files.filter((file) => file.is_directory);
+      }
+
       dispatch({
         type: "SET_FILES",
         payload: files.map((file) => ({
@@ -165,13 +174,13 @@ export const FileBrowser = ({
     }
   };
 
-  const handleFileClick = (file) => {
+  const handleRowClick = (file) => {
     if (file.is_directory) {
       dispatch({ type: "SET_CURRENT_PATH", payload: file.path });
     } else if (
       ALLOWED_EXTENSIONS.some((ext) => file.name.toLowerCase().endsWith(ext))
     ) {
-      onFileSelect(file);
+      onSelect(file);
     }
   };
 
@@ -273,9 +282,9 @@ export const FileBrowser = ({
   };
 
   const FileBrowserContent = (
-    <Box sx={{ width: "100%", maxWidth: 800, margin: "auto" }}>
-      <Paper elevation={3} sx={{ p: 2, mb: 2 }}>
-        <Box display="flex" alignItems="center">
+    <Stack gap={2} width="100%">
+      <Paper elevation={3} sx={{ p: 2, width: "100%" }}>
+        <Stack direction="row" alignItems="center">
           {state.drives.length > 1 && (
             <FormControl sx={{ minWidth: 120, mr: 2 }}>
               <InputLabel id="drive-select-label">Drive</InputLabel>
@@ -334,15 +343,14 @@ export const FileBrowser = ({
               <ListItemText primary="Show Hidden Files" />
             </MenuItem>{" "}
           </Menu>
-        </Box>
+        </Stack>
       </Paper>
       <Box
         sx={{
           width: "100%",
           height: "100%",
           display: "flex",
           flexDirection: "row",
-          maxWidth: 800,
           margin: "auto",
           gap: 2,
         }}
@@ -354,7 +362,6 @@ export const FileBrowser = ({
           sx={{
             flexBasis: "75%",
             flexShrink: 0,
-            maxHeight: 400,
             scrollbarWidth: "thin",
             scrollbarColor: "rgba(0,0,0,.1) transparent",
           }}
@@ -384,7 +391,7 @@ export const FileBrowser = ({
                 <TableRow
                   key={file.path}
                   hover
-                  onClick={() => handleFileClick(file)}
+                  onClick={() => handleRowClick(file)}
                   sx={{ cursor: "pointer" }}
                 >
                   {columns.map((column) => (
@@ -400,13 +407,25 @@ export const FileBrowser = ({
           </Table>
         </TableContainer>
       </Box>
+
+      <Stack direction="row" width="100%" gap={2} justifyContent="center">
+        {onlyDirectories && (
+          <Button
+            variant="contained"
+            onClick={() => onSelect(state.currentPath)}
+          >
+            Select Folder
+          </Button>
+        )}
+      </Stack>
+
       <Snackbar
         open={!!state.error}
         autoHideDuration={6000}
         onClose={() => dispatch({ type: "SET_ERROR", payload: "" })}
         message={state.error}
       />
-    </Box>
+    </Stack>
   );
 
   return isModal ? (

diff --git a/gui_dev/src/components/FileBrowser/QuickAccess.jsx b/gui_dev/src/components/FileBrowser/QuickAccess.jsx
@@ -58,7 +58,6 @@ export const QuickAccessSidebar = ({ onItemClick }) => {
         flexGrow: 1,
         display: "flex",
         flexDirection: "column",
-        maxHeight: 400,
         overflowX: "hidden",
         overflowY: "auto",
         scrollbarWidth: "thin",

diff --git a/gui_dev/src/pages/SourceSelection/FileSelector.jsx b/gui_dev/src/pages/SourceSelection/FileSelector.jsx
@@ -23,15 +23,12 @@ export const FileSelector = () => {
 
   const [isSelecting, setIsSelecting] = useState(false);
   const [showFileBrowser, setShowFileBrowser] = useState(false);
+  const [showFolderBrowser, setShowFolderBrowser] = useState(false);
 
   useEffect(() => {
     setSourceType("lsl");
   }, []);
 
-  const handleSelectFile = () => {
-    setShowFileBrowser(true);
-  };
-
   const handleFileSelect = (file) => {
     setIsSelecting(true);
 
@@ -50,11 +47,17 @@ export const FileSelector = () => {
     }
   };
 
+  const handleFolderSelect = (folder) => {
+    setShowFolderBrowser(false);
+  };
+
   return (
     <TitledBox title="Read data from file">
       <Button
         variant="contained"
-        onClick={handleSelectFile}
+        onClick={() => {
+          setShowFileBrowser(true);
+        }}
         disabled={isSelecting}
         sx={{ width: "100%" }}
       >
@@ -66,7 +69,7 @@ export const FileSelector = () => {
             Selected File: <i>{fileSource.name}</i>
           </Typography>
         )}
-        {fileSource.size && (
+        {fileSource.size != "0" && (
           <Typography variant="body2">File Size: {fileSource.size}</Typography>
         )}
         {fileSource.path && (
@@ -80,6 +83,15 @@ export const FileSelector = () => {
       >
         Open File
       </Button>
+      <Button
+        variant="contained"
+        onClick={() => {
+          setShowFolderBrowser(true);
+        }}
+        sx={{ width: "fit-content" }}
+      >
+        Select Folder
+      </Button>
       {streamSetupMessage && (
         <Typography
           variant="body2"
@@ -94,7 +106,16 @@ export const FileSelector = () => {
           isModal={true}
           directory={fileBrowserDirRef.current}
           onClose={() => setShowFileBrowser(false)}
-          onFileSelect={handleFileSelect}
+          onSelect={handleFileSelect}
+        />
+      )}
+      {showFolderBrowser && (
+        <FileBrowser
+          isModal={true}
+          directory={fileBrowserDirRef.current}
+          onClose={() => setShowFolderBrowser(false)}
+          onSelect={handleFolderSelect}
+          onlyDirectories={true}
         />
       )}
     </TitledBox>