dataset selection mechanism

Author: max-zilla

frontend/src/components/datasets/DatasetTableEntry.tsx

@@ -13,11 +13,12 @@ type DatasetTableEntryProps = {
 	iconStyle: {};
 	selectDataset: any;
 	dataset: DatasetOut;
+	selected: boolean;
 };
 
 
 export default function DatsetTableEntry(props: DatasetTableEntryProps) {
-	const {iconStyle, selectDataset, dataset} = props;
+	const {iconStyle, selectDataset, dataset, selected} = props;
 	const [thumbnailUrl, setThumbnailUrl] = useState("");
 
 	useEffect(() => {
@@ -28,6 +29,11 @@ export default function DatsetTableEntry(props: DatasetTableEntryProps) {
 		setThumbnailUrl(url);
 	}, [dataset]);
 
+	useEffect(() => {
+		console.log(dataset.id);
+		console.log(selected);
+	}, [selected]);
+
 	const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
 	const open = Boolean(anchorEl);
 	const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -37,7 +43,11 @@ export default function DatsetTableEntry(props: DatasetTableEntryProps) {
 	return (
 		<TableRow
 			key={dataset.id}
-			sx={{"&:last-child td, &:last-child th": {border: 0}}}
+			sx={{
+				"&:last-child td, &:last-child th": {border: 0},
+				//backgroundColor: selected ? theme.palette.secondary.main : null,
+				backgroundColor: selected ? "lightyellow" : null,
+			}}
 		>
 			<TableCell component="th" scope="row" key={`${dataset.id}-icon`}>
 				{dataset.thumbnail_id ? (

frontend/src/components/projects/CreateProject.tsx

@@ -33,7 +33,7 @@ export const CreateProject = (): JSX.Element => {
 		return required;
 	};
 
-	// step 1 - pick datasets
+	// step 1 - project details
 	const onProjectSave = (formData: any) => {
 		setProjectRequestForm(formData);
 
@@ -46,7 +46,14 @@ export const CreateProject = (): JSX.Element => {
 
 		handleNext();
 	};
-	// step 2 - add users
+
+	// step 2 - pick datasets
+	const onDatasetsSave = (selectedDatasets: any[]) => {
+		console.log(selectedDatasets);
+		handleNext();
+	};
+
+	// step 3 - add users
 
 	// step
 	const [activeStep, setActiveStep] = useState(0);
@@ -92,15 +99,17 @@ export const CreateProject = (): JSX.Element => {
 								<StepLabel>Select Datasets</StepLabel>
 								<StepContent>
 									<Box>
-										<SelectDatasetsModal/>
+										<SelectDatasetsModal onSave={onDatasetsSave}/>
 									</Box>
 								</StepContent>
 							</Step>
 
 							<Step key="invite-users">
 								<StepLabel>Invite Users</StepLabel>
 								<StepContent>
-									<Box/>
+									<Box>
+										<SelectDatasetsModal onSave={onDatasetsSave}/>
+									</Box>
 								</StepContent>
 							</Step>
 						</Stepper>

frontend/src/components/projects/SelectDatasetsModal.tsx

@@ -1,5 +1,5 @@
 import React, {ChangeEvent, useEffect, useState} from "react";
-import {Box, Chip, Grid, Pagination, Table} from "@mui/material";
+import {Box, Button, Chip, Grid, Pagination, Table} from "@mui/material";
 
 import {useDispatch, useSelector} from "react-redux";
 import config from "../../app.config";
@@ -12,12 +12,18 @@ import TableCell from "@mui/material/TableCell";
 import TableBody from "@mui/material/TableBody";
 import {theme} from "../../theme";
 
+type SelectDatasetsModalProps = {
+	onSave: any;
+};
+
 type SelectedDataset = {
 	id: string,
 	label: string
 };
 
-export const SelectDatasetsModal = (): JSX.Element => {
+export const SelectDatasetsModal = (props: SelectDatasetsModalProps): JSX.Element => {
+	const {onSave} = props;
+
 	// Redux connect equivalent
 	const dispatch = useDispatch();
 	const listDatasets = (skip: number | undefined, limit: number | undefined) =>
@@ -41,13 +47,19 @@ export const SelectDatasetsModal = (): JSX.Element => {
 	const selectDataset = (selectedDatasetId: string | undefined, selectedDatasetName: string | undefined) => {
 		// add dataset to selection list
 		if (selectedDatasetId && selectedDatasetName) {
-			setSelectedDatasets([
-				...selectedDatasets,
-				{id: selectedDatasetId, label: selectedDatasetName}
-			]);
+			const record = {id: selectedDatasetId, label: selectedDatasetName};
+			if (selectedDatasets.filter(ds => ds.id === selectedDatasetId).length === 0) {
+				setSelectedDatasets([
+					...selectedDatasets,
+					record
+				]);
+			} else {
+				setSelectedDatasets(selectedDatasets.filter(ds => ds.id !== selectedDatasetId));
+			}
 		}
 	};
 
+
 	// pagination
 	const handlePageChange = (_: ChangeEvent<unknown>, value: number) => {
 		const newSkip = (value - 1) * limit;
@@ -58,15 +70,18 @@ export const SelectDatasetsModal = (): JSX.Element => {
 	return (
 		<Grid container spacing={4}>
 			<Grid item xs>
-				<Grid container spacing={2}>
-					{
-						selectedDatasets?.map((selected) => {
-							return (
-								<Chip label={selected.label} key={selected.id}/>
-							);
-						})
-					}
-				</Grid>
+				<Box display="flex" sx={{m: 1}}>
+					<Grid container spacing={2}>
+						{
+							selectedDatasets?.map((selected) => {
+								return (
+									<Chip label={selected.label} key={selected.id}
+										  onDelete={() => selectDataset(selected.id, selected.label)}/>
+								);
+							})
+						}
+					</Grid>
+				</Box>
 				<Grid container spacing={2}>
 					{datasets !== undefined ? (<>
 							<Table sx={{minWidth: 650}} aria-label="simple table">
@@ -90,6 +105,9 @@ export const SelectDatasetsModal = (): JSX.Element => {
 													}}
 													selectDataset={selectDataset}
 													dataset={dataset}
+													selected={selectedDatasets.filter(ds =>
+														ds.id === dataset.id
+													).length > 0}
 												/>
 											);
 										})
@@ -114,6 +132,11 @@ export const SelectDatasetsModal = (): JSX.Element => {
 				) : (
 					<></>
 				)}
+				<Box className="inputGroup">
+					<Button variant="contained" onClick={() => onSave(selectedDatasets)}>
+						Next
+					</Button>
+				</Box>
 			</Grid>
 		</Grid>
 	);