From 087cf70c944c09c4d03f2fbcaf7c74718ccb5f8f Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 2 Apr 2019 14:47:34 +0200 Subject: cursor --- client/table/tabulator.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'client') diff --git a/client/table/tabulator.css b/client/table/tabulator.css index 17dad62a..9a7ca00e 100644 --- a/client/table/tabulator.css +++ b/client/table/tabulator.css @@ -9,6 +9,7 @@ background-color: #333; } .desktop .tabulator-row.tabulator-selectable:hover { + cursor: text; background-color: #555; } .tabulator-row .tabulator-cell { @@ -35,7 +36,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; -- cgit v1.2.3-70-g09d2 From 9280b2ad356b7f0cda38f9e14eb91b89f076e9c1 Mon Sep 17 00:00:00 2001 From: Jules Laplace 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') 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 @@
MegaPixels
+
Brainwash
Datasets 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 @@
MegaPixels
+
{{ metadata.meta.dataset.name_short }}
Datasets -- cgit v1.2.3-70-g09d2 From 892f2e928c05126b48c2dc8b669b31235be62f9b Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 2 Apr 2019 15:52:46 +0200 Subject: touch up chart --- client/chart/countriesByYear.chart.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) (limited to 'client') diff --git a/client/chart/countriesByYear.chart.js b/client/chart/countriesByYear.chart.js index 2284f774..78ab4434 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 -- cgit v1.2.3-70-g09d2 From 77e2b579bc42b6c36f82dba246561293049e73f8 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 2 Apr 2019 19:03:06 +0200 Subject: adding chart... whole verify app working nicer --- client/table/tabulator.css | 10 +++- scraper/client/app.js | 1 - scraper/client/common/header.component.js | 9 ++- scraper/client/common/table.component.js | 3 + scraper/client/paper/citationList.component.js | 33 ++++------ scraper/client/paper/index.js | 2 - scraper/client/paper/paper.chart.js | 83 ++++++++++++++++++++++++++ scraper/client/paper/paper.citations.js | 6 -- scraper/client/paper/paper.css | 21 +++++++ scraper/client/paper/paper.info.js | 32 ++++++++-- scraper/client/paper/paper.manager.js | 35 +++++++++++ scraper/client/paper/paper.unknown.js | 41 ------------- 12 files changed, 192 insertions(+), 84 deletions(-) create mode 100644 scraper/client/paper/paper.chart.js delete mode 100644 scraper/client/paper/paper.unknown.js (limited to 'client') diff --git a/client/table/tabulator.css b/client/table/tabulator.css index 9a7ca00e..95768976 100644 --- a/client/table/tabulator.css +++ b/client/table/tabulator.css @@ -8,9 +8,13 @@ .tabulator-row.tabulator-row-even { background-color: #333; } -.desktop .tabulator-row.tabulator-selectable:hover { - cursor: text; - 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; diff --git a/scraper/client/app.js b/scraper/client/app.js index b449d0d0..366d4098 100644 --- a/scraper/client/app.js +++ b/scraper/client/app.js @@ -17,7 +17,6 @@ export default class App extends Component { - diff --git a/scraper/client/common/header.component.js b/scraper/client/common/header.component.js index 2f084979..c9825aab 100644 --- a/scraper/client/common/header.component.js +++ b/scraper/client/common/header.component.js @@ -1,5 +1,5 @@ import React, { Component } from 'react' -// import { NavLink } from 'react-router-dom' +import { Link } from 'react-router-dom' import { bindActionCreators } from 'redux' import { connect } from 'react-redux' @@ -34,10 +34,9 @@ class Header extends Component { {dataset &&
{dataset.name_full}{' - '} - Info{' - '} - Citations{' - '} - Unknown{' - '} - Random + Info{' - '} + Citations{' - '} + Random
} diff --git a/scraper/client/common/table.component.js b/scraper/client/common/table.component.js index 96b62835..121c9841 100644 --- a/scraper/client/common/table.component.js +++ b/scraper/client/common/table.component.js @@ -118,6 +118,9 @@ export function TableCell({ value }) { value = } } + if (value && typeof value === 'string' && value.indexOf('http') === 0) { + value = {value} + } return ( {value} ) diff --git a/scraper/client/paper/citationList.component.js b/scraper/client/paper/citationList.component.js index be8528bf..002c0dcb 100644 --- a/scraper/client/paper/citationList.component.js +++ b/scraper/client/paper/citationList.component.js @@ -9,38 +9,31 @@ import { TableObject, Loader } from '../common' import { USES_DATASET } from '../types' class CitationList extends Component { - componentDidMount() { - const { citations, api } = this.props - const { paperInfo, unknownCitations, verifications } = api - const { dataset } = paperInfo - if (!dataset || !citations || !verifications[dataset.key]) { - this.props.actions.setSortedCitations([]) - return - } - let verifiedLookup = verifications[dataset.key] || {} - const sortedCitations = citations.map(citation => [ - citation.title, - verifiedLookup[citation.id] ? verifiedLookup[citation.id].uses_dataset : USES_DATASET.NO_DATA, - citation.pdf.length, - citation - ]) - .sort((a,b) => (b[1] - a[1] || b[2] - a[2] || (a[0].localeCompare(b[0])))) - .map(tup => tup[3]) - this.props.actions.setSortedCitations(sortedCitations) + state = { + filter: USES_DATASET.YES, } render() { const { citations, title, api } = this.props const { paperInfo, unknownCitations, verifications, sortedCitations } = api const { dataset } = paperInfo + const { filter } = this.state if (!dataset || !citations || !verifications[dataset.key]) return let verifiedLookup = verifications[dataset.key] || {} - // console.log(verifications) + let filteredCitations = sortedCitations.filter(citation => ( + citation.verified === filter + )) return (

{title}

+
+ this.setState({ filter: USES_DATASET.YES })}>uses dataset + this.setState({ filter: USES_DATASET.NO })}>{"doesn't use dataset"} + this.setState({ filter: USES_DATASET.UNKNOWN })}>{'not enough information'} + this.setState({ filter: USES_DATASET.NO_DATA })}>{'unverified'} +
    - {(sortedCitations || []).map((citation, i) => { + {(filteredCitations || []).map((citation, i) => { let cite = { ...citation } cite.id = { _raw: true, diff --git a/scraper/client/paper/index.js b/scraper/client/paper/index.js index 99672684..9346234a 100644 --- a/scraper/client/paper/index.js +++ b/scraper/client/paper/index.js @@ -1,7 +1,6 @@ import Manager from './paper.manager' import Info from './paper.info' import Citations from './paper.citations' -import UnknownCitations from './paper.unknown' import Random from './paper.random' import Address from './paper.address' import Verify from './paper.verify' @@ -13,7 +12,6 @@ export { Manager, Info, Citations, - UnknownCitations, Random, Address, Verify, diff --git a/scraper/client/paper/paper.chart.js b/scraper/client/paper/paper.chart.js new file mode 100644 index 00000000..01d8d0e8 --- /dev/null +++ b/scraper/client/paper/paper.chart.js @@ -0,0 +1,83 @@ +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' + +class PaperChart extends Component { + render() { + const { rows, title } = this.props + if (!rows.length) return null + const colorPattern = [ + "#00b200", + "#ff0000", + "#e0c200", + "#dddddd", + ] + + return ( +
    +
    + value, + } + }} + size={{ + height: rows.length < 4 ? 316 : 336, + }} + /> + {title} +
    +
    + ) + } +} + +/* + 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 [ + "", + "", + "", + country, + "", + "", + total, + "", + "", + ].join('') + }) + return [ + "", + ...tableRows, + "
    ", + ].join('') + } + }} +*/ + +export default PaperChart diff --git a/scraper/client/paper/paper.citations.js b/scraper/client/paper/paper.citations.js index f0e9ea26..c3a9cc61 100644 --- a/scraper/client/paper/paper.citations.js +++ b/scraper/client/paper/paper.citations.js @@ -11,12 +11,6 @@ import { USES_DATASET } from '../types' import CitationList from './citationList.component' class PaperCitations extends Component { - componentDidUpdate(prevProps) { - if (this.props.api.paperInfo.dataset !== prevProps.api.paperInfo.dataset) { - this.props.actions.getVerificationsDataset(this.props.api.paperInfo.dataset.key) - } - } - render() { const { paperInfo, unknownCitations, verifications } = this.props.api const { dataset, citations } = paperInfo diff --git a/scraper/client/paper/paper.css b/scraper/client/paper/paper.css index 21df2df1..914077b6 100644 --- a/scraper/client/paper/paper.css +++ b/scraper/client/paper/paper.css @@ -12,6 +12,20 @@ width: 100%; } +.filter_buttons { + margin-left: 5px; + margin-bottom: 10px; +} +.filter_buttons span { + margin-right: 10px; + cursor: pointer; + opacity: 0.8; + transition: opacity 0.2; +} +.filter_buttons span:hover { + opacity: 1; +} + .citations { padding:40px; } @@ -82,6 +96,13 @@ padding:4px; font-size:12px; } +.chartCaption { + display: block; + width: 100%; + font-size: 12px; + color: #333; + text-align: center; +} .param { display: flex; diff --git a/scraper/client/paper/paper.info.js b/scraper/client/paper/paper.info.js index b4fe54ba..25f4472f 100644 --- a/scraper/client/paper/paper.info.js +++ b/scraper/client/paper/paper.info.js @@ -3,17 +3,40 @@ import { bindActionCreators } from 'redux' import { connect } from 'react-redux' import * as actions from '../actions' - import { TableObject } from '../common' +import { USES_DATASET } from '../types' + +import PaperChart from './paper.chart' class PaperInfo extends Component { render() { - const { paperInfo, unknownCitations } = this.props.api + const { paperInfo, sortedCitations, unknownCitations } = this.props.api const { dataset, paper, address } = paperInfo if (!dataset) return null + + let counts = {} + const citationLabels = ['Uses Dataset', 'Doesn\'t Use Dataset', 'Not Enough Information', 'Unknown'] + const citationCountOrder = [ USES_DATASET.YES, USES_DATASET.NO, USES_DATASET.UNKNOWN, USES_DATASET.NO_DATA ] + citationCountOrder.forEach(v => counts[v] = 0) + + sortedCitations.forEach(c => counts[c.verified] += 1) + + let citationCounts = {} + let citationRows = [] + citationCountOrder.forEach((v, i) => { + const count = counts[v] + const label = citationLabels[i] + citationCounts[label] = count + citationRows.push([ label, count ]) + }) + return (

    {dataset.name_full}

    +
    ) diff --git a/scraper/client/paper/paper.manager.js b/scraper/client/paper/paper.manager.js index 2ac03b01..8b25b1cc 100644 --- a/scraper/client/paper/paper.manager.js +++ b/scraper/client/paper/paper.manager.js @@ -3,6 +3,7 @@ import { bindActionCreators } from 'redux' import { connect } from 'react-redux' import * as actions from '../actions' +import { USES_DATASET } from '../types' import { Loader } from '../common' @@ -15,6 +16,40 @@ class PaperManager extends Component { if (this.props.match.params.key !== oldProps.match.params.key) { this.props.actions.getPaperInfo(this.props.match.params.key) } + console.log('whoms?') + if (this.props.api.paperInfo.dataset !== oldProps.api.paperInfo.dataset && this.props.api.paperInfo.dataset && this.props.api.paperInfo.dataset.key) { + console.log('vert?') + this.props.actions.getVerificationsDataset(this.props.api.paperInfo.dataset.key) + } + if (this.props.api.verifications !== oldProps.api.verifications && this.props.api.paperInfo.dataset) { + console.log('updated?') + this.updateSortedCitations() + } + } + + updateSortedCitations() { + const { api } = this.props + const { paperInfo, unknownCitations, verifications } = api + const { dataset } = paperInfo + if (!dataset || !paperInfo.citations || !unknownCitations.citations || !verifications[dataset.key]) { + this.props.actions.setSortedCitations([]) + return + } + const citations = paperInfo.citations.concat(unknownCitations.citations) + let verifiedLookup = verifications[dataset.key] || {} + const sortedCitations = citations.map(citation => [ + citation.title, + verifiedLookup[citation.id] ? verifiedLookup[citation.id].uses_dataset : USES_DATASET.NO_DATA, + citation.pdf.length, + citation + ]) + .sort((a,b) => (b[1] - a[1] || b[2] - a[2] || (a[0].localeCompare(b[0])))) + .map(tup => ({ + ...tup[3], + verified: tup[1], + })) + console.log('updated') + this.props.actions.setSortedCitations(sortedCitations) } render() { diff --git a/scraper/client/paper/paper.unknown.js b/scraper/client/paper/paper.unknown.js deleted file mode 100644 index 876ac144..00000000 --- a/scraper/client/paper/paper.unknown.js +++ /dev/null @@ -1,41 +0,0 @@ -import React, { Component } from 'react' -import { bindActionCreators } from 'redux' -import { connect } from 'react-redux' -import { Link } from 'react-router-dom' - -import * as actions from '../actions' - -import { Loader } from '../common' -import { USES_DATASET } from '../types' - -import CitationList from './citationList.component' - -class PaperUnknown extends Component { - componentDidUpdate(prevProps) { - if (this.props.api.paperInfo.dataset !== prevProps.api.paperInfo.dataset) { - this.props.actions.getVerificationsDataset(this.props.api.paperInfo.dataset.key) - } - } - - render() { - const { paperInfo, unknownCitations, verifications } = this.props.api - const { dataset, citations } = paperInfo - if (!dataset || !citations || !verifications[dataset.key]) return - - return ( - - ) - } -} - -const mapStateToProps = state => ({ - api: state.api -}) -const mapDispatchToProps = dispatch => ({ - actions: bindActionCreators({ ...actions }, dispatch), -}) - -export default connect(mapStateToProps, mapDispatchToProps)(PaperUnknown) -- cgit v1.2.3-70-g09d2 From f58d41731fc07d94d594d5582aef203564f990ec Mon Sep 17 00:00:00 2001 From: Jules Laplace 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') 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 { } }} /> -
    {paper.name}{' dataset citations by country per year'}
    +
    {paper.name}{' dataset citations per country per year. We verified ' + citations.length + ' papers that used the dataset.'}
) } 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(, 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 ( +
+
+
+ + {caption &&
{caption}
} +
+
+
this.prev()}className='prev'>{'<'}
+
this.next()} className='next'>{'>'}
+
this.close()} className='close'>{'x'}
+
+ ) + } +} +export default ModalImage -- cgit v1.2.3-70-g09d2 From c6413f0ddba312ec7efbc41359f844eba55095ff Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 2 Apr 2019 20:41:08 +0200 Subject: modal... --- client/modalImage/modal.css | 4 ++-- client/modalImage/modalImage.container.js | 12 ++++++++++-- 2 files changed, 12 insertions(+), 4 deletions(-) (limited to 'client') diff --git a/client/modalImage/modal.css b/client/modalImage/modal.css index d9180125..fb3c7ab5 100644 --- a/client/modalImage/modal.css +++ b/client/modalImage/modal.css @@ -25,8 +25,8 @@ align-items: center; } .modal img { - max-width: 80vw; - max-height: 80vh; + max-width: 90vw; + max-height: 90vh; } .modal .caption { display: block; diff --git a/client/modalImage/modalImage.container.js b/client/modalImage/modalImage.container.js index a637deb6..55904c40 100644 --- a/client/modalImage/modalImage.container.js +++ b/client/modalImage/modalImage.container.js @@ -10,7 +10,7 @@ import csv from 'parse-csv' class ModalImage extends Component { state = { - visible: true, + visible: false, images: [], index: 0, } @@ -26,8 +26,11 @@ class ModalImage extends Component { if (document.activeElement && document.activeElement !== document.body) { return null } - // console.log(e.keyCode) + console.log(e.keyCode) switch (e.keyCode) { + case 27: // esc + this.close() + break case 37: // left this.prev() break @@ -41,16 +44,21 @@ class ModalImage extends Component { } loadImage(index) { + const { index, images } = this.state + if (!images.length) return + if (index < 0 || index >= this.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 }) } -- cgit v1.2.3-70-g09d2 From c0f42b7ec12c1731accfef5835d2c4df6a304791 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 2 Apr 2019 20:44:05 +0200 Subject: modal hand --- client/modalImage/modalImage.container.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'client') diff --git a/client/modalImage/modalImage.container.js b/client/modalImage/modalImage.container.js index 55904c40..20547de3 100644 --- a/client/modalImage/modalImage.container.js +++ b/client/modalImage/modalImage.container.js @@ -44,7 +44,7 @@ class ModalImage extends Component { } loadImage(index) { - const { index, images } = this.state + const { images } = this.state if (!images.length) return if (index < 0 || index >= this.images.length) return this.setState({ visible: true, index }) -- cgit v1.2.3-70-g09d2 From e52b66449c8b56abab70db03468f2f9ae7f24ec8 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 2 Apr 2019 21:34:00 +0200 Subject: modal hand --- client/modalImage/modalImage.container.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'client') diff --git a/client/modalImage/modalImage.container.js b/client/modalImage/modalImage.container.js index 20547de3..7ff03a3b 100644 --- a/client/modalImage/modalImage.container.js +++ b/client/modalImage/modalImage.container.js @@ -46,7 +46,7 @@ class ModalImage extends Component { loadImage(index) { const { images } = this.state if (!images.length) return - if (index < 0 || index >= this.images.length) return + if (index < 0 || index >= images.length) return this.setState({ visible: true, index }) } -- cgit v1.2.3-70-g09d2 From dffdbe1f0f1466229adb78ecd8b3bce3b2aa7445 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 2 Apr 2019 21:46:04 +0200 Subject: modal hand --- client/modalImage/modal.css | 21 +++++++++++++++++++++ client/modalImage/modalImage.container.js | 6 +++--- 2 files changed, 24 insertions(+), 3 deletions(-) (limited to 'client') diff --git a/client/modalImage/modal.css b/client/modalImage/modal.css index fb3c7ab5..9589b8f4 100644 --- a/client/modalImage/modal.css +++ b/client/modalImage/modal.css @@ -32,6 +32,27 @@ 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; diff --git a/client/modalImage/modalImage.container.js b/client/modalImage/modalImage.container.js index 7ff03a3b..5479ca5f 100644 --- a/client/modalImage/modalImage.container.js +++ b/client/modalImage/modalImage.container.js @@ -83,9 +83,9 @@ class ModalImage extends Component { {caption &&
{caption}
}
-
this.prev()}className='prev'>{'<'}
-
this.next()} className='next'>{'>'}
-
this.close()} className='close'>{'x'}
+
this.prev()}className='prev'>{'<'}
+
this.next()} className='next'>{'>'}
+
this.close()} className='close'>{'×'}
) } -- cgit v1.2.3-70-g09d2 From 24e4f4af71f1e146f33688822ac3e4242339faa4 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 3 Apr 2019 15:18:04 +0200 Subject: data --- client/index.js | 1 - site/content/pages/datasets/market_1501/index.md | 4 ++++ site/public/datasets/market_1501/index.html | 15 +++++++++++++++ 3 files changed, 19 insertions(+), 1 deletion(-) (limited to 'client') diff --git a/client/index.js b/client/index.js index 10ed8563..c003a8b3 100644 --- a/client/index.js +++ b/client/index.js @@ -24,7 +24,6 @@ function appendModalImage() { const el = document.createElement('div') document.body.appendChild(el) ReactDOM.render(, el) - console.log(el) } function fetchDataset(payload) { diff --git a/site/content/pages/datasets/market_1501/index.md b/site/content/pages/datasets/market_1501/index.md index 8d253c79..f11f170e 100644 --- a/site/content/pages/datasets/market_1501/index.md +++ b/site/content/pages/datasets/market_1501/index.md @@ -27,6 +27,10 @@ authors: Adam Harvey {% include 'map.html' %} +{% include 'chart.html' %} + +{% include 'piechart.html' %} + {% include 'supplementary_header.html' %} {% include 'citations.html' %} diff --git a/site/public/datasets/market_1501/index.html b/site/public/datasets/market_1501/index.html index 1ffd7e6c..3281a9ae 100644 --- a/site/public/datasets/market_1501/index.html +++ b/site/public/datasets/market_1501/index.html @@ -83,6 +83,21 @@

-->
+

Who used Market 1501?

+ +

+ This bar chart presents a ranking of the top countries where dataset citations originated. Mouse over individual columns to see yearly totals. These charts show at most the top 10 countries. +

+ +
+ +
+ +
+
+
+
-- cgit v1.2.3-70-g09d2