Commit 7f7ba846 authored by Matija Obreza's avatar Matija Obreza
Browse files

Display dataset accession table using virtualized table

parent 30f33a47
......@@ -11,6 +11,7 @@ export class AccessionIdentifier extends EmptyModel {
public instCode: string;
public acceNumb: string;
public genus: string;
public species: string;
public constructor(obj?) {
super(obj);
......
import * as React from 'react';
import { withStyles } from 'material-ui/styles';
import { AccessionIdentifier } from 'model/dataset.model';
import { Table as VTable, Column as VColumn, AutoSizer } from 'react-virtualized';
import DOI from 'ui/common/DOI';
// import Hidden from 'material-ui/Hidden';
const styles = (theme) => ({
tableCell: {
// padding: '.5rem 1rem',
borderRight: 'dotted 1px White',
borderBottom: 'solid 1px White',
// textOverflow: 'ellipsis',
// whiteSpace: 'nowrap',
// overflow: 'hidden' as 'hidden',
// marginLet: 0,
// marginRight: 0,
},
tableHeaderCell: {
borderRight: 'dotted 1px #a0d457',
// marginLet: 0,
// marginRight: 0,
},
evenRow: {
backgroundColor: '#f3f2ee',
},
oddRow: {
backgroundColor: '#f8f7f5',
},
});
interface IAccessionIdentifiersTableProps extends React.ClassAttributes<any> {
classes: any;
accessionIdentifiers: AccessionIdentifier[];
}
class AccessionIdentifiersTable extends React.Component<IAccessionIdentifiersTableProps, any> {
constructor(props, context) {
super(props, context);
}
public render() {
const { accessionIdentifiers, classes } = this.props;
const rowGetter = ({ index }) => accessionIdentifiers[index];
const renderDoi = ({ cellData }) => <DOI noPrefix value={ cellData } />;
const rowClassName = ({ index }) => index === -1 ? '' : `${classes.tableCell} ${index % 2 === 0 ? classes.evenRow : classes.oddRow}`;
return accessionIdentifiers && (
<AutoSizer disableHeight>
{ ({ width }) => (
<VTable
className="genesys-table"
width={ width }
height={ 500 }
headerHeight={ 25 }
rowHeight={ 30 }
rowCount={ accessionIdentifiers.length }
rowGetter={ rowGetter }
rowClassName={ rowClassName }
headerClassName={ `back-green` }
>
<VColumn label="INSTCODE" dataKey="instCode" width={ 100 } />
<VColumn label="Accession number" dataKey="acceNumb" width={ 200 } />
<VColumn label="Genus" dataKey="genus" className="font-italic" width={ 200 }/>
<VColumn label="Species" dataKey="species" className="font-italic" width={ 200 }/>
<VColumn label="DOI" dataKey="doi" width={ 150 } cellRenderer={ renderDoi } />
</VTable>
) }
</AutoSizer>
);
}
}
export default withStyles(styles)(AccessionIdentifiersTable);
import * as React from 'react';
import * as naturalCompare from 'string-natural-compare';
import {AccessionIdentifier} from 'model/dataset.model';
import DOI from 'ui/common/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>
);
}
import * as React from 'react';
import {Page} from 'model/common.model';
import {AccessionIdentifier} from 'model/dataset.model';
import {Table, TableRow, TableCell} from 'ui/common/tables';
import PaginationComponent from 'ui/common/pagination';
import DOI from 'ui/common/DOI';
interface IAccessionIdentifiersTableProps extends React.ClassAttributes<any> {
accessionIdentifiers: AccessionIdentifier[];
}
class AccessionIdentifiersTable extends React.Component<IAccessionIdentifiersTableProps, any> {
constructor(props: IAccessionIdentifiersTableProps, context: any) {
super(props, context);
const {accessionIdentifiers} = props;
const paged = Page.from(accessionIdentifiers, accessionIdentifiers.length);
this.state = {
paged,
};
}
public componentWillReceiveProps(nextProps) {
const {accessionIdentifiers} = nextProps;
const paged = Page.from(accessionIdentifiers, accessionIdentifiers.length);
this.setState({paged});
}
protected onPaginationChange = (page, results, sortBy) => {
const { accessionIdentifiers } = this.props;
const paged = Page.from(accessionIdentifiers, accessionIdentifiers.length, page, results, sortBy);
this.setState({paged});
}
public render() {
const {paged} = this.state;
return paged && paged.content && (
<div>
<PaginationComponent displayName="records" pageObj={ paged } onChange={ this.onPaginationChange }/>
<Table widths={ ['10px', '40%', null, null, '10px'] } headers={ (
<TableRow>
<TableCell>Institute code</TableCell>
<TableCell>Accession number</TableCell>
<TableCell>Genus</TableCell>
<TableCell>DOI</TableCell>
</TableRow>
) }>
{ paged.content.map((row, i) => (
<TableRow key={ i }>
<TableCell>{ row.instCode }</TableCell>
<TableCell>{ row.acceNumb }</TableCell>
<TableCell>{ row.genus }</TableCell>
<TableCell><DOI value={ row.doi } noPrefix /></TableCell>
</TableRow>
),
) }
</Table>
<PaginationComponent displayName="records" pageObj={ paged } onChange={ this.onPaginationChange }/>
</div>
);
}
}
export default AccessionIdentifiersTable;
......@@ -26,7 +26,7 @@ import Grid from 'material-ui/Grid';
import Divider from 'material-ui/Divider';
import List, { ListItem, ListItemText } from 'material-ui/List';
import AccessionIdentifiersTable from 'ui/common/dataset/AccessionIdentifiersTable';
import AccessionIdentifiersTable from 'ui/catalog/accession/IdentifiersTable';
import Card, {CardHeader, CardContent, CardActions } from 'ui/common/Card';
......
......@@ -7,7 +7,7 @@ import FormControl from 'material-ui/Form/FormControl';
import {log} from 'utilities/debug';
import {AccessionIdentifier} from 'model/dataset.model';
import AccessionIdentifiersList from 'ui/common/dataset/AccessionIdentifiersList';
import AccessionIdentifiersTable from 'ui/catalog/accession/IdentifiersTable';
import {CSV, ICsvConfiguration} from 'utilities/CSV';
interface IListOfAccession extends React.ClassAttributes<any> {
......@@ -59,7 +59,7 @@ class ListOfAccession extends React.Component<IListOfAccession, any> {
const newIdentifiers: AccessionIdentifier[] = [];
CSV.parse(csvText, config, { headers: [ 'instCode', 'acceNumb', 'genus', 'doi' ]})
CSV.parse(csvText, config, { headers: [ 'instCode', 'acceNumb', 'genus', 'species', 'doi' ]})
.on('json', (jsonObj) => {
const aid: AccessionIdentifier = new AccessionIdentifier(jsonObj);
newIdentifiers.push(aid);
......@@ -79,7 +79,7 @@ class ListOfAccession extends React.Component<IListOfAccession, any> {
<div>
<h4>INSTRUCTIONS FOR USE</h4>
<ul>
<li>Create an Excel file with headers: <code>INSTCODE,ACCENUMB,GENUS,DOI</code></li>
<li>Create an Excel file with headers: <code>INSTCODE,ACCENUMB,GENUS,SPECIES,DOI</code></li>
<li>Do not change header name in the template</li>
<li>Fill the template with the informations of the accessions, save it.</li>
<li>Copy and paste the table from Excel into the text field below.</li>
......@@ -96,8 +96,8 @@ class ListOfAccession extends React.Component<IListOfAccession, any> {
</div>
<h3>Accession list</h3>
<AccessionIdentifiersList accessionIdentifiers={ accessionIdentifiers } />
<h3>Accession list: { accessionIdentifiers.length } rows</h3>
<AccessionIdentifiersTable accessionIdentifiers={ accessionIdentifiers } />
</div>
);
}
......
......@@ -7,6 +7,7 @@
*/
$i-dont-know-what-im-doing: ' ¯\\_(ツ)_/¯ ';
$genesys-green: #88ba42;
html {
font-family: 'Roboto', sans-serif;
......@@ -670,7 +671,7 @@ h1, h2, h3, h4, h5, h6 {
//Colors
.green {
color: #88ba42;
color: $genesys-green;
}
.blue {
......@@ -684,3 +685,15 @@ h1, h2, h3, h4, h5, h6 {
.white {
color: #fff;
}
.genesys-table {
&.ReactVirtualized__Table {
.ReactVirtualized__Table__headerRow {
background-color: $genesys-green;
text-transform: none;
color: White;
font-weight: bold;
}
}
}
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