From 0bede27de3bcc0c7f03d16c7607a0ae693daebc7 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 1 Apr 2019 10:23:29 +0200 Subject: citations table in react --- client/table/citations.table.js | 53 ++++++++++++++++++++++++++++++++++++ client/table/file.table.js | 59 +++++++++++++++++++++++++++++++++++++++++ client/table/index.js | 10 +++++++ 3 files changed, 122 insertions(+) create mode 100644 client/table/citations.table.js create mode 100644 client/table/file.table.js create mode 100644 client/table/index.js (limited to 'client/table') diff --git a/client/table/citations.table.js b/client/table/citations.table.js new file mode 100644 index 00000000..1ec2d10c --- /dev/null +++ b/client/table/citations.table.js @@ -0,0 +1,53 @@ +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 } 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 { + render() { + const { payload } = this.props + const { paper, citations } = payload.data + console.log(this.props) + if (!citations.length) return + + const formattedCitations = citations.map(citation => ({ + title: citation.title, + institution: citation.addresses[0].name, + country: citation.addresses[0].country, + year: citation.year, + pdf: (citation.pdf && citation.pdf.length) + ? citation.pdf[0] + : (citation.doi && citation.doi.length) + ? citation.doi[0] + : "", + })) + + console.log(formattedCitations) + + return ( + + ) + } +} + +export default CitationsTable diff --git a/client/table/file.table.js b/client/table/file.table.js new file mode 100644 index 00000000..a7e25bbf --- /dev/null +++ b/client/table/file.table.js @@ -0,0 +1,59 @@ +import React, { Component } from 'react' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' +import { toArray, toTuples } from '../util' + +import { Loader } from '../common' + +import csv from 'parse-csv' + +class FileTable extends Component { + state = { + data: [] + } + + componentDidMount() { + fetch(payload.url, { mode: 'cors' }) + .then(r => r.text()) + .then(text => { + try { + const data = csv.toJSON(text, { headers: { included: true } }) + this.setState({ data }) + } catch (e) { + console.error("error making json:", payload.url) + console.error(e) + } + }) + } + + getColumns(payload) { + let { cmd, url, fields } = payload + return ((fields && fields.length) ? fields[0] : '').split(', ').map(field => { + switch (field) { + default: + return { title: field, field: field.toLowerCase(), sorter: 'string' } + } + }) + } + + render() { + const { payload } = this.props + const { paper, citations } = payload.data + const columns = getColumns(payload) + if (!this.state.data.length) { + return + } + return ( + + ) + } +} +export default FileTable diff --git a/client/table/index.js b/client/table/index.js new file mode 100644 index 00000000..43db7dbb --- /dev/null +++ b/client/table/index.js @@ -0,0 +1,10 @@ +import 'react-tabulator/lib/styles.css' +import 'react-tabulator/lib/css/tabulator.min.css' + +import CitationsTable from './citations.table' +import FileTable from './file.table' + +export { + CitationsTable, + FileTable, +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 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/citations.table.js | 36 +++++++++++++++++++++++------------- client/table/index.js | 3 ++- client/table/tabulator.css | 26 ++++++++++++++++++++++++++ 3 files changed, 51 insertions(+), 14 deletions(-) create mode 100644 client/table/tabulator.css (limited to 'client/table') diff --git a/client/table/citations.table.js b/client/table/citations.table.js index 1ec2d10c..f65998aa 100644 --- a/client/table/citations.table.js +++ b/client/table/citations.table.js @@ -19,22 +19,32 @@ class CitationsTable extends Component { render() { const { payload } = this.props const { paper, citations } = payload.data - console.log(this.props) + if (!citations.length) return - const formattedCitations = citations.map(citation => ({ - title: citation.title, - institution: citation.addresses[0].name, - country: citation.addresses[0].country, - year: citation.year, - pdf: (citation.pdf && citation.pdf.length) - ? citation.pdf[0] - : (citation.doi && citation.doi.length) - ? citation.doi[0] - : "", - })) + const formattedCitations = citations.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 + const pdf_partz = pdf_link.split('/')[2].split('.') + if (pdf_partz.length > 2 && pdf_partz[pdf_partz.length - 2].length == 2) { + pdf_text = pdf_partz.slice(-3).join('.') + } else { + pdf_text = pdf_partz.slice(-2).join('.') + } + return { + title: citation.title, + institution: citation.addresses[0].name, + country: citation.addresses[0].country, + year: citation.year, + pdf_link, pdf_text, + } + }) - console.log(formattedCitations) + // console.log(formattedCitations) return ( Date: Mon, 1 Apr 2019 13:21:27 +0200 Subject: copy --- client/table/file.table.js | 1 + site/includes/citations.html | 2 +- site/public/datasets/50_people_one_question/index.html | 2 +- site/public/datasets/brainwash/index.html | 2 +- site/public/datasets/celeba/index.html | 2 +- site/public/datasets/cofw/index.html | 2 +- site/public/datasets/duke_mtmc/index.html | 2 +- site/public/datasets/hrt_transgender/index.html | 2 +- site/public/datasets/lfw/index.html | 2 +- site/public/datasets/market_1501/index.html | 2 +- site/public/datasets/msceleb/index.html | 2 +- site/public/datasets/pipa/index.html | 2 +- site/public/datasets/uccs/index.html | 2 +- site/public/datasets/viper/index.html | 2 +- 14 files changed, 14 insertions(+), 13 deletions(-) (limited to 'client/table') diff --git a/client/table/file.table.js b/client/table/file.table.js index a7e25bbf..92f5cf72 100644 --- a/client/table/file.table.js +++ b/client/table/file.table.js @@ -13,6 +13,7 @@ class FileTable extends Component { } componentDidMount() { + console.log(payload.url) fetch(payload.url, { mode: 'cors' }) .then(r => r.text()) .then(text => { diff --git a/site/includes/citations.html b/site/includes/citations.html index d29812df..ebd37d61 100644 --- a/site/includes/citations.html +++ b/site/includes/citations.html @@ -3,7 +3,7 @@

Citations

Citations were collected from Semantic Scholar, a website which aggregates - and indexes research papers. The citations were geocoded using names of institutions found in the PDF front matter, or as listed on other resources. These papers have been manually verified to show that researchers downloaded and used the dataset to train and/or test machine learning algorithms. + and indexes research papers. The citations were geocoded using names of institutions found in the PDF front matter, or as listed on other resources. These papers have been manually verified to show that researchers downloaded and used the dataset to train or test machine learning algorithms.

Add [button/link] to download CSV. Add search input field to filter. diff --git a/site/public/datasets/50_people_one_question/index.html b/site/public/datasets/50_people_one_question/index.html index 0a9e8297..988ce2dc 100644 --- a/site/public/datasets/50_people_one_question/index.html +++ b/site/public/datasets/50_people_one_question/index.html @@ -82,7 +82,7 @@

Citations

Citations were collected from Semantic Scholar, a website which aggregates - and indexes research papers. The citations were geocoded using names of institutions found in the PDF front matter, or as listed on other resources. These papers have been manually verified to show that researchers downloaded and used the dataset to train and/or test machine learning algorithms. + and indexes research papers. The citations were geocoded using names of institutions found in the PDF front matter, or as listed on other resources. These papers have been manually verified to show that researchers downloaded and used the dataset to train or test machine learning algorithms.

Add [button/link] to download CSV. Add search input field to filter. diff --git a/site/public/datasets/brainwash/index.html b/site/public/datasets/brainwash/index.html index 46cefbe7..20f2f096 100644 --- a/site/public/datasets/brainwash/index.html +++ b/site/public/datasets/brainwash/index.html @@ -107,7 +107,7 @@

Citations

Citations were collected from Semantic Scholar, a website which aggregates - and indexes research papers. The citations were geocoded using names of institutions found in the PDF front matter, or as listed on other resources. These papers have been manually verified to show that researchers downloaded and used the dataset to train and/or test machine learning algorithms. + and indexes research papers. The citations were geocoded using names of institutions found in the PDF front matter, or as listed on other resources. These papers have been manually verified to show that researchers downloaded and used the dataset to train or test machine learning algorithms.

Add [button/link] to download CSV. Add search input field to filter. diff --git a/site/public/datasets/celeba/index.html b/site/public/datasets/celeba/index.html index ca04062d..07522561 100644 --- a/site/public/datasets/celeba/index.html +++ b/site/public/datasets/celeba/index.html @@ -82,7 +82,7 @@

Citations

Citations were collected from Semantic Scholar, a website which aggregates - and indexes research papers. The citations were geocoded using names of institutions found in the PDF front matter, or as listed on other resources. These papers have been manually verified to show that researchers downloaded and used the dataset to train and/or test machine learning algorithms. + and indexes research papers. The citations were geocoded using names of institutions found in the PDF front matter, or as listed on other resources. These papers have been manually verified to show that researchers downloaded and used the dataset to train or test machine learning algorithms.

Add [button/link] to download CSV. Add search input field to filter. diff --git a/site/public/datasets/cofw/index.html b/site/public/datasets/cofw/index.html index 02d08278..99d4a9ef 100644 --- a/site/public/datasets/cofw/index.html +++ b/site/public/datasets/cofw/index.html @@ -92,7 +92,7 @@ To increase the number of training images, and since COFW has the exact same la

Citations

Citations were collected from Semantic Scholar, a website which aggregates - and indexes research papers. The citations were geocoded using names of institutions found in the PDF front matter, or as listed on other resources. These papers have been manually verified to show that researchers downloaded and used the dataset to train and/or test machine learning algorithms. + and indexes research papers. The citations were geocoded using names of institutions found in the PDF front matter, or as listed on other resources. These papers have been manually verified to show that researchers downloaded and used the dataset to train or test machine learning algorithms.

Add [button/link] to download CSV. Add search input field to filter. diff --git a/site/public/datasets/duke_mtmc/index.html b/site/public/datasets/duke_mtmc/index.html index 27a17c94..431cf7ff 100644 --- a/site/public/datasets/duke_mtmc/index.html +++ b/site/public/datasets/duke_mtmc/index.html @@ -103,7 +103,7 @@

Citations

Citations were collected from Semantic Scholar, a website which aggregates - and indexes research papers. The citations were geocoded using names of institutions found in the PDF front matter, or as listed on other resources. These papers have been manually verified to show that researchers downloaded and used the dataset to train and/or test machine learning algorithms. + and indexes research papers. The citations were geocoded using names of institutions found in the PDF front matter, or as listed on other resources. These papers have been manually verified to show that researchers downloaded and used the dataset to train or test machine learning algorithms.

Add [button/link] to download CSV. Add search input field to filter. diff --git a/site/public/datasets/hrt_transgender/index.html b/site/public/datasets/hrt_transgender/index.html index 63647f9a..7e10c2fb 100644 --- a/site/public/datasets/hrt_transgender/index.html +++ b/site/public/datasets/hrt_transgender/index.html @@ -102,7 +102,7 @@

Citations

Citations were collected from Semantic Scholar, a website which aggregates - and indexes research papers. The citations were geocoded using names of institutions found in the PDF front matter, or as listed on other resources. These papers have been manually verified to show that researchers downloaded and used the dataset to train and/or test machine learning algorithms. + and indexes research papers. The citations were geocoded using names of institutions found in the PDF front matter, or as listed on other resources. These papers have been manually verified to show that researchers downloaded and used the dataset to train or test machine learning algorithms.

Add [button/link] to download CSV. Add search input field to filter. diff --git a/site/public/datasets/lfw/index.html b/site/public/datasets/lfw/index.html index 532abc56..9cbf2e11 100644 --- a/site/public/datasets/lfw/index.html +++ b/site/public/datasets/lfw/index.html @@ -118,7 +118,7 @@

Citations

Citations were collected from Semantic Scholar, a website which aggregates - and indexes research papers. The citations were geocoded using names of institutions found in the PDF front matter, or as listed on other resources. These papers have been manually verified to show that researchers downloaded and used the dataset to train and/or test machine learning algorithms. + and indexes research papers. The citations were geocoded using names of institutions found in the PDF front matter, or as listed on other resources. These papers have been manually verified to show that researchers downloaded and used the dataset to train or test machine learning algorithms.

Add [button/link] to download CSV. Add search input field to filter. diff --git a/site/public/datasets/market_1501/index.html b/site/public/datasets/market_1501/index.html index c2569b81..b7e68c47 100644 --- a/site/public/datasets/market_1501/index.html +++ b/site/public/datasets/market_1501/index.html @@ -80,7 +80,7 @@

Citations

Citations were collected from Semantic Scholar, a website which aggregates - and indexes research papers. The citations were geocoded using names of institutions found in the PDF front matter, or as listed on other resources. These papers have been manually verified to show that researchers downloaded and used the dataset to train and/or test machine learning algorithms. + and indexes research papers. The citations were geocoded using names of institutions found in the PDF front matter, or as listed on other resources. These papers have been manually verified to show that researchers downloaded and used the dataset to train or test machine learning algorithms.

Add [button/link] to download CSV. Add search input field to filter. diff --git a/site/public/datasets/msceleb/index.html b/site/public/datasets/msceleb/index.html index e2c3c372..50788aad 100644 --- a/site/public/datasets/msceleb/index.html +++ b/site/public/datasets/msceleb/index.html @@ -106,7 +106,7 @@

Citations

Citations were collected from Semantic Scholar, a website which aggregates - and indexes research papers. The citations were geocoded using names of institutions found in the PDF front matter, or as listed on other resources. These papers have been manually verified to show that researchers downloaded and used the dataset to train and/or test machine learning algorithms. + and indexes research papers. The citations were geocoded using names of institutions found in the PDF front matter, or as listed on other resources. These papers have been manually verified to show that researchers downloaded and used the dataset to train or test machine learning algorithms.

Add [button/link] to download CSV. Add search input field to filter. diff --git a/site/public/datasets/pipa/index.html b/site/public/datasets/pipa/index.html index dddf67bd..09baca99 100644 --- a/site/public/datasets/pipa/index.html +++ b/site/public/datasets/pipa/index.html @@ -80,7 +80,7 @@

Citations

Citations were collected from Semantic Scholar, a website which aggregates - and indexes research papers. The citations were geocoded using names of institutions found in the PDF front matter, or as listed on other resources. These papers have been manually verified to show that researchers downloaded and used the dataset to train and/or test machine learning algorithms. + and indexes research papers. The citations were geocoded using names of institutions found in the PDF front matter, or as listed on other resources. These papers have been manually verified to show that researchers downloaded and used the dataset to train or test machine learning algorithms.

Add [button/link] to download CSV. Add search input field to filter. diff --git a/site/public/datasets/uccs/index.html b/site/public/datasets/uccs/index.html index c1b014e5..ca106022 100644 --- a/site/public/datasets/uccs/index.html +++ b/site/public/datasets/uccs/index.html @@ -103,7 +103,7 @@

Citations

Citations were collected from Semantic Scholar, a website which aggregates - and indexes research papers. The citations were geocoded using names of institutions found in the PDF front matter, or as listed on other resources. These papers have been manually verified to show that researchers downloaded and used the dataset to train and/or test machine learning algorithms. + and indexes research papers. The citations were geocoded using names of institutions found in the PDF front matter, or as listed on other resources. These papers have been manually verified to show that researchers downloaded and used the dataset to train or test machine learning algorithms.

Add [button/link] to download CSV. Add search input field to filter. diff --git a/site/public/datasets/viper/index.html b/site/public/datasets/viper/index.html index f8725362..f78d1c04 100644 --- a/site/public/datasets/viper/index.html +++ b/site/public/datasets/viper/index.html @@ -105,7 +105,7 @@

Citations

Citations were collected from Semantic Scholar, a website which aggregates - and indexes research papers. The citations were geocoded using names of institutions found in the PDF front matter, or as listed on other resources. These papers have been manually verified to show that researchers downloaded and used the dataset to train and/or test machine learning algorithms. + and indexes research papers. The citations were geocoded using names of institutions found in the PDF front matter, or as listed on other resources. These papers have been manually verified to show that researchers downloaded and used the dataset to train or test machine learning algorithms.

Add [button/link] to download CSV. Add search input field to filter. -- 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') 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') 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...' />