citations table in react

6 files changed, 130 insertions, 99 deletions

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(' ')
-  // }
-}