Merge branch 'master' of github.com:adamhrv/megapixels_dev

5 files changed, 108 insertions, 31 deletions

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..bbc55047 100644
--- a/client/table/citations.table.js
+++ b/client/table/citations.table.js
@@ -2,10 +2,10 @@ 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 { saveAs } from 'file-saver'
 
 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 +42,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('; '),
@@ -78,18 +72,47 @@ 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 <Loader />
     return (
       <div className='citationBrowser'>
-        <input
-          type="text"
-          value={this.state.q}
-          onChange={e => this.updateFilter(e.target.value)}
-          className='q'
-          placeholder='Enter text to search citations...'
-        />
+        <div className='citationHeader'>
+          <input
+            type="text"
+            value={this.state.q}
+            onChange={e => this.updateFilter(e.target.value)}
+            className='q'
+            placeholder='Enter text to search citations...'
+          />
+          <span className='download' onClick={() => this.download()}>Download CSV</span>
+        </div>
         <ReactTabulator
           columns={citationsColumns}
           data={filteredCitations}
diff --git a/client/table/file.table.js b/client/table/file.table.js
index 92f5cf72..82c01ac5 100644
--- a/client/table/file.table.js
+++ b/client/table/file.table.js
@@ -1,25 +1,32 @@
 import React, { Component } from 'react'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import { toArray, toTuples } from '../util'
+import { ReactTabulator } from 'react-tabulator'
 
+import { toArray, toTuples, domainFromUrl } from '../util'
 import { Loader } from '../common'
 
 import csv from 'parse-csv'
 
 class FileTable extends Component {
   state = {
-    data: []
+    keys: [],
+    data: [],
+    columns: [],
   }
   
   componentDidMount() {
+    const { payload } = this.props
     console.log(payload.url)
     fetch(payload.url, { mode: 'cors' })
       .then(r => 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 <Loader />
     }
     return (
       <ReactTabulator
-        columns={citationsColumns}
+        columns={this.state.columns}
         data={this.state.data}
         options={{
           height: 311,
diff --git a/client/table/tabulator.css b/client/table/tabulator.css
index c08ad580..17dad62a 100644
--- a/client/table/tabulator.css
+++ b/client/table/tabulator.css
@@ -30,9 +30,6 @@
 }
 
 .citationBrowser {
-  padding: 10px;
-  border-radius: 4px;
-  background: #666;
 }
 .citationBrowser .q {
   max-width: 400px;
@@ -42,4 +39,26 @@
   background-repeat: no-repeat;
   box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
   border: 0;
+}
+
+.citationHeader {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+span.download {
+  display: block;
+  font-size: 13px;
+  color: #ddd;
+  cursor: pointer;
+  background: #333;
+  padding: 5px 8px;
+  border-radius: 5px;
+  transition: all 0.2s;
+}
+.desktop span.download:hover {
+  color: #fff;
+  background: #666;
 }
\ No newline at end of file
diff --git a/client/util/index.js b/client/util/index.js
index 87d32ebb..e90e5466 100644
--- a/client/util/index.js
+++ b/client/util/index.js
@@ -63,6 +63,15 @@ export const percent = n => (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 => {