improve dataset selection

Author: max-zilla

frontend/src/components/datasets/DatasetCard.tsx

@@ -6,7 +6,7 @@ import Typography from "@mui/material/Typography";
 import {Link} from "react-router-dom";
 import {parseDate} from "../../utils/common";
 import {CardActionArea, CardHeader, CardMedia, IconButton, Tooltip,} from "@mui/material";
-import {Add, Download} from "@mui/icons-material";
+import {Download} from "@mui/icons-material";
 import {generateThumbnailUrl} from "../../utils/visualization";
 import config from "../../app.config";
 
@@ -126,16 +126,6 @@ export default function DatasetCard(props: DatasetCardProps) {
 						<Download/>
 					</IconButton>
 				</Tooltip> : null}
-				<Tooltip title="Add">
-					<IconButton
-						href={`${config.hostname}/api/v2/datasets/${id}/download`}
-						color="primary"
-						aria-label="add"
-						sx={{mr: 3}}
-					>
-						<Add/>
-					</IconButton>
-				</Tooltip>
 				{/*<Tooltip title="Favorite">*/}
 				{/*	<IconButton color="primary" aria-label="favorite"  sx={{mr: 3}} disabled>*/}
 				{/*		<Favorite/>*/}

frontend/src/components/datasets/DatasetTableEntry.tsx

@@ -7,8 +7,16 @@ import {Button} from "@mui/material";
 import {parseDate} from "../../utils/common";
 import {generateThumbnailUrl} from "../../utils/visualization";
 import {MoreHoriz} from "@material-ui/icons";
+import {DatasetOut} from "../../openapi/v2";
 
-export function DatsetTableEntry(props) {
+type DatasetTableEntryProps = {
+	iconStyle: {};
+	selectDataset: any;
+	dataset: DatasetOut;
+};
+
+
+export default function DatsetTableEntry(props: DatasetTableEntryProps) {
 	const {iconStyle, selectDataset, dataset} = props;
 	const [thumbnailUrl, setThumbnailUrl] = useState("");
 
@@ -43,7 +51,7 @@ export function DatsetTableEntry(props) {
 				) : (
 					<Dataset sx={iconStyle}/>
 				)}
-				<Button onClick={() => selectDataset(dataset.id)}>
+				<Button onClick={() => selectDataset(dataset.id, dataset.name)}>
 					{dataset.name}
 				</Button>
 			</TableCell>

frontend/src/components/projects/SelectDatasetsModal.tsx

@@ -1,11 +1,21 @@
 import React, {ChangeEvent, useEffect, useState} from "react";
-import {Box, Grid, Pagination} from "@mui/material";
+import {Box, Chip, Grid, Pagination, Table} from "@mui/material";
 
 import {useDispatch, useSelector} from "react-redux";
 import config from "../../app.config";
 import {RootState} from "../../types/data";
 import {fetchDatasets} from "../../actions/dataset";
-import DatasetCard from "../datasets/DatasetCard";
+import DatasetTableEntry from "../datasets/DatasetTableEntry";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import TableCell from "@mui/material/TableCell";
+import TableBody from "@mui/material/TableBody";
+import {theme} from "../../theme";
+
+type SelectedDataset = {
+	id: string,
+	label: string
+};
 
 export const SelectDatasetsModal = (): JSX.Element => {
 	// Redux connect equivalent
@@ -19,6 +29,7 @@ export const SelectDatasetsModal = (): JSX.Element => {
 		(state: RootState) => state.dataset.datasets.metadata
 	);
 
+	const [selectedDatasets, setSelectedDatasets] = useState<SelectedDataset[]>([]);
 	const [currPageNum, setCurrPageNum] = useState<number>(1);
 	const [limit] = useState<number>(config.defaultDatasetPerPage);
 
@@ -27,6 +38,16 @@ export const SelectDatasetsModal = (): JSX.Element => {
 		listDatasets((currPageNum - 1) * limit, limit);
 	}, [currPageNum, limit]);
 
+	const selectDataset = (selectedDatasetId: string | undefined, selectedDatasetName: string | undefined) => {
+		// add dataset to selection list
+		if (selectedDatasetId && selectedDatasetName) {
+			setSelectedDatasets([
+				...selectedDatasets,
+				{id: selectedDatasetId, label: selectedDatasetName}
+			]);
+		}
+	};
+
 	// pagination
 	const handlePageChange = (_: ChangeEvent<unknown>, value: number) => {
 		const newSkip = (value - 1) * limit;
@@ -38,24 +59,44 @@ export const SelectDatasetsModal = (): JSX.Element => {
 		<Grid container spacing={4}>
 			<Grid item xs>
 				<Grid container spacing={2}>
-					{datasets !== undefined ? (
-						datasets.map((dataset) => {
+					{
+						selectedDatasets?.map((selected) => {
 							return (
-								<Grid item key={dataset.id} xs={12} sm={6} md={4} lg={3}>
-									<DatasetCard
-										id={dataset.id}
-										name={dataset.name}
-										author={`${dataset.creator.first_name} ${dataset.creator.last_name}`}
-										created={dataset.created}
-										description={dataset.description}
-										thumbnailId={dataset.thumbnail_id}
-										frozen={dataset.frozen}
-										frozenVersionNum={dataset.frozen_version_num}
-										download={false}
-									/>
-								</Grid>
+								<Chip label={selected.label} key={selected.id}/>
 							);
 						})
+					}
+				</Grid>
+				<Grid container spacing={2}>
+					{datasets !== undefined ? (<>
+							<Table sx={{minWidth: 650}} aria-label="simple table">
+								<TableHead>
+									<TableRow>
+										<TableCell>Name</TableCell>
+										<TableCell align="right">Created</TableCell>
+										<TableCell align="right">Size</TableCell>
+										<TableCell align="right">Type</TableCell>
+										<TableCell align="right"/>
+									</TableRow>
+								</TableHead>
+								<TableBody>
+									{
+										datasets.map((dataset) => {
+											return (
+												<DatasetTableEntry
+													iconStyle={{
+														verticalAlign: "middle",
+														color: theme.palette.primary.main,
+													}}
+													selectDataset={selectDataset}
+													dataset={dataset}
+												/>
+											);
+										})
+									}
+								</TableBody>
+							</Table>
+						</>
 					) : (
 						<></>
 					)}