Commit 15a838f2 authored by Matija Obreza's avatar Matija Obreza
Browse files

Merge branch '302-dataset-details' into 'master'

Resolve "Dataset details"

Closes #302

See merge request !236
parents 20bc06db 7c3ca244
......@@ -9,7 +9,6 @@ import { Dataset } from 'model/dataset.model';
import BackButton from 'ui/common/buttons/BackButton';
import Loading from 'ui/common/Loading';
import BrowseMenu from './c/BrowseMenu';
import DatasetDisplay from './c/DatasetDisplay';
import Grid from 'material-ui/Grid';
......@@ -55,21 +54,16 @@ class DatasetDetail extends React.Component<IDatasetDetailProps, any> {
return (
<div className="back-gray">
<Grid container spacing={ 0 }>
<BrowseMenu />
<Grid item xs={ 12 } md={ 10 }>
<Grid container spacing={ 0 }>
<Grid item xs={ 12 } className={ `back-gray-yellow pl-20 pr-20 pt-10 pb-10 ${classes.backSection}` }>
<h4 className="font-bold lh-35 m-0">{ t('p.dataset.title') }</h4>
<div className={ classes.flexGrow }/>
<BackButton defaultTarget="/datasets" defaultBackText={ t('common:action.backTo', { where: t('common:label.list') }) }/>
</Grid>
{ stillLoading ? <Loading /> :
<Grid item xs={ 12 } className="p-10">
<DatasetDisplay dataset={ dataset } publishDataset={ publishDataset } deleteDataset={ deleteDataset } />
</Grid>
}
</Grid>
<Grid item xs={ 12 } className={ `back-gray-yellow pl-20 pr-20 pt-10 pb-10 ${classes.backSection}` }>
<h4 className="font-bold lh-35 m-0">{ t('p.dataset.title') }</h4>
<div className={ classes.flexGrow }/>
<BackButton defaultTarget="/datasets" defaultBackText={ t('common:action.backTo', { where: t('common:label.list') }) }/>
</Grid>
{ stillLoading ? <Loading /> :
<Grid item xs={ 12 } className="p-10">
<DatasetDisplay dataset={ dataset } publishDataset={ publishDataset } deleteDataset={ deleteDataset } />
</Grid>
}
</Grid>
<Grid container spacing={ 0 }>
<Grid item xs={ 12 } className={ `back-gray-yellow pt-10 pb-10 pr-20 ${classes.backSection}` }>
......
import * as React from 'react';
import compose from 'recompose/compose';
import { withStyles } from 'material-ui/styles';
import Grid from 'material-ui/Grid';
import Divider from 'material-ui/Divider';
import List, { ListItem, ListItemText } from 'material-ui/List';
import PlayArrow from 'material-ui-icons/PlayArrow';
import Collapse from 'material-ui/transitions/Collapse';
import Hidden from 'material-ui/Hidden';
import withWidth from 'material-ui/utils/withWidth';
interface IBrowseMenuProps extends React.ClassAttributes<any> {
classes: any;
width: any;
}
const styles = (theme) => ({
root: theme.leftPanel.root,
expandArrow: theme.arrows.expand,
arrowOpened: theme.arrows.opened,
arrowClosed: theme.arrows.closed,
ulTitle: theme.leftPanel.title,
ulWrapper: {
padding: 0,
},
});
class BrowseMenu extends React.Component<IBrowseMenuProps, any> {
public constructor(props: any) {
super(props);
this.state = {
expanded: true,
};
}
public componentDidMount() {
if (['sm', 'xs'].indexOf(this.props.width) !== -1) {
this.setState({ expanded: false });
}
}
private handleExpandClick = () => {
this.setState({ expanded: !this.state.expanded });
}
public componentWillReceiveProps(nextProps) {
if (['sm', 'xs'].indexOf(nextProps.width) === -1 && !this.state.expanded) {
this.setState({ expanded: true });
}
}
public render() {
const { classes } = this.props;
return (
<Grid item xs={ 12 } md={ 2 } className={ classes.root }>
<List className={ classes.ulWrapper }>
<div>
<h3 className={ `pl-20 pt-10 pb-10 green font-bold ${ classes.ulTitle }` }>BROWSE</h3>
<Hidden implementation="css" mdUp>
<PlayArrow onClick={ this.handleExpandClick }
className={ `${classes.expandArrow} ${ this.state.expanded ? classes.arrowOpened : classes.arrowClosed }` }
/>
</Hidden>
</div>
<Collapse in={ this.state.expanded } timeout="auto" unmountOnExit>
<div>
<Divider />
<a href="#dataset-top">
<ListItem button>
<ListItemText primary="DATASET"/>
</ListItem>
</a>
<Divider />
<a href="#dataset-metadata">
<ListItem button>
<ListItemText primary="METADATA"/>
</ListItem>
</a>
<Divider />
<a href="#dataset-locations">
<ListItem button>
<ListItemText primary="LOCATION"/>
</ListItem>
</a>
<Divider />
<a href="#dataset-traits">
<ListItem button>
<ListItemText primary="TRAITS OBSERVED"/>
</ListItem>
</a>
<Divider />
<a href="#dataset-accessions">
<ListItem button>
<ListItemText primary="ACCESSIONS"/>
</ListItem>
</a>
<Divider />
</div>
</Collapse>
</List>
</Grid>
);
}
}
export default compose(withStyles(styles), withWidth())(BrowseMenu);
......@@ -15,9 +15,8 @@ import Authorize from 'ui/common/authorized/Authorize';
import Section from 'ui/common/layout/Section';
import Markdown from 'ui/catalog/markdown';
import PrettyDate from 'ui/common/time/PrettyDate';
import { DatasetLink, DescriptorLink, ExternalLink } from 'ui/catalog/Links';
import { DatasetLink, DescriptorLink, ExternalLink, PartnerLink } from 'ui/catalog/Links';
import Summary from './Summary';
import LocationMap from './LocationMap';
import Button from 'material-ui/Button';
import { Properties, PropertiesItem } from 'ui/catalog/Properties';
......@@ -204,13 +203,17 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
title={ <Markdown basic source={ dataset.title } /> }
subheader={ <small>{ dataset.versionTag }</small> } />
<CardContent className={ classes.cardContent }>
{ dataset.description && <Markdown source={ dataset.description } /> }
{ dataset.description && <Markdown className="mb-20" source={ dataset.description } /> }
{ dataset.crops && dataset.crops.length > 0 && (
<Properties>
<PropertiesItem title="Crop:"><CropChips crops={ dataset.crops } /></PropertiesItem>
<PropertiesItem title="Data provider:"><PartnerLink to={ dataset.owner } /></PropertiesItem>
{ dataset.crops && dataset.crops.length > 0 &&
<PropertiesItem title="Crop:"><CropChips crops={ dataset.crops } /></PropertiesItem>
}
<PropertiesItem title="Number of accessions:">{ dataset.accessionCount }</PropertiesItem>
<PropertiesItem title="Number of traits:">{ dataset.descriptorCount }</PropertiesItem>
<PropertiesItem title="Upload date:"><PrettyDate value={ dataset.createdDate } /></PropertiesItem>
</Properties>
) }
</CardContent>
{ publishDataset && (dataset._permissions.write || dataset._permissions.delete) && (
<CardActions>
......@@ -231,7 +234,7 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
</Grid>
<Grid container spacing={ 0 }>
<Grid item xs={ 12 } md={ 8 } lg={ 9 } className="p-10" id="dataset-metadata">
<Grid item xs={ 12 } md={ 12 } lg={ 12 } className="p-10" id="dataset-metadata">
<Section title="Dataset metadata">
{ dataset.creators && dataset.creators.length > 0 &&
<div>
......@@ -301,27 +304,6 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
</Grid>
</Grid>
<Divider/>
<div className="pt-15 pb-15 pl-20 pr-20">
<h4 className="font-bold m-0">
Dates
</h4>
</div>
<Divider/>
<Grid container spacing={ 0 } className="p-20">
<Grid item xs={ 12 }>
<Grid container spacing={ 0 }>
<Properties>
<PropertiesItem title="Metadata create date:">
{ dataset.createdDate && <PrettyDate value={ dataset.createdDate } /> }
</PropertiesItem>
<PropertiesItem title="Metadata updated date:">
{ dataset.lastModifiedDate && <PrettyDate value={ dataset.lastModifiedDate } /> }
</PropertiesItem>
</Properties>
</Grid>
</Grid>
</Grid>
<Divider/>
<div className="pt-15 pb-15 pl-20 pr-20">
<h4 className="font-bold m-0">
Partner contact information
......@@ -355,17 +337,18 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
<Properties>
<PropertiesItem title="Date of dataset:">{ dataset.created }</PropertiesItem>
<PropertiesItem title="Related resources:">{ dataset.source }</PropertiesItem>
<PropertiesItem title="Resolve type:">Dataset</PropertiesItem>
<PropertiesItem title="Metadata create date:">
{ dataset.createdDate && <PrettyDate value={ dataset.createdDate } /> }
</PropertiesItem>
<PropertiesItem title="Metadata updated date:">
{ dataset.lastModifiedDate && <PrettyDate value={ dataset.lastModifiedDate } /> }
</PropertiesItem>
</Properties>
</Grid>
</Grid>
</Grid>
</Section>
</Grid>
<Grid item xs={ 12 } md={ 4 } lg={ 3 } className="p-10">
<Summary dataset={ dataset } creators={ dataset.creators } owner={ dataset.owner } classes={ {} } />
</Grid>
</Grid>
<Grid container spacing={ 0 }>
......
import * as React from 'react';
import Grid from 'material-ui/Grid';
import Paper from 'material-ui/Paper';
import Divider from 'material-ui/Divider';
import { Dataset } from 'model/dataset.model';
import { Creator, CreatorRole } from 'model/creator.model';
import { Partner } from 'model/partner.model';
import { PartnerLink } from 'ui/catalog/Links';
interface ISummaryProps extends React.ClassAttributes<any> {
classes: any;
dataset: Dataset;
creators: Creator[];
owner: Partner;
}
class Summary extends React.Component<ISummaryProps, any> {
protected renderName = (creators) => {
if (! creators || creators.length === 0) {
return null;
}
const creator: Creator = creators.find((e) => e.role === CreatorRole.CONTACT);
if (creator) {
return `${creator.fullName}`;
} else {
return null;
}
}
public render() {
const { creators, dataset = new Dataset(), owner } = this.props;
return (
<Paper square>
<div className="pl-20 pr-20 pt-20 pb-20">
<h4 className="green font-bold m-0" style={ { fontSize: '1.286rem' } }>
SUMMARY
</h4>
</div>
<Divider/>
<div>
<Grid container spacing={ 0 } className="pt-20 pb-10">
<Grid item xs={ 12 }>
<div className="pt-15 pb-15 pl-20 pr-20 mb-10 even-row">
<h4 className="font-bold mb-15">
Number of accessions assessed in the dataset
</h4>
<h1 className="font-bold m-0">
{ dataset.accessionCount }
</h1>
</div>
</Grid>
<Grid item xs={ 12 }>
<div className="pt-15 pb-15 pl-20 pr-20 mb-10 even-row">
<h4 className="font-bold mb-15">
Number of traits observed in the dataset
</h4>
<h1 className="font-bold m-0">
{ dataset.descriptorCount }
</h1>
</div>
</Grid>
<Grid item xs={ 12 }>
<div className="pt-15 pb-15 pl-20 pr-20 mb-10 even-row">
<h4 className="font-bold mb-15">
Data provider
</h4>
<h6 className="font-bold m-0">
<PartnerLink to={ owner } />
</h6>
</div>
</Grid>
<Grid item xs={ 12 }>
<div className="pt-15 pb-15 pl-20 pr-20 mb-10 even-row">
<h4 className="font-bold mb-15">
Contact
</h4>
<h6 className="">
{ this.renderName(creators) }
</h6>
</div>
</Grid>
</Grid>
</div>
</Paper>
);
}
}
export default Summary;
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment