Commit f465e555 authored by Matija Obreza's avatar Matija Obreza
Browse files

Component <AccessionIdentifiersList extracted, <DOI component added

- Also displaying correct dataset.accessionCount and dataset.descriptorCount
parent 1354860b
Pipeline #3682 passed with stages
in 3 minutes and 38 seconds
import * as React from 'react';
interface IMyProps extends React.Props<any> {
value: string;
noPrefix: boolean;
};
/**
* Properly render a DOI
*/
export default function DOI({
value,
noPrefix,
}: IMyProps) {
if (value) {
return (
<span className="doi">
{ ! noPrefix && <span className="prefix">doi:</span> }
<a href={ `https://doi.org/${value}` } target="_blank">{ value }</a>
</span>
);
} else {
return null;
}
}
import * as React from 'react';
import * as naturalCompare from 'string-natural-compare';
import {AccessionIdentifier} from '../../../model/dataset.model';
import DOI from '../DOI';
interface IMyProps extends React.Props<any> {
accessionIdentifiers: AccessionIdentifier[];
};
export default function AccessionIdentifiersList({
accessionIdentifiers = [],
}: IMyProps) {
return (
<table className="simple">
<thead>
<tr className="">
<td className="col-xs-2">Institute code</td>
<td className="col-xs-3">Accession number</td>
<td className="col-xs-4">Genus</td>
<td className="col-xs-3">DOI</td>
</tr>
</thead>
<tbody>
{ accessionIdentifiers && accessionIdentifiers
.sort((a, b) => {
return naturalCompare(a.instCode, b.instCode) || naturalCompare(a.acceNumb, b.acceNumb);
})
.map((aid) => (
<tr key={ `${aid.instCode}-${aid.acceNumb}-${aid.genus}` }>
<td>{ aid.instCode }</td>
<td>{ aid.acceNumb }</td>
<td>{ aid.genus }</td>
<td><DOI value={ aid.doi } noPrefix /></td>
</tr>
)) }
</tbody>
</table>
);
}
......@@ -87,7 +87,7 @@ class Summary extends React.Component<ISummaryProps, any> {
No. of accessions assessed
</Typography>
<Typography type="display1" component="h1" className={ classes.blue }>
150
{ dataset.accessionCount }
</Typography>
</div>
</Grid>
......@@ -97,17 +97,7 @@ class Summary extends React.Component<ISummaryProps, any> {
No. of traits assessed
</Typography>
<Typography type="display1" component="h1" className={ classes.blue }>
50
</Typography>
</div>
</Grid>
<Grid item xs={ 12 }>
<div className={ `${classes.titleWrapper} ${classes.margin}` }>
<Typography type="title" component="h2">
Crop descriptor user
</Typography>
<Typography type="body2" component="p" className={ classes.blue }>
Rica Descriptor IRRI - Bioversity, 2007.
{ dataset.descriptorCount }
</Typography>
</div>
</Grid>
......
......@@ -10,6 +10,7 @@ import Grid from 'material-ui/Grid';
import {DATASET_LIST_OF_ACCESSION_FORM} from '../../../../../../constants/datasets';
import {AccessionIdentifier} from '../../../../../../model/dataset.model';
import AccessionIdentifiersList from '../../../../../common/dataset/AccessionIdentifiersList';
import {CSV, ICsvConfiguration} from '../../../../../../utilities/CSV';
interface IListOfAccession extends React.ClassAttributes<any> {
......@@ -96,27 +97,7 @@ class ListOfAccession extends React.Component<IListOfAccession, any> {
</div>
<h3>Accession list</h3>
<table className="simple">
<thead>
<tr className="">
<td className="col-xs-2">Institute code</td>
<td className="col-xs-3">Accession number</td>
<td className="col-xs-4">Genus</td>
<td className="col-xs-3">DOI</td>
</tr>
</thead>
<tbody>
{ accessionIdentifiers && accessionIdentifiers.sort((a, b) => a.acceNumb < b.acceNumb ? -1 : a.acceNumb > b.acceNumb ? 1 : 0)
.map((aid) => (
<tr>
<td>{ aid.instCode }</td>
<td>{ aid.acceNumb }</td>
<td>{ aid.genus }</td>
<td>{ aid.doi }</td>
</tr>
)) }
</tbody>
</table>
<AccessionIdentifiersList accessionIdentifiers={ accessionIdentifiers } />
</div>
);
};
......
Markdown is supported
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