Add post shell
This commit is contained in:
parent
3102265aa8
commit
3f5a9fbe04
12
lib/displayElement.js
Normal file
12
lib/displayElement.js
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
export function DisplayElement({element}){
|
||||||
|
return(
|
||||||
|
<div>
|
||||||
|
<a href={element.url} target="_blank">
|
||||||
|
<h1>{`${element.name}`}</h1>
|
||||||
|
<p>{`Karma: ${1}`}</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -6,133 +6,131 @@ function getlength(number) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function drawGraphInner(list, quantitativeComparisons){
|
function drawGraphInner(list, quantitativeComparisons){
|
||||||
if(true){
|
|
||||||
// Build the graph object
|
// Build the graph object
|
||||||
let nodes = list.map((x,i) => ({id: i, name: x}))
|
let nodes = list.map((x,i) => ({id: i, name: x}))
|
||||||
let links = quantitativeComparisons.map(([element1, element2, weight]) => ({source: list.indexOf(element1), target: list.indexOf(element2), weight: weight}))
|
let links = quantitativeComparisons.map(([element1, element2, weight]) => ({source: list.indexOf(element1), target: list.indexOf(element2), weight: weight}))
|
||||||
console.log("Links")
|
console.log("Links")
|
||||||
console.log(links)
|
console.log(links)
|
||||||
|
|
||||||
let data = ({
|
let data = ({
|
||||||
nodes,
|
nodes,
|
||||||
links: links
|
links: links
|
||||||
|
})
|
||||||
|
console.log(data)
|
||||||
|
|
||||||
|
// Build the d3 graph
|
||||||
|
let margin = {top: 0, right: 30, bottom: 20, left: 30};
|
||||||
|
let width = 900 - margin.left - margin.right;
|
||||||
|
let height = 400 - margin.top - margin.bottom;
|
||||||
|
|
||||||
|
var svg = d3.select("#graph")
|
||||||
|
.append("svg")
|
||||||
|
.attr("width", width + margin.left + margin.right)
|
||||||
|
.attr("height", height + margin.top + margin.bottom)
|
||||||
|
.append("g")
|
||||||
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
||||||
|
|
||||||
|
console.log(data)
|
||||||
|
// List of node names
|
||||||
|
var nodeNames = data.nodes.map(function(d){return d.name})
|
||||||
|
|
||||||
|
// A linear scale to position the nodes on the X axis
|
||||||
|
var x = d3.scalePoint()
|
||||||
|
.range([0, width])
|
||||||
|
.domain(nodeNames)
|
||||||
|
|
||||||
|
// Add the circle for the nodes
|
||||||
|
svg
|
||||||
|
.selectAll("mynodes")
|
||||||
|
.data(data.nodes)
|
||||||
|
.enter()
|
||||||
|
.append("circle")
|
||||||
|
.attr("cx", function(d){ return(x(d.name))})
|
||||||
|
.attr("cy", height-30)
|
||||||
|
.attr("r", 8)
|
||||||
|
.style("fill", "#69b3a2")
|
||||||
|
|
||||||
|
// And give them a label
|
||||||
|
svg
|
||||||
|
.selectAll("mylabels")
|
||||||
|
.data(data.nodes)
|
||||||
|
.enter()
|
||||||
|
.append("text")
|
||||||
|
.attr("x", function(d){ return(x(d.name))})
|
||||||
|
.attr("y", height-10)
|
||||||
|
.text(function(d){ return(d.name)})
|
||||||
|
.style("text-anchor", "middle")
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Add links between nodes.
|
||||||
|
// In the input data, links are provided between nodes -id-, not between node names.
|
||||||
|
// So one has to link ids and names
|
||||||
|
// Note Nuño: This is inefficient, and we could have built the data object to avoid this. However, every time I try to refactor this, the thing breaks.
|
||||||
|
var nodesById = {};
|
||||||
|
data.nodes.forEach(function (n) {
|
||||||
|
nodesById[n.id] = n;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Cool, now if I do nodesById["2"].name I've got the name of the node with id 2
|
||||||
|
|
||||||
|
// Add the links
|
||||||
|
svg
|
||||||
|
.selectAll('mylinks')
|
||||||
|
.data(data.links)
|
||||||
|
.enter()
|
||||||
|
.append('path')
|
||||||
|
.attr('d', function (d) {
|
||||||
|
let start = x(nodesById[d.source].name)
|
||||||
|
// X position of start node on the X axis
|
||||||
|
let end = x(nodesById[d.target].name)
|
||||||
|
// X position of end node
|
||||||
|
return ['M',
|
||||||
|
start,
|
||||||
|
height-30,
|
||||||
|
// the arc starts at the coordinate x=start, y=height-30 (where the starting node is)
|
||||||
|
'A',
|
||||||
|
// This means we're gonna build an elliptical arc
|
||||||
|
(start - end)/2, ',',
|
||||||
|
// Next 2 lines are the coordinates of the inflexion point. Height of this point is proportional with start - end distance
|
||||||
|
(start - end)/2, 0, 0, ',',
|
||||||
|
start < end ? 1 : 0, end, ',', height-30]
|
||||||
|
// We always want the arc on top. So if end is before start, putting 0 here turn the arc upside down.
|
||||||
|
.join(' ');
|
||||||
})
|
})
|
||||||
console.log(data)
|
.style("fill", "none")
|
||||||
|
.attr("stroke", "black")
|
||||||
|
|
||||||
|
// labels for links
|
||||||
|
svg
|
||||||
|
.selectAll('mylinks')
|
||||||
|
.data(data.links)
|
||||||
|
.enter()
|
||||||
|
.append("text")
|
||||||
|
.attr("x", function(d){
|
||||||
|
let start = x(nodesById[d.source].name)
|
||||||
|
// X position of start node on the X axis
|
||||||
|
let end = x(nodesById[d.target].name)
|
||||||
|
// X position of end node
|
||||||
|
return start + (end-start)/2 -4*getlength(d.weight)
|
||||||
|
})
|
||||||
|
.attr("y", function(d){
|
||||||
|
let start = x(nodesById[d.source].name)
|
||||||
|
// X position of start node on the X axis
|
||||||
|
let end = x(nodesById[d.target].name)
|
||||||
|
// X position of end node
|
||||||
|
return height-32-(Math.abs(start-end)/2)//height-30
|
||||||
|
})
|
||||||
|
.text(function(d){ return(`${d.weight}`)})
|
||||||
|
.style("text-anchor", "top")
|
||||||
|
|
||||||
// Build the d3 graph
|
|
||||||
let margin = {top: 0, right: 30, bottom: 20, left: 30};
|
|
||||||
let width = 900 - margin.left - margin.right;
|
|
||||||
let height = 400 - margin.top - margin.bottom;
|
|
||||||
|
|
||||||
var svg = d3.select("#graph")
|
|
||||||
.append("svg")
|
|
||||||
.attr("width", width + margin.left + margin.right)
|
|
||||||
.attr("height", height + margin.top + margin.bottom)
|
|
||||||
.append("g")
|
|
||||||
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
|
||||||
|
|
||||||
console.log(data)
|
|
||||||
// List of node names
|
|
||||||
var nodeNames = data.nodes.map(function(d){return d.name})
|
|
||||||
|
|
||||||
// A linear scale to position the nodes on the X axis
|
|
||||||
var x = d3.scalePoint()
|
|
||||||
.range([0, width])
|
|
||||||
.domain(nodeNames)
|
|
||||||
|
|
||||||
// Add the circle for the nodes
|
|
||||||
svg
|
|
||||||
.selectAll("mynodes")
|
|
||||||
.data(data.nodes)
|
|
||||||
.enter()
|
|
||||||
.append("circle")
|
|
||||||
.attr("cx", function(d){ return(x(d.name))})
|
|
||||||
.attr("cy", height-30)
|
|
||||||
.attr("r", 8)
|
|
||||||
.style("fill", "#69b3a2")
|
|
||||||
|
|
||||||
// And give them a label
|
|
||||||
svg
|
|
||||||
.selectAll("mylabels")
|
|
||||||
.data(data.nodes)
|
|
||||||
.enter()
|
|
||||||
.append("text")
|
|
||||||
.attr("x", function(d){ return(x(d.name))})
|
|
||||||
.attr("y", height-10)
|
|
||||||
.text(function(d){ return(d.name)})
|
|
||||||
.style("text-anchor", "middle")
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Add links between nodes.
|
|
||||||
// In the input data, links are provided between nodes -id-, not between node names.
|
|
||||||
// So one has to link ids and names
|
|
||||||
// Note Nuño: This is inefficient, and we could have built the data object to avoid this. However, every time I try to refactor this, the thing breaks.
|
|
||||||
var nodesById = {};
|
|
||||||
data.nodes.forEach(function (n) {
|
|
||||||
nodesById[n.id] = n;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Cool, now if I do nodesById["2"].name I've got the name of the node with id 2
|
|
||||||
|
|
||||||
// Add the links
|
|
||||||
svg
|
|
||||||
.selectAll('mylinks')
|
|
||||||
.data(data.links)
|
|
||||||
.enter()
|
|
||||||
.append('path')
|
|
||||||
.attr('d', function (d) {
|
|
||||||
let start = x(nodesById[d.source].name)
|
|
||||||
// X position of start node on the X axis
|
|
||||||
let end = x(nodesById[d.target].name)
|
|
||||||
// X position of end node
|
|
||||||
return ['M',
|
|
||||||
start,
|
|
||||||
height-30,
|
|
||||||
// the arc starts at the coordinate x=start, y=height-30 (where the starting node is)
|
|
||||||
'A',
|
|
||||||
// This means we're gonna build an elliptical arc
|
|
||||||
(start - end)/2, ',',
|
|
||||||
// Next 2 lines are the coordinates of the inflexion point. Height of this point is proportional with start - end distance
|
|
||||||
(start - end)/2, 0, 0, ',',
|
|
||||||
start < end ? 1 : 0, end, ',', height-30]
|
|
||||||
// We always want the arc on top. So if end is before start, putting 0 here turn the arc upside down.
|
|
||||||
.join(' ');
|
|
||||||
})
|
|
||||||
.style("fill", "none")
|
|
||||||
.attr("stroke", "black")
|
|
||||||
|
|
||||||
// labels for links
|
|
||||||
svg
|
|
||||||
.selectAll('mylinks')
|
|
||||||
.data(data.links)
|
|
||||||
.enter()
|
|
||||||
.append("text")
|
|
||||||
.attr("x", function(d){
|
|
||||||
let start = x(nodesById[d.source].name)
|
|
||||||
// X position of start node on the X axis
|
|
||||||
let end = x(nodesById[d.target].name)
|
|
||||||
// X position of end node
|
|
||||||
return start + (end-start)/2 -4*getlength(d.weight)
|
|
||||||
})
|
|
||||||
.attr("y", function(d){
|
|
||||||
let start = x(nodesById[d.source].name)
|
|
||||||
// X position of start node on the X axis
|
|
||||||
let end = x(nodesById[d.target].name)
|
|
||||||
// X position of end node
|
|
||||||
return height-32-(Math.abs(start-end)/2)//height-30
|
|
||||||
})
|
|
||||||
.text(function(d){ return(`${d.weight}`)})
|
|
||||||
.style("text-anchor", "top")
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function DrawGraph({list, quantitativeComparisons, isListOrdered}) {
|
export function DrawGraph({list, quantitativeComparisons, isListOrdered}) {
|
||||||
// list is just an array
|
|
||||||
// arrows is an array of arrows
|
|
||||||
|
|
||||||
if(isListOrdered){
|
if(isListOrdered){
|
||||||
drawGraphInner(list, quantitativeComparisons);
|
drawGraphInner(list, quantitativeComparisons);
|
||||||
|
|
|
||||||
58
package-lock.json
generated
58
package-lock.json
generated
|
|
@ -8,7 +8,9 @@
|
||||||
"version": "0.2.0",
|
"version": "0.2.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"d3": "^6.7.0",
|
"d3": "^6.7.0",
|
||||||
|
"fs": "^0.0.1-security",
|
||||||
"next": "latest",
|
"next": "latest",
|
||||||
|
"path": "^0.12.7",
|
||||||
"react": "^17.0.1",
|
"react": "^17.0.1",
|
||||||
"react-compound-slider": "^3.3.1",
|
"react-compound-slider": "^3.3.1",
|
||||||
"react-dom": "^17.0.1"
|
"react-dom": "^17.0.1"
|
||||||
|
|
@ -1496,6 +1498,11 @@
|
||||||
"url": "https://www.patreon.com/infusion"
|
"url": "https://www.patreon.com/infusion"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/fs": {
|
||||||
|
"version": "0.0.1-security",
|
||||||
|
"resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz",
|
||||||
|
"integrity": "sha1-invTcYa23d84E/I4WLV+yq9eQdQ="
|
||||||
|
},
|
||||||
"node_modules/fs-extra": {
|
"node_modules/fs-extra": {
|
||||||
"version": "9.1.0",
|
"version": "9.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
|
||||||
|
|
@ -2743,6 +2750,15 @@
|
||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/path": {
|
||||||
|
"version": "0.12.7",
|
||||||
|
"resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz",
|
||||||
|
"integrity": "sha1-1NwqUGxM4hl+tIHr/NWzbAFAsQ8=",
|
||||||
|
"dependencies": {
|
||||||
|
"process": "^0.11.1",
|
||||||
|
"util": "^0.10.3"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/path-browserify": {
|
"node_modules/path-browserify": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
|
||||||
|
|
@ -2771,6 +2787,19 @@
|
||||||
"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
|
"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/path/node_modules/inherits": {
|
||||||
|
"version": "2.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
|
||||||
|
"integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
|
||||||
|
},
|
||||||
|
"node_modules/path/node_modules/util": {
|
||||||
|
"version": "0.10.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
|
||||||
|
"integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==",
|
||||||
|
"dependencies": {
|
||||||
|
"inherits": "2.0.3"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/pbkdf2": {
|
"node_modules/pbkdf2": {
|
||||||
"version": "3.1.2",
|
"version": "3.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.2.tgz",
|
||||||
|
|
@ -5117,6 +5146,11 @@
|
||||||
"integrity": "sha512-MHOhvvxHTfRFpF1geTK9czMIZ6xclsEor2wkIGYYq+PxcQqT7vStJqjhe6S1TenZrMZzo+wlqOufBDVepUEgPg==",
|
"integrity": "sha512-MHOhvvxHTfRFpF1geTK9czMIZ6xclsEor2wkIGYYq+PxcQqT7vStJqjhe6S1TenZrMZzo+wlqOufBDVepUEgPg==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"fs": {
|
||||||
|
"version": "0.0.1-security",
|
||||||
|
"resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz",
|
||||||
|
"integrity": "sha1-invTcYa23d84E/I4WLV+yq9eQdQ="
|
||||||
|
},
|
||||||
"fs-extra": {
|
"fs-extra": {
|
||||||
"version": "9.1.0",
|
"version": "9.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
|
||||||
|
|
@ -6065,6 +6099,30 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"path": {
|
||||||
|
"version": "0.12.7",
|
||||||
|
"resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz",
|
||||||
|
"integrity": "sha1-1NwqUGxM4hl+tIHr/NWzbAFAsQ8=",
|
||||||
|
"requires": {
|
||||||
|
"process": "^0.11.1",
|
||||||
|
"util": "^0.10.3"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"inherits": {
|
||||||
|
"version": "2.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
|
||||||
|
"integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
|
||||||
|
},
|
||||||
|
"util": {
|
||||||
|
"version": "0.10.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
|
||||||
|
"integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==",
|
||||||
|
"requires": {
|
||||||
|
"inherits": "2.0.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"path-browserify": {
|
"path-browserify": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,9 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"d3": "^6.7.0",
|
"d3": "^6.7.0",
|
||||||
|
"fs": "^0.0.1-security",
|
||||||
"next": "latest",
|
"next": "latest",
|
||||||
|
"path": "^0.12.7",
|
||||||
"react": "^17.0.1",
|
"react": "^17.0.1",
|
||||||
"react-compound-slider": "^3.3.1",
|
"react-compound-slider": "^3.3.1",
|
||||||
"react-dom": "^17.0.1"
|
"react-dom": "^17.0.1"
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,14 @@
|
||||||
import Head from 'next/head'
|
import Head from 'next/head'
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
|
import fs from 'fs';
|
||||||
|
import path from 'path';
|
||||||
import {DrawGraph} from '../lib/labeledgraph';
|
import {DrawGraph} from '../lib/labeledgraph';
|
||||||
import { SliderElement } from "../lib/slider.js";
|
import { SliderElement } from "../lib/slider.js";
|
||||||
|
import {DisplayElement} from '../lib/displayElement'
|
||||||
// Utilities
|
// Utilities
|
||||||
|
|
||||||
|
let increasingList = (n) => Array.from(Array(n).keys())
|
||||||
|
|
||||||
Array.prototype.containsArray = function(val) {
|
Array.prototype.containsArray = function(val) {
|
||||||
var hash = {};
|
var hash = {};
|
||||||
for(var i=0; i<this.length; i++) {
|
for(var i=0; i<this.length; i++) {
|
||||||
|
|
@ -35,11 +40,26 @@ let displayFunctionSlider = (value) => {
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// data
|
||||||
|
export async function getStaticProps() {
|
||||||
|
//getServerSideProps
|
||||||
|
// const { metaforecasts } = await getForecasts();
|
||||||
|
const directory = path.join(process.cwd(),"pages")
|
||||||
|
let listOfPosts = JSON.parse(fs.readFileSync(path.join(directory, 'listOfPosts.json'), 'utf8'));
|
||||||
|
console.log(directory)
|
||||||
|
//console.log("metaforecasts", metaforecasts)
|
||||||
|
return {
|
||||||
|
props: {
|
||||||
|
listOfPosts,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
// Main
|
// Main
|
||||||
export default function Home() {
|
export default function Home({listOfPosts}) {
|
||||||
// State
|
// State
|
||||||
let list = [1,2,3,4,5,6,7,8,9,10]
|
let list = increasingList(listOfPosts.length)//[1,2,3,4,5,6,7,8,9,10]
|
||||||
// let initialComparisonPair = [9,10]
|
|
||||||
const [toComparePair, setToComparePair] = useState([list[list.length-2], list[list.length-1]])
|
const [toComparePair, setToComparePair] = useState([list[list.length-2], list[list.length-1]])
|
||||||
const [binaryComparisons, setBinaryComparisons] = useState([])
|
const [binaryComparisons, setBinaryComparisons] = useState([])
|
||||||
|
|
||||||
|
|
@ -49,7 +69,6 @@ export default function Home() {
|
||||||
const [isListOrdered, setIsListOrdered] = useState(false)
|
const [isListOrdered, setIsListOrdered] = useState(false)
|
||||||
const [orderedList, setOrderedList] = useState([])
|
const [orderedList, setOrderedList] = useState([])
|
||||||
|
|
||||||
|
|
||||||
// Manipulations
|
// Manipulations
|
||||||
let compareTwoElements = (newBinaryComparisons, element1, element2) => {
|
let compareTwoElements = (newBinaryComparisons, element1, element2) => {
|
||||||
let element1Greater = newBinaryComparisons.containsArray([element1, element2])
|
let element1Greater = newBinaryComparisons.containsArray([element1, element2])
|
||||||
|
|
@ -162,13 +181,19 @@ export default function Home() {
|
||||||
className="flex m-auto border-gray-300 border-4 h-64 w-64"
|
className="flex m-auto border-gray-300 border-4 h-64 w-64"
|
||||||
//onClick={() => nextStep(binaryComparisons, toComparePair[0], toComparePair[1])}
|
//onClick={() => nextStep(binaryComparisons, toComparePair[0], toComparePair[1])}
|
||||||
>
|
>
|
||||||
<p className="block m-auto text-center">{toComparePair[0]}</p>
|
<p className="block m-auto text-center">
|
||||||
|
<DisplayElement element={listOfPosts[toComparePair[0]]}>
|
||||||
|
</DisplayElement>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="flex m-auto border-gray-300 border-4 h-64 w-64"
|
className="flex m-auto border-gray-300 border-4 h-64 w-64"
|
||||||
//onClick={() => nextStep(binaryComparisons, toComparePair[1], toComparePair[0])}
|
//onClick={() => nextStep(binaryComparisons, toComparePair[1], toComparePair[0])}
|
||||||
>
|
>
|
||||||
<p className="block m-auto text-center">{toComparePair[1]}</p>
|
<p className="block m-auto text-center">
|
||||||
|
<DisplayElement element={listOfPosts[toComparePair[1]]}>
|
||||||
|
</DisplayElement>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className={`flex row-start-3 row-end-3 col-start-1 col-end-4 md:col-start-3 md:col-end-3 md:row-start-1 md:row-end-1 lg:col-start-3 lg:col-end-3 lg:row-start-1 lg:row-end-1 items-center justify-center mb-4 mt-10 ${isListOrdered? "hidden" : ""}`}>
|
<div className={`flex row-start-3 row-end-3 col-start-1 col-end-4 md:col-start-3 md:col-end-3 md:row-start-1 md:row-end-1 lg:col-start-3 lg:col-end-3 lg:row-start-1 lg:row-end-1 items-center justify-center mb-4 mt-10 ${isListOrdered? "hidden" : ""}`}>
|
||||||
|
|
|
||||||
52
pages/listOfPosts.json
Normal file
52
pages/listOfPosts.json
Normal file
|
|
@ -0,0 +1,52 @@
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"id": "0",
|
||||||
|
"name": "Relative Impact of the First 10 EA Forum Prize Winners",
|
||||||
|
"url": "https://forum.effectivealtruism.org/posts/pqphZhx2nJocGCpwc/relative-impact-of-the-first-10-ea-forum-prize-winners"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "1",
|
||||||
|
"name": "Introducing Metaforecast: A Forecast Aggregator and Search Tool",
|
||||||
|
"url": "https://forum.effectivealtruism.org/posts/tEo5oXeSNcB3sYr8m/introducing-metaforecast-a-forecast-aggregator-and-search"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "2",
|
||||||
|
"name": "Forecasting Prize Results",
|
||||||
|
"url": "https://forum.effectivealtruism.org/posts/8QFWHzmur4roAcnCf/forecasting-prize-results"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "3",
|
||||||
|
"name": "A Funnel for Cause Candidates",
|
||||||
|
"url": "https://forum.effectivealtruism.org/posts/iRA4Dd2bfX9nukSo3/a-funnel-for-cause-candidates"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "4",
|
||||||
|
"name": "2020: Forecasting in Review",
|
||||||
|
"url": "https://forum.effectivealtruism.org/posts/8shCj2eoQygQvtoZP/2020-forecasting-in-review"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "5",
|
||||||
|
"name": "Big List of Cause Candidates",
|
||||||
|
"url": "https://forum.effectivealtruism.org/posts/SCqRu6shoa8ySvRAa/big-list-of-cause-candidates"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "6",
|
||||||
|
"name": "An experiment to evaluate the value of one researcher's work",
|
||||||
|
"url": "https://forum.effectivealtruism.org/posts/udGBF8YWshCKwRKTp/an-experiment-to-evaluate-the-value-of-one-researcher-s-work"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "7",
|
||||||
|
"name": "Predicting the Value of Small Altruistic Projects: A Proof of Concept Experiment",
|
||||||
|
"url": "https://forum.effectivealtruism.org/posts/qb56nicbnj9asSemx/predicting-the-value-of-small-altruistic-projects-a-proof-of"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "8",
|
||||||
|
"name": "Incentive Problems With Current Forecasting Competitions",
|
||||||
|
"url": "https://forum.effectivealtruism.org/posts/ztmBA8v6KvGChxw92/incentive-problems-with-current-forecasting-competitions"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "9",
|
||||||
|
"name": "Shapley Values: Better Than Counterfactuals",
|
||||||
|
"url": "https://forum.effectivealtruism.org/posts/XHZJ9i7QBtAJZ6byW/shapley-values-better-than-counterfactuals"
|
||||||
|
}
|
||||||
|
]
|
||||||
Loading…
Reference in New Issue
Block a user