From 438cde0ab82cf9fdbdcbb45e0ad8e43efc3525bb Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Sun, 31 Mar 2019 17:40:44 +0200
Subject: hide pdf

---
 client/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'client/index.js')

diff --git a/client/index.js b/client/index.js
index 5c8bc880..5a7315b5 100644
--- a/client/index.js
+++ b/client/index.js
@@ -87,9 +87,9 @@ function runApplets() {
         if (dataset === 'index.html') {
           dataset = path.pop()
         }
-        console.log('dataset from path:', dataset)
+        // console.log('dataset from path:', dataset)
       } else {
-        console.log('not on a dataset page')
+        // console.log('not on a dataset page')
         return [el, payload]
       }
     }
-- 
cgit v1.2.3-70-g09d2


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 ---------------------
 package-lock.json                       |  90 +++++++++++++++++++-
 package.json                            |   1 +
 site/includes/citations.html            |   2 +-
 site/public/datasets/index.html         |  12 +++
 site/public/datasets/msceleb/index.html | 143 ++++++++++++++++++++++++++++++++
 11 files changed, 373 insertions(+), 104 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
 create mode 100644 site/public/datasets/msceleb/index.html

(limited to 'client/index.js')

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(' ')
-  // }
-}
diff --git a/package-lock.json b/package-lock.json
index 6d36e3ff..4e9d6fac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -216,6 +216,28 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-8.10.38.tgz",
       "integrity": "sha512-EibsnbJerd0hBFaDjJStFrVbVBAtOy4dgL8zZFw0uOvPqzBAX59Ci8cgjg3+RgJIWhsB5A4c+pi+D4P9tQQh/A=="
     },
+    "@types/prop-types": {
+      "version": "15.7.0",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.0.tgz",
+      "integrity": "sha512-eItQyV43bj4rR3JPV0Skpl1SncRCdziTEK9/v8VwXmV6d/qOUO8/EuWeHBbCZcsfSHfzI5UyMJLCSXtxxznyZg=="
+    },
+    "@types/react": {
+      "version": "16.8.10",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.8.10.tgz",
+      "integrity": "sha512-7bUQeZKP4XZH/aB4i7k1i5yuwymDu/hnLMhD9NjVZvQQH7ZUgRN3d6iu8YXzx4sN/tNr0bj8jgguk8hhObzGvA==",
+      "requires": {
+        "@types/prop-types": "*",
+        "csstype": "^2.2.0"
+      }
+    },
+    "@types/react-tag-autocomplete": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/@types/react-tag-autocomplete/-/react-tag-autocomplete-5.6.0.tgz",
+      "integrity": "sha512-EsUrbpKW5agXs/NbMUQRgwtZInQbUIIPBXiUz+XcJeUP7U6BRCWjw96sQmsEPRUwO0CdPfQEd82zwpCIGEr4Ew==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "accepts": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz",
@@ -2249,6 +2271,11 @@
       "integrity": "sha1-yBSQPkViM3GgR3tAEJqq++6t27Q=",
       "dev": true
     },
+    "csstype": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.3.tgz",
+      "integrity": "sha512-rINUZXOkcBmoHWEyu7JdHu5JMzkGRoMX4ov9830WNgxf5UYxcBUO0QTKAqeJ5EZfSdlrcJYkC8WwfVW7JYi4yg=="
+    },
     "csv-parse": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/csv-parse/-/csv-parse-4.2.0.tgz",
@@ -4647,6 +4674,11 @@
         "wbuf": "^1.1.0"
       }
     },
+    "html-attributes": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/html-attributes/-/html-attributes-1.1.0.tgz",
+      "integrity": "sha1-ggJ6T6x6YHDqbBjMOIauoY1t6gk="
+    },
     "html-entities": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-1.2.1.tgz",
@@ -5594,9 +5626,9 @@
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
     "js-yaml": {
-      "version": "3.12.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.12.0.tgz",
-      "integrity": "sha512-PIt2cnwmPfL4hKNwqeiuz4bKfnzHTBv6HyVgjahA6mPLwPDzjDWrplJBMjHUFxku/N3FlmrbyPclad+I+4mJ3A==",
+      "version": "3.13.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.0.tgz",
+      "integrity": "sha512-pZZoSxcCYco+DIKBTimr67J6Hy+EYGZDY/HCWC+iAEA9h1ByhMXAIVUXMcMFpOCxQ/xjXmPI2MkDL5HRm5eFrQ==",
       "dev": true,
       "requires": {
         "argparse": "^1.0.7",
@@ -5781,6 +5813,11 @@
       "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
       "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk="
     },
+    "lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs="
+    },
     "lodash.merge": {
       "version": "4.6.1",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.1.tgz",
@@ -6710,6 +6747,16 @@
         "sha.js": "^2.4.8"
       }
     },
+    "pick-react-known-prop": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/pick-react-known-prop/-/pick-react-known-prop-0.1.5.tgz",
+      "integrity": "sha512-SnDf64AVdvqoAFpHeZUKT9kdn40Ellj84CPALRxYWqNJ6r6f44eAAT+Jtkb0Suhiw7yg5BdOFAQ25OJnjG+afw==",
+      "requires": {
+        "html-attributes": "^1.1.0",
+        "lodash.isplainobject": "^4.0.6",
+        "svg-attributes": "^1.0.0"
+      }
+    },
     "pify": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
@@ -7274,6 +7321,36 @@
         "spin.js": "^2.0.1"
       }
     },
+    "react-tabulator": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/react-tabulator/-/react-tabulator-0.9.1.tgz",
+      "integrity": "sha512-KLkO17TZbGKzwaCPD8c84cG94OkSpU0zyvlhOleKJELQWcHEL99+63DEamEaXOsguDfxM474lxu3K+jqG2bW/Q==",
+      "requires": {
+        "@types/react-tag-autocomplete": "^5.6.0",
+        "date-fns": "v2.0.0-alpha.25",
+        "dotenv": "^6.1.0",
+        "pick-react-known-prop": "^0.1.5",
+        "react-tag-autocomplete": "^5.7.1",
+        "tabulator-tables": "^4.2.3"
+      },
+      "dependencies": {
+        "date-fns": {
+          "version": "2.0.0-alpha.25",
+          "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.0.0-alpha.25.tgz",
+          "integrity": "sha512-iQzJkHF0L4wah9Ae9PkvwemwFz6qmRLuNZcghmvf2t+ptLs1qXzONLiGtjmPQzL6+JpC01JjlTopY2AEy4NFAg=="
+        },
+        "tabulator-tables": {
+          "version": "4.2.3",
+          "resolved": "https://registry.npmjs.org/tabulator-tables/-/tabulator-tables-4.2.3.tgz",
+          "integrity": "sha512-vMQ/8/HSKzOdn1zd9uv7EmnBnMTlX8JMhfxAxEUkM12qYiqhapWp/iN2ErtDX2cVi+4CUaEn61qydSFJyKjdYA=="
+        }
+      }
+    },
+    "react-tag-autocomplete": {
+      "version": "5.8.2",
+      "resolved": "https://registry.npmjs.org/react-tag-autocomplete/-/react-tag-autocomplete-5.8.2.tgz",
+      "integrity": "sha512-GkOQrSLjvWo98IeqRuGgc77zaxSMyMjy+b2Rc+m9jMKTWopF9h5Lf2F/X1oK9hcnUCeUmJ5QVpc/dx9MgOA2Iw=="
+    },
     "read-pkg": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
@@ -8546,7 +8623,7 @@
     },
     "sprintf-js": {
       "version": "1.0.3",
-      "resolved": "http://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
       "dev": true
     },
@@ -8722,6 +8799,11 @@
       "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
       "dev": true
     },
+    "svg-attributes": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/svg-attributes/-/svg-attributes-1.0.0.tgz",
+      "integrity": "sha1-tcWWjzYke32+OFMgfyqcaK2Aa/w="
+    },
     "svgtodatauri": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/svgtodatauri/-/svgtodatauri-0.0.0.tgz",
diff --git a/package.json b/package.json
index 4cd2f10d..6238e7e3 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "react-spin": "^0.6.2",
+    "react-tabulator": "^0.9.1",
     "redux": "^4.0.0",
     "redux-thunk": "^2.3.0",
     "snapsvg": "^0.5.1",
diff --git a/site/includes/citations.html b/site/includes/citations.html
index 058a1834..d29812df 100644
--- a/site/includes/citations.html
+++ b/site/includes/citations.html
@@ -6,7 +6,7 @@
     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.
   </p>
   <p>
-    Add [button/link] to download CSV. Add search input field to filter. Expand number of rows to 10. Reduce URL text to show only the domain (ie https://arxiv.org/pdf/123456 --> arxiv.org)
+    Add [button/link] to download CSV. Add search input field to filter.
   </p>
 
   <div class="applet" data-payload="{&quot;command&quot;: &quot;citations&quot;}"></div>
diff --git a/site/public/datasets/index.html b/site/public/datasets/index.html
index f618e86b..03b38f8a 100644
--- a/site/public/datasets/index.html
+++ b/site/public/datasets/index.html
@@ -85,6 +85,18 @@
         </div>
       </a>
     
+      <a href="/datasets/msceleb/" style="background-image: url(https://nyc3.digitaloceanspaces.com/megapixels/v1/datasets/msceleb/assets/index.jpg)">
+        <div class="dataset">
+          <span class='title'>MS Celeb</span>
+          <div class='fields'>
+            <div class='year visible'><span>2016</span></div>
+            <div class='purpose'><span>face recognition</span></div>
+            <div class='images'><span>1,000,000  images</span></div>
+            <div class='identities'><span>100,000 </span></div>
+          </div>
+        </div>
+      </a>
+    
       <a href="/datasets/pipa/" style="background-image: url(https://nyc3.digitaloceanspaces.com/megapixels/v1/datasets/pipa/assets/index.jpg)">
         <div class="dataset">
           <span class='title'>People in Photo Albums</span>
diff --git a/site/public/datasets/msceleb/index.html b/site/public/datasets/msceleb/index.html
new file mode 100644
index 00000000..8ebfe1a4
--- /dev/null
+++ b/site/public/datasets/msceleb/index.html
@@ -0,0 +1,143 @@
+<!doctype html>
+<html>
+<head>
+  <title>MegaPixels</title>
+  <meta charset="utf-8" />
+  <meta name="author" content="Adam Harvey" />
+  <meta name="description" content="MS Celeb is a dataset of web images used for training and evaluating face recognition algorithms" />
+  <meta name="referrer" content="no-referrer" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+  <link rel='stylesheet' href='/assets/css/fonts.css' />
+  <link rel='stylesheet' href='/assets/css/tabulator.css' />
+  <link rel='stylesheet' href='/assets/css/css.css' />
+  <link rel='stylesheet' href='/assets/css/leaflet.css' />
+  <link rel='stylesheet' href='/assets/css/applets.css' />
+</head>
+<body>
+  <header>
+    <a class='slogan' href="/">
+      <div class='logo'></div>
+      <div class='site_name'>MegaPixels</div>
+    </a>
+    <div class='links'>
+      <a href="/datasets/">Datasets</a>
+      <a href="/about/">About</a>
+    </div>
+  </header>
+  <div class="content content-dataset">
+    
+  <section class='intro_section' style='background-image: url(https://nyc3.digitaloceanspaces.com/megapixels/v1/datasets/msceleb/assets/background.jpg)'><div class='inner'><div class='hero_desc'><span class='bgpad'>MS Celeb is a dataset of web images used for training and evaluating face recognition algorithms</span></div><div class='hero_subdesc'><span class='bgpad'>The MS Celeb dataset includes over 10,000,000 images and 93,000 identities of semi-public figures collected using the Bing search engine
+</span></div></div></section><section><div class='left-sidebar'><div class='meta'><div><div class='gray'>Published</div><div>TBD</div></div><div><div class='gray'>Images</div><div>TBD</div></div><div><div class='gray'>Faces</div><div>TBD</div></div><div><div class='gray'>Created by</div><div>TBD</div></div></div></div><h2>Microsoft Celeb Dataset (MS Celeb)</h2>
+<p>(PAGE UNDER DEVELOPMENT)</p>
+<p>At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non-provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.</p>
+<p>Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non-recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat</p>
+</section><section>
+  <h3>Who used MsCeleb?</h3>
+
+  <p>
+    This bar chart presents a ranking of the top countries where citations originated.  Mouse over individual columns
+    to see yearly totals.  These charts show at most the top 10 countries.
+  </p>
+ 
+ </section>
+
+<section class="applet_container">
+<!-- 	<div style="position: absolute;top: 0px;right: -55px;width: 180px;font-size: 14px;">Labeled Faces in the Wild Dataset<br><span class="numc" style="font-size: 11px;">20 citations</span>
+</div> -->
+ <div class="applet" data-payload="{&quot;command&quot;: &quot;chart&quot;}"></div>
+</section><section>
+  <p>
+    These pie charts show overall totals based on country and institution type.
+  </p>
+ 
+ </section>
+
+<section class="applet_container">
+ <div class="applet" data-payload="{&quot;command&quot;: &quot;piechart&quot;}"></div>
+</section><section>
+	
+	<h3>Information Supply Chain</h3>
+<!-- 
+	<div class="map-sidebar right-sidebar">
+	  <h3>Legend</h3>
+	  <ul>
+	    <li><span style="color: #f2f293">&#9632;</span> Industry</li>
+	    <li><span style="color: #f30000">&#9632;</span> Academic</li>
+	    <li><span style="color: #3264f6">&#9632;</span> Government</li>
+	  </ul>
+	</div>
+	 -->
+	<p>
+		To understand how MsCeleb has been used around the world...
+		affected global research on computer vision, surveillance, defense, and consumer technology, the and where this dataset has been used the locations of each organization that used or referenced the datast 
+	</p>
+ 
+ </section>
+
+<section class="applet_container">
+ <div class="applet" data-payload="{&quot;command&quot;: &quot;map&quot;}"></div>
+</section>
+
+<div class="caption">
+	<ul class="map-legend">
+	<li class="edu">Academic</li>
+	<li class="com">Industry</li>
+	<li class="gov">Government / Military</li>
+	<li class="source">Citation data is collected using <a href="https://semanticscholar.org" target="_blank">SemanticScholar.org</a> then dataset usage verified and geolocated.</li>
+	</ul>
+</div>
+
+<section>
+	<p class='subp'>
+		[section under development] MsCeleb ... Standardized paragraph of text about the map. Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.
+	</p>
+</section><section><p>Add more analysis here</p>
+</section><section>
+
+
+  <div class="hr-wave-holder">
+      <div class="hr-wave-line hr-wave-line1"></div>
+      <div class="hr-wave-line hr-wave-line2"></div>
+  </div>
+
+  <h2>Supplementary Information</h2>
+</section><section class="applet_container">
+
+  <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.
+  </p>
+  <p>
+    Add [button/link] to download CSV. Add search input field to filter. Expand number of rows to 10. Reduce URL text to show only the domain (ie https://arxiv.org/pdf/123456 --> arxiv.org)
+  </p>
+
+  <div class="applet" data-payload="{&quot;command&quot;: &quot;citations&quot;}"></div>
+</section><section><h3>Additional Information</h3>
+<ul>
+<li>The dataset author spoke about his research at the CVPR conference in 2016 <a href="https://www.youtube.com/watch?v=Nl2fBKxwusQ">https://www.youtube.com/watch?v=Nl2fBKxwusQ</a></li>
+</ul>
+</section><section><ul class="footnotes"><li><a name="[^readme]" class="footnote_shim"></a><span class="backlinks"></span><p>"readme.txt" <a href="https://exhibits.stanford.edu/data/catalog/sx925dc9385">https://exhibits.stanford.edu/data/catalog/sx925dc9385</a>.</p>
+</li><li><a name="[^localized_region_context]" class="footnote_shim"></a><span class="backlinks"></span><p>Li, Y. and Dou, Y. and Liu, X. and Li, T. Localized Region Context and Object Feature Fusion for People Head Detection. ICIP16 Proceedings. 2016. Pages 594-598.</p>
+</li><li><a name="[^replacement_algorithm]" class="footnote_shim"></a><span class="backlinks"></span><p>Zhao. X, Wang Y, Dou, Y. A Replacement Algorithm of Non-Maximum Suppression Base on Graph Clustering.</p>
+</li></ul></section>
+
+  </div>
+  <footer>
+    <div>
+      <a href="/">MegaPixels.cc</a>
+      <a href="/about/disclaimer/">Disclaimer</a>
+      <a href="/about/terms/">Terms of Use</a>
+      <a href="/about/privacy/">Privacy</a>
+      <a href="/about/">About</a>
+      <a href="/about/team/">Team</a>
+    </div>
+    <div>
+      MegaPixels &copy;2017-19 Adam R. Harvey /&nbsp;
+      <a href="https://ahprojects.com">ahprojects.com</a>
+    </div>
+  </footer>
+</body>
+
+<script src="/assets/js/dist/index.js"></script>
+</html>
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


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

---
 .gitignore                              |  3 +++
 client/index.js                         |  8 +++++--
 client/table/citations.table.js         | 28 ++++++++++------------
 client/table/file.table.js              | 42 +++++++++++++++++++++++++--------
 client/util/index.js                    |  9 +++++++
 package-lock.json                       |  8 +++----
 package.json                            |  2 +-
 site/content/pages/test/assets/test.csv |  8 +++++++
 site/content/pages/test/csv.md          |  4 ++--
 site/public/datasets/index.html         | 12 +++++-----
 site/public/test/csv/index.html         |  2 +-
 11 files changed, 84 insertions(+), 42 deletions(-)
 create mode 100644 site/content/pages/test/assets/test.csv

(limited to 'client/index.js')

diff --git a/.gitignore b/.gitignore
index 74a8a054..e41e7c36 100644
--- a/.gitignore
+++ b/.gitignore
@@ -170,3 +170,6 @@ site/public/user_content
 
 site/datasets/final/*.csv
 
+flask.log
+flask.log.*
+
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 => {
diff --git a/package-lock.json b/package-lock.json
index 4e9d6fac..43ee0cbf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3673,9 +3673,9 @@
       }
     },
     "file-saver": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.0.tgz",
-      "integrity": "sha512-cYM1ic5DAkg25pHKgi5f10ziAM7RJU37gaH1XQlyNDrtUnzhC/dfoV9zf2OmF0RMKi42jG5B0JWBnPQqyj/G6g=="
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.1.tgz",
+      "integrity": "sha512-dCB3K7/BvAcUmtmh1DzFdv0eXSVJ9IAFt1mw3XZfAexodNRoE29l3xB2EX4wH2q8m/UTzwzEPq/ArYk98kUkBQ=="
     },
     "filename-regex": {
       "version": "2.0.1",
@@ -8623,7 +8623,7 @@
     },
     "sprintf-js": {
       "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "resolved": "http://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
       "dev": true
     },
diff --git a/package.json b/package.json
index 6238e7e3..75fbebb7 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     "exif-reader": "^1.0.2",
     "exifreader": "^2.5.0",
     "fetch-jsonp": "^1.1.3",
-    "file-saver": "^2.0.0-rc.3",
+    "file-saver": "^2.0.1",
     "history": "^4.7.2",
     "leaflet": "^1.3.4",
     "leaflet-arc": "^1.0.2",
diff --git a/site/content/pages/test/assets/test.csv b/site/content/pages/test/assets/test.csv
new file mode 100644
index 00000000..7156a814
--- /dev/null
+++ b/site/content/pages/test/assets/test.csv
@@ -0,0 +1,8 @@
+name,images,year,gender,description,url
+aardvark,100,2019,m,bim da,https://asdf.us/
+bobcat,10,2017,f,in a tree,https://asdf.us/
+cow,20,2012,f,moooo,https://asdf.us/
+doe,2,2016,f,doe a deer,https://asdf.us/
+earwig,1,2017,m,just a bug,https://i.asdf.us/
+frog,17,2018,f,ribbit ribbit,https://i.asdf.us/
+giraffe,23,2009,m,i get around,https://adsf.us/
diff --git a/site/content/pages/test/csv.md b/site/content/pages/test/csv.md
index b5f37754..85f714b4 100644
--- a/site/content/pages/test/csv.md
+++ b/site/content/pages/test/csv.md
@@ -15,6 +15,6 @@ authors: Megapixels
 ### [&larr; Back to test index](/test/)
 
 ```
-load_file /datasets/lfw/assets/lfw_names_gender_kg_min.csv
-Name, Images, Gender, Description
+load_file /site/test/assets/test.csv
+Name, Images, Year, Gender, Description, URL
 ```
diff --git a/site/public/datasets/index.html b/site/public/datasets/index.html
index 1d2630e1..3a2dbd52 100644
--- a/site/public/datasets/index.html
+++ b/site/public/datasets/index.html
@@ -42,8 +42,8 @@
           <span class='title'>Brainwash</span>
           <div class='fields'>
             <div class='year visible'><span>2015</span></div>
-            <div class='purpose'><span>Decoding image into set of people detections.</span></div>
-            <div class='images'><span>11,918  images</span></div>
+            <div class='purpose'><span>Head detection</span></div>
+            <div class='images'><span>11,917  images</span></div>
             <div class='identities'><span></span></div>
           </div>
         </div>
@@ -90,7 +90,7 @@
           <span class='title'>MS Celeb</span>
           <div class='fields'>
             <div class='year visible'><span>2016</span></div>
-            <div class='purpose'><span>face recognition</span></div>
+            <div class='purpose'><span>Large-scale face recognition</span></div>
             <div class='images'><span>1,000,000  images</span></div>
             <div class='identities'><span>100,000 </span></div>
           </div>
@@ -114,9 +114,9 @@
           <span class='title'>Unconstrained College Students</span>
           <div class='fields'>
             <div class='year visible'><span>2018</span></div>
-            <div class='purpose'><span>Unconstrained face recognition</span></div>
+            <div class='purpose'><span>Face recognition, face detection</span></div>
             <div class='images'><span>16,149  images</span></div>
-            <div class='identities'><span>4,362 </span></div>
+            <div class='identities'><span>1,732 </span></div>
           </div>
         </div>
       </a>
@@ -126,7 +126,7 @@
           <span class='title'>VIPeR</span>
           <div class='fields'>
             <div class='year visible'><span>2007</span></div>
-            <div class='purpose'><span>pedestrian re-identification</span></div>
+            <div class='purpose'><span>Person re-identification</span></div>
             <div class='images'><span>1,264  images</span></div>
             <div class='identities'><span>632 </span></div>
           </div>
diff --git a/site/public/test/csv/index.html b/site/public/test/csv/index.html
index 3257716f..70a7d257 100644
--- a/site/public/test/csv/index.html
+++ b/site/public/test/csv/index.html
@@ -28,7 +28,7 @@
     
   <section><h1>CSV Test</h1>
 <h3><a href="/test/">&larr; Back to test index</a></h3>
-</section><section class='applet_container'><div class='applet' data-payload='{"command": "load_file /datasets/lfw/assets/lfw_names_gender_kg_min.csv", "fields": ["Name, Images, Gender, Description"]}'></div></section>
+</section><section class='applet_container'><div class='applet' data-payload='{"command": "load_file /site/test/assets/test.csv", "fields": ["Name, Images, Year, Gender, Description, URL"]}'></div></section>
 
   </div>
   <footer>
-- 
cgit v1.2.3-70-g09d2


From 9280b2ad356b7f0cda38f9e14eb91b89f076e9c1 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Tue, 2 Apr 2019 15:50:01 +0200
Subject: clamp citations height. add waypoint

---
 client/index.js                           | 20 ++++++++++++++++++++
 client/table/citations.table.js           |  2 +-
 client/table/file.table.js                |  2 +-
 package-lock.json                         | 20 ++++++++++++++++++++
 package.json                              |  4 +++-
 site/assets/css/css.css                   | 14 ++++++++++----
 site/public/datasets/brainwash/index.html |  1 +
 site/templates/layout.html                |  1 +
 8 files changed, 57 insertions(+), 7 deletions(-)

(limited to 'client/index.js')

diff --git a/client/index.js b/client/index.js
index 5e36d341..c09aece7 100644
--- a/client/index.js
+++ b/client/index.js
@@ -2,6 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import { AppContainer } from 'react-hot-loader'
 import { Provider } from 'react-redux'
+import 'waypoints/lib/noframework.waypoints.min.js';
 
 import { toArray } from './util'
 import Applet from './applet'
@@ -112,6 +113,24 @@ function runApplets() {
   }
 }
 
+function buildWaypoints() {
+  const element = document.querySelector('.content section:nth-child(2)')
+  if (element) {
+    var waypoint = new Waypoint({
+      element,
+      handler: function(direction) {
+        if (direction === 'down') {
+          document.body.classList.add('scrolled')
+        } else {
+          document.body.classList.remove('scrolled')
+        }
+        // console.log(direction)
+        // console.log('Scrolled to waypoint!')
+      }
+    })
+  }
+}
+
 function main() {
   const paras = document.querySelectorAll('section p')
   // if (paras.length) {
@@ -123,6 +142,7 @@ function main() {
     }
   })
   runApplets()
+  buildWaypoints()
 }
 
 main()
diff --git a/client/table/citations.table.js b/client/table/citations.table.js
index bbc55047..178cc65b 100644
--- a/client/table/citations.table.js
+++ b/client/table/citations.table.js
@@ -117,7 +117,7 @@ class CitationsTable extends Component {
           columns={citationsColumns}
           data={filteredCitations}
           options={{
-            height: 311,
+            height: Math.max(104, Math.min(37 * formattedCitations.length + 29, 311)),
             layout: 'fitColumns',
             placeholder: formattedCitations.length ? '' : 'Nothing matches your query',
           }}
diff --git a/client/table/file.table.js b/client/table/file.table.js
index 82c01ac5..db53243a 100644
--- a/client/table/file.table.js
+++ b/client/table/file.table.js
@@ -71,7 +71,7 @@ class FileTable extends Component {
         columns={this.state.columns}
         data={this.state.data}
         options={{
-          height: 311,
+          height: Math.min(37 * this.state.data.length + 29, 311),
           layout: 'fitColumns',
           placeholder: 'No Data Set',
         }}
diff --git a/package-lock.json b/package-lock.json
index 43ee0cbf..54e60fad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2061,6 +2061,11 @@
         "date-now": "^0.1.4"
       }
     },
+    "consolidated-events": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/consolidated-events/-/consolidated-events-2.0.2.tgz",
+      "integrity": "sha512-2/uRVMdRypf5z/TW/ncD/66l75P5hH2vM/GR8Jf8HLc2xnfJtmina6F6du8+v4Z2vTrMo7jC+W1tmEEuuELgkQ=="
+    },
     "constants-browserify": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
@@ -7351,6 +7356,16 @@
       "resolved": "https://registry.npmjs.org/react-tag-autocomplete/-/react-tag-autocomplete-5.8.2.tgz",
       "integrity": "sha512-GkOQrSLjvWo98IeqRuGgc77zaxSMyMjy+b2Rc+m9jMKTWopF9h5Lf2F/X1oK9hcnUCeUmJ5QVpc/dx9MgOA2Iw=="
     },
+    "react-waypoint": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/react-waypoint/-/react-waypoint-9.0.1.tgz",
+      "integrity": "sha512-AdP1EhU5fOFne1aEfZPv2AhVC+cGJ3TxITOnZM9tBBlXOOhz3lXtTSHdicRCY+2VBqerT6zD1tAtp89Mng+Chg==",
+      "requires": {
+        "consolidated-events": "^1.1.0 || ^2.0.0",
+        "prop-types": "^15.0.0",
+        "react-is": "^16.6.3"
+      }
+    },
     "read-pkg": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
@@ -9874,6 +9889,11 @@
         }
       }
     },
+    "waypoints": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/waypoints/-/waypoints-4.0.1.tgz",
+      "integrity": "sha1-CZeaBXOBCylifLpDZqKEoGLsacg="
+    },
     "wbuf": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz",
diff --git a/package.json b/package.json
index 75fbebb7..bbd3d763 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "react-router-dom": "^4.3.1",
     "react-spin": "^0.6.2",
     "react-tabulator": "^0.9.1",
+    "react-waypoint": "^9.0.1",
     "redux": "^4.0.0",
     "redux-thunk": "^2.3.0",
     "snapsvg": "^0.5.1",
@@ -65,7 +66,8 @@
     "three": "^0.100.0",
     "three-orbitcontrols": "^2.99.1",
     "three.meshline": "^1.1.0",
-    "three.textsprite": "^18.10.24"
+    "three.textsprite": "^18.10.24",
+    "waypoints": "^4.0.1"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",
diff --git a/site/assets/css/css.css b/site/assets/css/css.css
index a09234d3..824819a9 100644
--- a/site/assets/css/css.css
+++ b/site/assets/css/css.css
@@ -64,10 +64,16 @@ header .site_name {
   line-height: 11px;
   letter-spacing: 3px;
 }
-header .site_name.splash{
- font-size: 20px; 
- line-height: 20px;
- font-weight: 400;
+header .splash{
+  font-size: 15px;
+  font-weight: 400;
+  color: #888;
+  padding-left: 8px;
+  opacity: 0;
+  transition: 0.3s opacity cubic-bezier(0,0,1,1);
+}
+.scrolled header .splash {
+  opacity: 1;
 }
 header .links{
   font-size: 18px;
diff --git a/site/public/datasets/brainwash/index.html b/site/public/datasets/brainwash/index.html
index 2a839a24..ec5ee434 100644
--- a/site/public/datasets/brainwash/index.html
+++ b/site/public/datasets/brainwash/index.html
@@ -17,6 +17,7 @@
     <a class='slogan' href="/">
       <div class='logo'></div>
       <div class='site_name'>MegaPixels</div>
+      <div class='splash'>Brainwash</div>
     </a>
     <div class='links'>
       <a href="/datasets/">Datasets</a>
diff --git a/site/templates/layout.html b/site/templates/layout.html
index d51e4b6a..7b610523 100644
--- a/site/templates/layout.html
+++ b/site/templates/layout.html
@@ -17,6 +17,7 @@
     <a class='slogan' href="/">
       <div class='logo'></div>
       <div class='site_name'>MegaPixels</div>
+      <div class='splash'>{{ metadata.meta.dataset.name_short }}</div>
     </a>
     <div class='links'>
       <a href="/datasets/">Datasets</a>
-- 
cgit v1.2.3-70-g09d2


From f58d41731fc07d94d594d5582aef203564f990ec Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Tue, 2 Apr 2019 20:35:50 +0200
Subject: modal image gallery

---
 client/chart/countriesByYear.chart.js     |  2 +-
 client/index.js                           |  9 ++++
 client/modalImage/index.js                |  7 +++
 client/modalImage/modal.css               | 69 +++++++++++++++++++++++++
 client/modalImage/modalImage.container.js | 85 +++++++++++++++++++++++++++++++
 5 files changed, 171 insertions(+), 1 deletion(-)
 create mode 100644 client/modalImage/index.js
 create mode 100644 client/modalImage/modal.css
 create mode 100644 client/modalImage/modalImage.container.js

(limited to 'client/index.js')

diff --git a/client/chart/countriesByYear.chart.js b/client/chart/countriesByYear.chart.js
index 78ab4434..df7a4530 100644
--- a/client/chart/countriesByYear.chart.js
+++ b/client/chart/countriesByYear.chart.js
@@ -160,7 +160,7 @@ class CountriesByYearChart extends Component {
             }
           }}
         />
-        <div className='caption'>{paper.name}{' dataset citations by country per year'}</div>
+        <div className='caption'>{paper.name}{' dataset citations per country per year. We verified ' + citations.length + ' papers that used the dataset.'}</div>
       </div>
     )
   }
diff --git a/client/index.js b/client/index.js
index c09aece7..10ed8563 100644
--- a/client/index.js
+++ b/client/index.js
@@ -8,6 +8,7 @@ import { toArray } from './util'
 import Applet from './applet'
 import { store } from './store'
 import appendMap from './map'
+import { ModalImage } from './modalImage'
 
 function appendReactApplet(el, payload) {
   ReactDOM.render(
@@ -19,6 +20,13 @@ function appendReactApplet(el, payload) {
   )
 }
 
+function appendModalImage() {
+  const el = document.createElement('div')
+  document.body.appendChild(el)
+  ReactDOM.render(<ModalImage />, el)
+  console.log(el)
+}
+
 function fetchDataset(payload) {
   if (payload.command === 'face_analysis') return new Promise(resolve => resolve())
   if (payload.dataset === 'info') return new Promise(resolve => resolve())
@@ -143,6 +151,7 @@ function main() {
   })
   runApplets()
   buildWaypoints()
+  appendModalImage()
 }
 
 main()
diff --git a/client/modalImage/index.js b/client/modalImage/index.js
new file mode 100644
index 00000000..ebb3bb72
--- /dev/null
+++ b/client/modalImage/index.js
@@ -0,0 +1,7 @@
+import ModalImage from './modalImage.container.js'
+
+import './modal.css'
+
+export {
+  ModalImage
+}
\ No newline at end of file
diff --git a/client/modalImage/modal.css b/client/modalImage/modal.css
new file mode 100644
index 00000000..d9180125
--- /dev/null
+++ b/client/modalImage/modal.css
@@ -0,0 +1,69 @@
+.modal {
+  position: fixed;
+  top: 0; left: 0; width: 100%; height: 100%;
+  background: rgba(0,0,0,0.8);
+  color: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 0;
+  pointer-events: none;
+  z-index: -9999999;
+  transition: opacity 0.2s cubic-bezier(0,0,1,1);
+}
+.modal.visible {
+  opacity: 1;
+  pointer-events: auto;
+  z-index: 999999999;
+}
+.modal .inner {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.modal img {
+  max-width: 80vw;
+  max-height: 80vh;
+}
+.modal .caption {
+  display: block;
+  text-align: center;
+}
+.modal .prev {
+  position: absolute;
+  top: 0; left: 0;
+  width: 10%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  font-size: 40px;
+  cursor: pointer;
+}
+.modal .next {
+  position: absolute;
+  top: 0; right: 0;
+  width: 10%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  font-size: 40px;
+  cursor: pointer;
+}
+.modal .close {
+  position: absolute;
+  top: 0; right: 0;
+  width: 10vw; height: 10vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  font-size: 40px;
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/client/modalImage/modalImage.container.js b/client/modalImage/modalImage.container.js
new file mode 100644
index 00000000..a637deb6
--- /dev/null
+++ b/client/modalImage/modalImage.container.js
@@ -0,0 +1,85 @@
+import React, { Component } from 'react'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { ReactTabulator } from 'react-tabulator'
+
+import { toArray, toTuples, domainFromUrl } from '../util'
+import { Loader } from '../common'
+
+import csv from 'parse-csv'
+
+class ModalImage extends Component {
+  state = {
+    visible: true,
+    images: [],
+    index: 0,
+  }
+  
+  componentDidMount() {
+    const images = toArray(document.querySelectorAll('.image img'))
+    // console.log(images)
+    images.forEach((img, i) => {
+      img.addEventListener('click', () => this.loadImage(i))
+    })
+    this.setState({ images })
+    document.body.addEventListener('keydown', e => {
+      if (document.activeElement && document.activeElement !== document.body) {
+        return null
+      }
+      // console.log(e.keyCode)
+      switch (e.keyCode) {
+        case 37: // left
+          this.prev()
+          break
+        case 39: // right
+          this.next()
+          break
+        default:
+          break
+      }
+    })
+  }
+
+  loadImage(index) {
+    this.setState({ visible: true, index })
+  }
+
+  prev() {
+    const { index, images } = this.state
+    this.setState({ index: (images.length + index - 1) % images.length })
+  }
+
+  next() {
+    const { index, images } = this.state
+    this.setState({ index: (index + 1) % images.length })
+  }
+
+  close() {
+    this.setState({ visible: false })
+  }
+
+  render() {
+    const { images, index, visible } = this.state
+    if (!images.length) return null
+    const img = images[index]
+    let caption = null
+    const sib = img.nextSibling
+    if (sib && sib.classList.contains('caption')) {
+      caption = sib.innerText
+    }
+    return (
+      <div className={visible ? 'modal visible' : 'modal'}>
+        <div className='inner'>
+          <div className='centered'>
+            <img src={img.src} />
+            {caption && <div class='caption'>{caption}</div>}
+          </div>
+        </div>
+        <div onClick={() => this.prev()}className='prev'>{'<'}</div>
+        <div onClick={() => this.next()} className='next'>{'>'}</div>
+        <div onClick={() => this.close()} className='close'>{'x'}</div>
+      </div>
+    )
+  }
+}
+export default ModalImage
-- 
cgit v1.2.3-70-g09d2