Commit 248f19d3 authored by Markus Scheidgen's avatar Markus Scheidgen
Browse files

Repo gui shows simple table of calcs.

parent 0f3e4ef1
......@@ -66,8 +66,8 @@ function repo(uploadHash, calcHash) {
.then(response => response.json())
}
function repoAll(uploadHash, calcHash) {
return fetch(`${apiBase}/repo`)
function repoAll(page, perPage) {
return fetch(`${apiBase}/repo?page=${page}&per_page=${perPage}`)
.then(response => response.json())
}
......
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles, Paper, LinearProgress } from '@material-ui/core';
import ReactJson from 'react-json-view'
import { withStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TablePagination from '@material-ui/core/TablePagination';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import { TableFooter } from '@material-ui/core';
import api from '../api';
import Markdown from './Markdown';
class Repo extends React.Component {
static propTypes = {
classes: PropTypes.object.isRequired
}
static styles = theme => ({
root: {},
calcData: {
padding: theme.spacing.unit
}
});
constructor(props) {
super(props)
this.state = {
data: null
}
const styles = theme => ({
root: {
width: '100%',
marginTop: theme.spacing.unit * 3,
},
table: {
},
tableWrapper: {
// overflowX: 'auto',
},
});
class EnhancedTable extends React.Component {
state = {
data: [],
page: 1,
rowsPerPage: 5,
total: 0
};
update(page, rowsPerPage) {
api.repoAll(page, rowsPerPage).then(data => {
const { pagination: { total, page, per_page }, results } = data
this.setState({data: results, page: page, rowsPerPage: per_page, total: total})
})
}
componentDidMount() {
api.repoAll().then(data => {
this.setState({data: data})
})
const { page, rowsPerPage } = this.state
this.update(page, rowsPerPage)
}
handleChangePage = (event, page) => {
this.update(page + 1, this.state.rowsPerPage)
};
handleChangeRowsPerPage = event => {
const rowsPerPage = event.target.value
this.update(this.state.page, rowsPerPage)
};
render() {
const { classes } = this.props
const { data } = this.state
const { classes } = this.props;
const { data, rowsPerPage, page, total } = this.state;
const emptyRows = rowsPerPage - Math.min(rowsPerPage, total - (page - 1) * rowsPerPage);
return (
<div className={classes.root}>
<Markdown>{`
## The Repository – Raw Code Data
`}</Markdown>
<Paper className={classes.calcData}>
{
data ?
<ReactJson src={this.state.data} enableClipboard={false} collapsed={4} /> :
<LinearProgress variant="query" />
}
</Paper>
</div>
)
<Paper className={classes.root}>
<div className={classes.tableWrapper}>
<Table className={classes.table} aria-labelledby="tableTitle">
<TableBody>
{data.map((n, index) => (
<TableRow
hover
role="checkbox"
tabIndex={-1}
key={index}
>
<TableCell>{n.chemical_composition_bulk_reduced}</TableCell>
<TableCell>{n.program_name}</TableCell>
<TableCell>{n.program_basis_set_type}</TableCell>
<TableCell>{n.system_type}</TableCell>
<TableCell>{n.crystal_system}</TableCell>
<TableCell>{n.space_group_number}</TableCell>
<TableCell>{n.XC_functional_name}</TableCell>
</TableRow>
))}
{emptyRows > 0 && (
<TableRow style={{ height: 49 * emptyRows }}>
<TableCell colSpan={6} />
</TableRow>
)}
</TableBody>
<TableFooter>
<TablePagination
count={total}
rowsPerPage={rowsPerPage}
page={page - 1}
backIconButtonProps={{
'aria-label': 'Previous Page',
}}
nextIconButtonProps={{
'aria-label': 'Next Page',
}}
onChangePage={this.handleChangePage}
onChangeRowsPerPage={this.handleChangeRowsPerPage}
/>
</TableFooter>
</Table>
</div>
</Paper>
);
}
}
export default withStyles(Repo.styles)(Repo);
\ No newline at end of file
EnhancedTable.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(EnhancedTable);
\ No newline at end of file
......@@ -17,20 +17,20 @@ export const genTheme = createMuiTheme({
export const repoTheme = createMuiTheme({
palette: {
primary: repo,
secondary: secondary,
secondary: repo,
}
});
export const archiveTheme = createMuiTheme({
palette: {
primary: archive,
secondary: secondary,
secondary: repo,
}
});
export const encTheme = createMuiTheme({
palette: {
primary: enc,
secondary: secondary,
secondary: repo,
}
});
\ No newline at end of file
......@@ -98,14 +98,15 @@ class RepoCalc(Resource):
class RepoCalcs(Resource):
def get(self):
page = request.args.get('page', 1)
per_page = request.args.get('per_page', 10)
# TODO use argparse? bad request reponse an bad params, pagination as decorator
page = int(request.args.get('page', 1))
per_page = int(request.args.get('per_page', 10))
assert page >= 1
assert per_page > 0
body = {
'from': page - 1,
'from': (page - 1) * per_page,
'size': per_page,
'query': {
'match_all': {}
......
......@@ -153,7 +153,7 @@ def test_processing(client, file, celery_session_worker):
assert_exists(config.files.uploads_bucket, upload['upload_id'])
def test_get_repo_calc(client, example_entry):
def test_repo_calc(client, example_entry):
rv = client.get('/repo/%s/%s' % (example_entry.upload_hash, example_entry.calc_hash))
assert rv.status_code == 200
......@@ -163,7 +163,7 @@ def test_non_existing_repo_cals(client):
assert rv.status_code == 404
def test_get_repo_calcs(client, example_entry):
def test_repo_calcs(client, example_entry):
rv = client.get('/repo')
assert rv.status_code == 200
data = json.loads(rv.data)
......@@ -173,6 +173,16 @@ def test_get_repo_calcs(client, example_entry):
assert len(results) >= 1
def test_repo_calcs_pagination(client, example_entry):
rv = client.get('/repo?page=1&per_page=1')
assert rv.status_code == 200
data = json.loads(rv.data)
results = data.get('results', None)
assert results is not None
assert isinstance(results, list)
assert len(results) == 1
def test_get_archive(client, archive_id):
rv = client.get('/archive/%s' % archive_id)
assert rv.status_code == 302
......
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