Skip to content

Commit 5fab9c1

Browse files
lmarinilmarini
authored
UI tweaks (#216)
* Removed extra white space around the dataset tiles on explore page. Removed extra styles for tab and gray line across tabs. * Removed extra white space around the dataset page. * Removed extra white space around the file page. * Human readable size on file page. Removed extra dividers on file page. * Added download button to file page. * List file details as a stacked list of key value pairs with values first and smaller/grey after. * Reusable StackedList.tsx component for showing simple list of key value pairs. * Use new StackedList.tsx component to show dataset details. * Enabled link in last element of breadcrumb so we can go back to dataset from file. Removed breadcrumb from dataset page since it just took us back to explore page. * Added icons to tabs on dataset page to make tabs more visible. * Added dataset icon to dataset tab on explore page. * Removed button to define new metadata entries from file and dataset pages to simplify interface. Move add metadata button to bottom of file and dataset pages. * Renamed menu entry to "Metadata Definitions."
1 parent ac2a01c commit 5fab9c1

File tree

10 files changed

+345
-435
lines changed

10 files changed

+345
-435
lines changed

‎frontend/src/components/Explore.tsx‎

Lines changed: 45 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, {useEffect, useState} from "react";
22
import {Box, Button, ButtonGroup, Grid, Tab, Tabs} from "@mui/material";
33

4-
import {Dataset, RootState} from "../types/data";
4+
import {RootState} from "../types/data";
55
import {useDispatch, useSelector} from "react-redux";
66
import {fetchDatasets} from "../actions/dataset";
77
import {resetFailedReason} from "../actions/common";
@@ -13,17 +13,10 @@ import DatasetCard from "./datasets/DatasetCard";
1313
import config from "../app.config";
1414
import {ArrowBack, ArrowForward} from "@material-ui/icons";
1515
import Layout from "./Layout";
16-
17-
const tab = {
18-
fontStyle: "normal",
19-
fontWeight: "normal",
20-
fontSize: "16px",
21-
textTransform: "capitalize",
22-
};
16+
import DatasetIcon from "@mui/icons-material/Dataset";
2317

2418
export const Explore = (): JSX.Element => {
2519

26-
2720
// Redux connect equivalent
2821
const dispatch = useDispatch();
2922
const listDatasets = (skip: number | undefined, limit: number | undefined, mine: boolean | undefined) => dispatch(fetchDatasets(skip, limit, mine));
@@ -42,7 +35,6 @@ export const Explore = (): JSX.Element => {
4235
const [prevDisabled, setPrevDisabled] = useState<boolean>(true);
4336
const [nextDisabled, setNextDisabled] = useState<boolean>(false);
4437
const [selectedTabIndex, setSelectedTabIndex] = useState(0);
45-
const [selectedDataset, _] = useState<Dataset>();
4638

4739
// component did mount
4840
useEffect(() => {
@@ -117,56 +109,50 @@ export const Explore = (): JSX.Element => {
117109

118110
return (
119111
<Layout>
120-
<div className="outer-container">
121-
{/*Error Message dialogue*/}
122-
<ActionModal actionOpen={errorOpen} actionTitle="Something went wrong..." actionText={reason}
123-
actionBtnName="Report" handleActionBtnClick={handleErrorReport}
124-
handleActionCancel={handleErrorCancel}/>
125-
<div className="inner-container">
126-
<Grid container spacing={4}>
127-
<Grid item xs>
128-
<Box sx={{borderBottom: 1, borderColor: 'divider'}}>
129-
<Tabs value={selectedTabIndex} onChange={handleTabChange} aria-label="dashboard tabs">
130-
<Tab sx={tab} label="Datasets" {...a11yProps(0)} />
131-
</Tabs>
132-
</Box>
133-
<TabPanel value={selectedTabIndex} index={0}>
134-
<Grid container spacing={2}>
135-
{
136-
datasets !== undefined && datasetThumbnailList !== undefined ?
137-
datasets.map((dataset) => {
138-
return (
139-
<Grid item key={dataset.id} xs={12} sm={6} md={4} lg={3}>
140-
<DatasetCard id={dataset.id} name={dataset.name}
141-
author={`${dataset.author.first_name} ${dataset.author.last_name}`}
142-
created={dataset.created}
143-
description={dataset.description}/>
144-
</Grid>
145-
);
146-
})
147-
:
148-
<></>
149-
}
150-
</Grid>
151-
<Box display="flex" justifyContent="center" sx={{m: 1}}>
152-
<ButtonGroup variant="contained" aria-label="previous next buttons">
153-
<Button aria-label="previous" onClick={previous} disabled={prevDisabled}>
154-
<ArrowBack/> Prev
155-
</Button>
156-
<Button aria-label="next" onClick={next} disabled={nextDisabled}>
157-
Next <ArrowForward/>
158-
</Button>
159-
</ButtonGroup>
160-
</Box>
161-
</TabPanel>
162-
<TabPanel value={selectedTabIndex} index={1}/>
163-
<TabPanel value={selectedTabIndex} index={2}/>
164-
<TabPanel value={selectedTabIndex} index={3}/>
165-
<TabPanel value={selectedTabIndex} index={4}/>
112+
{/*Error Message dialogue*/}
113+
<ActionModal actionOpen={errorOpen} actionTitle="Something went wrong..." actionText={reason}
114+
actionBtnName="Report" handleActionBtnClick={handleErrorReport}
115+
handleActionCancel={handleErrorCancel}/>
116+
<Grid container spacing={4}>
117+
<Grid item xs>
118+
<Tabs value={selectedTabIndex} onChange={handleTabChange} aria-label="dashboard tabs">
119+
<Tab icon={<DatasetIcon/>} iconPosition="start" label="Datasets" {...a11yProps(0)} />
120+
</Tabs>
121+
<TabPanel value={selectedTabIndex} index={0}>
122+
<Grid container spacing={2}>
123+
{
124+
datasets !== undefined && datasetThumbnailList !== undefined ?
125+
datasets.map((dataset) => {
126+
return (
127+
<Grid item key={dataset.id} xs={12} sm={6} md={4} lg={3}>
128+
<DatasetCard id={dataset.id} name={dataset.name}
129+
author={`${dataset.author.first_name} ${dataset.author.last_name}`}
130+
created={dataset.created}
131+
description={dataset.description}/>
132+
</Grid>
133+
);
134+
})
135+
:
136+
<></>
137+
}
166138
</Grid>
167-
</Grid>
168-
</div>
169-
</div>
139+
<Box display="flex" justifyContent="center" sx={{m: 1}}>
140+
<ButtonGroup variant="contained" aria-label="previous next buttons">
141+
<Button aria-label="previous" onClick={previous} disabled={prevDisabled}>
142+
<ArrowBack/> Prev
143+
</Button>
144+
<Button aria-label="next" onClick={next} disabled={nextDisabled}>
145+
Next <ArrowForward/>
146+
</Button>
147+
</ButtonGroup>
148+
</Box>
149+
</TabPanel>
150+
<TabPanel value={selectedTabIndex} index={1}/>
151+
<TabPanel value={selectedTabIndex} index={2}/>
152+
<TabPanel value={selectedTabIndex} index={3}/>
153+
<TabPanel value={selectedTabIndex} index={4}/>
154+
</Grid>
155+
</Grid>
170156
</Layout>
171157
)
172158
}

‎frontend/src/components/Layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -228,7 +228,7 @@ export default function PersistentDrawerLeft(props) {
228228
<ListItemIcon>
229229
<Create/>
230230
</ListItemIcon>
231-
<ListItemText primary={"Create New Metadata"}/>
231+
<ListItemText primary={"Metadata Definitions"}/>
232232
</ListItemButton>
233233
</ListItem>
234234
</List>

0 commit comments

Comments
 (0)