fix merge

8 files changed, 238 insertions, 43 deletions

diff --git a/client/applet.js b/client/applet.js
index cd73925c..21e1e4fa 100644
--- a/client/applet.js
+++ b/client/applet.js
@@ -4,7 +4,7 @@ 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 { Container as ChartContainer } from './chart'
+import { CountriesByYear, PieCharts } from './chart'
 
 export default class Applet extends Component {
   render() {
@@ -19,7 +19,9 @@ export default class Applet extends Component {
       case 'dataset_list':
         return <DatasetListContainer {...this.props} />
       case 'chart':
-        return <ChartContainer {...this.props} />
+        return <CountriesByYear {...this.props} />
+      case 'piechart':
+        return <PieCharts {...this.props} />
       default:
         return <pre style={{ color: '#0f0' }}>{'Megapixels'}</pre>
     }
diff --git a/client/chart/constants.js b/client/chart/constants.js
new file mode 100644
index 00000000..70375ba3
--- /dev/null
+++ b/client/chart/constants.js
@@ -0,0 +1,64 @@
+/* various nice HSL gradients */
+
+export const rainbow = [
+  '#9e0142',
+  '#d53e4f',
+  '#f46d43',
+  '#fdae61',
+  '#fee08b',
+  '#ffffbf',
+  '#e6f598',
+  '#abdda4',
+  '#66c2a5',
+  '#3288bd',
+  '#5e4fa2',
+  // '#888888',
+]
+
+export const colorblindSafeRainbow = [
+  '#a50026',
+  '#d73027',
+  '#f46d43',
+  '#fdae61',
+  '#fee090',
+  '#ffffbf',
+  '#e0f3f8',
+  '#abd9e9',
+  '#74add1',
+  '#4575b4',
+  '#313695',
+  // '#888888',
+]
+
+export const institutionColors = [
+  '#f2f293', // edu (yellow)
+  '#3264f6', // company (blue)
+  '#f30000', // gov/mil (red)
+]
+
+/* stuff for a 'countries' legend */
+
+export const topCountryCount = 10
+
+export const otherCountriesLabel = 'Other Countries'
+
+/* institution tuples, labels and templates */
+
+export const initialInstitutionLookup = {
+  'edu': 0,
+  'company': 0,
+  'gov': 0,
+}
+
+export const institutionOrder = {
+  'edu': 0,
+  'company': 1,
+  'gov': 2,
+}
+
+export const institutionLabels = {
+  'edu': 'Academic',
+  'company': 'Commercial',
+  'gov': 'Government / Military',
+  'mil': 'Government / Military',
+}
\ No newline at end of file
diff --git a/client/chart/chart.container.js b/client/chart/countriesByYear.chart.js
index aa80100e..4257748c 100644
--- a/client/chart/chart.container.js
+++ b/client/chart/countriesByYear.chart.js
@@ -6,41 +6,9 @@ import C3Chart from 'react-c3js'
 import 'c3/c3.css'
 import './chart.css'
 
-const rainbow = [
-  '#9e0142',
-  '#d53e4f',
-  '#f46d43',
-  '#fdae61',
-  '#fee08b',
-  '#ffffbf',
-  '#e6f598',
-  '#abdda4',
-  '#66c2a5',
-  '#3288bd',
-  '#5e4fa2',
-  // '#888888',
-]
+import { rainbow, colorblindSafeRainbow, topCountryCount, otherCountriesLabel } from './constants'
 
-const colorblindSafeRainbow = [
-  '#a50026',
-  '#d73027',
-  '#f46d43',
-  '#fdae61',
-  '#fee090',
-  '#ffffbf',
-  '#e0f3f8',
-  '#abd9e9',
-  '#74add1',
-  '#4575b4',
-  '#313695',
-  // '#888888',
-]
-
-const topCountryCount = 10
-
-const otherCountriesLabel = 'Other Countries'
-
-class ChartContainer extends Component {
+class CountriesByYearChart extends Component {
   render() {
     const { payload } = this.props
     const { paper, citations } = payload.data
@@ -64,7 +32,6 @@ class ChartContainer extends Component {
           years[year][country] += 1
         } else {
           years[year][country] = 1
-          countries[country] = true
         }
       })
     })
@@ -196,4 +163,4 @@ class ChartContainer extends Component {
   }
 }
 
-export default ChartContainer
+export default CountriesByYearChart
diff --git a/client/chart/index.js b/client/chart/index.js
index e9d3322d..27650020 100644
--- a/client/chart/index.js
+++ b/client/chart/index.js
@@ -1,5 +1,7 @@
-import Container from './chart.container'
+import CountriesByYear from './countriesByYear.chart'
+import PieCharts from './pie.charts'
 
 export {
-  Container,
+  CountriesByYear,
+  PieCharts,
 }
diff --git a/client/chart/pie.charts.js b/client/chart/pie.charts.js
new file mode 100644
index 00000000..af790be7
--- /dev/null
+++ b/client/chart/pie.charts.js
@@ -0,0 +1,151 @@
+import React, { Component } from 'react'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { toArray, toTuples } from '../util'
+import C3Chart from 'react-c3js'
+import 'c3/c3.css'
+import './chart.css'
+
+import {
+  rainbow, colorblindSafeRainbow,
+  topCountryCount, otherCountriesLabel,
+  institutionOrder, institutionLabels, institutionColors,
+  initialInstitutionLookup,
+} from './constants'
+
+class PieCharts extends Component {
+  render() {
+    const { payload } = this.props
+    const { paper, citations } = payload.data
+    if (!citations.length) return null
+
+    const countries = {}
+    const institutionTypes = { ...initialInstitutionLookup }
+    citations.forEach(citation => {
+      citation.addresses.forEach(address => {
+        const { country } = address
+        if (!country) return
+        if (!(country in countries)) {
+          countries[country] = 1
+        } else {
+          countries[country] += 1
+        }
+        switch (address.type) {
+          case 'company':
+          case 'edu':
+          case 'gov':
+            institutionTypes[address.type] += 1
+            break
+          case 'mil':
+            institutionTypes['gov'] += 1
+            break
+          default:
+            console.log('weird institution type', address)
+            break
+        }
+      })
+    })
+
+    const countryTuples = toTuples(countries).sort((a,b) => b[1] - a[1])
+    let countryRows = countryTuples.slice(0, 9)
+
+    const otherCountryCount = countryTuples.slice(9).reduce((a,b) => (a + b[1]), 0)
+    if (otherCountryCount > 0) {
+      countryRows.push([
+        otherCountriesLabel,
+        otherCountryCount,
+      ])
+    }
+    // console.log(countryTuples, otherCountryCount, countryRows)
+
+    const institutionRows = toTuples(institutionTypes)
+      .map(a => [institutionOrder[a[0]], a])
+      .sort((a,b) => a[0] - b[0])
+      .map(a => a[1])
+      .map(a => [institutionLabels[a[0]], a[1]])
+
+    const colorPattern = rainbow
+
+    return (
+      <div className='chart'>
+        <div>
+          <C3Chart
+            data={{
+              columns: countryRows,
+              type: 'pie',
+            }}
+            color={{
+              pattern: rainbow,
+            }}
+            tooltip={{
+              format: {
+                value: value => value,
+              }
+            }}
+            size={{
+              height: 336,
+            }}
+          />
+        </div>
+        <div>
+          <C3Chart
+            data={{
+              columns: institutionRows,
+              type: 'pie',
+            }}
+            color={{
+              pattern: institutionColors,
+            }}
+            tooltip={{
+              format: {
+                value: value => value,
+              }
+            }}
+            size={{
+              height: 316,
+            }}
+          />
+        </div>
+      </div>
+    )
+  }
+}
+
+/*
+          legend={{
+            position: 'right'
+          }}
+          tooltip={{
+            contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
+              const countriesByYearLookup = years[yearList[d[0].x]]
+              let countriesByYear = Object.keys(countriesByYearLookup).map(country => [country, countriesByYearLookup[country]]).sort((a,b) => b[1] - a[1])
+              let topCountriesForThisYear = countriesByYear.slice(0, topCountryCount)
+              let bottomTotal = countriesByYear.slice(topCountryCount).reduce((a,b) => (a + b[1]), 0)
+              // console.log(topCountriesForThisYear)
+              topCountriesForThisYear.push([otherCountriesLabel, bottomTotal])
+              const tableRows = topCountriesForThisYear.filter(pair => !!pair[1]).map(([country, total]) => {
+                let colorIndex = topCountries.indexOf(country)
+                if (colorIndex < 0) colorIndex = colorPattern.length - 1
+                const color = colorPattern[ colorIndex ]
+                return [
+                  "<tr>",
+                  "<td>",
+                    "<span style='background-color:" + color + "' class='swatch'></span>",
+                    country,
+                  "</td>",
+                  "<td>",
+                    total,
+                  "</td>",
+                  "</tr>",
+                ].join('')
+              })
+              return [
+                "<table class='c3-tooltip'>",
+                ...tableRows,
+                "</table>",
+              ].join('')
+            }
+          }}
+*/
+
+export default PieCharts
diff --git a/client/map/index.js b/client/map/index.js
index 7c205268..4e6db2de 100644
--- a/client/map/index.js
+++ b/client/map/index.js
@@ -102,7 +102,8 @@ export default function append(el, payload) {
     const citationAddress = citation.addresses[0]
     const latlng = [citationAddress.lat, citationAddress.lng].map(n => parseFloat(n))
     if (Number.isNaN(latlng[0]) || Number.isNaN(latlng[1])) return
-    addMarker(map, latlng, citation.title, citationAddress.name, citation.year, citation.pdf)
+    const addressString = citation.addresses.map(addr => addr.name).join('<br/>')
+    addMarker(map, latlng, citation.title, addressString, citation.year, citation.pdf)
     addArc(map, source, latlng, arcStyles[citationAddress.type])
   })
 
diff --git a/client/tables.js b/client/tables.js
index 1077289f..9eedbe18 100644
--- a/client/tables.js
+++ b/client/tables.js
@@ -15,7 +15,9 @@ const citationsColumns = [
   { 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', sorter: 'string', width: 100 },
+  { title: 'PDF', field: 'pdf', formatter: 'link',
+    formatterParams: { target: "_blank", urlField: 'pdf', },
+    sorter: 'string', width: 100 },
 ]
 
 function getColumns(payload) {
@@ -36,12 +38,17 @@ function getColumns(payload) {
 
 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] : "",
+    pdf: (citation.pdf && citation.pdf.length)
+      ? citation.pdf[0]
+      : (citation.doi && citation.doi.length)
+        ? citation.doi[0]
+        : "",
   }))
 }
 
diff --git a/client/util/index.js b/client/util/index.js
index 0792e24e..87d32ebb 100644
--- a/client/util/index.js
+++ b/client/util/index.js
@@ -9,6 +9,7 @@ export const isFirefox = typeof InstallTrigger !== 'undefined'
 
 export const toArray = a => Array.prototype.slice.apply(a)
 export const choice = a => a[Math.floor(Math.random() * a.length)]
+export const toTuples = o => Object.keys(o).map(key => [key, o[key]])
 
 const htmlClassList = document.body.parentNode.classList
 htmlClassList.add(isDesktop ? 'desktop' : 'mobile')