summaryrefslogtreecommitdiff
path: root/client
diff options
context:
space:
mode:
Diffstat (limited to 'client')
-rw-r--r--client/chart/countriesByYear.chart.js12
-rw-r--r--client/index.js29
-rw-r--r--client/modalImage/index.js7
-rw-r--r--client/modalImage/modal.css90
-rw-r--r--client/modalImage/modalImage.container.js93
-rw-r--r--client/table/citations.table.js2
-rw-r--r--client/table/file.table.js2
-rw-r--r--client/table/tabulator.css11
8 files changed, 236 insertions, 10 deletions
diff --git a/client/chart/countriesByYear.chart.js b/client/chart/countriesByYear.chart.js
index 2284f774..df7a4530 100644
--- a/client/chart/countriesByYear.chart.js
+++ b/client/chart/countriesByYear.chart.js
@@ -68,11 +68,13 @@ class CountriesByYearChart extends Component {
)
)
- citationCountsByYear.push(
- [otherCountriesLabel].concat(
- yearList.map(year => otherCountries.reduce((a,b) => (a + years[year][b]), 0))
+ if (otherCountries.length) {
+ citationCountsByYear.push(
+ [otherCountriesLabel].concat(
+ yearList.map(year => otherCountries.reduce((a,b) => (a + years[year][b]), 0))
+ )
)
- )
+ }
let maxCitationsInAYear = 0
let currentSum = 0
@@ -158,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 5e36d341..10ed8563 100644
--- a/client/index.js
+++ b/client/index.js
@@ -2,11 +2,13 @@ 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'
import { store } from './store'
import appendMap from './map'
+import { ModalImage } from './modalImage'
function appendReactApplet(el, payload) {
ReactDOM.render(
@@ -18,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())
@@ -112,6 +121,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 +150,8 @@ 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..9589b8f4
--- /dev/null
+++ b/client/modalImage/modal.css
@@ -0,0 +1,90 @@
+.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: 90vw;
+ max-height: 90vh;
+}
+.modal .caption {
+ display: block;
+ text-align: center;
+}
+.modal .prev span,
+.modal .next span,
+.modal .close span {
+ background: #222;
+ border-radius: 50%;
+ width: 40px;
+ height: 40px;
+ text-align: center;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ box-shadow: 0 1px 2px rgba(255,255,255,0.4);
+ transition: all 0.2s cubic-bezier(0,0,1,1);
+ user-select: none;
+}
+.desktop .modal .prev:hover span,
+.desktop .modal .prev:hover span,
+.desktop .modal .prev:hover span {
+ background: #000;
+ box-shadow: 0 1px 2px rgba(255,255,255,0.6);
+}
+.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..5479ca5f
--- /dev/null
+++ b/client/modalImage/modalImage.container.js
@@ -0,0 +1,93 @@
+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: false,
+ 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 27: // esc
+ this.close()
+ break
+ case 37: // left
+ this.prev()
+ break
+ case 39: // right
+ this.next()
+ break
+ default:
+ break
+ }
+ })
+ }
+
+ loadImage(index) {
+ const { images } = this.state
+ if (!images.length) return
+ if (index < 0 || index >= images.length) return
+ this.setState({ visible: true, index })
+ }
+
+ prev() {
+ const { index, images } = this.state
+ if (!images.length) return
+ this.setState({ index: (images.length + index - 1) % images.length })
+ }
+
+ next() {
+ const { index, images } = this.state
+ if (!images.length) return
+ 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'><span>{'<'}</span></div>
+ <div onClick={() => this.next()} className='next'><span>{'>'}</span></div>
+ <div onClick={() => this.close()} className='close'><span>{'×'}</span></div>
+ </div>
+ )
+ }
+}
+export default ModalImage
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/client/table/tabulator.css b/client/table/tabulator.css
index 17dad62a..95768976 100644
--- a/client/table/tabulator.css
+++ b/client/table/tabulator.css
@@ -8,8 +8,13 @@
.tabulator-row.tabulator-row-even {
background-color: #333;
}
-.desktop .tabulator-row.tabulator-selectable:hover {
- background-color: #555;
+.desktop .tabulator-row.tabulator-selectable.tabulator-row-even:hover {
+ cursor: arrow;
+ background-color: #333;
+}
+.desktop .tabulator-row.tabulator-selectable.tabulator-row-odd:hover {
+ cursor: arrow;
+ background-color: #222;
}
.tabulator-row .tabulator-cell {
border-right: 1px solid #444;
@@ -35,7 +40,7 @@
max-width: 400px;
margin-bottom: 10px;
background-image: url(/assets/img/icon-search.png);
- background-position: 390px center;
+ background-position: 380px center;
background-repeat: no-repeat;
box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
border: 0;
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-11 01:24:10 +0000