1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
import React, { Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { ReactTabulator } from 'react-tabulator'
import { Loader } from '../common'
import { toArray, toTuples, domainFromUrl } from '../util'
export const citationsColumns = [
{ title: 'Title', field: 'title', sorter: 'string' },
{ title: 'Institution', field: 'institution', sorter: 'string', },
{ title: 'Country', field: 'country', sorter: 'string', width: 140, },
{ title: 'Year', field: 'year', sorter: 'number', width: 70 },
{ title: 'PDF', field: 'pdf_text', formatter: 'link',
formatterParams: { target: "_blank", urlField: 'pdf_link', },
sorter: 'string', width: 100 },
]
class CitationsTable extends Component {
state = {
q: '',
formattedCitations: [],
filteredCitations: [],
}
componentDidMount(){
this.updateCitations()
}
componentDidUpdate(oldProps){
if (this.props.payload.data.citations !== oldProps.payload.data.citations) {
this.updateCitations()
}
}
updateCitations(){
const { paper, citations } = this.props.payload.data
if (!citations.length) this.setState({ formattedCitations: [] })
console.log(citations.filter(a => a.title.match('Coarse')))
const formattedCitations = citations.sort((a,b) => a.title.localeCompare(b.title)).map(citation => {
const pdf_link = (citation.pdf && citation.pdf.length)
? citation.pdf[0]
: (citation.doi && citation.doi.length)
? citation.doi[0]
: 'https://www.semanticscholar.org/paper/' + citation.id
let pdf_text = domainFromUrl(pdf_link)
return {
title: citation.title,
institution: citation.addresses.map(a => a.name).sort().join('; '),
country: Array.from(new Set(citation.addresses.map(a => a.country))).sort().join('; '),
year: citation.year,
pdf_link, pdf_text,
}
})
this.setState({
formattedCitations,
filteredCitations: formattedCitations,
})
}
updateFilter(q) {
const { formattedCitations } = this.state
if (!q.length) {
this.setState({ q, filteredCitations: formattedCitations })
} else {
let q_re = new RegExp('(' + q.replace(/\s+/g, ' ').trim().replace(' ', '|') + ')', 'gi')
let filteredCitations = formattedCitations.filter(citation => (
citation.title.match(q_re) ||
citation.institution.match(q_re) ||
citation.country.match(q_re)
))
this.setState({ q, filteredCitations })
}
}
render() {
const { formattedCitations, filteredCitations } = this.state
if (!formattedCitations.length) return <Loader />
return (
<div className='citationBrowser'>
<div className='citationHeader'>
<input
type="text"
value={this.state.q}
onChange={e => this.updateFilter(e.target.value)}
className='q'
placeholder='Enter text to search citations...'
/>
<a href=
</div>
<ReactTabulator
columns={citationsColumns}
data={filteredCitations}
options={{
height: 311,
layout: 'fitColumns',
placeholder: formattedCitations.length ? '' : 'Nothing matches your query',
}}
/>
</div>
)
}
}
export default CitationsTable
|
