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...' /> Date: Mon, 1 Apr 2019 19:45:15 +0200 Subject: test csv --- .gitignore | 3 +++ client/index.js | 8 +++++-- client/table/citations.table.js | 28 ++++++++++------------ client/table/file.table.js | 42 +++++++++++++++++++++++++-------- client/util/index.js | 9 +++++++ package-lock.json | 8 +++---- package.json | 2 +- site/content/pages/test/assets/test.csv | 8 +++++++ site/content/pages/test/csv.md | 4 ++-- site/public/datasets/index.html | 12 +++++----- site/public/test/csv/index.html | 2 +- 11 files changed, 84 insertions(+), 42 deletions(-) create mode 100644 site/content/pages/test/assets/test.csv (limited to 'client/table') diff --git a/.gitignore b/.gitignore index 74a8a054..e41e7c36 100644 --- a/.gitignore +++ b/.gitignore @@ -170,3 +170,6 @@ site/public/user_content site/datasets/final/*.csv +flask.log +flask.log.* + diff --git a/client/index.js b/client/index.js index 668aebfb..5e36d341 100644 --- a/client/index.js +++ b/client/index.js @@ -65,14 +65,17 @@ function runApplets() { let opt = null payload.cmd = cmd payload.partz = cmdPartz + if (payload.cmd === 'load_file') { + payload.url = 'https://nyc3.digitaloceanspaces.com/megapixels/v1' + cmdPartz.shift() + return [el, payload] + } + if (payload.partz.length) { opt = payload.partz.shift().trim() if (opt.indexOf('http') === 0) { dataset = null url = opt } else if (opt.indexOf('assets') === 0) { - let pathname = window.location.pathname.replace('index.html', '') - url = 'https://nyc3.digitaloceanspaces.com/megapixels/v1' + pathname + opt dataset = null // console.log(url) } else { @@ -95,6 +98,7 @@ function runApplets() { } payload.dataset = dataset payload.url = url + console.log(payload) return [el, payload] }).filter(a => !!a) const withDataset = applets.map(a => a[1].dataset ? a[1] : null).filter(a => !!a) diff --git a/client/table/citations.table.js b/client/table/citations.table.js index f9599f5d..0092015f 100644 --- a/client/table/citations.table.js +++ b/client/table/citations.table.js @@ -2,10 +2,9 @@ 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' +import { toArray, toTuples, domainFromUrl } from '../util' export const citationsColumns = [ { title: 'Title', field: 'title', sorter: 'string' }, @@ -42,13 +41,7 @@ class CitationsTable extends Component { : (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('.') - } + let pdf_text = domainFromUrl(pdf_link) return { title: citation.title, institution: citation.addresses.map(a => a.name).sort().join('; '), @@ -83,13 +76,16 @@ class CitationsTable extends Component { if (!formattedCitations.length) return return (
- this.updateFilter(e.target.value)} - className='q' - placeholder='Enter text to search citations...' - /> +
+ this.updateFilter(e.target.value)} + className='q' + placeholder='Enter text to search citations...' + /> + r.text()) .then(text => { try { + const keys = text.split('\n')[0].split(',').map(s => s.trim().replace(/\"/,'')) const data = csv.toJSON(text, { headers: { included: true } }) - this.setState({ data }) + // console.log(data) + const columns = this.getColumns(keys, data, payload.fields) + this.setState({ keys, data, columns }) } catch (e) { console.error("error making json:", payload.url) console.error(e) @@ -27,26 +34,41 @@ class FileTable extends Component { }) } - getColumns(payload) { - let { cmd, url, fields } = payload - return ((fields && fields.length) ? fields[0] : '').split(', ').map(field => { + getColumns(keys, data, fields) { + let titles = fields.length ? fields[0].split(', ') : keys + let numberFields = [] + let columns = keys.map((field, i) => { + const title = titles[i] || field + if (field.match('url')) { + let textField = field.replace('url', 'label') + data.forEach(el => el[textField] = domainFromUrl(el[field])) + return { + title, + field: textField, + formatter: 'link', + formatterParams: { target: "_blank", urlField: field, }, + sorter: 'string' + } + } switch (field) { + case 'images': + case 'year': + return { title, field: field.toLowerCase(), sorter: 'number' } default: - return { title: field, field: field.toLowerCase(), sorter: 'string' } + return { title, field: field.toLowerCase(), sorter: 'string' } } }) + return columns } render() { const { payload } = this.props - const { paper, citations } = payload.data - const columns = getColumns(payload) if (!this.state.data.length) { return } return ( (n * 100).toFixed(1) + '%' export const px = (n, w) => Math.round(n * w) + 'px' export const clamp = (n, a, b) => n < a ? a : n < b ? n : b +export const domainFromUrl = url => { + const partz = url.split('/')[2].split('.') + if (partz.length > 2 && partz[partz.length - 2].length == 2) { + return partz.slice(-3).join('.') + } else { + return partz.slice(-2).join('.') + } +} + /* URLs */ export const preloadImage = opt => { diff --git a/package-lock.json b/package-lock.json index 4e9d6fac..43ee0cbf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3673,9 +3673,9 @@ } }, "file-saver": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.0.tgz", - "integrity": "sha512-cYM1ic5DAkg25pHKgi5f10ziAM7RJU37gaH1XQlyNDrtUnzhC/dfoV9zf2OmF0RMKi42jG5B0JWBnPQqyj/G6g==" + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.1.tgz", + "integrity": "sha512-dCB3K7/BvAcUmtmh1DzFdv0eXSVJ9IAFt1mw3XZfAexodNRoE29l3xB2EX4wH2q8m/UTzwzEPq/ArYk98kUkBQ==" }, "filename-regex": { "version": "2.0.1", @@ -8623,7 +8623,7 @@ }, "sprintf-js": { "version": "1.0.3", - "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", + "resolved": "http://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=", "dev": true }, diff --git a/package.json b/package.json index 6238e7e3..75fbebb7 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "exif-reader": "^1.0.2", "exifreader": "^2.5.0", "fetch-jsonp": "^1.1.3", - "file-saver": "^2.0.0-rc.3", + "file-saver": "^2.0.1", "history": "^4.7.2", "leaflet": "^1.3.4", "leaflet-arc": "^1.0.2", diff --git a/site/content/pages/test/assets/test.csv b/site/content/pages/test/assets/test.csv new file mode 100644 index 00000000..7156a814 --- /dev/null +++ b/site/content/pages/test/assets/test.csv @@ -0,0 +1,8 @@ +name,images,year,gender,description,url +aardvark,100,2019,m,bim da,https://asdf.us/ +bobcat,10,2017,f,in a tree,https://asdf.us/ +cow,20,2012,f,moooo,https://asdf.us/ +doe,2,2016,f,doe a deer,https://asdf.us/ +earwig,1,2017,m,just a bug,https://i.asdf.us/ +frog,17,2018,f,ribbit ribbit,https://i.asdf.us/ +giraffe,23,2009,m,i get around,https://adsf.us/ diff --git a/site/content/pages/test/csv.md b/site/content/pages/test/csv.md index b5f37754..85f714b4 100644 --- a/site/content/pages/test/csv.md +++ b/site/content/pages/test/csv.md @@ -15,6 +15,6 @@ authors: Megapixels ### [← Back to test index](/test/) ``` -load_file /datasets/lfw/assets/lfw_names_gender_kg_min.csv -Name, Images, Gender, Description +load_file /site/test/assets/test.csv +Name, Images, Year, Gender, Description, URL ``` diff --git a/site/public/datasets/index.html b/site/public/datasets/index.html index 1d2630e1..3a2dbd52 100644 --- a/site/public/datasets/index.html +++ b/site/public/datasets/index.html @@ -42,8 +42,8 @@ Brainwash
2015
-
Decoding image into set of people detections.
-
11,918 images
+
Head detection
+
11,917 images
@@ -90,7 +90,7 @@ MS Celeb
2016
-
face recognition
+
Large-scale face recognition
1,000,000 images
100,000
@@ -114,9 +114,9 @@ Unconstrained College Students
2018
-
Unconstrained face recognition
+
Face recognition, face detection
16,149 images
-
4,362
+
1,732
@@ -126,7 +126,7 @@ VIPeR
2007
-
pedestrian re-identification
+
Person re-identification
1,264 images
632
diff --git a/site/public/test/csv/index.html b/site/public/test/csv/index.html index 3257716f..70a7d257 100644 --- a/site/public/test/csv/index.html +++ b/site/public/test/csv/index.html @@ -28,7 +28,7 @@

CSV Test

← Back to test index

-
+
-- cgit v1.2.3-70-g09d2 From 0168528fb74f0e82f1b7ae90686d99c941ef0cf8 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 1 Apr 2019 20:03:27 +0200 Subject: csv export --- client/table/citations.table.js | 29 ++++++++++++++++++++++++++++- client/table/tabulator.css | 25 ++++++++++++++++++++++--- 2 files changed, 50 insertions(+), 4 deletions(-) (limited to 'client/table') diff --git a/client/table/citations.table.js b/client/table/citations.table.js index 0092015f..bbc55047 100644 --- a/client/table/citations.table.js +++ b/client/table/citations.table.js @@ -2,6 +2,7 @@ import React, { Component } from 'react' import { bindActionCreators } from 'redux' import { connect } from 'react-redux' import { ReactTabulator } from 'react-tabulator' +import { saveAs } from 'file-saver' import { Loader } from '../common' import { toArray, toTuples, domainFromUrl } from '../util' @@ -71,6 +72,32 @@ class CitationsTable extends Component { } } + download() { + const { formattedCitations } = this.state + const fn = this.props.payload.data.paper.key + '.csv' + const titles = citationsColumns.map(c => c.title) + const fields = citationsColumns.map(c => c.formatterParams ? c.formatterParams.urlField : c.field) + const rows = formattedCitations.map(citation => { + const row = fields.map(field => citation[field]).map(data => { + switch (typeof data) { + case 'number': + return String(data) + default: + return '\"' + String(data) + '\"' + } + }) + return row.join(",") + }) + + const blob = new Blob([ + [ + titles.join(','), + ...rows, + ].join('\n') + ], {type: "text/csv;charset=utf-8"}); + saveAs(blob, fn); + } + render() { const { formattedCitations, filteredCitations } = this.state if (!formattedCitations.length) return @@ -84,7 +111,7 @@ class CitationsTable extends Component { className='q' placeholder='Enter text to search citations...' /> - this.download()}>Download CSV
Date: Mon, 1 Apr 2019 20:06:28 +0200 Subject: css --- client/table/tabulator.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'client/table') diff --git a/client/table/tabulator.css b/client/table/tabulator.css index 465d4839..17dad62a 100644 --- a/client/table/tabulator.css +++ b/client/table/tabulator.css @@ -60,5 +60,5 @@ span.download { } .desktop span.download:hover { color: #fff; - background: #000; + background: #666; } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 087cf70c944c09c4d03f2fbcaf7c74718ccb5f8f Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 2 Apr 2019 14:47:34 +0200 Subject: cursor --- client/table/tabulator.css | 3 ++- site/public/about/faq/index.html | 1 - site/public/about/index.html | 1 - site/public/about/legal/index.html | 1 - site/public/about/press/index.html | 1 - site/public/datasets/50_people_one_question/index.html | 1 - site/public/datasets/afad/index.html | 1 - site/public/datasets/aflw/index.html | 1 - site/public/datasets/brainwash/index.html | 1 - site/public/datasets/caltech_10k/index.html | 1 - site/public/datasets/celeba/index.html | 1 - site/public/datasets/cofw/index.html | 1 - site/public/datasets/duke_mtmc/index.html | 1 - site/public/datasets/facebook/index.html | 1 - site/public/datasets/feret/index.html | 1 - site/public/datasets/hrt_transgender/index.html | 1 - site/public/datasets/index.html | 1 - site/public/datasets/lfpw/index.html | 1 - site/public/datasets/lfw/index.html | 1 - site/public/datasets/market_1501/index.html | 1 - site/public/datasets/msceleb/index.html | 1 - site/public/datasets/pipa/index.html | 1 - site/public/datasets/uccs/index.html | 1 - site/public/datasets/vgg_face2/index.html | 1 - site/public/datasets/viper/index.html | 1 - site/public/datasets/youtube_celebrities/index.html | 1 - site/public/info/index.html | 1 - site/public/research/00_introduction/index.html | 1 - site/public/research/01_from_1_to_100_pixels/index.html | 1 - site/public/research/02_what_computers_can_see/index.html | 1 - site/public/research/index.html | 1 - site/public/test/chart/index.html | 1 - site/public/test/citations/index.html | 1 - site/public/test/csv/index.html | 1 - site/public/test/datasets/index.html | 1 - site/public/test/face_search/index.html | 1 - site/public/test/gallery/index.html | 1 - site/public/test/index.html | 1 - site/public/test/map/index.html | 1 - site/public/test/name_search/index.html | 1 - site/public/test/pie_chart/index.html | 1 - site/templates/layout.html | 1 - 42 files changed, 2 insertions(+), 42 deletions(-) (limited to 'client/table') diff --git a/client/table/tabulator.css b/client/table/tabulator.css index 17dad62a..9a7ca00e 100644 --- a/client/table/tabulator.css +++ b/client/table/tabulator.css @@ -9,6 +9,7 @@ background-color: #333; } .desktop .tabulator-row.tabulator-selectable:hover { + cursor: text; background-color: #555; } .tabulator-row .tabulator-cell { @@ -35,7 +36,7 @@ max-width: 400px; margin-bottom: 10px; background-image: url(/assets/img/icon-search.png); - background-position: 390px center; + background-position: 380px center; background-repeat: no-repeat; box-shadow: 0px 2px 4px rgba(0,0,0,0.2); border: 0; diff --git a/site/public/about/faq/index.html b/site/public/about/faq/index.html index b86dac22..00e5d719 100644 --- a/site/public/about/faq/index.html +++ b/site/public/about/faq/index.html @@ -8,7 +8,6 @@ - diff --git a/site/public/about/index.html b/site/public/about/index.html index 18ad797a..d5d72b04 100644 --- a/site/public/about/index.html +++ b/site/public/about/index.html @@ -8,7 +8,6 @@ - diff --git a/site/public/about/legal/index.html b/site/public/about/legal/index.html index 331712ba..b27e9188 100644 --- a/site/public/about/legal/index.html +++ b/site/public/about/legal/index.html @@ -8,7 +8,6 @@ - diff --git a/site/public/about/press/index.html b/site/public/about/press/index.html index 3fc33969..e09bf732 100644 --- a/site/public/about/press/index.html +++ b/site/public/about/press/index.html @@ -8,7 +8,6 @@ - diff --git a/site/public/datasets/50_people_one_question/index.html b/site/public/datasets/50_people_one_question/index.html index 8afe69e3..e3006385 100644 --- a/site/public/datasets/50_people_one_question/index.html +++ b/site/public/datasets/50_people_one_question/index.html @@ -8,7 +8,6 @@ - diff --git a/site/public/datasets/afad/index.html b/site/public/datasets/afad/index.html index a0aea1a6..8254d4fa 100644 --- a/site/public/datasets/afad/index.html +++ b/site/public/datasets/afad/index.html @@ -8,7 +8,6 @@ - diff --git a/site/public/datasets/aflw/index.html b/site/public/datasets/aflw/index.html index 7aaa9af0..6c7b2397 100644 --- a/site/public/datasets/aflw/index.html +++ b/site/public/datasets/aflw/index.html @@ -8,7 +8,6 @@ - diff --git a/site/public/datasets/brainwash/index.html b/site/public/datasets/brainwash/index.html index c0830a96..2a839a24 100644 --- a/site/public/datasets/brainwash/index.html +++ b/site/public/datasets/brainwash/index.html @@ -8,7 +8,6 @@ - diff --git a/site/public/datasets/caltech_10k/index.html b/site/public/datasets/caltech_10k/index.html index 6615bb1a..9692fb2b 100644 --- a/site/public/datasets/caltech_10k/index.html +++ b/site/public/datasets/caltech_10k/index.html @@ -8,7 +8,6 @@ - diff --git a/site/public/datasets/celeba/index.html b/site/public/datasets/celeba/index.html index b8300dbf..5e8c5fce 100644 --- a/site/public/datasets/celeba/index.html +++ b/site/public/datasets/celeba/index.html @@ -8,7 +8,6 @@ - diff --git a/site/public/datasets/cofw/index.html b/site/public/datasets/cofw/index.html index 84d38f1f..2da951ee 100644 --- a/site/public/datasets/cofw/index.html +++ b/site/public/datasets/cofw/index.html @@ -8,7 +8,6 @@ - diff --git a/site/public/datasets/duke_mtmc/index.html b/site/public/datasets/duke_mtmc/index.html index dcd01308..f5c94620 100644 --- a/site/public/datasets/duke_mtmc/index.html +++ b/site/public/datasets/duke_mtmc/index.html @@ -8,7 +8,6 @@ - diff --git a/site/public/datasets/facebook/index.html b/site/public/datasets/facebook/index.html index 7fb1901a..bdfb658f 100644 --- a/site/public/datasets/facebook/index.html +++ b/site/public/datasets/facebook/index.html @@ -8,7 +8,6 @@ - diff --git a/site/public/datasets/feret/index.html b/site/public/datasets/feret/index.html index ce60f3de..4cd57413 100644 --- a/site/public/datasets/feret/index.html +++ b/site/public/datasets/feret/index.html @@ -8,7 +8,6 @@ - diff --git a/site/public/datasets/hrt_transgender/index.html b/site/public/datasets/hrt_transgender/index.html index 05a49b9b..8d472c3b 100644 --- a/site/public/datasets/hrt_transgender/index.html +++ b/site/public/datasets/hrt_transgender/index.html @@ -8,7 +8,6 @@ - diff --git a/site/public/datasets/index.html b/site/public/datasets/index.html index 3a2dbd52..c43b2097 100644 --- a/site/public/datasets/index.html +++ b/site/public/datasets/index.html @@ -8,7 +8,6 @@ - diff --git a/site/public/datasets/lfpw/index.html b/site/public/datasets/lfpw/index.html index 087d8b1d..fae3cc93 100644 --- a/site/public/datasets/lfpw/index.html +++ b/site/public/datasets/lfpw/index.html @@ -8,7 +8,6 @@ - diff --git a/site/public/datasets/lfw/index.html b/site/public/datasets/lfw/index.html index 22c8c1ad..4b22fdf4 100644 --- a/site/public/datasets/lfw/index.html +++ b/site/public/datasets/lfw/index.html @@ -8,7 +8,6 @@ - diff --git a/site/public/datasets/market_1501/index.html b/site/public/datasets/market_1501/index.html index 2761a7c7..bacc5b16 100644 --- a/site/public/datasets/market_1501/index.html +++ b/site/public/datasets/market_1501/index.html @@ -8,7 +8,6 @@ - diff --git a/site/public/datasets/msceleb/index.html b/site/public/datasets/msceleb/index.html index 21a14129..7a3d2bab 100644 --- a/site/public/datasets/msceleb/index.html +++ b/site/public/datasets/msceleb/index.html @@ -8,7 +8,6 @@ - diff --git a/site/public/datasets/pipa/index.html b/site/public/datasets/pipa/index.html index d74ae49e..89d42a0b 100644 --- a/site/public/datasets/pipa/index.html +++ b/site/public/datasets/pipa/index.html @@ -8,7 +8,6 @@ - diff --git a/site/public/datasets/uccs/index.html b/site/public/datasets/uccs/index.html index 4de64ebc..56c3a7c5 100644 --- a/site/public/datasets/uccs/index.html +++ b/site/public/datasets/uccs/index.html @@ -8,7 +8,6 @@ - diff --git a/site/public/datasets/vgg_face2/index.html b/site/public/datasets/vgg_face2/index.html index 42e3b961..dc8f1ebc 100644 --- a/site/public/datasets/vgg_face2/index.html +++ b/site/public/datasets/vgg_face2/index.html @@ -8,7 +8,6 @@ - diff --git a/site/public/datasets/viper/index.html b/site/public/datasets/viper/index.html index 2610d1a1..29638ed7 100644 --- a/site/public/datasets/viper/index.html +++ b/site/public/datasets/viper/index.html @@ -8,7 +8,6 @@ - diff --git a/site/public/datasets/youtube_celebrities/index.html b/site/public/datasets/youtube_celebrities/index.html index dd230926..d7030588 100644 --- a/site/public/datasets/youtube_celebrities/index.html +++ b/site/public/datasets/youtube_celebrities/index.html @@ -8,7 +8,6 @@ - diff --git a/site/public/info/index.html b/site/public/info/index.html index ef7dc8db..d535b672 100644 --- a/site/public/info/index.html +++ b/site/public/info/index.html @@ -8,7 +8,6 @@ - diff --git a/site/public/research/00_introduction/index.html b/site/public/research/00_introduction/index.html index 5c536dc4..89ca3bb5 100644 --- a/site/public/research/00_introduction/index.html +++ b/site/public/research/00_introduction/index.html @@ -8,7 +8,6 @@ - diff --git a/site/public/research/01_from_1_to_100_pixels/index.html b/site/public/research/01_from_1_to_100_pixels/index.html index 37fc367f..f60df65e 100644 --- a/site/public/research/01_from_1_to_100_pixels/index.html +++ b/site/public/research/01_from_1_to_100_pixels/index.html @@ -8,7 +8,6 @@ - diff --git a/site/public/research/02_what_computers_can_see/index.html b/site/public/research/02_what_computers_can_see/index.html index 0fce1373..2a9b9c23 100644 --- a/site/public/research/02_what_computers_can_see/index.html +++ b/site/public/research/02_what_computers_can_see/index.html @@ -8,7 +8,6 @@ - diff --git a/site/public/research/index.html b/site/public/research/index.html index 303732f8..dc49e849 100644 --- a/site/public/research/index.html +++ b/site/public/research/index.html @@ -8,7 +8,6 @@ - diff --git a/site/public/test/chart/index.html b/site/public/test/chart/index.html index 93e12b3c..4968224f 100644 --- a/site/public/test/chart/index.html +++ b/site/public/test/chart/index.html @@ -8,7 +8,6 @@ - diff --git a/site/public/test/citations/index.html b/site/public/test/citations/index.html index 70b3fe55..3bc07693 100644 --- a/site/public/test/citations/index.html +++ b/site/public/test/citations/index.html @@ -8,7 +8,6 @@ - diff --git a/site/public/test/csv/index.html b/site/public/test/csv/index.html index 70a7d257..8683b4a1 100644 --- a/site/public/test/csv/index.html +++ b/site/public/test/csv/index.html @@ -8,7 +8,6 @@ - diff --git a/site/public/test/datasets/index.html b/site/public/test/datasets/index.html index 15edf039..f0dda184 100644 --- a/site/public/test/datasets/index.html +++ b/site/public/test/datasets/index.html @@ -8,7 +8,6 @@ - diff --git a/site/public/test/face_search/index.html b/site/public/test/face_search/index.html index 93dc2bc6..ad1f59c0 100644 --- a/site/public/test/face_search/index.html +++ b/site/public/test/face_search/index.html @@ -8,7 +8,6 @@ - diff --git a/site/public/test/gallery/index.html b/site/public/test/gallery/index.html index 9e2c54f6..354baa24 100644 --- a/site/public/test/gallery/index.html +++ b/site/public/test/gallery/index.html @@ -8,7 +8,6 @@ - diff --git a/site/public/test/index.html b/site/public/test/index.html index 0fc839d0..ab06c922 100644 --- a/site/public/test/index.html +++ b/site/public/test/index.html @@ -8,7 +8,6 @@ - diff --git a/site/public/test/map/index.html b/site/public/test/map/index.html index 4f4e7093..bde62f4f 100644 --- a/site/public/test/map/index.html +++ b/site/public/test/map/index.html @@ -8,7 +8,6 @@ - diff --git a/site/public/test/name_search/index.html b/site/public/test/name_search/index.html index 4e3ef428..1cc71731 100644 --- a/site/public/test/name_search/index.html +++ b/site/public/test/name_search/index.html @@ -8,7 +8,6 @@ - diff --git a/site/public/test/pie_chart/index.html b/site/public/test/pie_chart/index.html index 7dd159a3..169a6d6a 100644 --- a/site/public/test/pie_chart/index.html +++ b/site/public/test/pie_chart/index.html @@ -8,7 +8,6 @@ - diff --git a/site/templates/layout.html b/site/templates/layout.html index b5b7880c..d51e4b6a 100644 --- a/site/templates/layout.html +++ b/site/templates/layout.html @@ -8,7 +8,6 @@ - -- cgit v1.2.3-70-g09d2 From 9280b2ad356b7f0cda38f9e14eb91b89f076e9c1 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 2 Apr 2019 15:50:01 +0200 Subject: clamp citations height. add waypoint --- client/index.js | 20 ++++++++++++++++++++ client/table/citations.table.js | 2 +- client/table/file.table.js | 2 +- package-lock.json | 20 ++++++++++++++++++++ package.json | 4 +++- site/assets/css/css.css | 14 ++++++++++---- site/public/datasets/brainwash/index.html | 1 + site/templates/layout.html | 1 + 8 files changed, 57 insertions(+), 7 deletions(-) (limited to 'client/table') diff --git a/client/index.js b/client/index.js index 5e36d341..c09aece7 100644 --- a/client/index.js +++ b/client/index.js @@ -2,6 +2,7 @@ import React from 'react' import ReactDOM from 'react-dom' import { AppContainer } from 'react-hot-loader' import { Provider } from 'react-redux' +import 'waypoints/lib/noframework.waypoints.min.js'; import { toArray } from './util' import Applet from './applet' @@ -112,6 +113,24 @@ function runApplets() { } } +function buildWaypoints() { + const element = document.querySelector('.content section:nth-child(2)') + if (element) { + var waypoint = new Waypoint({ + element, + handler: function(direction) { + if (direction === 'down') { + document.body.classList.add('scrolled') + } else { + document.body.classList.remove('scrolled') + } + // console.log(direction) + // console.log('Scrolled to waypoint!') + } + }) + } +} + function main() { const paras = document.querySelectorAll('section p') // if (paras.length) { @@ -123,6 +142,7 @@ function main() { } }) runApplets() + buildWaypoints() } main() diff --git a/client/table/citations.table.js b/client/table/citations.table.js index bbc55047..178cc65b 100644 --- a/client/table/citations.table.js +++ b/client/table/citations.table.js @@ -117,7 +117,7 @@ class CitationsTable extends Component { columns={citationsColumns} data={filteredCitations} options={{ - height: 311, + height: Math.max(104, Math.min(37 * formattedCitations.length + 29, 311)), layout: 'fitColumns', placeholder: formattedCitations.length ? '' : 'Nothing matches your query', }} diff --git a/client/table/file.table.js b/client/table/file.table.js index 82c01ac5..db53243a 100644 --- a/client/table/file.table.js +++ b/client/table/file.table.js @@ -71,7 +71,7 @@ class FileTable extends Component { columns={this.state.columns} data={this.state.data} options={{ - height: 311, + height: Math.min(37 * this.state.data.length + 29, 311), layout: 'fitColumns', placeholder: 'No Data Set', }} diff --git a/package-lock.json b/package-lock.json index 43ee0cbf..54e60fad 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2061,6 +2061,11 @@ "date-now": "^0.1.4" } }, + "consolidated-events": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/consolidated-events/-/consolidated-events-2.0.2.tgz", + "integrity": "sha512-2/uRVMdRypf5z/TW/ncD/66l75P5hH2vM/GR8Jf8HLc2xnfJtmina6F6du8+v4Z2vTrMo7jC+W1tmEEuuELgkQ==" + }, "constants-browserify": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz", @@ -7351,6 +7356,16 @@ "resolved": "https://registry.npmjs.org/react-tag-autocomplete/-/react-tag-autocomplete-5.8.2.tgz", "integrity": "sha512-GkOQrSLjvWo98IeqRuGgc77zaxSMyMjy+b2Rc+m9jMKTWopF9h5Lf2F/X1oK9hcnUCeUmJ5QVpc/dx9MgOA2Iw==" }, + "react-waypoint": { + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/react-waypoint/-/react-waypoint-9.0.1.tgz", + "integrity": "sha512-AdP1EhU5fOFne1aEfZPv2AhVC+cGJ3TxITOnZM9tBBlXOOhz3lXtTSHdicRCY+2VBqerT6zD1tAtp89Mng+Chg==", + "requires": { + "consolidated-events": "^1.1.0 || ^2.0.0", + "prop-types": "^15.0.0", + "react-is": "^16.6.3" + } + }, "read-pkg": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz", @@ -9874,6 +9889,11 @@ } } }, + "waypoints": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/waypoints/-/waypoints-4.0.1.tgz", + "integrity": "sha1-CZeaBXOBCylifLpDZqKEoGLsacg=" + }, "wbuf": { "version": "1.7.3", "resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz", diff --git a/package.json b/package.json index 75fbebb7..bbd3d763 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,7 @@ "react-router-dom": "^4.3.1", "react-spin": "^0.6.2", "react-tabulator": "^0.9.1", + "react-waypoint": "^9.0.1", "redux": "^4.0.0", "redux-thunk": "^2.3.0", "snapsvg": "^0.5.1", @@ -65,7 +66,8 @@ "three": "^0.100.0", "three-orbitcontrols": "^2.99.1", "three.meshline": "^1.1.0", - "three.textsprite": "^18.10.24" + "three.textsprite": "^18.10.24", + "waypoints": "^4.0.1" }, "devDependencies": { "babel-cli": "^6.26.0", diff --git a/site/assets/css/css.css b/site/assets/css/css.css index a09234d3..824819a9 100644 --- a/site/assets/css/css.css +++ b/site/assets/css/css.css @@ -64,10 +64,16 @@ header .site_name { line-height: 11px; letter-spacing: 3px; } -header .site_name.splash{ - font-size: 20px; - line-height: 20px; - font-weight: 400; +header .splash{ + font-size: 15px; + font-weight: 400; + color: #888; + padding-left: 8px; + opacity: 0; + transition: 0.3s opacity cubic-bezier(0,0,1,1); +} +.scrolled header .splash { + opacity: 1; } header .links{ font-size: 18px; diff --git a/site/public/datasets/brainwash/index.html b/site/public/datasets/brainwash/index.html index 2a839a24..ec5ee434 100644 --- a/site/public/datasets/brainwash/index.html +++ b/site/public/datasets/brainwash/index.html @@ -17,6 +17,7 @@
MegaPixels
+
Brainwash
Datasets diff --git a/site/templates/layout.html b/site/templates/layout.html index d51e4b6a..7b610523 100644 --- a/site/templates/layout.html +++ b/site/templates/layout.html @@ -17,6 +17,7 @@
MegaPixels
+
{{ metadata.meta.dataset.name_short }}
Datasets -- cgit v1.2.3-70-g09d2 From 77e2b579bc42b6c36f82dba246561293049e73f8 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 2 Apr 2019 19:03:06 +0200 Subject: adding chart... whole verify app working nicer --- client/table/tabulator.css | 10 +++- scraper/client/app.js | 1 - scraper/client/common/header.component.js | 9 ++- scraper/client/common/table.component.js | 3 + scraper/client/paper/citationList.component.js | 33 ++++------ scraper/client/paper/index.js | 2 - scraper/client/paper/paper.chart.js | 83 ++++++++++++++++++++++++++ scraper/client/paper/paper.citations.js | 6 -- scraper/client/paper/paper.css | 21 +++++++ scraper/client/paper/paper.info.js | 32 ++++++++-- scraper/client/paper/paper.manager.js | 35 +++++++++++ scraper/client/paper/paper.unknown.js | 41 ------------- 12 files changed, 192 insertions(+), 84 deletions(-) create mode 100644 scraper/client/paper/paper.chart.js delete mode 100644 scraper/client/paper/paper.unknown.js (limited to 'client/table') diff --git a/client/table/tabulator.css b/client/table/tabulator.css index 9a7ca00e..95768976 100644 --- a/client/table/tabulator.css +++ b/client/table/tabulator.css @@ -8,9 +8,13 @@ .tabulator-row.tabulator-row-even { background-color: #333; } -.desktop .tabulator-row.tabulator-selectable:hover { - cursor: text; - background-color: #555; +.desktop .tabulator-row.tabulator-selectable.tabulator-row-even:hover { + cursor: arrow; + background-color: #333; +} +.desktop .tabulator-row.tabulator-selectable.tabulator-row-odd:hover { + cursor: arrow; + background-color: #222; } .tabulator-row .tabulator-cell { border-right: 1px solid #444; diff --git a/scraper/client/app.js b/scraper/client/app.js index b449d0d0..366d4098 100644 --- a/scraper/client/app.js +++ b/scraper/client/app.js @@ -17,7 +17,6 @@ export default class App extends Component { - diff --git a/scraper/client/common/header.component.js b/scraper/client/common/header.component.js index 2f084979..c9825aab 100644 --- a/scraper/client/common/header.component.js +++ b/scraper/client/common/header.component.js @@ -1,5 +1,5 @@ import React, { Component } from 'react' -// import { NavLink } from 'react-router-dom' +import { Link } from 'react-router-dom' import { bindActionCreators } from 'redux' import { connect } from 'react-redux' @@ -34,10 +34,9 @@ class Header extends Component { {dataset &&
{dataset.name_full}{' - '} - Info{' - '} - Citations{' - '} - Unknown{' - '} - Random + Info{' - '} + Citations{' - '} + Random
} diff --git a/scraper/client/common/table.component.js b/scraper/client/common/table.component.js index 96b62835..121c9841 100644 --- a/scraper/client/common/table.component.js +++ b/scraper/client/common/table.component.js @@ -118,6 +118,9 @@ export function TableCell({ value }) { value = } } + if (value && typeof value === 'string' && value.indexOf('http') === 0) { + value = {value} + } return ( {value} ) diff --git a/scraper/client/paper/citationList.component.js b/scraper/client/paper/citationList.component.js index be8528bf..002c0dcb 100644 --- a/scraper/client/paper/citationList.component.js +++ b/scraper/client/paper/citationList.component.js @@ -9,38 +9,31 @@ import { TableObject, Loader } from '../common' import { USES_DATASET } from '../types' class CitationList extends Component { - componentDidMount() { - const { citations, api } = this.props - const { paperInfo, unknownCitations, verifications } = api - const { dataset } = paperInfo - if (!dataset || !citations || !verifications[dataset.key]) { - this.props.actions.setSortedCitations([]) - return - } - let verifiedLookup = verifications[dataset.key] || {} - const sortedCitations = citations.map(citation => [ - citation.title, - verifiedLookup[citation.id] ? verifiedLookup[citation.id].uses_dataset : USES_DATASET.NO_DATA, - citation.pdf.length, - citation - ]) - .sort((a,b) => (b[1] - a[1] || b[2] - a[2] || (a[0].localeCompare(b[0])))) - .map(tup => tup[3]) - this.props.actions.setSortedCitations(sortedCitations) + state = { + filter: USES_DATASET.YES, } render() { const { citations, title, api } = this.props const { paperInfo, unknownCitations, verifications, sortedCitations } = api const { dataset } = paperInfo + const { filter } = this.state if (!dataset || !citations || !verifications[dataset.key]) return let verifiedLookup = verifications[dataset.key] || {} - // console.log(verifications) + let filteredCitations = sortedCitations.filter(citation => ( + citation.verified === filter + )) return (

{title}

+
+ this.setState({ filter: USES_DATASET.YES })}>uses dataset + this.setState({ filter: USES_DATASET.NO })}>{"doesn't use dataset"} + this.setState({ filter: USES_DATASET.UNKNOWN })}>{'not enough information'} + this.setState({ filter: USES_DATASET.NO_DATA })}>{'unverified'} +
    - {(sortedCitations || []).map((citation, i) => { + {(filteredCitations || []).map((citation, i) => { let cite = { ...citation } cite.id = { _raw: true, diff --git a/scraper/client/paper/index.js b/scraper/client/paper/index.js index 99672684..9346234a 100644 --- a/scraper/client/paper/index.js +++ b/scraper/client/paper/index.js @@ -1,7 +1,6 @@ import Manager from './paper.manager' import Info from './paper.info' import Citations from './paper.citations' -import UnknownCitations from './paper.unknown' import Random from './paper.random' import Address from './paper.address' import Verify from './paper.verify' @@ -13,7 +12,6 @@ export { Manager, Info, Citations, - UnknownCitations, Random, Address, Verify, diff --git a/scraper/client/paper/paper.chart.js b/scraper/client/paper/paper.chart.js new file mode 100644 index 00000000..01d8d0e8 --- /dev/null +++ b/scraper/client/paper/paper.chart.js @@ -0,0 +1,83 @@ +import React, { Component } from 'react' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' +import { toArray, toTuples } from '../util' +import C3Chart from 'react-c3js' +import 'c3/c3.css' + +class PaperChart extends Component { + render() { + const { rows, title } = this.props + if (!rows.length) return null + const colorPattern = [ + "#00b200", + "#ff0000", + "#e0c200", + "#dddddd", + ] + + return ( +
    +
    + value, + } + }} + size={{ + height: rows.length < 4 ? 316 : 336, + }} + /> + {title} +
    +
    + ) + } +} + +/* + legend={{ + position: 'right' + }} + tooltip={{ + contents: function (d, defaultTitleFormat, defaultValueFormat, color) { + const countriesByYearLookup = years[yearList[d[0].x]] + let countriesByYear = Object.keys(countriesByYearLookup).map(country => [country, countriesByYearLookup[country]]).sort((a,b) => b[1] - a[1]) + let topCountriesForThisYear = countriesByYear.slice(0, topCountryCount) + let bottomTotal = countriesByYear.slice(topCountryCount).reduce((a,b) => (a + b[1]), 0) + // console.log(topCountriesForThisYear) + topCountriesForThisYear.push([otherCountriesLabel, bottomTotal]) + const tableRows = topCountriesForThisYear.filter(pair => !!pair[1]).map(([country, total]) => { + let colorIndex = topCountries.indexOf(country) + if (colorIndex < 0) colorIndex = colorPattern.length - 1 + const color = colorPattern[ colorIndex ] + return [ + "", + "", + "", + country, + "", + "", + total, + "", + "", + ].join('') + }) + return [ + "", + ...tableRows, + "
    ", + ].join('') + } + }} +*/ + +export default PaperChart diff --git a/scraper/client/paper/paper.citations.js b/scraper/client/paper/paper.citations.js index f0e9ea26..c3a9cc61 100644 --- a/scraper/client/paper/paper.citations.js +++ b/scraper/client/paper/paper.citations.js @@ -11,12 +11,6 @@ import { USES_DATASET } from '../types' import CitationList from './citationList.component' class PaperCitations extends Component { - componentDidUpdate(prevProps) { - if (this.props.api.paperInfo.dataset !== prevProps.api.paperInfo.dataset) { - this.props.actions.getVerificationsDataset(this.props.api.paperInfo.dataset.key) - } - } - render() { const { paperInfo, unknownCitations, verifications } = this.props.api const { dataset, citations } = paperInfo diff --git a/scraper/client/paper/paper.css b/scraper/client/paper/paper.css index 21df2df1..914077b6 100644 --- a/scraper/client/paper/paper.css +++ b/scraper/client/paper/paper.css @@ -12,6 +12,20 @@ width: 100%; } +.filter_buttons { + margin-left: 5px; + margin-bottom: 10px; +} +.filter_buttons span { + margin-right: 10px; + cursor: pointer; + opacity: 0.8; + transition: opacity 0.2; +} +.filter_buttons span:hover { + opacity: 1; +} + .citations { padding:40px; } @@ -82,6 +96,13 @@ padding:4px; font-size:12px; } +.chartCaption { + display: block; + width: 100%; + font-size: 12px; + color: #333; + text-align: center; +} .param { display: flex; diff --git a/scraper/client/paper/paper.info.js b/scraper/client/paper/paper.info.js index b4fe54ba..25f4472f 100644 --- a/scraper/client/paper/paper.info.js +++ b/scraper/client/paper/paper.info.js @@ -3,17 +3,40 @@ import { bindActionCreators } from 'redux' import { connect } from 'react-redux' import * as actions from '../actions' - import { TableObject } from '../common' +import { USES_DATASET } from '../types' + +import PaperChart from './paper.chart' class PaperInfo extends Component { render() { - const { paperInfo, unknownCitations } = this.props.api + const { paperInfo, sortedCitations, unknownCitations } = this.props.api const { dataset, paper, address } = paperInfo if (!dataset) return null + + let counts = {} + const citationLabels = ['Uses Dataset', 'Doesn\'t Use Dataset', 'Not Enough Information', 'Unknown'] + const citationCountOrder = [ USES_DATASET.YES, USES_DATASET.NO, USES_DATASET.UNKNOWN, USES_DATASET.NO_DATA ] + citationCountOrder.forEach(v => counts[v] = 0) + + sortedCitations.forEach(c => counts[c.verified] += 1) + + let citationCounts = {} + let citationRows = [] + citationCountOrder.forEach((v, i) => { + const count = counts[v] + const label = citationLabels[i] + citationCounts[label] = count + citationRows.push([ label, count ]) + }) + return (

    {dataset.name_full}

    +
    ) diff --git a/scraper/client/paper/paper.manager.js b/scraper/client/paper/paper.manager.js index 2ac03b01..8b25b1cc 100644 --- a/scraper/client/paper/paper.manager.js +++ b/scraper/client/paper/paper.manager.js @@ -3,6 +3,7 @@ import { bindActionCreators } from 'redux' import { connect } from 'react-redux' import * as actions from '../actions' +import { USES_DATASET } from '../types' import { Loader } from '../common' @@ -15,6 +16,40 @@ class PaperManager extends Component { if (this.props.match.params.key !== oldProps.match.params.key) { this.props.actions.getPaperInfo(this.props.match.params.key) } + console.log('whoms?') + if (this.props.api.paperInfo.dataset !== oldProps.api.paperInfo.dataset && this.props.api.paperInfo.dataset && this.props.api.paperInfo.dataset.key) { + console.log('vert?') + this.props.actions.getVerificationsDataset(this.props.api.paperInfo.dataset.key) + } + if (this.props.api.verifications !== oldProps.api.verifications && this.props.api.paperInfo.dataset) { + console.log('updated?') + this.updateSortedCitations() + } + } + + updateSortedCitations() { + const { api } = this.props + const { paperInfo, unknownCitations, verifications } = api + const { dataset } = paperInfo + if (!dataset || !paperInfo.citations || !unknownCitations.citations || !verifications[dataset.key]) { + this.props.actions.setSortedCitations([]) + return + } + const citations = paperInfo.citations.concat(unknownCitations.citations) + let verifiedLookup = verifications[dataset.key] || {} + const sortedCitations = citations.map(citation => [ + citation.title, + verifiedLookup[citation.id] ? verifiedLookup[citation.id].uses_dataset : USES_DATASET.NO_DATA, + citation.pdf.length, + citation + ]) + .sort((a,b) => (b[1] - a[1] || b[2] - a[2] || (a[0].localeCompare(b[0])))) + .map(tup => ({ + ...tup[3], + verified: tup[1], + })) + console.log('updated') + this.props.actions.setSortedCitations(sortedCitations) } render() { diff --git a/scraper/client/paper/paper.unknown.js b/scraper/client/paper/paper.unknown.js deleted file mode 100644 index 876ac144..00000000 --- a/scraper/client/paper/paper.unknown.js +++ /dev/null @@ -1,41 +0,0 @@ -import React, { Component } from 'react' -import { bindActionCreators } from 'redux' -import { connect } from 'react-redux' -import { Link } from 'react-router-dom' - -import * as actions from '../actions' - -import { Loader } from '../common' -import { USES_DATASET } from '../types' - -import CitationList from './citationList.component' - -class PaperUnknown extends Component { - componentDidUpdate(prevProps) { - if (this.props.api.paperInfo.dataset !== prevProps.api.paperInfo.dataset) { - this.props.actions.getVerificationsDataset(this.props.api.paperInfo.dataset.key) - } - } - - render() { - const { paperInfo, unknownCitations, verifications } = this.props.api - const { dataset, citations } = paperInfo - if (!dataset || !citations || !verifications[dataset.key]) return - - return ( - - ) - } -} - -const mapStateToProps = state => ({ - api: state.api -}) -const mapDispatchToProps = dispatch => ({ - actions: bindActionCreators({ ...actions }, dispatch), -}) - -export default connect(mapStateToProps, mapDispatchToProps)(PaperUnknown) -- cgit v1.2.3-70-g09d2