diff options
Diffstat (limited to 'scraper/client')
| -rw-r--r-- | scraper/client/actions.js | 5 | ||||
| -rw-r--r-- | scraper/client/app.js | 7 | ||||
| -rw-r--r-- | scraper/client/common/common.css | 1 | ||||
| -rw-r--r-- | scraper/client/common/header.component.js | 21 | ||||
| -rw-r--r-- | scraper/client/common/table.component.js | 15 | ||||
| -rw-r--r-- | scraper/client/paper/index.js | 8 | ||||
| -rw-r--r-- | scraper/client/paper/paper.container.js | 31 | ||||
| -rw-r--r-- | scraper/client/paper/paper.css | 3 | ||||
| -rw-r--r-- | scraper/client/paper/paper.info.js | 57 | ||||
| -rw-r--r-- | scraper/client/store.js | 2 |
10 files changed, 135 insertions, 15 deletions
diff --git a/scraper/client/actions.js b/scraper/client/actions.js index f281a34c..ee3511bc 100644 --- a/scraper/client/actions.js +++ b/scraper/client/actions.js @@ -18,6 +18,11 @@ export const getPapers = () => dispatch => { api(dispatch, get, 'papers', '/api/papers', {}) } +export const getPaperInfo = (key) => dispatch => { + api(dispatch, get, 'paperInfo', '/reports/datasets/final/' + key + '.json', {}) + api(dispatch, get, 'unknownCitations', '/reports/datasets/unknown/' + key + '.json', {}) +} + export const postAddress = data => dispatch => { api(dispatch, post, 'address', '/api/address', data) } diff --git a/scraper/client/app.js b/scraper/client/app.js index 81152c0c..5a0e5cc7 100644 --- a/scraper/client/app.js +++ b/scraper/client/app.js @@ -3,9 +3,7 @@ import { ConnectedRouter } from 'connected-react-router' import { Route, Switch } from 'react-router' import { Header, Footer } from './common' -// import * as Metadata from './metadata' -// import * as Search from './search' -// import * as Review from './review' +import * as Paper from './paper' export default class App extends Component { render() { @@ -15,6 +13,9 @@ export default class App extends Component { <Header /> <div className='app'> <div className='body'> + <Switch> + <Route exact path="/paper/:key/" component={Paper.Container} /> + </Switch> </div> </div> <Footer /> diff --git a/scraper/client/common/common.css b/scraper/client/common/common.css index 4b939df0..b014541a 100644 --- a/scraper/client/common/common.css +++ b/scraper/client/common/common.css @@ -65,6 +65,7 @@ header > section { display: flex; flex: 1 0; font-weight: bold; + padding: 10px; } header > section:last-of-type { justify-content: flex-end; diff --git a/scraper/client/common/header.component.js b/scraper/client/common/header.component.js index d82a8db0..5a100e90 100644 --- a/scraper/client/common/header.component.js +++ b/scraper/client/common/header.component.js @@ -1,8 +1,10 @@ import React, { Component } from 'react' -import { NavLink } from 'react-router-dom' +// import { NavLink } from 'react-router-dom' import { bindActionCreators } from 'redux' import { connect } from 'react-redux' +import { history } from '../store' + import * as actions from '../actions' class Header extends Component { @@ -11,19 +13,26 @@ class Header extends Component { this.props.actions.getPapers() } + pickPaper(e) { + console.log(e.target.value) + history.push('/paper/' + e.target.value) + // this.props.actions.getPaperData(e.target.value) + } + render() { - console.log(this.props) let { papers } = this.props.api.papers papers = papers || {} const paperOptions = Object.keys(papers).map(key => ( <option key={key} value={key}>{papers[key][1]}</option> )) - console.log(papers) return ( <header> - <select> - {paperOptions} - </select> + <section> + <select onChange={this.pickPaper.bind(this)}> + {paperOptions} + </select> + </section> + <section></section> </header> ) } diff --git a/scraper/client/common/table.component.js b/scraper/client/common/table.component.js index 76a1d57c..f9be0669 100644 --- a/scraper/client/common/table.component.js +++ b/scraper/client/common/table.component.js @@ -12,9 +12,12 @@ export function TableObject({ tag, object, order, summary }) { if (object.err) { return <div className='tableObject error'>{tag}{' Error: '}{object.err}</div> } - let objects = Object.keys(object) + let keys = Object.keys(object) if (order) { - const grouped = objects.reduce((a, b) => { + const grouped = keys.reduce((a, b) => { + if (summary && !object[b].trim().length) { + return a + } const index = order.indexOf(b) if (index !== -1) { a.order.push([index, b]) @@ -23,23 +26,23 @@ export function TableObject({ tag, object, order, summary }) { } return a }, { order: [], alpha: [] }) - objects = grouped.order + keys = grouped.order .sort((a, b) => a[0] - b[0]) .map(([i, s]) => s) if (!summary) { - objects = objects + keys = keys // .concat([__HR__]) .concat(grouped.alpha.sort()) } } else { - objects = objects.sort() + keys = keys.sort() } return ( <div> {tag && <h3>{tag}</h3>} <table className={'tableObject ' + tag}> <tbody> - {objects.map((key, i) => ( + {keys.map((key, i) => ( <TableRow key={key + '_' + i} name={key} value={object[key]} /> ))} </tbody> diff --git a/scraper/client/paper/index.js b/scraper/client/paper/index.js new file mode 100644 index 00000000..60206179 --- /dev/null +++ b/scraper/client/paper/index.js @@ -0,0 +1,8 @@ +import Container from './paper.container' +import './paper.css' + +// import './search.css' + +export { + Container +} diff --git a/scraper/client/paper/paper.container.js b/scraper/client/paper/paper.container.js new file mode 100644 index 00000000..eeb0dfa3 --- /dev/null +++ b/scraper/client/paper/paper.container.js @@ -0,0 +1,31 @@ +import React, { Component } from 'react' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' + +import * as actions from '../actions' + +import { Loader } from '../common' +import PaperInfo from './paper.info' + +class PaperContainer extends Component { + componentDidMount() { + this.props.actions.getPaperInfo(this.props.match.params.key) + } + + render() { + if (this.props.api.paperInfo.loading) return <Loader /> + if (!this.props.api.paperInfo.dataset) return null + return ( + <PaperInfo /> + ) + } +} + +const mapStateToProps = state => ({ + api: state.api, +}) +const mapDispatchToProps = dispatch => ({ + actions: bindActionCreators({ ...actions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(PaperContainer) diff --git a/scraper/client/paper/paper.css b/scraper/client/paper/paper.css new file mode 100644 index 00000000..c1a775c1 --- /dev/null +++ b/scraper/client/paper/paper.css @@ -0,0 +1,3 @@ +.paperInfo { + padding: 10px; +}
\ No newline at end of file diff --git a/scraper/client/paper/paper.info.js b/scraper/client/paper/paper.info.js new file mode 100644 index 00000000..dab4ce5b --- /dev/null +++ b/scraper/client/paper/paper.info.js @@ -0,0 +1,57 @@ +import React, { Component } from 'react' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' + +import * as actions from '../actions' + +import { TableObject } from '../common' + +class PaperInfo extends Component { + render() { + const { paperInfo, unknownCitations } = this.props.api + const { dataset, statistics, address } = paperInfo + return ( + <div className='paperInfo'> + <h2>{dataset.name_full}</h2> + <TableObject summary + tag="Dataset" + object={dataset} + order={['key', 'name_full', 'relevance', 'subset_of', 'superset_of']} + /> + <TableObject summary + tag="Statistics" + object={statistics} + order={['year_published', 'purpose_short', + 'wild', 'indoor', 'outdoor', 'cyberspace', + 'names', 'downloaded', + 'year_published', 'year_start', 'year_end', 'ongoing', 'images', 'videos', + 'faces_unique', 'total_faces', 'img_per_person', 'num_cameras', 'faces_persons', 'female', 'male', + 'landmarks', 'width', 'height', + 'comment', + ]} + /> + <TableObject + tag="Address" + object={address} + order={['address', 'type', 'lat', 'lng']} + /> + <TableObject summary + tag="Citations" + object={{ + 'geocoded': paperInfo.citations.length, + 'unknown': unknownCitations.citations ? unknownCitations.citations.length : 'Loading', + }} + /> + </div> + ) + } +} + +const mapStateToProps = state => ({ + api: state.api +}) +const mapDispatchToProps = dispatch => ({ + actions: bindActionCreators({ ...actions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(PaperInfo) diff --git a/scraper/client/store.js b/scraper/client/store.js index 9eae8939..3bf64114 100644 --- a/scraper/client/store.js +++ b/scraper/client/store.js @@ -11,6 +11,8 @@ const initialState = () => ({ institutions: {}, papers: {}, address: {}, + paperInfo: {}, + unknownCitations: {}, options: {} }) |