Skip to content

Commit fb19170

Browse files
VismayakVismayak
committed
Renamed files and it now selects files or folders
1 parent 3173cac commit fb19170

File tree

3 files changed

+124
-60
lines changed

3 files changed

+124
-60
lines changed

‎frontend/src/components/listeners/SubmitExtraction.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ import { RootState } from "../../types/data";
2525
import { EventListenerOut as Extractor } from "../../openapi/v2";
2626
import { ClowderRjsfSelectWidget } from "../styledComponents/ClowderRjsfSelectWidget";
2727
import { ClowderRjsfTextWidget } from "../styledComponents/ClowderRjsfTextWidget";
28-
import { ClowderFileSelector } from "../styledComponents/ClowderFileSelector";
28+
import { ClowderFileSystemSelector } from "../styledComponents/ClowderFileSystemSelector";
2929
import { ClowderImageAnnotator } from "../styledComponents/ClowderImageAnnotator";
3030
import ExtractorStatus from "./ExtractorStatus";
3131
import CloseIcon from "@mui/icons-material/Close";
@@ -43,7 +43,7 @@ type SubmitExtractionProps = {
4343
const widgets = {
4444
TextWidget: ClowderRjsfTextWidget,
4545
SelectWidget: ClowderRjsfSelectWidget,
46-
ClowderFile: ClowderFileSelector,
46+
ClowderFile: ClowderFileSystemSelector,
4747
ImageAnnotator: ClowderImageAnnotator,
4848
};
4949

frontend/src/components/navigation/FileSelector.tsx renamed to frontend/src/components/navigation/FileSystemSelector.tsx

Lines changed: 117 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -24,16 +24,24 @@ import TextIcon from "@mui/icons-material/Description";
2424
import { fetchDatasets } from "../../actions/dataset";
2525
import { V2 } from "../../openapi";
2626

27-
interface FileDetails {
28-
fileId: string;
29-
fileName: string;
27+
interface SelectionDetails {
28+
selectionID: string;
29+
selectionName: string;
30+
selectionType: string;
31+
datasetId?: string;
3032
}
3133

3234
interface RecursiveComponentProps {
3335
item: FSItem;
3436
depth?: number;
35-
onHighlightFile: (fileId: string, fileName: string) => void;
36-
highlightedFileId: string;
37+
onHighlightSelection: (
38+
selectionID: string,
39+
selectionName: string,
40+
datasetId: string,
41+
selectionType: string
42+
) => void;
43+
highlightedSelectionId: string;
44+
selectFolder: boolean;
3745
}
3846

3947
interface FSItem {
@@ -81,13 +89,14 @@ async function fetchFolderFiles(
8189
const RecursiveComponent: React.FC<RecursiveComponentProps> = ({
8290
item,
8391
depth = 0,
84-
onHighlightFile,
85-
highlightedFileId,
92+
onHighlightSelection,
93+
highlightedSelectionId,
94+
selectFolder,
8695
}) => {
8796
const [expanded, setExpanded] = useState(false);
8897
const [children, setChildren] = useState<FSItem[] | undefined>(item.children);
8998
const isFolderOrDataset = item.type === "folder" || item.type === "dataset";
90-
const isHighlighted = item.id === highlightedFileId;
99+
const isHighlighted = item.id === highlightedSelectionId;
91100

92101
const getIcon = () => {
93102
if (item.type === "folder") {
@@ -109,18 +118,18 @@ const RecursiveComponent: React.FC<RecursiveComponentProps> = ({
109118
}
110119
};
111120

112-
const onSelect = () => {
121+
const expandFolder = () => {
113122
if (isFolderOrDataset) {
114-
if (!expanded) {
115-
fetchFolderFiles(item.datasetId, item.id).then((data) => {
116-
setChildren(data);
117-
});
118-
}
123+
fetchFolderFiles(item.datasetId, item.id).then((data) => {
124+
setChildren(data);
125+
});
119126
setExpanded(!expanded);
120-
} else {
121-
if (item.id !== undefined) {
122-
onHighlightFile(item.id, item.label);
123-
}
127+
}
128+
};
129+
130+
const onSelect = () => {
131+
if (item.id !== undefined) {
132+
onHighlightSelection(item.id, item.label, item.datasetId, item.type);
124133
}
125134
};
126135

@@ -147,6 +156,7 @@ const RecursiveComponent: React.FC<RecursiveComponentProps> = ({
147156
<IconButton
148157
size="small"
149158
sx={{ visibility: isFolderOrDataset ? "visible" : "hidden" }}
159+
onClick={expandFolder}
150160
>
151161
<ExpandMoreIcon
152162
style={{
@@ -166,8 +176,9 @@ const RecursiveComponent: React.FC<RecursiveComponentProps> = ({
166176
key={child.id}
167177
item={child}
168178
depth={depth + 1}
169-
onHighlightFile={onHighlightFile}
170-
highlightedFileId={highlightedFileId}
179+
onHighlightSelection={onHighlightSelection}
180+
highlightedSelectionId={highlightedSelectionId}
181+
selectFolder={selectFolder}
171182
/>
172183
))}
173184
</Box>
@@ -178,9 +189,15 @@ const RecursiveComponent: React.FC<RecursiveComponentProps> = ({
178189
};
179190

180191
const FileSystemViewer: React.FC<{
181-
onHighlightFile: (fileId: string, fileName: string) => void;
182-
highlightedFileId: string;
183-
}> = ({ onHighlightFile, highlightedFileId }) => {
192+
onHighlightSelection: (
193+
selectionID: string,
194+
selectionName: string,
195+
datasetId: string,
196+
selectionType: string
197+
) => void;
198+
highlightedSelectionId: string;
199+
selectFolder: boolean;
200+
}> = ({ onHighlightSelection, highlightedSelectionId, selectFolder }) => {
184201
const dispatch = useDispatch();
185202
const datasets = useSelector((state: any) => state.dataset.datasets);
186203
const [FSItems, setFSItems] = useState<FSItem[]>([]);
@@ -224,19 +241,31 @@ const FileSystemViewer: React.FC<{
224241
<RecursiveComponent
225242
key={FSItem.id}
226243
item={FSItem}
227-
onHighlightFile={onHighlightFile}
228-
highlightedFileId={highlightedFileId}
244+
onHighlightSelection={onHighlightSelection}
245+
highlightedSelectionId={highlightedSelectionId}
246+
selectFolder={selectFolder}
229247
/>
230248
))}
231249
</Box>
232250
) : null;
233251
};
234252

235253
const DatasetFileViewer: React.FC<{
236-
onHighlightFile: (fileId: string, fileName: string) => void;
237-
highlightedFileId: string;
254+
onHighlightSelection: (
255+
selectionID: string,
256+
selectionName: string,
257+
datasetId: string,
258+
selectionType: string
259+
) => void;
260+
highlightedSelectionId: string;
238261
datasetId: string;
239-
}> = ({ onHighlightFile, highlightedFileId, datasetId }) => {
262+
selectFolder: boolean;
263+
}> = ({
264+
onHighlightSelection,
265+
highlightedSelectionId,
266+
datasetId,
267+
selectFolder,
268+
}) => {
240269
const [FSItems, setFSItems] = useState<FSItem[]>([]);
241270

242271
useEffect(() => {
@@ -263,60 +292,87 @@ const DatasetFileViewer: React.FC<{
263292
<RecursiveComponent
264293
key={FSItem.id}
265294
item={FSItem}
266-
onHighlightFile={onHighlightFile}
267-
highlightedFileId={highlightedFileId}
295+
onHighlightSelection={onHighlightSelection}
296+
highlightedSelectionId={highlightedSelectionId}
297+
selectFolder={selectFolder}
268298
/>
269299
))}
270300
</Box>
271301
) : null;
272302
};
273303

274-
const FileSelector: React.FC<{
304+
const FileSystemSelector: React.FC<{
275305
showOnlyDatasetFiles: boolean;
306+
selectFolder: boolean;
276307
datasetId: string | undefined;
277-
onChange: (fileId: string) => void;
278-
}> = ({ showOnlyDatasetFiles, datasetId, onChange }) => {
308+
onChange: (SelectionDetails: SelectionDetails) => void;
309+
}> = ({ showOnlyDatasetFiles, selectFolder, datasetId, onChange }) => {
279310
const [open, setOpen] = useState(false);
280-
const [selectedFile, setSelectedFile] = useState<FileDetails>({
281-
fileId: "",
282-
fileName: "",
283-
});
284-
const [highlightedFile, setHighlightedFile] = useState<FileDetails>({
285-
fileId: "",
286-
fileName: "",
311+
const [selection, setSelection] = useState<SelectionDetails>({
312+
selectionID: "",
313+
selectionName: "",
314+
datasetId: "",
315+
selectionType: "",
287316
});
317+
const [highlightedSelection, setHighlightedFile] = useState<SelectionDetails>(
318+
{
319+
selectionID: "",
320+
selectionName: "",
321+
datasetId: "",
322+
selectionType: "",
323+
}
324+
);
288325

289326
const handleOpen = () => setOpen(true);
290327
const handleClose = () => {
291-
setHighlightedFile({ fileId: "", fileName: "" });
328+
setHighlightedFile({
329+
selectionID: "",
330+
selectionName: "",
331+
selectionType: "",
332+
});
292333
setOpen(false);
293334
};
294335

295-
const handleHighlight = (fileId: string, fileName: string) => {
296-
setHighlightedFile({ fileId, fileName });
336+
const handleHighlight = (
337+
selectionID: string,
338+
selectionName: string,
339+
datasetId: string,
340+
selectionType: string
341+
) => {
342+
setHighlightedFile({
343+
selectionID,
344+
selectionName,
345+
datasetId,
346+
selectionType,
347+
});
297348
};
298349

299350
const handleConfirmSelection = () => {
300-
if (highlightedFile.fileId) {
301-
setSelectedFile(highlightedFile);
302-
onChange(highlightedFile.fileId);
351+
if (highlightedSelection.selectionID) {
352+
setSelection(highlightedSelection);
353+
onChange({
354+
selectionID: highlightedSelection.selectionID,
355+
selectionName: highlightedSelection.selectionName,
356+
datasetId: highlightedSelection.datasetId,
357+
selectionType: highlightedSelection.selectionType,
358+
});
303359
handleClose();
304360
}
305361
};
306362

307363
return (
308364
<Box sx={{ display: "flex", alignItems: "center", gap: 2, p: 2 }}>
309-
{selectedFile.fileName && (
365+
{selection.selectionName && (
310366
<Typography variant="subtitle1" sx={{ ml: 2 }}>
311-
{selectedFile.fileName}
367+
{selection.selectionName}
312368
</Typography>
313369
)}
314370
<Button
315371
variant="outlined"
316372
onClick={handleOpen}
317373
startIcon={<InsertDriveFileIcon />}
318374
>
319-
Choose File
375+
{selectFolder ? "Select Folder" : "Select File"}
320376
</Button>
321377
<Modal
322378
open={open}
@@ -338,21 +394,27 @@ const FileSelector: React.FC<{
338394
>
339395
{showOnlyDatasetFiles ? (
340396
<DatasetFileViewer
341-
onHighlightFile={handleHighlight}
342-
highlightedFileId={highlightedFile.fileId}
397+
onHighlightSelection={handleHighlight}
398+
highlightedSelectionId={highlightedSelection.selectionID}
343399
datasetId={datasetId as string}
400+
selectFolder={selectFolder}
344401
/>
345402
) : (
346403
<FileSystemViewer
347-
onHighlightFile={handleHighlight}
348-
highlightedFileId={highlightedFile.fileId}
404+
onHighlightSelection={handleHighlight}
405+
highlightedSelectionId={highlightedSelection.selectionID}
406+
selectFolder={selectFolder}
349407
/>
350408
)}
351409
<Box sx={{ display: "flex", justifyContent: "flex-end", mt: 2 }}>
352410
<Button
353411
variant="contained"
354412
onClick={handleConfirmSelection}
355-
disabled={!highlightedFile.fileId}
413+
disabled={
414+
selectFolder
415+
? highlightedSelection.selectionType !== "folder"
416+
: highlightedSelection.selectionType !== "file"
417+
}
356418
>
357419
Select
358420
</Button>
@@ -363,4 +425,4 @@ const FileSelector: React.FC<{
363425
);
364426
};
365427

366-
export default FileSelector;
428+
export default FileSystemSelector;

frontend/src/components/styledComponents/ClowderFileSelector.jsx renamed to frontend/src/components/styledComponents/ClowderFileSystemSelector.jsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
11
import React from "react";
2-
import FileSelectorButton from "../navigation/FileSelector";
2+
import FileSystemSelectorButton from "../navigation/FileSystemSelector";
33
import { ClowderInputLabel } from "./ClowderInputLabel";
44

5-
export const ClowderFileSelector = (item) => {
5+
export const ClowderFileSystemSelector = (item) => {
66
const handleChange = (value) => {
77
item.onChange(value);
88
};
99
const datasetId = item.options.datasetId;
1010
const showOnlyDatasetFiles = item.schema.showOnlyDatasetFiles ? true : false;
11+
const selectFolder = item.schema.selectFolder ? true : false;
1112
return (
1213
<>
1314
<ClowderInputLabel>{item.schema.title}</ClowderInputLabel>
14-
<FileSelectorButton
15+
<FileSystemSelectorButton
1516
showOnlyDatasetFiles={showOnlyDatasetFiles}
1617
datasetId={datasetId}
1718
onChange={handleChange}
19+
selectFolder={selectFolder}
1820
/>
1921
</>
2022
);

0 commit comments

Comments
 (0)