From 36cda707b6b03a7b2aa10e6b17ca780797916060 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Mon, 1 Apr 2019 19:45:15 +0200
Subject: test csv

---
 client/index.js                 |  8 ++++++--
 client/table/citations.table.js | 28 ++++++++++++---------------
 client/table/file.table.js      | 42 +++++++++++++++++++++++++++++++----------
 client/util/index.js            |  9 +++++++++
 4 files changed, 59 insertions(+), 28 deletions(-)

(limited to 'client')

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 <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...'
+          />
+          <a href=
+        </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/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 => {
-- 
cgit v1.2.3-70-g09d2