From 6ca23252659689296fd1b1f1dd8391b484b7d873 Mon Sep 17 00:00:00 2001 From: Luigi Marini Date: Mon, 26 Sep 2022 15:52:00 -0500 Subject: [PATCH 01/11] Removed placeholder right column on Explore page. Switched to clickable card for datasets. --- frontend/src/components/Dashbard.tsx | 55 ++++++++++--------- .../src/components/datasets/DatasetCard.tsx | 43 +++++++-------- 2 files changed, 48 insertions(+), 50 deletions(-) diff --git a/frontend/src/components/Dashbard.tsx b/frontend/src/components/Dashbard.tsx index 950506063..694fcb170 100644 --- a/frontend/src/components/Dashbard.tsx +++ b/frontend/src/components/Dashbard.tsx @@ -150,7 +150,7 @@ export const Dashboard = (): JSX.Element => { handleActionCancel={handleErrorCancel}/>
- + @@ -182,32 +182,33 @@ export const Dashboard = (): JSX.Element => { - - - Create your dataset - Some quick example text to tell users why they should - upload - their own data - - Create Dataset - - - - Explore more dataset - Some quick example text to tell users why they should - follow - more people - Go to Explore - - - Want to learn more about Clowder? - Some quick example text to tell users why they should - read - the tutorial - Show me - Tutorial - - + {/* Commented out for now until we flesh it out and add the ability to close it and not show it */} + {/**/} + {/* */} + {/* Create your dataset*/} + {/* Some quick example text to tell users why they should*/} + {/* upload*/} + {/* their own data*/} + {/* */} + {/* Create Dataset*/} + {/* */} + {/* */} + {/* */} + {/* Explore more dataset*/} + {/* Some quick example text to tell users why they should*/} + {/* follow*/} + {/* more people*/} + {/* Go to Explore*/} + {/* */} + {/* */} + {/* Want to learn more about Clowder?*/} + {/* Some quick example text to tell users why they should*/} + {/* read*/} + {/* the tutorial*/} + {/* Show me*/} + {/* Tutorial*/} + {/* */} + {/**/}
diff --git a/frontend/src/components/datasets/DatasetCard.tsx b/frontend/src/components/datasets/DatasetCard.tsx index e9cd257cc..1bcba7592 100644 --- a/frontend/src/components/datasets/DatasetCard.tsx +++ b/frontend/src/components/datasets/DatasetCard.tsx @@ -4,10 +4,11 @@ import CardActions from '@mui/material/CardActions'; import CardContent from '@mui/material/CardContent'; import Button from '@mui/material/Button'; import Typography from '@mui/material/Typography'; -import {useNavigate} from "react-router-dom"; +import {Link, useNavigate} from "react-router-dom"; import {parseDate} from "../../utils/common"; import {datasetDownloaded} from "../../actions/dataset"; import {useDispatch} from "react-redux"; +import {CardActionArea} from "@mui/material"; type DatasetCardProps = { id: string, @@ -24,30 +25,26 @@ export default function DatasetCard(props: DatasetCardProps) { const downloadDataset = (datasetId:string|undefined, filename:string|undefined) => dispatch(datasetDownloaded(datasetId, filename)) const formattedCreated = parseDate(created); - // use history hook to redirect/navigate between routes - const history = useNavigate(); - const selectDataset = (selectedDatasetId: string) => { - // Redirect to dataset route with dataset Id - history(`/datasets/${selectedDatasetId}`); - }; + return ( - - - - {name} - - - {author} - - - {formattedCreated} - - - {description} - - + + + + + {name} + + + {author} + + + {formattedCreated} + + + {description} + + + - From 7402eceebd3b2989af576f28bd40bb23e56f3ce7 Mon Sep 17 00:00:00 2001 From: Luigi Marini Date: Mon, 3 Oct 2022 16:33:29 -0500 Subject: [PATCH 02/11] Show only 5 max lines for description of dataset card and add ellypsis. --- frontend/src/components/Dashbard.tsx | 1 + frontend/src/components/datasets/DatasetCard.tsx | 12 +++++++++--- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/Dashbard.tsx b/frontend/src/components/Dashbard.tsx index 694fcb170..ee159b364 100644 --- a/frontend/src/components/Dashbard.tsx +++ b/frontend/src/components/Dashbard.tsx @@ -149,6 +149,7 @@ export const Dashboard = (): JSX.Element => { actionBtnName="Report" handleActionBtnClick={handleErrorReport} handleActionCancel={handleErrorCancel}/>
+
Create Dataset
diff --git a/frontend/src/components/datasets/DatasetCard.tsx b/frontend/src/components/datasets/DatasetCard.tsx index 1bcba7592..216faac02 100644 --- a/frontend/src/components/datasets/DatasetCard.tsx +++ b/frontend/src/components/datasets/DatasetCard.tsx @@ -27,7 +27,7 @@ export default function DatasetCard(props: DatasetCardProps) { const formattedCreated = parseDate(created); return ( - + @@ -39,12 +39,18 @@ export default function DatasetCard(props: DatasetCardProps) { {formattedCreated} - + {description} - + From d0d7e38d6873fd7ead71fb17e6958bb3a42d3bc2 Mon Sep 17 00:00:00 2001 From: Luigi Marini Date: Mon, 3 Oct 2022 16:33:59 -0500 Subject: [PATCH 03/11] Default sort dataset list by creation date descending. --- backend/app/routers/datasets.py | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/backend/app/routers/datasets.py b/backend/app/routers/datasets.py index 7f2d6f270..de01e6e23 100644 --- a/backend/app/routers/datasets.py +++ b/backend/app/routers/datasets.py @@ -8,6 +8,7 @@ from collections.abc import Mapping, Iterable from typing import List, Optional +import pymongo from bson import ObjectId from bson import json_util from fastapi import APIRouter, HTTPException, Depends, File, UploadFile, Response @@ -186,6 +187,7 @@ async def get_datasets( for doc in ( await db["datasets"] .find({"author.email": user_id}) + .sort([('created', pymongo.DESCENDING)]) .skip(skip) .limit(limit) .to_list(length=limit) @@ -193,7 +195,7 @@ async def get_datasets( datasets.append(DatasetOut.from_mongo(doc)) else: for doc in ( - await db["datasets"].find().skip(skip).limit(limit).to_list(length=limit) + await db["datasets"].find().sort([('created', pymongo.DESCENDING)]).skip(skip).limit(limit).to_list(length=limit) ): datasets.append(DatasetOut.from_mongo(doc)) return datasets From 9966526e34275a4decaf8dc5a09fb58fe0e64bd4 Mon Sep 17 00:00:00 2001 From: Luigi Marini Date: Tue, 4 Oct 2022 16:57:21 -0500 Subject: [PATCH 04/11] Make sure Dataset CardActionArea fills the card so that CardAction is flushed at the bottom. --- frontend/src/components/Dashbard.tsx | 8 ++++--- .../src/components/datasets/DatasetCard.tsx | 24 +++++++++---------- 2 files changed, 17 insertions(+), 15 deletions(-) diff --git a/frontend/src/components/Dashbard.tsx b/frontend/src/components/Dashbard.tsx index ee159b364..96d6a224a 100644 --- a/frontend/src/components/Dashbard.tsx +++ b/frontend/src/components/Dashbard.tsx @@ -1,5 +1,5 @@ import React, {useEffect, useState} from "react"; -import {Box, Button, Grid, Link, Tab, Tabs, Typography} from "@mui/material"; +import {Box, Button, Grid, Tab, Tabs, Link} from "@mui/material"; import {Dataset, RootState} from "../types/data"; import {useDispatch, useSelector} from "react-redux"; @@ -136,7 +136,7 @@ export const Dashboard = (): JSX.Element => {
- + {/*Confirmation dialogue*/} { + + +
-
Create Dataset
diff --git a/frontend/src/components/datasets/DatasetCard.tsx b/frontend/src/components/datasets/DatasetCard.tsx index 216faac02..abe4d7a95 100644 --- a/frontend/src/components/datasets/DatasetCard.tsx +++ b/frontend/src/components/datasets/DatasetCard.tsx @@ -4,7 +4,7 @@ import CardActions from '@mui/material/CardActions'; import CardContent from '@mui/material/CardContent'; import Button from '@mui/material/Button'; import Typography from '@mui/material/Typography'; -import {Link, useNavigate} from "react-router-dom"; +import {Link} from "react-router-dom"; import {parseDate} from "../../utils/common"; import {datasetDownloaded} from "../../actions/dataset"; import {useDispatch} from "react-redux"; @@ -19,16 +19,16 @@ type DatasetCardProps = { } export default function DatasetCard(props: DatasetCardProps) { - const { id, name, author, created, description} = props; + const {id, name, author, created, description} = props; const dispatch = useDispatch(); - const downloadDataset = (datasetId:string|undefined, filename:string|undefined) => dispatch(datasetDownloaded(datasetId, filename)) + const downloadDataset = (datasetId: string | undefined, filename: string | undefined) => dispatch(datasetDownloaded(datasetId, filename)) const formattedCreated = parseDate(created); return ( - + {name} @@ -39,18 +39,18 @@ export default function DatasetCard(props: DatasetCardProps) { {formattedCreated} - + {description} - + From b38333f6fd5e98b12a924941ae091947f0659e79 Mon Sep 17 00:00:00 2001 From: Luigi Marini Date: Wed, 5 Oct 2022 11:06:06 -0500 Subject: [PATCH 05/11] Fixed dataset grid so that items are same width even if we don't have enough for one row. --- frontend/src/components/Dashbard.tsx | 2 +- frontend/src/components/datasets/DatasetCard.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/Dashbard.tsx b/frontend/src/components/Dashbard.tsx index 96d6a224a..76cf2010d 100644 --- a/frontend/src/components/Dashbard.tsx +++ b/frontend/src/components/Dashbard.tsx @@ -165,7 +165,7 @@ export const Dashboard = (): JSX.Element => { datasets !== undefined && datasetThumbnailList !== undefined ? datasets.map((dataset) => { return ( - + + From f44c2631258a4102dbb88a18da482bcd8568f63c Mon Sep 17 00:00:00 2001 From: Luigi Marini Date: Wed, 5 Oct 2022 11:48:33 -0500 Subject: [PATCH 06/11] New previous/next buttons on dataset list. --- frontend/src/components/Dashbard.tsx | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/Dashbard.tsx b/frontend/src/components/Dashbard.tsx index 76cf2010d..eaf9aedff 100644 --- a/frontend/src/components/Dashbard.tsx +++ b/frontend/src/components/Dashbard.tsx @@ -1,5 +1,5 @@ import React, {useEffect, useState} from "react"; -import {Box, Button, Grid, Tab, Tabs, Link} from "@mui/material"; +import {Box, Button, Grid, Tab, Tabs, Link, IconButton, Typography, ButtonGroup} from "@mui/material"; import {Dataset, RootState} from "../types/data"; import {useDispatch, useSelector} from "react-redux"; @@ -13,6 +13,9 @@ import {MainBreadcrumbs} from "./navigation/BreadCrumb"; import {ActionModal} from "./dialog/ActionModal"; import DatasetCard from "./datasets/DatasetCard"; import config from "../app.config"; +import {Pagination} from "@mui/lab"; +import {ArrowBack, ArrowBackIos, ArrowForward, ArrowForwardIos} from "@material-ui/icons"; +import {ArrowBackIosNew} from "@mui/icons-material"; const tab = { fontStyle: "normal", @@ -148,9 +151,10 @@ export const Dashboard = (): JSX.Element => { - + - +
@@ -177,8 +181,16 @@ export const Dashboard = (): JSX.Element => { <> } - - + + + + + + From 51185f2e201dd6aceecd1e0f4261c99eed1612b6 Mon Sep 17 00:00:00 2001 From: Luigi Marini Date: Wed, 5 Oct 2022 11:49:50 -0500 Subject: [PATCH 07/11] Change default page size for dataset list to 20, a multiple of 4, the default screen size columns size. --- frontend/src/components/Dashbard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/Dashbard.tsx b/frontend/src/components/Dashbard.tsx index eaf9aedff..e0a616816 100644 --- a/frontend/src/components/Dashbard.tsx +++ b/frontend/src/components/Dashbard.tsx @@ -38,7 +38,7 @@ export const Dashboard = (): JSX.Element => { const [datasetThumbnailList, setDatasetThumbnailList] = useState([]); // TODO add option to determine limit number; default show 5 datasets each time const [currPageNum, setCurrPageNum] = useState(0); - const [limit,] = useState(21); + const [limit,] = useState(20); const [skip, setSkip] = useState(); // TODO add switch to turn on and off "mine" dataset const [mine,] = useState(false); From e70c177e41e11e56467bd94a01da65d80a4fc883 Mon Sep 17 00:00:00 2001 From: Luigi Marini Date: Thu, 6 Oct 2022 08:56:47 -0500 Subject: [PATCH 08/11] Placeholder icons for download card download, favorite, share actions. --- .../src/components/datasets/DatasetCard.tsx | 22 ++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/datasets/DatasetCard.tsx b/frontend/src/components/datasets/DatasetCard.tsx index 1494111f5..bb5ae31a3 100644 --- a/frontend/src/components/datasets/DatasetCard.tsx +++ b/frontend/src/components/datasets/DatasetCard.tsx @@ -8,7 +8,9 @@ import {Link} from "react-router-dom"; import {parseDate} from "../../utils/common"; import {datasetDownloaded} from "../../actions/dataset"; import {useDispatch} from "react-redux"; -import {CardActionArea} from "@mui/material"; +import {CardActionArea, IconButton, Tooltip} from "@mui/material"; +import {Download} from "@mui/icons-material"; +import {Favorite, Share} from "@material-ui/icons"; type DatasetCardProps = { id: string, @@ -28,7 +30,7 @@ export default function DatasetCard(props: DatasetCardProps) { return ( - + {name} @@ -51,7 +53,21 @@ export default function DatasetCard(props: DatasetCardProps) { - + + downloadDataset(id, name)} color="primary" aria-label="download"> + + + + + + + + + + + + + ); From 328eba664f010f5538e3fe124311eacebaa75810 Mon Sep 17 00:00:00 2001 From: Luigi Marini Date: Thu, 6 Oct 2022 09:31:17 -0500 Subject: [PATCH 09/11] Black formatting. --- backend/app/routers/datasets.py | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/backend/app/routers/datasets.py b/backend/app/routers/datasets.py index a46c8d9f3..9d4ec5ae8 100644 --- a/backend/app/routers/datasets.py +++ b/backend/app/routers/datasets.py @@ -205,7 +205,7 @@ async def get_datasets( for doc in ( await db["datasets"] .find({"author.email": user_id}) - .sort([('created', pymongo.DESCENDING)]) + .sort([("created", pymongo.DESCENDING)]) .skip(skip) .limit(limit) .to_list(length=limit) @@ -213,7 +213,12 @@ async def get_datasets( datasets.append(DatasetOut.from_mongo(doc)) else: for doc in ( - await db["datasets"].find().sort([('created', pymongo.DESCENDING)]).skip(skip).limit(limit).to_list(length=limit) + await db["datasets"] + .find() + .sort([("created", pymongo.DESCENDING)]) + .skip(skip) + .limit(limit) + .to_list(length=limit) ): datasets.append(DatasetOut.from_mongo(doc)) return datasets From 03566651948a6206501ab453935dd0fb1b45823c Mon Sep 17 00:00:00 2001 From: Luigi Marini Date: Fri, 7 Oct 2022 12:52:15 -0500 Subject: [PATCH 10/11] Extra margin around dataset card icons to make it easier to click on icons. --- frontend/src/components/datasets/DatasetCard.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/datasets/DatasetCard.tsx b/frontend/src/components/datasets/DatasetCard.tsx index bb5ae31a3..49e2c5ef1 100644 --- a/frontend/src/components/datasets/DatasetCard.tsx +++ b/frontend/src/components/datasets/DatasetCard.tsx @@ -54,17 +54,17 @@ export default function DatasetCard(props: DatasetCardProps) { - downloadDataset(id, name)} color="primary" aria-label="download"> + downloadDataset(id, name)} color="primary" aria-label="download" sx={{mr: 3}}> - + - + From 7cc2423f91aa04c6f2f91baec8664d1e7518dfde Mon Sep 17 00:00:00 2001 From: Luigi Marini Date: Mon, 10 Oct 2022 13:36:29 -0500 Subject: [PATCH 11/11] Set outer grid item size for proper layout when there is few datasets. --- frontend/src/components/Dashbard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/Dashbard.tsx b/frontend/src/components/Dashbard.tsx index 0a444603c..357786536 100644 --- a/frontend/src/components/Dashbard.tsx +++ b/frontend/src/components/Dashbard.tsx @@ -140,7 +140,7 @@ export const Dashboard = (): JSX.Element => { Dataset
- +