summaryrefslogtreecommitdiff
path: root/client
diff options
context:
space:
mode:
Diffstat (limited to 'client')
-rw-r--r--client/index.js72
-rw-r--r--client/map/index.js115
-rw-r--r--client/map/leaflet.bezier.js7
-rw-r--r--client/tables.js40
4 files changed, 159 insertions, 75 deletions
diff --git a/client/index.js b/client/index.js
index 27110a18..109d2c27 100644
--- a/client/index.js
+++ b/client/index.js
@@ -7,6 +7,7 @@ import { toArray } from './util'
import Applet from './applet'
import { store } from './store'
import appendTable from './tables'
+import appendMap from './map'
function appendReactApplet(el, payload) {
ReactDOM.render(
@@ -18,20 +19,24 @@ function appendReactApplet(el, payload) {
)
}
-function appendApplets() {
- toArray(document.querySelectorAll('.applet')).forEach(el => {
- console.log(el.dataset.payload)
- let payload;
- try {
- payload = JSON.parse(el.dataset.payload)
- } catch (e) {
- return
- }
- console.log(payload)
- switch (payload.command) {
- case 'load file':
+
+function fetchDataset(payload) {
+ const url = "https://megapixels.nyc3.digitaloceanspaces.com/v1/citations/" + payload.dataset + ".json"
+ return fetch(url, { mode: 'cors' }).then(r => r.json())
+}
+
+function appendApplets(applets) {
+ applets.forEach(([el, payload]) => {
+ switch (payload.cmd) {
+ case 'citations':
+ case 'load_file':
appendTable(el, payload)
break
+ case 'map':
+ el.parentNode.classList.add('wide')
+ el.classList.add(payload.cmd)
+ appendMap(el, payload)
+ break
default:
appendReactApplet(el, payload)
break
@@ -39,6 +44,47 @@ function appendApplets() {
})
}
+function runApplets() {
+ const applets = toArray(document.querySelectorAll('.applet')).map(el => {
+ console.log(el.dataset.payload)
+ let payload
+ try {
+ payload = JSON.parse(el.dataset.payload)
+ } catch (e) {
+ return null
+ }
+ console.log(payload)
+ let cmdPartz = payload.command.split(" ")
+ let cmd = cmdPartz.shift()
+ let dataset = null
+ payload.cmd = cmd
+ payload.parts = cmdPartz
+ if (payload.parts.length) {
+ dataset = payload.parts[0].trim()
+ }
+ if (!dataset) {
+ const path = window.location.pathname.split('/').filter(s => !!s)
+ if (path.length) {
+ dataset = path[path.length - 1]
+ } else {
+ console.log('couldnt determine citations dataset')
+ return null
+ }
+ }
+ payload.dataset = dataset
+ return [el, payload]
+ }).filter(a => !!a)
+ const withDataset = applets.map(a => a[1].dataset ? a[1] : null).filter(a => !!a)
+ if (withDataset.length) {
+ fetchDataset(withDataset[0]).then(data => {
+ withDataset.forEach(dataset => dataset.data = data)
+ appendApplets(applets)
+ })
+ } else {
+ appendApplets(applets)
+ }
+}
+
function main() {
const paras = document.querySelectorAll('section p')
if (paras.length) {
@@ -49,7 +95,7 @@ function main() {
tag.classList.add('active')
}
})
- appendApplets()
+ runApplets()
}
main()
diff --git a/client/map/index.js b/client/map/index.js
index d869ca33..e877cb62 100644
--- a/client/map/index.js
+++ b/client/map/index.js
@@ -1,8 +1,56 @@
import L from 'leaflet'
-// import Snap from './snap.svg-min'
+import './leaflet.bezier'
-function build() {
- let map = L.map('mapid').setView([25, 0], 2)
+function getCitations(dataset) {
+ console.log(dataset.citations)
+ return dataset.citations.map(c => ({
+ title: c[0],
+ location: c[2],
+ lat: c[5],
+ lng: c[6],
+ type: c[7],
+ }))
+}
+
+const arcStyle = {
+ color: 'rgb(245, 246, 150)',
+ fillColor: 'rgb(245, 246, 150)',
+ opacity: 0.8,
+ weight: '1',
+}
+
+const redDot = L.icon({
+ iconUrl: '/assets/img/reddot.png',
+ iconSize: [17, 17], // size of the icon
+ iconAnchor: [8, 8], // point of the icon which will correspond to marker's location
+ popupAnchor: [0, -5] // point from which the popup should open relative to the iconAnchor
+})
+
+function addMarker(map, latlng, title, subtext) {
+ const marker = L.marker(latlng, { icon: redDot }).addTo(map)
+ marker.bindPopup([
+ "<b>", title, "</b>",
+ "<br>",
+ subtext,
+ ].join(''))
+}
+function addArc(map, src, dest) {
+ L.bezier({
+ path: [
+ [
+ { lat: src[0], lng: src[1] },
+ { lat: dest[0], lng: dest[1] },
+ ],
+ ]
+ }, arcStyle).addTo(map)
+}
+
+export default function append(el, payload) {
+ const { cmd, data } = payload
+ const citations = getCitations(data)
+
+ // console.log(el)
+ let map = L.map(el).setView([25, 0], 2)
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors,' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>,' +
@@ -13,62 +61,21 @@ function build() {
accessToken: 'pk.eyJ1IjoiZmFuc2FsY3kiLCJhIjoiY2pvN3I1czJwMHF5NDNrbWRoMWpteHlrdCJ9.kMpM5syQUhVjKkn1iVx9fg'
}).addTo(map)
- let points = read_json('citations')
- let address = read_json('address')
+ let { address } = data
+ console.log(address)
let source = [0, 0]
if (address) {
source = address.slice(3, 5).map(n => parseFloat(n))
- console.log(address, source)
+ // console.log(map, address, source)
+ console.log(source)
}
- let redDot = L.icon({
- iconUrl: '../reddot.png',
- iconSize: [17, 17], // size of the icon
- iconAnchor: [8, 8], // point of the icon which will correspond to marker's location
- popupAnchor: [0, -5] // point from which the popup should open relative to the iconAnchor
- })
-
- points.forEach(point => {
- const latlng = point.slice(5, 7).map(n => parseFloat(n))
- if (!latlng.length || isNaN(latlng[0]) || isNaN(latlng[1])) return
- const marker = L.marker(latlng, { icon: redDot }).addTo(map)
- marker.bindPopup([
- "<b>", point[0], "</b>",
- "<br>",
- point[1],
- ].join(''))
- // var arcStyle = {
- // color: 'rgb(245, 246, 150)',
- // fillColor: 'rgb(245, 246, 150)',
- // opacity: 0.8,
- // weight: '1',
- // vertices: 100,
- // }
- // L.Polyline.Arc(source, latlng, arcStyle).addTo(map);
- // console.log(latlng)
- const pathStyle = {
- color: 'rgb(245, 246, 150)',
- fillColor: 'rgb(245, 246, 150)',
- opacity: 0.8,
- weight: '1',
- }
- L.bezier({
- path: [
- [
- { lat: source[0], lng: source[1] },
- { lat: latlng[0], lng: latlng[1] },
- ],
- ]
- }, pathStyle).addTo(map)
+ citations.forEach(point => {
+ const latlng = [point.lat, point.lng]
+ if (Number.isNaN(latlng[0]) || Number.isNaN(latlng[1])) return
+ addMarker(map, latlng, point[0], point[1])
+ addArc(map, source, latlng)
})
- var marker = L.marker(source, { icon: redDot }).addTo(map);
- marker.bindPopup([
- "<b>", document.querySelector('h2').innerText, "</b>",
- '<br/>',
- address[0]
- ].join(''))
-
+ addMarker(map, source, document.querySelector('h2').innerText, address[0])
}
-
-export default build
diff --git a/client/map/leaflet.bezier.js b/client/map/leaflet.bezier.js
index 387e0717..02adbe7f 100644
--- a/client/map/leaflet.bezier.js
+++ b/client/map/leaflet.bezier.js
@@ -1,3 +1,5 @@
+import L from 'leaflet'
+
L.SVG.include({
_updatecurve: function (layer) {
let svg_path = this._curvePointsToPath(layer._points);
@@ -251,4 +253,9 @@ L.bezier = function (config, options) {
};
+function noop() {}
+export {
+ Bezier,
+ noop,
+} \ No newline at end of file
diff --git a/client/tables.js b/client/tables.js
index 6b00bbde..4a6c666f 100644
--- a/client/tables.js
+++ b/client/tables.js
@@ -10,8 +10,15 @@ const datasetColumns = [
{ 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' },
+]
function getColumns(payload) {
+ if (payload.cmd === 'citations') {
+ return citationsColumns
+ }
if (payload.opt.match('datasets.csv')) {
return datasetColumns
}
@@ -23,21 +30,38 @@ function getColumns(payload) {
})
}
+function getCitations(dataset) {
+ console.log(dataset.citations)
+ return dataset.citations.map(c => ({
+ title: c[0],
+ institution: c[2],
+ }))
+}
+
export default function append(el, payload) {
+ let url = payload.opt
const columns = getColumns(payload)
const table = new Tabulator(el, {
height: '311px',
- layout: 'fitDataFill',
+ layout: 'fitColumns',
placeholder: 'No Data Set',
columns,
})
// let path = payload.opt
// console.log(path, columns)
- fetch(payload.opt, { mode: 'cors' })
- .then(r => r.text())
- .then(text => {
- const data = csv.toJSON(text, { headers: { included: true } })
- console.log(data)
- table.setData(data)
- })
+
+ if (payload.cmd === 'citations') {
+ let { data } = payload
+ const citations = getCitations(data)
+ console.log(citations)
+ table.setData(citations)
+ } else {
+ fetch(url, { mode: 'cors' })
+ .then(r => r.text())
+ .then(text => {
+ const data = csv.toJSON(text, { headers: { included: true } })
+ console.log(data)
+ table.setData(data)
+ })
+ }
}
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 23:04:52 +0000