From 7268da9248b89c4b020890ab6f4c86982501b342 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 1 Apr 2019 10:45:19 +0200 Subject: reworking citations table --- client/table/tabulator.css | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 client/table/tabulator.css (limited to 'client/table/tabulator.css') diff --git a/client/table/tabulator.css b/client/table/tabulator.css new file mode 100644 index 00000000..24005368 --- /dev/null +++ b/client/table/tabulator.css @@ -0,0 +1,26 @@ +.tabulator { + border-left: 1px solid #333; + border-bottom: 1px solid #333; +} +.tabulator-row.tabulator-row-odd { + background-color: #222; +} +.tabulator-row.tabulator-row-even { + background-color: #333; +} +.desktop .tabulator-row.tabulator-selectable:hover { + background-color: #555; +} +.tabulator-row .tabulator-cell { + border-right: 1px solid #444; + padding: 8px; +} +.tabulator .tabulator-header { + border-bottom: 0; +} +.tabulator .tabulator-header .tabulator-col { + border-right: 1px solid #444; +} +.tabulator .tabulator-tableHolder .tabulator-table { + background-color: #333; +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From bca367770c426a6f2086c53b2e821a7a35de4e4f Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 1 Apr 2019 17:21:21 +0200 Subject: build --- client/table/citations.table.js | 84 +++++++++++++++++++++++++++++--------- client/table/tabulator.css | 9 ++++ scraper/client/paper/paper.info.js | 9 +++- 3 files changed, 80 insertions(+), 22 deletions(-) (limited to 'client/table/tabulator.css') diff --git a/client/table/citations.table.js b/client/table/citations.table.js index f65998aa..4ee1a0c9 100644 --- a/client/table/citations.table.js +++ b/client/table/citations.table.js @@ -2,13 +2,15 @@ import React, { Component } from 'react' import { bindActionCreators } from 'redux' import { connect } from 'react-redux' import { ReactTabulator } from 'react-tabulator' +import MultiValueFormatter from "react-tabulator/lib/formatters/MultiValueFormatter" + import { Loader } from '../common' import { toArray, toTuples } 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: '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', }, @@ -16,13 +18,24 @@ export const citationsColumns = [ ] class CitationsTable extends Component { - render() { - const { payload } = this.props - const { paper, citations } = payload.data - - if (!citations.length) return + state = { + q: '', + formattedCitations: [], + filteredCitations: [], + } - const formattedCitations = citations.map(citation => { + 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: [] }) + 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) @@ -37,25 +50,56 @@ class CitationsTable extends Component { } return { title: citation.title, - institution: citation.addresses[0].name, - country: citation.addresses[0].country, + 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, + }) + } - // console.log(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 + // console.log(formattedCitations) return ( - +
+ this.updateFilter(e.target.value)} + className='q' + placeholder='Filter by title/institution' + /> + +
) } } diff --git a/client/table/tabulator.css b/client/table/tabulator.css index 24005368..06bceb20 100644 --- a/client/table/tabulator.css +++ b/client/table/tabulator.css @@ -23,4 +23,13 @@ } .tabulator .tabulator-tableHolder .tabulator-table { background-color: #333; +} +.multi-value-formatter-content span { + border: 0; + padding: 0 5px 0 0; +} + +.citationBrowser .q { + max-width: 400px; + margin-bottom: 4px; } \ No newline at end of file diff --git a/scraper/client/paper/paper.info.js b/scraper/client/paper/paper.info.js index 35234617..b4fe54ba 100644 --- a/scraper/client/paper/paper.info.js +++ b/scraper/client/paper/paper.info.js @@ -9,7 +9,7 @@ import { TableObject } from '../common' class PaperInfo extends Component { render() { const { paperInfo, unknownCitations } = this.props.api - const { dataset, address } = paperInfo + const { dataset, paper, address } = paperInfo if (!dataset) return null return (
@@ -17,7 +17,12 @@ class PaperInfo extends Component { + Date: Mon, 1 Apr 2019 17:38:55 +0200 Subject: search icon --- client/table/citations.table.js | 4 ++-- client/table/tabulator.css | 12 +++++++++++- site/assets/img/icon-search.png | Bin 0 -> 1196 bytes 3 files changed, 13 insertions(+), 3 deletions(-) create mode 100644 site/assets/img/icon-search.png (limited to 'client/table/tabulator.css') diff --git a/client/table/citations.table.js b/client/table/citations.table.js index 4ee1a0c9..f9599f5d 100644 --- a/client/table/citations.table.js +++ b/client/table/citations.table.js @@ -35,6 +35,7 @@ class CitationsTable extends Component { 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] @@ -80,7 +81,6 @@ class CitationsTable extends Component { render() { const { formattedCitations, filteredCitations } = this.state if (!formattedCitations.length) return - // console.log(formattedCitations) return (
this.updateFilter(e.target.value)} className='q' - placeholder='Filter by title/institution' + placeholder='Enter text to search citations...' />