From fb191707d15c16976a9a8ec231a1907596a8b51e Mon Sep 17 00:00:00 2001 From: Vismayak Mohanarajan Date: Tue, 21 Jan 2025 13:47:04 -0600 Subject: [PATCH] Renamed files and it now selects files or folders --- .../components/listeners/SubmitExtraction.tsx | 4 +- ...ileSelector.tsx => FileSystemSelector.tsx} | 172 ++++++++++++------ ...ctor.jsx => ClowderFileSystemSelector.jsx} | 8 +- 3 files changed, 124 insertions(+), 60 deletions(-) rename frontend/src/components/navigation/{FileSelector.tsx => FileSystemSelector.tsx} (66%) rename frontend/src/components/styledComponents/{ClowderFileSelector.jsx => ClowderFileSystemSelector.jsx} (65%) diff --git a/frontend/src/components/listeners/SubmitExtraction.tsx b/frontend/src/components/listeners/SubmitExtraction.tsx index af000be69..d3768c337 100644 --- a/frontend/src/components/listeners/SubmitExtraction.tsx +++ b/frontend/src/components/listeners/SubmitExtraction.tsx @@ -25,7 +25,7 @@ import { RootState } from "../../types/data"; import { EventListenerOut as Extractor } from "../../openapi/v2"; import { ClowderRjsfSelectWidget } from "../styledComponents/ClowderRjsfSelectWidget"; import { ClowderRjsfTextWidget } from "../styledComponents/ClowderRjsfTextWidget"; -import { ClowderFileSelector } from "../styledComponents/ClowderFileSelector"; +import { ClowderFileSystemSelector } from "../styledComponents/ClowderFileSystemSelector"; import { ClowderImageAnnotator } from "../styledComponents/ClowderImageAnnotator"; import ExtractorStatus from "./ExtractorStatus"; import CloseIcon from "@mui/icons-material/Close"; @@ -43,7 +43,7 @@ type SubmitExtractionProps = { const widgets = { TextWidget: ClowderRjsfTextWidget, SelectWidget: ClowderRjsfSelectWidget, - ClowderFile: ClowderFileSelector, + ClowderFile: ClowderFileSystemSelector, ImageAnnotator: ClowderImageAnnotator, }; diff --git a/frontend/src/components/navigation/FileSelector.tsx b/frontend/src/components/navigation/FileSystemSelector.tsx similarity index 66% rename from frontend/src/components/navigation/FileSelector.tsx rename to frontend/src/components/navigation/FileSystemSelector.tsx index 10e8a3a36..ba43fdc0b 100644 --- a/frontend/src/components/navigation/FileSelector.tsx +++ b/frontend/src/components/navigation/FileSystemSelector.tsx @@ -24,16 +24,24 @@ import TextIcon from "@mui/icons-material/Description"; import { fetchDatasets } from "../../actions/dataset"; import { V2 } from "../../openapi"; -interface FileDetails { - fileId: string; - fileName: string; +interface SelectionDetails { + selectionID: string; + selectionName: string; + selectionType: string; + datasetId?: string; } interface RecursiveComponentProps { item: FSItem; depth?: number; - onHighlightFile: (fileId: string, fileName: string) => void; - highlightedFileId: string; + onHighlightSelection: ( + selectionID: string, + selectionName: string, + datasetId: string, + selectionType: string + ) => void; + highlightedSelectionId: string; + selectFolder: boolean; } interface FSItem { @@ -81,13 +89,14 @@ async function fetchFolderFiles( const RecursiveComponent: React.FC = ({ item, depth = 0, - onHighlightFile, - highlightedFileId, + onHighlightSelection, + highlightedSelectionId, + selectFolder, }) => { const [expanded, setExpanded] = useState(false); const [children, setChildren] = useState(item.children); const isFolderOrDataset = item.type === "folder" || item.type === "dataset"; - const isHighlighted = item.id === highlightedFileId; + const isHighlighted = item.id === highlightedSelectionId; const getIcon = () => { if (item.type === "folder") { @@ -109,18 +118,18 @@ const RecursiveComponent: React.FC = ({ } }; - const onSelect = () => { + const expandFolder = () => { if (isFolderOrDataset) { - if (!expanded) { - fetchFolderFiles(item.datasetId, item.id).then((data) => { - setChildren(data); - }); - } + fetchFolderFiles(item.datasetId, item.id).then((data) => { + setChildren(data); + }); setExpanded(!expanded); - } else { - if (item.id !== undefined) { - onHighlightFile(item.id, item.label); - } + } + }; + + const onSelect = () => { + if (item.id !== undefined) { + onHighlightSelection(item.id, item.label, item.datasetId, item.type); } }; @@ -147,6 +156,7 @@ const RecursiveComponent: React.FC = ({ = ({ key={child.id} item={child} depth={depth + 1} - onHighlightFile={onHighlightFile} - highlightedFileId={highlightedFileId} + onHighlightSelection={onHighlightSelection} + highlightedSelectionId={highlightedSelectionId} + selectFolder={selectFolder} /> ))} @@ -178,9 +189,15 @@ const RecursiveComponent: React.FC = ({ }; const FileSystemViewer: React.FC<{ - onHighlightFile: (fileId: string, fileName: string) => void; - highlightedFileId: string; -}> = ({ onHighlightFile, highlightedFileId }) => { + onHighlightSelection: ( + selectionID: string, + selectionName: string, + datasetId: string, + selectionType: string + ) => void; + highlightedSelectionId: string; + selectFolder: boolean; +}> = ({ onHighlightSelection, highlightedSelectionId, selectFolder }) => { const dispatch = useDispatch(); const datasets = useSelector((state: any) => state.dataset.datasets); const [FSItems, setFSItems] = useState([]); @@ -224,8 +241,9 @@ const FileSystemViewer: React.FC<{ ))} @@ -233,10 +251,21 @@ const FileSystemViewer: React.FC<{ }; const DatasetFileViewer: React.FC<{ - onHighlightFile: (fileId: string, fileName: string) => void; - highlightedFileId: string; + onHighlightSelection: ( + selectionID: string, + selectionName: string, + datasetId: string, + selectionType: string + ) => void; + highlightedSelectionId: string; datasetId: string; -}> = ({ onHighlightFile, highlightedFileId, datasetId }) => { + selectFolder: boolean; +}> = ({ + onHighlightSelection, + highlightedSelectionId, + datasetId, + selectFolder, +}) => { const [FSItems, setFSItems] = useState([]); useEffect(() => { @@ -263,52 +292,79 @@ const DatasetFileViewer: React.FC<{ ))} ) : null; }; -const FileSelector: React.FC<{ +const FileSystemSelector: React.FC<{ showOnlyDatasetFiles: boolean; + selectFolder: boolean; datasetId: string | undefined; - onChange: (fileId: string) => void; -}> = ({ showOnlyDatasetFiles, datasetId, onChange }) => { + onChange: (SelectionDetails: SelectionDetails) => void; +}> = ({ showOnlyDatasetFiles, selectFolder, datasetId, onChange }) => { const [open, setOpen] = useState(false); - const [selectedFile, setSelectedFile] = useState({ - fileId: "", - fileName: "", - }); - const [highlightedFile, setHighlightedFile] = useState({ - fileId: "", - fileName: "", + const [selection, setSelection] = useState({ + selectionID: "", + selectionName: "", + datasetId: "", + selectionType: "", }); + const [highlightedSelection, setHighlightedFile] = useState( + { + selectionID: "", + selectionName: "", + datasetId: "", + selectionType: "", + } + ); const handleOpen = () => setOpen(true); const handleClose = () => { - setHighlightedFile({ fileId: "", fileName: "" }); + setHighlightedFile({ + selectionID: "", + selectionName: "", + selectionType: "", + }); setOpen(false); }; - const handleHighlight = (fileId: string, fileName: string) => { - setHighlightedFile({ fileId, fileName }); + const handleHighlight = ( + selectionID: string, + selectionName: string, + datasetId: string, + selectionType: string + ) => { + setHighlightedFile({ + selectionID, + selectionName, + datasetId, + selectionType, + }); }; const handleConfirmSelection = () => { - if (highlightedFile.fileId) { - setSelectedFile(highlightedFile); - onChange(highlightedFile.fileId); + if (highlightedSelection.selectionID) { + setSelection(highlightedSelection); + onChange({ + selectionID: highlightedSelection.selectionID, + selectionName: highlightedSelection.selectionName, + datasetId: highlightedSelection.datasetId, + selectionType: highlightedSelection.selectionType, + }); handleClose(); } }; return ( - {selectedFile.fileName && ( + {selection.selectionName && ( - {selectedFile.fileName} + {selection.selectionName} )} {showOnlyDatasetFiles ? ( ) : ( )} @@ -363,4 +425,4 @@ const FileSelector: React.FC<{ ); }; -export default FileSelector; +export default FileSystemSelector; diff --git a/frontend/src/components/styledComponents/ClowderFileSelector.jsx b/frontend/src/components/styledComponents/ClowderFileSystemSelector.jsx similarity index 65% rename from frontend/src/components/styledComponents/ClowderFileSelector.jsx rename to frontend/src/components/styledComponents/ClowderFileSystemSelector.jsx index 0f779979a..2efe4641c 100644 --- a/frontend/src/components/styledComponents/ClowderFileSelector.jsx +++ b/frontend/src/components/styledComponents/ClowderFileSystemSelector.jsx @@ -1,20 +1,22 @@ import React from "react"; -import FileSelectorButton from "../navigation/FileSelector"; +import FileSystemSelectorButton from "../navigation/FileSystemSelector"; import { ClowderInputLabel } from "./ClowderInputLabel"; -export const ClowderFileSelector = (item) => { +export const ClowderFileSystemSelector = (item) => { const handleChange = (value) => { item.onChange(value); }; const datasetId = item.options.datasetId; const showOnlyDatasetFiles = item.schema.showOnlyDatasetFiles ? true : false; + const selectFolder = item.schema.selectFolder ? true : false; return ( <> {item.schema.title} - );