Skip to content

Explore page cleanup #108

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
longshuicy merged 12 commits into from
Oct 10, 2022
Merged

Explore page cleanup #108

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
6ca2325
Removed placeholder right column on Explore page.
lmarini Sep 26, 2022
7402ece
Show only 5 max lines for description of dataset card and add ellypsis.
lmarini Oct 3, 2022
d0d7e38
Default sort dataset list by creation date descending.
lmarini Oct 3, 2022
9966526
Make sure Dataset CardActionArea fills the card so that CardAction is…
lmarini Oct 4, 2022
b38333f
Fixed dataset grid so that items are same width even if we don't have…
lmarini Oct 5, 2022
f44c263
New previous/next buttons on dataset list.
lmarini Oct 5, 2022
51185f2
Change default page size for dataset list to 20, a multiple of 4, the…
lmarini Oct 5, 2022
e70c177
Placeholder icons for download card download, favorite, share actions.
lmarini Oct 6, 2022
a5ba947
Merge branch 'main' into dashboar_layout
lmarini Oct 6, 2022
328eba6
Black formatting.
lmarini Oct 6, 2022
0356665
Extra margin around dataset card icons to make it easier to click on …
lmarini Oct 7, 2022
7cc2423
Set outer grid item size for proper layout when there is few datasets.
lmarini Oct 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion backend/app/routers/datasets.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
from collections.abc import Mapping, Iterable
from typing import List, Optional, Union

import pymongo
import pika
from bson import ObjectId
from bson import json_util
Expand Down Expand Up @@ -204,14 +205,20 @@ 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)
):
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
Expand Down
81 changes: 48 additions & 33 deletions frontend/src/components/Dashbard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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, IconButton, Typography, ButtonGroup} from "@mui/material";

import {Dataset, RootState} from "../types/data";
import {useDispatch, useSelector} from "react-redux";
Expand All @@ -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",
Expand All @@ -35,7 +38,7 @@ export const Dashboard = (): JSX.Element => {
const [datasetThumbnailList, setDatasetThumbnailList] = useState<any>([]);
// TODO add option to determine limit number; default show 5 datasets each time
const [currPageNum, setCurrPageNum] = useState<number>(0);
const [limit,] = useState<number>(21);
const [limit,] = useState<number>(20);
const [skip, setSkip] = useState<number | undefined>();
// TODO add switch to turn on and off "mine" dataset
const [mine,] = useState<boolean>(false);
Expand Down Expand Up @@ -127,14 +130,17 @@ export const Dashboard = (): JSX.Element => {
<div>
<TopBar/>
<div className="outer-container">
<MainBreadcrumbs paths={paths}/>
{/*Error Message dialogue*/}
<ActionModal actionOpen={errorOpen} actionTitle="Something went wrong..." actionText={reason}
actionBtnName="Report" handleActionBtnClick={handleErrorReport}
handleActionCancel={handleErrorCancel}/>
<Box m={1} display="flex" justifyContent="space-between" alignItems="flex-end">
<MainBreadcrumbs paths={paths}/>
<Button href="/create-dataset" variant="contained" sx={{display: "flex", alignItems: "center"}}>New
Dataset</Button></Box>
<div className="inner-container">
<Grid container spacing={4}>
<Grid item xs={12} md={8}>
Copy link
Member

@longshuicy longshuicy Oct 10, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the xs, md, lg, xl might be needed on the grid. otherwise it looks weird with small number of items

Copy link
Member Author

@lmarini lmarini Oct 10, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for catching this. Should be fixed now

<Grid item xs>
<Box sx={{borderBottom: 1, borderColor: 'divider'}}>
<Tabs value={selectedTabIndex} onChange={handleTabChange} aria-label="dashboard tabs">
<Tab sx={tab} label="Datasets" {...a11yProps(0)} />
Expand All @@ -146,7 +152,7 @@ export const Dashboard = (): JSX.Element => {
datasets !== undefined && datasetThumbnailList !== undefined ?
datasets.map((dataset) => {
return (
<Grid item xs>
<Grid item key={dataset.id} xs={12} sm={6} md={4} lg={3}>
<DatasetCard id={dataset.id} name={dataset.name}
author={`${dataset.author.first_name} ${dataset.author.last_name}`}
created={dataset.created}
Expand All @@ -158,40 +164,49 @@ export const Dashboard = (): JSX.Element => {
<></>
}
</Grid>
<Button onClick={previous} disabled={prevDisabled}>Prev</Button>
<Button onClick={next} disabled={nextDisabled}>Next</Button>
<Box display="flex" justifyContent="center" sx={{m: 1}}>
<ButtonGroup variant="contained" aria-label="previous next buttons">
<Button aria-label="previous" onClick={previous} disabled={prevDisabled}>
<ArrowBack/> Prev
</Button>
<Button aria-label="next" onClick={next} disabled={nextDisabled}>
Next <ArrowForward/>
</Button>
</ButtonGroup>
</Box>
</TabPanel>
<TabPanel value={selectedTabIndex} index={1}/>
<TabPanel value={selectedTabIndex} index={2}/>
<TabPanel value={selectedTabIndex} index={3}/>
<TabPanel value={selectedTabIndex} index={4}/>
</Grid>
<Grid item xs={12} md={4}>
<Box className="actionCard">
<Typography className="title">Create your dataset</Typography>
<Typography className="content">Some quick example text to tell users why they should
upload
their own data</Typography>
<Link className="link" href="/create-dataset">
Create Dataset
</Link>
</Box>
<Box className="actionCard">
<Typography className="title">Explore more dataset</Typography>
<Typography className="content">Some quick example text to tell users why they should
follow
more people</Typography>
<Link href="#" className="link">Go to Explore</Link>
</Box>
<Box className="actionCard">
<Typography className="title">Want to learn more about Clowder?</Typography>
<Typography className="content">Some quick example text to tell users why they should
read
the tutorial</Typography>
<Link href="https://clowderframework.org/" className="link" target="_blank">Show me
Tutorial</Link>
</Box>
</Grid>
{/* Commented out for now until we flesh it out and add the ability to close it and not show it */}
{/*<Grid item xs={12} md={4}>*/}
{/* <Box className="actionCard">*/}
{/* <Typography className="title">Create your dataset</Typography>*/}
{/* <Typography className="content">Some quick example text to tell users why they should*/}
{/* upload*/}
{/* their own data</Typography>*/}
{/* <Link className="link" href="/create-dataset">*/}
{/* Create Dataset*/}
{/* </Link>*/}
{/* </Box>*/}
{/* <Box className="actionCard">*/}
{/* <Typography className="title">Explore more dataset</Typography>*/}
{/* <Typography className="content">Some quick example text to tell users why they should*/}
{/* follow*/}
{/* more people</Typography>*/}
{/* <Link href="#" className="link">Go to Explore</Link>*/}
{/* </Box>*/}
{/* <Box className="actionCard">*/}
{/* <Typography className="title">Want to learn more about Clowder?</Typography>*/}
{/* <Typography className="content">Some quick example text to tell users why they should*/}
{/* read*/}
{/* the tutorial</Typography>*/}
{/* <Link href="https://clowderframework.org/" className="link" target="_blank">Show me*/}
{/* Tutorial</Link>*/}
{/* </Box>*/}
{/*</Grid>*/}
</Grid>
</div>
</div>
Expand Down
73 changes: 46 additions & 27 deletions frontend/src/components/datasets/DatasetCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,13 @@ 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} from "react-router-dom";
import {parseDate} from "../../utils/common";
import {datasetDownloaded} from "../../actions/dataset";
import {useDispatch} from "react-redux";
import {CardActionArea, IconButton, Tooltip} from "@mui/material";
import {Download} from "@mui/icons-material";
import {Favorite, Share} from "@material-ui/icons";

type DatasetCardProps = {
id: string,
Expand All @@ -18,37 +21,53 @@ 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);
// 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 (
<Card key={id} sx={{ minWidth: 275 }}>
<CardContent>
<Typography variant="h5" component="div">
{name}
</Typography>
<Typography color="secondary">
{author}
</Typography>
<Typography sx={{ mb: 1.5 }} color="secondary">
{formattedCreated}
</Typography>
<Typography variant="body2">
{description}
</Typography>
</CardContent>
<CardActions>
<Button size="small" onClick={() => selectDataset(id)}>View</Button>
<Button size="small" onClick={() => downloadDataset(id, name)}>Download</Button>
<Card key={id} sx={{height: "100%", display: "flex", flexDirection: "column"}}>
<CardActionArea component={Link} to={`/datasets/${id}`} sx={{height: "100%"}}>
<CardContent>
<Typography variant="h5" component="div">
{name}
</Typography>
<Typography color="secondary">
{author}
</Typography>
<Typography sx={{mb: 1.5}} color="secondary">
{formattedCreated}
</Typography>
<Typography variant="body2" sx={{
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitLineClamp: '5',
WebkitBoxOrient: 'vertical',
}}>
{description}
</Typography>
</CardContent>
</CardActionArea>
<CardActions sx={{marginTop: "auto"}}>
<Tooltip title="Download">
<IconButton onClick={() => downloadDataset(id, name)} color="primary" aria-label="download" sx={{mr: 3}}>
<Download/>
</IconButton>
</Tooltip>
<Tooltip title="Favorite">
<IconButton color="primary" aria-label="favorite" sx={{mr: 3}} disabled>
<Favorite/>
</IconButton>
</Tooltip>
<Tooltip title="Share">
<IconButton color="primary" aria-label="share" sx={{mr: 3}} disabled>
<Share/>
</IconButton>
</Tooltip>
</CardActions>
</Card>
);
Expand Down