From 0bede27de3bcc0c7f03d16c7607a0ae693daebc7 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Mon, 1 Apr 2019 10:23:29 +0200
Subject: citations table in react

---
 client/table/citations.table.js | 53 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 client/table/citations.table.js

(limited to 'client/table/citations.table.js')

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 <Loader />
+
+    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 (
+      <ReactTabulator
+        columns={citationsColumns}
+        data={formattedCitations}
+        options={{
+          height: 311,
+          layout: 'fitColumns',
+          placeholder: 'No Data Set',
+        }}
+      />
+    )
+  }
+}
+
+export default CitationsTable
-- 
cgit v1.2.3-70-g09d2


From 7268da9248b89c4b020890ab6f4c86982501b342 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
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/citations.table.js')

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 <Loader />
 
-    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 (
       <ReactTabulator
diff --git a/client/table/index.js b/client/table/index.js
index 43db7dbb..c741f33e 100644
--- a/client/table/index.js
+++ b/client/table/index.js
@@ -1,5 +1,6 @@
 import 'react-tabulator/lib/styles.css'
-import 'react-tabulator/lib/css/tabulator.min.css'
+import 'react-tabulator/lib/css/tabulator_midnight.css'
+import './tabulator.css'
 
 import CitationsTable from './citations.table'
 import FileTable from './file.table'
diff --git a/client/table/tabulator.css b/client/table/tabulator.css
new file mode 100644
index 00000000..24005368
--- /dev/null
+++ b/client/table/tabulator.css
@@ -0,0 +1,26 @@
+.tabulator {
+  border-left: 1px solid #333;
+  border-bottom: 1px solid #333;
+}
+.tabulator-row.tabulator-row-odd {
+  background-color: #222;
+}
+.tabulator-row.tabulator-row-even {
+  background-color: #333;
+}
+.desktop .tabulator-row.tabulator-selectable:hover {
+  background-color: #555;
+}
+.tabulator-row .tabulator-cell {
+  border-right: 1px solid #444;
+  padding: 8px;
+}
+.tabulator .tabulator-header {
+  border-bottom: 0;
+}
+.tabulator .tabulator-header .tabulator-col {
+  border-right: 1px solid #444;
+}
+.tabulator .tabulator-tableHolder .tabulator-table {
+  background-color: #333;
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From bca367770c426a6f2086c53b2e821a7a35de4e4f Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
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/citations.table.js')

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 <Loader />
+  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 <Loader />
+    // console.log(formattedCitations)
     return (
-      <ReactTabulator
-        columns={citationsColumns}
-        data={formattedCitations}
-        options={{
-          height: 311,
-          layout: 'fitColumns',
-          placeholder: 'No Data Set',
-        }}
-      />
+      <div className='citationBrowser'>
+        <input
+          type="text"
+          value={this.state.q}
+          onChange={e => this.updateFilter(e.target.value)}
+          className='q'
+          placeholder='Filter by title/institution'
+        />
+        <ReactTabulator
+          columns={citationsColumns}
+          data={filteredCitations}
+          options={{
+            height: 311,
+            layout: 'fitColumns',
+            placeholder: formattedCitations.length ? '' : 'Nothing matches your query',
+          }}
+        />
+      </div>
     )
   }
 }
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 (
       <div className='paperInfo'>
@@ -17,7 +17,12 @@ class PaperInfo extends Component {
         <TableObject summary
           tag="Dataset"
           object={dataset}
-          order={['key', 'name_full', 'relevance', 'subset_of', 'superset_of']}
+          order={'key name_full purpose comment created_by funded_by funded_by_short license'.split(' ')}
+        />
+        <TableObject summary
+          tag="Paper"
+          object={paper}
+          order={"paper_id title year doi address".split(" ")}
         />
         <TableObject summary
           tag="Statistics"
-- 
cgit v1.2.3-70-g09d2


From 83858f95425278d44e7f39177e141e7b82c0022c Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
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/citations.table.js')

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 <Loader />
-    // console.log(formattedCitations)
     return (
       <div className='citationBrowser'>
         <input
@@ -88,7 +88,7 @@ class CitationsTable extends Component {
           value={this.state.q}
           onChange={e => this.updateFilter(e.target.value)}
           className='q'
-          placeholder='Filter by title/institution'
+          placeholder='Enter text to search citations...'
         />
         <ReactTabulator
           columns={citationsColumns}
diff --git a/client/table/tabulator.css b/client/table/tabulator.css
index 06bceb20..c08ad580 100644
--- a/client/table/tabulator.css
+++ b/client/table/tabulator.css
@@ -29,7 +29,17 @@
   padding: 0 5px 0 0;
 }
 
+.citationBrowser {
+  padding: 10px;
+  border-radius: 4px;
+  background: #666;
+}
 .citationBrowser .q {
   max-width: 400px;
-  margin-bottom: 4px;
+  margin-bottom: 10px;
+  background-image: url(/assets/img/icon-search.png);
+  background-position: 390px center;
+  background-repeat: no-repeat;
+  box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
+  border: 0;
 }
\ No newline at end of file
diff --git a/site/assets/img/icon-search.png b/site/assets/img/icon-search.png
new file mode 100644
index 00000000..43684627
Binary files /dev/null and b/site/assets/img/icon-search.png differ
-- 
cgit v1.2.3-70-g09d2