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/applet.js                |  7 ++-
 client/index.js                 |  4 +-
 client/table/citations.table.js | 53 +++++++++++++++++++++++
 client/table/file.table.js      | 59 +++++++++++++++++++++++++
 client/table/index.js           | 10 +++++
 client/tables.js                | 96 -----------------------------------------
 6 files changed, 130 insertions(+), 99 deletions(-)
 create mode 100644 client/table/citations.table.js
 create mode 100644 client/table/file.table.js
 create mode 100644 client/table/index.js
 delete mode 100644 client/tables.js

(limited to 'client')

diff --git a/client/applet.js b/client/applet.js
index 21e1e4fa..db95168a 100644
--- a/client/applet.js
+++ b/client/applet.js
@@ -4,11 +4,12 @@ import { Container as FaceSearchContainer } from './faceSearch'
 import { Container as FaceAnalysisContainer } from './faceAnalysis'
 import { Container as NameSearchContainer } from './nameSearch'
 import { Container as DatasetListContainer } from './datasetList'
+import { CitationsTable, FileTable } from './table'
 import { CountriesByYear, PieCharts } from './chart'
 
 export default class Applet extends Component {
   render() {
-    // console.log(this.props)
+    // console.log(this.props.payload.cmd)
     switch (this.props.payload.cmd) {
       case 'face_analysis':
         return <FaceAnalysisContainer {...this.props} />
@@ -22,6 +23,10 @@ export default class Applet extends Component {
         return <CountriesByYear {...this.props} />
       case 'piechart':
         return <PieCharts {...this.props} />
+      case 'citations':
+        return <CitationsTable {...this.props} />
+      case 'load_file':
+        return <FileTable {...this.props} />
       default:
         return <pre style={{ color: '#0f0' }}>{'Megapixels'}</pre>
     }
diff --git a/client/index.js b/client/index.js
index 5a7315b5..668aebfb 100644
--- a/client/index.js
+++ b/client/index.js
@@ -6,7 +6,6 @@ import { Provider } from 'react-redux'
 import { toArray } from './util'
 import Applet from './applet'
 import { store } from './store'
-import appendTable from './tables'
 import appendMap from './map'
 
 function appendReactApplet(el, payload) {
@@ -33,7 +32,8 @@ function appendApplets(applets) {
       case 'citations':
       case 'load_file':
         el.parentNode.classList.add('wide')
-        appendTable(el, payload)
+        appendReactApplet(el, payload)
+        el.classList.add('loaded')
         break
       case 'map':
         el.parentNode.classList.add('wide')
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
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 <Loader />
+    }
+    return (
+      <ReactTabulator
+        columns={citationsColumns}
+        data={this.state.data}
+        options={{
+          height: 311,
+          layout: 'fitColumns',
+          placeholder: 'No Data Set',
+        }}
+      />
+    )
+  }
+}
+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
diff --git a/client/tables.js b/client/tables.js
deleted file mode 100644
index 3b53b5db..00000000
--- a/client/tables.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import Tabulator from 'tabulator-tables'
-import csv from 'parse-csv'
-
-const datasetColumns = [
-  { title: 'Title', field: 'title', sorter: 'string' },
-  { title: 'Images', field: 'images', sorter: 'number' },
-  { title: 'People', field: 'people', sorter: 'number' },
-  { title: 'Year', field: 'year', sorter: 'number' },
-  { title: 'Citations', field: 'citations', sorter: 'number' },
-  { title: 'Influenced', field: 'influenced', sorter: 'number' },
-  // { title: 'Origin', field: 'origin', sorter: 'string' },
-]
-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', formatter: 'link',
-    formatterParams: { target: "_blank", urlField: 'pdf', },
-    sorter: 'string', width: 100 },
-]
-
-function getColumns(payload) {
-  let { cmd, url, fields } = payload
-  if (cmd === 'citations') {
-    return citationsColumns
-  }
-  if (url && url.match('datasets.csv')) {
-    return datasetColumns
-  }
-  return ((fields && fields.length) ? fields[0] : '').split(', ').map(field => {
-    switch (field) {
-      default:
-        return { title: field, field: field.toLowerCase(), sorter: 'string' }
-    }
-  })
-}
-
-function getCitations(dataset) {
-  // console.log(dataset.citations)
-  // console.log(dataset.citations.map(d => [d.pdf, d.doi]))
-  return dataset.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]
-        : "",
-  }))
-}
-
-export default function append(el, payload) {
-  const columns = getColumns(payload)
-  // console.log(columns)
-  const table = new Tabulator(el, {
-    height: '311px',
-    layout: 'fitColumns',
-    placeholder: 'No Data Set',
-    columns,
-  })
-  // let path = payload.opt
-  // console.log(path, columns)
-
-  if (payload.cmd === 'citations') {
-    let { data } = payload
-    if (!data) return null
-    const citations = getCitations(data)
-    // console.log(citations)
-    table.setData(citations)
-    el.classList.add('loaded')
-  } else {
-    fetch(payload.url, { mode: 'cors' })
-      .then(r => r.text())
-      .then(text => {
-        try {
-          // console.log(text)
-          const data = csv.toJSON(text, { headers: { included: true } })
-          // console.log(data)
-          table.setData(data)
-          el.classList.add('loaded')
-        } catch (e) {
-          
-          console.error("error making json:", payload.url)
-          console.error(e)
-          // console.log(text)
-        }
-      })
-  }
-
-  // if (fields && fields.length > 1 && fields[1].indexOf('filter')) {
-  //   const filter = fields[1].split(' ')
-  // }
-}
-- 
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')

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

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 @@
   <h3>Citations</h3>
   <p>
     Citations were collected from <a href="https://www.semanticscholar.org">Semantic Scholar</a>, 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.
   </p>
   <p>
     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 @@
   <h3>Citations</h3>
   <p>
     Citations were collected from <a href="https://www.semanticscholar.org">Semantic Scholar</a>, 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.
   </p>
   <p>
     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 @@
   <h3>Citations</h3>
   <p>
     Citations were collected from <a href="https://www.semanticscholar.org">Semantic Scholar</a>, 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.
   </p>
   <p>
     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 @@
   <h3>Citations</h3>
   <p>
     Citations were collected from <a href="https://www.semanticscholar.org">Semantic Scholar</a>, 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.
   </p>
   <p>
     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
   <h3>Citations</h3>
   <p>
     Citations were collected from <a href="https://www.semanticscholar.org">Semantic Scholar</a>, 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.
   </p>
   <p>
     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 @@
   <h3>Citations</h3>
   <p>
     Citations were collected from <a href="https://www.semanticscholar.org">Semantic Scholar</a>, 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.
   </p>
   <p>
     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 @@
   <h3>Citations</h3>
   <p>
     Citations were collected from <a href="https://www.semanticscholar.org">Semantic Scholar</a>, 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.
   </p>
   <p>
     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 @@
   <h3>Citations</h3>
   <p>
     Citations were collected from <a href="https://www.semanticscholar.org">Semantic Scholar</a>, 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.
   </p>
   <p>
     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 @@
   <h3>Citations</h3>
   <p>
     Citations were collected from <a href="https://www.semanticscholar.org">Semantic Scholar</a>, 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.
   </p>
   <p>
     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 @@
   <h3>Citations</h3>
   <p>
     Citations were collected from <a href="https://www.semanticscholar.org">Semantic Scholar</a>, 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.
   </p>
   <p>
     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 @@
   <h3>Citations</h3>
   <p>
     Citations were collected from <a href="https://www.semanticscholar.org">Semantic Scholar</a>, 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.
   </p>
   <p>
     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 @@
   <h3>Citations</h3>
   <p>
     Citations were collected from <a href="https://www.semanticscholar.org">Semantic Scholar</a>, 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.
   </p>
   <p>
     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 @@
   <h3>Citations</h3>
   <p>
     Citations were collected from <a href="https://www.semanticscholar.org">Semantic Scholar</a>, 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.
   </p>
   <p>
     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 <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')

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')

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