feat: Cleaned up display, added research comparisons

This commit is contained in:
NunoSempere 2021-10-06 13:00:09 +02:00
parent 9fc500bb20
commit 7c97a67a7b
6 changed files with 428 additions and 7 deletions

View File

@ -76,12 +76,12 @@ function Track({ source, target, getTrackProps }) {
/* Body */
// Two functions, essentially identical.
export function SliderElement({ onChange, value, displayFunction }) {
export function SliderElement({ onChange, value, displayFunction, domain }) {
let toLogDomain = (arr) => [Math.log(arr[0])/Math.log(10), Math.log(arr[1])/Math.log(10)]
return (
<Slider
rootStyle={sliderStyle /* inline styles for the outer div. Can also use className prop. */}
domain={toLogDomain([1/250,250])}
domain={toLogDomain([1/domain,domain])}
values={[value]}
step={0.0001}
onChange={onChange}

View File

@ -1,3 +1,8 @@
/* Definitions */
const elementsDocument = 'listOfMoralGoods.json'
const domain = 250
/* Imports */
import Head from 'next/head'
import React, { useState } from "react";
import fs from 'fs';
@ -10,6 +15,7 @@ import { CreateTableWithDistances } from '../lib/findPaths'
import { TextAreaForJson } from "../lib/textAreaForJson"
import { pushToMongo } from "../lib/pushToMongo.js"
/* Helpers */
let increasingList = (n) => Array.from(Array(n).keys())
let buildLinks = quantitativeComparisons => quantitativeComparisons.map(([element1, element2, distance]) => ({ source: element1, target: element2, distance: distance }))
@ -31,15 +37,16 @@ let checkIfListIsOrdered = (arr, binaryComparisons) => {
}
let transformSliderValueToActualValue = value => 10 ** value //>= 2 ? Math.round(10 ** value) : Math.round(10 * 10 ** value) / 10
let truncateValueForDisplay = value => value > 10 ? Math.round(value) : Math.round(value * 10) / 10
let toLocale = x => Number(x).toLocaleString()
let truncateValueForDisplay = value => value > 10 ? Number(Math.round(value)).toPrecision(2) : Math.round(value * 10) / 10
let transformSliderValueToPracticalValue = value => truncateValueForDisplay(transformSliderValueToActualValue(value))
let displayFunctionSlider = (value) => {
let result
if (value >= 0) {
result = transformSliderValueToPracticalValue(value)
result = toLocale(transformSliderValueToPracticalValue(value))
} else {
let inverseresult = transformSliderValueToPracticalValue(-value)
let inverseresult = toLocale(transformSliderValueToPracticalValue(-value))
result = `1/${inverseresult}`
}
result = `The first option is ${result}x as valuable as the second one`
@ -55,12 +62,12 @@ export async function getStaticProps() {
//getServerSideProps
// const { metaforecasts } = await getForecasts();
const directory = path.join(process.cwd(), "pages")
let listOfMoralGoods = JSON.parse(fs.readFileSync(path.join(directory, 'listOfMoralGoods.json'), 'utf8'));
let listOfElementsDefault = JSON.parse(fs.readFileSync(path.join(directory, elementsDocument), 'utf8'));
//console.log(directory)
//console.log("metaforecasts", metaforecasts)
return {
props: {
listOfElementsDefault: listOfMoralGoods,
listOfElementsDefault
},
};
}
@ -271,6 +278,7 @@ export default function Home({ listOfElementsDefault }) {
onChange={(event) => (setSliderValue(event[0]))}
value={sliderValue}
displayFunction={displayFunctionSlider}
domain={domain}
/>
</div>
<SubmitSliderButton

View File

@ -0,0 +1,39 @@
[
{
"name": "A comment on setting up a charity",
"url": "https://forum.effectivealtruism.org/posts/3PjNiLLkCMzAN2BSz/when-setting-up-a-charity-should-you-employ-a-lawyer?commentId=YNKNcp6nKqxqkZgCu"
},
{
"name": "Extinguishing or preventing coal seam fires is a potential cause area",
"url": "https://forum.effectivealtruism.org/posts/2nrx8GdtobScoAZF8/extinguishing-or-preventing-coal-seam-fires-is-a-potential"
},
{
"name": "Shallow evaluations of longtermist organizations",
"url": "https://forum.effectivealtruism.org/posts/xmmqDdGqNZq5RELer/shallow-evaluations-of-longtermist-organizations"
},
{
"name": "Categorizing Variants of Goodhart's Law",
"url": "https://arxiv.org/abs/1803.04585"
},
{
"name": "The Vulnerable World Hypothesis",
"url": "https://nickbostrom.com/papers/vulnerable.pdf"
},
{
"name": "The Global Priorities Institute's Research Agenda",
"url": "https://globalprioritiesinstitute.org/research-agenda/"
},
{
"name": "Superintelligence",
"url": "https://en.wikipedia.org/wiki/Superintelligence%3A_Paths%2C_Dangers%2C_Strategies"
},
{
"name": "Thinking Fast and Slow",
"url": "https://en.wikipedia.org/wiki/Thinking%2C_Fast_and_Slow"
},
{
"name": "The Mathematical Theory of Communication",
"url": "https://en.wikipedia.org/wiki/A_Mathematical_Theory_of_Communication"
}
]

374
pages/research.js Normal file
View File

@ -0,0 +1,374 @@
/*
This is just a copy of index.js but with the constants changed.
Don't edit this file, but rather make changes at index.js
And copy them over here.
*/
/* Definitions */
const elementsDocument = 'listOfResearchOutputs.json'
const domain = 10**7
/* Imports */
import Head from 'next/head'
import React, { useState } from "react";
import fs from 'fs';
import path from 'path';
import { DrawGraph, removeOldSvg } from '../lib/labeledgraph';
import { SliderElement, SubmitSliderButton } from "../lib/slider";
import { DisplayElement } from '../lib/displayElement'
import { DisplayAsMarkdown } from '../lib/displayAsMarkdown'
import { CreateTableWithDistances } from '../lib/findPaths'
import { TextAreaForJson } from "../lib/textAreaForJson"
import { pushToMongo } from "../lib/pushToMongo.js"
/* Helpers */
let increasingList = (n) => Array.from(Array(n).keys())
let buildLinks = quantitativeComparisons => quantitativeComparisons.map(([element1, element2, distance]) => ({ source: element1, target: element2, distance: distance }))
Array.prototype.containsArray = function (val) {
var hash = {};
for (var i = 0; i < this.length; i++) {
hash[this[i]] = i;
}
return hash.hasOwnProperty(val);
}
let checkIfListIsOrdered = (arr, binaryComparisons) => {
let l = arr.length
let isOrdered = true
for (let i = 0; i < l - 1; i++) {
isOrdered = isOrdered && binaryComparisons.containsArray([arr[i], arr[i + 1]])
}
return isOrdered
}
let transformSliderValueToActualValue = value => 10 ** value //>= 2 ? Math.round(10 ** value) : Math.round(10 * 10 ** value) / 10
let toLocale = x => Number(x).toLocaleString()
let truncateValueForDisplay = value => value > 10 ? Number(Math.round(value)).toPrecision(2) : Math.round(value * 10) / 10
let transformSliderValueToPracticalValue = value => truncateValueForDisplay(transformSliderValueToActualValue(value))
let displayFunctionSlider = (value) => {
let result
if (value >= 0) {
result = toLocale(transformSliderValueToPracticalValue(value))
} else {
let inverseresult = toLocale(transformSliderValueToPracticalValue(-value))
result = `1/${inverseresult}`
}
result = `The first option is ${result}x as valuable as the second one`
return result
};
let nicelyFormatLinks = (quantitativeComparisons, listOfElements) => quantitativeComparisons.map(([element1, element2, distance]) => ({ source: listOfElements[element1].name, target: listOfElements[element2].name, distance: distance }))
/* React components */
// fs can only be used here.
export async function getStaticProps() {
//getServerSideProps
// const { metaforecasts } = await getForecasts();
const directory = path.join(process.cwd(), "pages")
let listOfElementsDefault = JSON.parse(fs.readFileSync(path.join(directory, elementsDocument), 'utf8'));
//console.log(directory)
//console.log("metaforecasts", metaforecasts)
return {
props: {
listOfElementsDefault
},
};
}
// Main react component
export default function Home({ listOfElementsDefault }) {
// State
let initialListOfElements = listOfElementsDefault.map((element, i) => ({ ...element, id: i }))
let initialPosList = increasingList(listOfElementsDefault.length) // [0,1,2,3,4]
//let listOfElements = listOfElementsDefault.map((element, i) => ({...element, id: i}))
//let list = increasingList(listOfElementsDefault.length) // [0,1,2,3,4]
//let initialComparePair = [list[list.length-2], list[list.length-1]]
let initialComparePair = [initialPosList[initialPosList.length - 2], initialPosList[initialPosList.length - 1]]
let initialSliderValue = 0
let initialBinaryComparisons = []
let initialQuantitativeComparisons = []
let initialIsListOdered = false
let initialOrderedList = []
let initialShowAdvancedOptions = false
let initialShowComparisons = false
let initialShowChangeDataSet = false
const [listOfElements, setListOfElements] = useState(initialListOfElements)
const [posList, setPosList] = useState(initialPosList)
//const posList = initialPosList
// let listOfElements = initialListOfElements
const [toComparePair, setToComparePair] = useState(initialComparePair)
const [sliderValue, setSliderValue] = useState(initialSliderValue)
const [binaryComparisons, setBinaryComparisons] = useState(initialBinaryComparisons)
const [quantitativeComparisons, setQuantitativeComparisons] = useState(initialQuantitativeComparisons) // More expressive, but more laborious to search through. For the ordering step, I only manipulate the binaryComparisons.
const [isListOrdered, setIsListOrdered] = useState(initialIsListOdered)
const [orderedList, setOrderedList] = useState(initialOrderedList)
let [showAdvancedOptions, changeShowAdvanceOptions] = useState(initialShowAdvancedOptions);
let [showComparisons, changeShowComparisons] = useState(initialShowComparisons);
let [showChangeDataSet, changeshowChangeDataSet] = useState(initialShowChangeDataSet);
let restart = (posList) => {
setToComparePair([posList[posList.length - 2], posList[posList.length - 1]])
setSliderValue(initialSliderValue)
setBinaryComparisons(initialBinaryComparisons)
setQuantitativeComparisons(initialQuantitativeComparisons)
setIsListOrdered(initialIsListOdered)
setOrderedList(initialOrderedList)
removeOldSvg()
}
let changeDataSet = (listOfElementsNew) => {
listOfElementsNew =
listOfElementsNew.map((element, i) => ({ ...element, id: i }))
let newPosList = increasingList(listOfElementsNew.length)
setListOfElements(listOfElementsNew)
setPosList(increasingList(listOfElementsNew.length))
setToComparePair([newPosList[newPosList.length - 2], newPosList[newPosList.length - 1]])
restart(newPosList)
}
// Manipulations
let compareTwoElements = (newBinaryComparisons, element1, element2) => {
let element1Greater = newBinaryComparisons.containsArray([element1, element2])
let element2Greater = newBinaryComparisons.containsArray([element2, element1])
if (element1Greater || element2Greater) {
return element1Greater && !element2Greater
} else {
setToComparePair([element1, element2])
//console.log(`No comparison found between ${element1} and ${element2}`)
//console.log(`Comparisons:`)
//console.log(JSON.stringify(newBinaryComparisons, null, 4));
return "No comparison found"
}
}
function merge(newBinaryComparisons, left, right) {
let sortedArr = []; // the sorted elements will go here
while (left.length && right.length) {
// insert the biggest element to the sortedArr
let comparison = compareTwoElements(newBinaryComparisons, left[0], right[0])
if (comparison == "No comparison found") {
return "No comparison found; unable to proceed"
}
else if (comparison) { // left[0] > right[0]
sortedArr.push(left.shift());
} else {
sortedArr.push(right.shift());
}
}
// use spread operator and create a new array, combining the three arrays
return [...sortedArr, ...left, ...right]; // if they don't have the same size, the remaining ones will be greater than the ones before
}
function mergeSort({ array, comparisons }) {
if (array == "No comparison found; unable to proceed") {
return "No comparison found; unable to proceed"
}
const half = array.length / 2;
// the base case is array length <=1
if (array.length <= 1) {
return array;
}
const left = array.slice(0, half); // the first half of the array
const right = array.slice(half, array.length) // Note that splice is destructive.
let orderedFirstHalf = mergeSort({ array: left, comparisons })
let orderedSecondHalf = mergeSort({ array: right, comparisons })
if (orderedFirstHalf != "No comparison found; unable to proceed" && orderedSecondHalf != "No comparison found; unable to proceed") {
let result = merge(comparisons, orderedFirstHalf, orderedSecondHalf);
return result
} else {
return "No comparison found; unable to proceed"
}
}
let nextStepSimple = (posList, binaryComparisons, element1, element2) => {
//console.log("Binary comparisons: ")
//console.log(JSON.stringify(binaryComparisons, null, 4));
let newComparison = [element1, element2] // [element1, element2]
let newBinaryComparisons = [...binaryComparisons, newComparison]
//console.log("New binaryComparisons: ")
//console.log(JSON.stringify(newBinaryComparisons, null, 4));
setBinaryComparisons(newBinaryComparisons)
let result = mergeSort({ array: posList, comparisons: newBinaryComparisons })
//console.log(result)
if (result != "No comparison found; unable to proceed" && checkIfListIsOrdered(result, newBinaryComparisons)) {
// console.log(`isListOrdered: ${isListOrdered}`)
console.log("poslist@nextStepSimple")
console.log(posList)
console.log("result@nextStepSimple")
console.log(result)
setIsListOrdered(true)
setOrderedList(result)
return true
} else {
return false
}
}
let nextStepSlider = ({ posList, binaryComparisons, sliderValue, element1, element2 }) => {
if (sliderValue < 0) {
sliderValue = -sliderValue;
[element1, element2] = [element2, element1]
}
console.log(`posList@nextStepSlider:`)
console.log(posList)
let successStatus = nextStepSimple(posList, binaryComparisons, element1, element2)
let newQuantitativeComparison = [element1, element2, transformSliderValueToPracticalValue(sliderValue)]
let newQuantitativeComparisons = [...quantitativeComparisons, newQuantitativeComparison]
setQuantitativeComparisons(newQuantitativeComparisons)
setSliderValue(0)
if (successStatus) {
let jsObject = nicelyFormatLinks(quantitativeComparisons, listOfElements)
pushToMongo(jsObject)
console.log(jsObject)
}
}
// Html
return (
<div className="flex flex-col items-center justify-center min-h-screen py-2">
<div className="mt-20">
<Head >
<title>Utility Function Extractor</title>
<link rel="icon" href="/favicon.ico" />
</Head>
</div>
<main className="flex flex-col items-center w-full flex-1 px-20 text-center">
<h1 className="text-6xl font-bold">
Utility Function Extractor
</h1>
<div className={`${isListOrdered ? "hidden" : ""}`}>
<div className="flex flex-wrap items-center max-w-4xl sm:w-full mt-10">
<div
className="flex m-auto border-gray-300 border-4 h-72 w-72 p-5"
//onClick={() => nextStep(binaryComparisons, toComparePair[0], toComparePair[1])}
>
<div className="block m-auto text-center">
<DisplayElement element={listOfElements[toComparePair[0]]}>
</DisplayElement>
</div>
</div>
<div
className="flex m-auto border-gray-300 border-4 h-72 w-72 p-5"
//onClick={() => nextStep(binaryComparisons, toComparePair[1], toComparePair[0])}
>
<div className="block m-auto text-center">
<DisplayElement element={listOfElements[toComparePair[1]]}>
</DisplayElement>
</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" : ""}`}>
<SliderElement
className="flex items-center justify-center"
onChange={(event) => (setSliderValue(event[0]))}
value={sliderValue}
displayFunction={displayFunctionSlider}
domain={domain}
/>
</div>
<SubmitSliderButton
posList={posList}
binaryComparisons={binaryComparisons}
sliderValue={sliderValue}
toComparePair={toComparePair}
nextStepSlider={nextStepSlider}
/>
</div>
<DrawGraph
isListOrdered={isListOrdered}
orderedList={orderedList}
listOfElements={listOfElements}
links={buildLinks(quantitativeComparisons)}>
</DrawGraph>
<div className={`inline items-center text-center mt-10 ${isListOrdered ? "" : "hidden"}`}>
<CreateTableWithDistances
isListOrdered={isListOrdered}
orderedList={orderedList}
listOfElements={listOfElements}
links={buildLinks(quantitativeComparisons)}
>
</CreateTableWithDistances>
</div>
<div className="w-2/12 flex justify-center mt-10">
<button
className="text-gray-500 text-sm"
onClick={() => changeShowAdvanceOptions(!showAdvancedOptions)}
>
Advanced options
</button>
</div>
<div className={`flex flex-wrap -mx-4 overflow-hidden ${showAdvancedOptions ? "" : "hidden"}`}>
<div className="my-4 px-4 w-1/3 overflow-hidden">
<button
className="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded mt-5"
onClick={() => restart(posList)}>
Restart
</button>
</div>
<div className="my-4 px-4 w-1/3 overflow-hidden">
<button
className="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded mt-5"
onClick={() => changeShowComparisons(!showComparisons)}>
Show comparisons
</button>
</div>
<div className="my-4 px-4 w-1/3 overflow-hidden">
<button
className="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded mt-5"
onClick={() => changeshowChangeDataSet(!showChangeDataSet)}>
Use your own data
</button>
</div>
</div>
<div className={`inline mt-5 ${showChangeDataSet ? "" : "hidden"}`}>
<TextAreaForJson handleSubmit={changeDataSet} />
</div>
<div className={`inline mt-5 ${showComparisons ? "" : "hidden"}`}>
{/*
<DisplayAsMarkdown markdowntext={"## Ordered list\n\n" + JSON.stringify(orderedList.map(i => listOfElements[i]), null, 4)}></DisplayAsMarkdown>
*/}
<h2>Comparisons</h2>
<div className="text-left">
<DisplayAsMarkdown
markdowntext={JSON.stringify(nicelyFormatLinks(quantitativeComparisons, listOfElements), null, 4)}
className={""}>
</DisplayAsMarkdown>
</div>
{/*
<p>{`Binary comparisons: ${JSON.stringify(binaryComparisons, null, 4)}`}</p>
<p>{`Quantitative comparisons: ${JSON.stringify(quantitativeComparisons, null, 4)}`}</p>
*/}
</div>
</main>
</div>
)
}