Skip to content

Commit 940b517

Browse files
max-zillamax-zilla
committed
messing with dataset selection mechanism
1 parent fe8838e commit 940b517

File tree

6 files changed

+137
-45
lines changed

6 files changed

+137
-45
lines changed

‎frontend/src/components/Explore.tsx‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import React, { ChangeEvent, useEffect, useState } from "react";
2-
import { Box, Button, Grid, Pagination, Tab, Tabs } from "@mui/material";
1+
import React, {ChangeEvent, useEffect, useState} from "react";
2+
import {Box, Button, Grid, Pagination, Tab, Tabs} from "@mui/material";
33

4-
import { RootState } from "../types/data";
5-
import { useDispatch, useSelector } from "react-redux";
6-
import { fetchDatasets } from "../actions/dataset";
4+
import {RootState} from "../types/data";
5+
import {useDispatch, useSelector} from "react-redux";
6+
import {fetchDatasets} from "../actions/dataset";
77

8-
import { a11yProps, TabPanel } from "./tabs/TabComponent";
8+
import {a11yProps, TabPanel} from "./tabs/TabComponent";
99
import DatasetCard from "./datasets/DatasetCard";
1010
import Layout from "./Layout";
11-
import { Link as RouterLink } from "react-router-dom";
12-
import { ErrorModal } from "./errors/ErrorModal";
13-
import { DatasetOut } from "../openapi/v2";
11+
import {Link as RouterLink} from "react-router-dom";
12+
import {ErrorModal} from "./errors/ErrorModal";
13+
import {DatasetOut} from "../openapi/v2";
1414
import config from "../app.config";
1515

1616
const tab = {
@@ -83,10 +83,10 @@ export const Explore = (): JSX.Element => {
8383
return (
8484
<Layout>
8585
{/*Error Message dialogue*/}
86-
<ErrorModal errorOpen={errorOpen} setErrorOpen={setErrorOpen} />
86+
<ErrorModal errorOpen={errorOpen} setErrorOpen={setErrorOpen}/>
8787
<Grid container spacing={4}>
8888
<Grid item xs>
89-
<Box sx={{ borderBottom: 1, borderColor: "divider" }}>
89+
<Box sx={{borderBottom: 1, borderColor: "divider"}}>
9090
<Tabs
9191
value={selectedTabIndex}
9292
onChange={handleTabChange}
@@ -111,6 +111,7 @@ export const Explore = (): JSX.Element => {
111111
thumbnailId={dataset.thumbnail_id}
112112
frozen={dataset.frozen}
113113
frozenVersionNum={dataset.frozen_version_num}
114+
download={true}
114115
/>
115116
</Grid>
116117
);
@@ -129,7 +130,7 @@ export const Explore = (): JSX.Element => {
129130
component={RouterLink}
130131
to="/create-dataset"
131132
variant="contained"
132-
sx={{ m: 2 }}
133+
sx={{m: 2}}
133134
>
134135
Create Dataset
135136
</Button>
@@ -140,7 +141,7 @@ export const Explore = (): JSX.Element => {
140141
)}
141142
</Grid>
142143
{datasets.length !== 0 ? (
143-
<Box display="flex" justifyContent="center" sx={{ m: 1 }}>
144+
<Box display="flex" justifyContent="center" sx={{m: 1}}>
144145
<Pagination
145146
count={Math.ceil(pageMetadata.total_count / limit)}
146147
page={currPageNum}
@@ -166,6 +167,7 @@ export const Explore = (): JSX.Element => {
166167
created={dataset.created}
167168
description={dataset.description}
168169
thumbnailId={dataset.thumbnail_id}
170+
download={true}
169171
/>
170172
</Grid>
171173
);
@@ -184,7 +186,7 @@ export const Explore = (): JSX.Element => {
184186
component={RouterLink}
185187
to="/create-dataset"
186188
variant="contained"
187-
sx={{ m: 2 }}
189+
sx={{m: 2}}
188190
>
189191
Create Dataset
190192
</Button>
@@ -195,7 +197,7 @@ export const Explore = (): JSX.Element => {
195197
)}
196198
</Grid>
197199
{datasets.length !== 0 ? (
198-
<Box display="flex" justifyContent="center" sx={{ m: 1 }}>
200+
<Box display="flex" justifyContent="center" sx={{m: 1}}>
199201
<Pagination
200202
count={Math.ceil(pageMetadata.total_count / limit)}
201203
page={currPageNum}
@@ -208,9 +210,9 @@ export const Explore = (): JSX.Element => {
208210
<></>
209211
)}
210212
</TabPanel>
211-
<TabPanel value={selectedTabIndex} index={4} />
212-
<TabPanel value={selectedTabIndex} index={2} />
213-
<TabPanel value={selectedTabIndex} index={3} />
213+
<TabPanel value={selectedTabIndex} index={4}/>
214+
<TabPanel value={selectedTabIndex} index={2}/>
215+
<TabPanel value={selectedTabIndex} index={3}/>
214216
</Grid>
215217
</Grid>
216218
</Layout>

‎frontend/src/components/datasets/DatasetCard.tsx‎

Lines changed: 29 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,13 @@
1-
import React, { useEffect, useState } from "react";
1+
import React, {useEffect, useState} from "react";
22
import Card from "@mui/material/Card";
33
import CardActions from "@mui/material/CardActions";
44
import CardContent from "@mui/material/CardContent";
55
import Typography from "@mui/material/Typography";
6-
import { Link } from "react-router-dom";
7-
import { parseDate } from "../../utils/common";
8-
import {
9-
CardActionArea,
10-
CardHeader,
11-
CardMedia,
12-
IconButton,
13-
Tooltip,
14-
} from "@mui/material";
15-
import { Download } from "@mui/icons-material";
16-
import { generateThumbnailUrl } from "../../utils/visualization";
6+
import {Link} from "react-router-dom";
7+
import {parseDate} from "../../utils/common";
8+
import {CardActionArea, CardHeader, CardMedia, IconButton, Tooltip,} from "@mui/material";
9+
import {Add, Download} from "@mui/icons-material";
10+
import {generateThumbnailUrl} from "../../utils/visualization";
1711
import config from "../../app.config";
1812

1913
type DatasetCardProps = {
@@ -26,6 +20,7 @@ type DatasetCardProps = {
2620
publicView?: boolean | false;
2721
frozen?: string;
2822
frozenVersionNum?: number;
23+
download: boolean;
2924
};
3025

3126
export default function DatasetCard(props: DatasetCardProps) {
@@ -39,6 +34,7 @@ export default function DatasetCard(props: DatasetCardProps) {
3934
publicView,
4035
frozen,
4136
frozenVersionNum,
37+
download,
4238
} = props;
4339

4440
const [thumbnailUrl, setThumbnailUrl] = useState("");
@@ -57,24 +53,24 @@ export default function DatasetCard(props: DatasetCardProps) {
5753
return (
5854
<Card
5955
key={id}
60-
sx={{ display: "flex", flexDirection: "column", height: "100%" }}
56+
sx={{display: "flex", flexDirection: "column", height: "100%"}}
6157
variant="outlined"
6258
>
6359
{publicView ? (
6460
<CardActionArea
6561
component={Link}
6662
to={`/public_datasets/${id}`}
67-
sx={{ height: "100%" }}
63+
sx={{height: "100%"}}
6864
>
69-
<CardHeader title={name} subheader={subheader} />
65+
<CardHeader title={name} subheader={subheader}/>
7066
{thumbnailId ? (
7167
<CardMedia
7268
component="img"
7369
image={thumbnailUrl}
7470
alt={`${name}_thumbnail`}
7571
/>
7672
) : null}
77-
<CardContent sx={{ py: 0 }}>
73+
<CardContent sx={{py: 0}}>
7874
<Typography
7975
variant="body2"
8076
sx={{
@@ -93,17 +89,17 @@ export default function DatasetCard(props: DatasetCardProps) {
9389
<CardActionArea
9490
component={Link}
9591
to={`/datasets/${id}`}
96-
sx={{ height: "100%" }}
92+
sx={{height: "100%"}}
9793
>
98-
<CardHeader title={name} subheader={subheader} />
94+
<CardHeader title={name} subheader={subheader}/>
9995
{thumbnailId ? (
10096
<CardMedia
10197
component="img"
10298
image={thumbnailUrl}
10399
alt={`${name}_thumbnail`}
104100
/>
105101
) : null}
106-
<CardContent sx={{ py: 0 }}>
102+
<CardContent sx={{py: 0}}>
107103
<Typography
108104
variant="body2"
109105
sx={{
@@ -119,15 +115,25 @@ export default function DatasetCard(props: DatasetCardProps) {
119115
</CardContent>
120116
</CardActionArea>
121117
)}
122-
<CardActions sx={{ pb: 0, justifyContent: "space-between" }}>
123-
<Tooltip title="Download">
118+
<CardActions sx={{pb: 0, justifyContent: "space-between"}}>
119+
{download ? <Tooltip title="Download">
124120
<IconButton
125121
href={`${config.hostname}/api/v2/datasets/${id}/download`}
126122
color="primary"
127123
aria-label="download"
128-
sx={{ mr: 3 }}
124+
sx={{mr: 3}}
129125
>
130-
<Download />
126+
<Download/>
127+
</IconButton>
128+
</Tooltip> : null}
129+
<Tooltip title="Add">
130+
<IconButton
131+
href={`${config.hostname}/api/v2/datasets/${id}/download`}
132+
color="primary"
133+
aria-label="add"
134+
sx={{mr: 3}}
135+
>
136+
<Add/>
131137
</IconButton>
132138
</Tooltip>
133139
{/*<Tooltip title="Favorite">*/}

‎frontend/src/components/projects/CreateProject.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {useNavigate} from "react-router-dom";
88
import Layout from "../Layout";
99
import {ErrorModal} from "../errors/ErrorModal";
1010
import {CreateProjectModal} from "./CreateProjectModal"
11+
import {SelectDatasetsModal} from "./SelectDatasetsModal";
1112

1213
export const CreateProject = (): JSX.Element => {
1314
const dispatch = useDispatch();
@@ -90,14 +91,16 @@ export const CreateProject = (): JSX.Element => {
9091
<Step key="select-datasets">
9192
<StepLabel>Select Datasets</StepLabel>
9293
<StepContent>
93-
<Box />
94+
<Box>
95+
<SelectDatasetsModal/>
96+
</Box>
9497
</StepContent>
9598
</Step>
9699

97100
<Step key="invite-users">
98101
<StepLabel>Invite Users</StepLabel>
99102
<StepContent>
100-
<Box />
103+
<Box/>
101104
</StepContent>
102105
</Step>
103106
</Stepper>

‎frontend/src/components/projects/SelectDatasetsModal.tsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import React, {ChangeEvent, useEffect, useState} from "react";
2+
import {Box, Grid, Pagination} from "@mui/material";
3+
4+
import {useDispatch, useSelector} from "react-redux";
5+
import config from "../../app.config";
6+
import {RootState} from "../../types/data";
7+
import {fetchDatasets} from "../../actions/dataset";
8+
import DatasetCard from "../datasets/DatasetCard";
9+
10+
export const SelectDatasetsModal = (): JSX.Element => {
11+
// Redux connect equivalent
12+
const dispatch = useDispatch();
13+
const listDatasets = (skip: number | undefined, limit: number | undefined) =>
14+
dispatch(fetchDatasets(skip, limit));
15+
const datasets = useSelector(
16+
(state: RootState) => state.dataset.datasets.data
17+
);
18+
const pageMetadata = useSelector(
19+
(state: RootState) => state.dataset.datasets.metadata
20+
);
21+
22+
const [currPageNum, setCurrPageNum] = useState<number>(1);
23+
const [limit] = useState<number>(config.defaultDatasetPerPage);
24+
25+
// Admin mode will fetch all projects
26+
useEffect(() => {
27+
listDatasets((currPageNum - 1) * limit, limit);
28+
}, [currPageNum, limit]);
29+
30+
// pagination
31+
const handlePageChange = (_: ChangeEvent<unknown>, value: number) => {
32+
const newSkip = (value - 1) * limit;
33+
setCurrPageNum(value);
34+
listDatasets(newSkip, limit);
35+
};
36+
37+
return (
38+
<Grid container spacing={4}>
39+
<Grid item xs>
40+
<Grid container spacing={2}>
41+
{datasets !== undefined ? (
42+
datasets.map((dataset) => {
43+
return (
44+
<Grid item key={dataset.id} xs={12} sm={6} md={4} lg={3}>
45+
<DatasetCard
46+
id={dataset.id}
47+
name={dataset.name}
48+
author={`${dataset.creator.first_name} ${dataset.creator.last_name}`}
49+
created={dataset.created}
50+
description={dataset.description}
51+
thumbnailId={dataset.thumbnail_id}
52+
frozen={dataset.frozen}
53+
frozenVersionNum={dataset.frozen_version_num}
54+
download={false}
55+
/>
56+
</Grid>
57+
);
58+
})
59+
) : (
60+
<></>
61+
)}
62+
</Grid>
63+
{datasets !== undefined && pageMetadata.total_count !== undefined && datasets.length !== 0 ? (
64+
<Box display="flex" justifyContent="center" sx={{m: 1}}>
65+
<Pagination
66+
count={Math.ceil(pageMetadata.total_count / limit)}
67+
page={currPageNum}
68+
onChange={handlePageChange}
69+
shape="rounded"
70+
variant="outlined"
71+
/>
72+
</Box>
73+
) : (
74+
<></>
75+
)}
76+
</Grid>
77+
</Grid>
78+
);
79+
};

‎frontend/src/schema/projectSchema.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,13 @@
2020
"ui:autofocus": true,
2121
"ui:emptyValue": "",
2222
"ui:placeholder": "ui:emptyValue causes this field to always be valid despite being required",
23-
"ui:description": "Name of the dataset."
23+
"ui:description": "Name of the project."
2424
},
2525
"description": {
2626
"ui:autofocus": true,
2727
"ui:emptyValue": "",
2828
"ui:placeholder": "ui:emptyValue causes this field to always be valid despite being required",
29-
"ui:description": "Description of a dataset.",
29+
"ui:description": "Description of a project.",
3030
"ui:widget": "TextAreaWidget"
3131
}
3232
}

‎frontend/src/types/data.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,8 @@ export interface ProjectState {
125125
newProject: ProjectOut;
126126
datasets: DatasetOut[];
127127
members: DatasetRoles;
128+
selectDatasets: Paged;
129+
selectUsers: Paged;
128130
}
129131

130132
export interface DatasetState {

0 commit comments

Comments
 (0)