quantified.uncertainty/hierarchical-estimates-visualizer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Added reasoning field

Browse Source
This commit is contained in:
NunoSempere 2021-11-25 11:58:50 +00:00
parent 519b5da763
commit dc0af5902d
3 changed files with 31 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
lib/slider.js
View File

@ -125,11 +125,11 @@ export function SliderElement({ onChange, value, displayFunction, domain }) {
) )
} }
export function SubmitSliderButton({ posList, binaryComparisons, sliderValue, toComparePair, nextStepSlider }) { export function SubmitSliderButton({ posList, binaryComparisons, sliderValue, reasoning, toComparePair, nextStepSlider }) {
// This element didn't necessarily have to exist, but it made it easier for debugging purposes // This element didn't necessarily have to exist, but it made it easier for debugging purposes
let onClick = (event) => { let onClick = (event) => {
//event.preventDefault(); //event.preventDefault();
let obj = { posList, binaryComparisons, sliderValue, element1: toComparePair[1], element2: toComparePair[0] } let obj = { posList, binaryComparisons, sliderValue, reasoning, element1: toComparePair[1], element2: toComparePair[0] }
// //
console.log("input@SubmitSliderButton") console.log("input@SubmitSliderButton")
console.log(obj) console.log(obj)

18
pages/index.js
View File

@ -18,7 +18,7 @@ import { toLocale, transformSliderValueToPracticalValue, transformSliderValueToA
/* Helpers */ /* Helpers */
let increasingList = (n) => Array.from(Array(n).keys()) let increasingList = (n) => Array.from(Array(n).keys())
let buildLinks = quantitativeComparisons => quantitativeComparisons.map(([element1, element2, distance]) => ({ source: element1, target: element2, distance: distance })) let buildLinks = quantitativeComparisons => quantitativeComparisons.map(([element1, element2, distance, reasoning]) => ({ source: element1, target: element2, distance: distance, reasoning: reasoning }))
Array.prototype.containsArray = function (val) { Array.prototype.containsArray = function (val) {
var hash = {}; var hash = {};
@ -59,7 +59,7 @@ let displayFunctionSlider = (value) => {
}; };
let nicelyFormatLinks = (quantitativeComparisons, listOfElements) => quantitativeComparisons.map(([element1, element2, distance]) => ({ source: listOfElements[element1].name, target: listOfElements[element2].name, distance: distance })) let nicelyFormatLinks = (quantitativeComparisons, listOfElements) => quantitativeComparisons.map(([element1, element2, distance, reasoning]) => ({ source: listOfElements[element1].name, target: listOfElements[element2].name, distance: distance, reasoning: reasoning }))
/* React components */ /* React components */
// fs can only be used here. // fs can only be used here.
@ -88,6 +88,7 @@ export default function Home({ listOfElementsDefault }) {
//let initialComparePair = [list[list.length-2], list[list.length-1]] //let initialComparePair = [list[list.length-2], list[list.length-1]]
let initialComparePair = [initialPosList[initialPosList.length - 2], initialPosList[initialPosList.length - 1]] let initialComparePair = [initialPosList[initialPosList.length - 2], initialPosList[initialPosList.length - 1]]
let initialSliderValue = 1 let initialSliderValue = 1
let initialReasoning = ''
let initialBinaryComparisons = [] let initialBinaryComparisons = []
let initialQuantitativeComparisons = [] let initialQuantitativeComparisons = []
let initialIsListOdered = false let initialIsListOdered = false
@ -103,6 +104,7 @@ export default function Home({ listOfElementsDefault }) {
const [toComparePair, setToComparePair] = useState(initialComparePair) const [toComparePair, setToComparePair] = useState(initialComparePair)
const [sliderValue, setSliderValue] = useState(initialSliderValue) const [sliderValue, setSliderValue] = useState(initialSliderValue)
const [reasoning, setReasoning] = useState(initialReasoning)
const [binaryComparisons, setBinaryComparisons] = useState(initialBinaryComparisons) 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 [quantitativeComparisons, setQuantitativeComparisons] = useState(initialQuantitativeComparisons) // More expressive, but more laborious to search through. For the ordering step, I only manipulate the binaryComparisons.
@ -220,7 +222,7 @@ export default function Home({ listOfElementsDefault }) {
} }
} }
let nextStepSlider = ({ posList, binaryComparisons, sliderValue, element1, element2 }) => { let nextStepSlider = ({ posList, binaryComparisons, sliderValue, Reasoning, element1, element2 }) => {
if (sliderValue < 1 && sliderValue > 0) { if (sliderValue < 1 && sliderValue > 0) {
sliderValue = 1/sliderValue; sliderValue = 1/sliderValue;
[element1, element2] = [element2, element1] [element1, element2] = [element2, element1]
@ -229,11 +231,12 @@ export default function Home({ listOfElementsDefault }) {
console.log(posList) console.log(posList)
let successStatus = nextStepSimple(posList, binaryComparisons, element1, element2) let successStatus = nextStepSimple(posList, binaryComparisons, element1, element2)
let newQuantitativeComparison = [element1, element2, transformSliderValueToActualValue(sliderValue)] let newQuantitativeComparison = [element1, element2, transformSliderValueToActualValue(sliderValue), reasoning]
let newQuantitativeComparisons = [...quantitativeComparisons, newQuantitativeComparison] let newQuantitativeComparisons = [...quantitativeComparisons, newQuantitativeComparison]
setQuantitativeComparisons(newQuantitativeComparisons) setQuantitativeComparisons(newQuantitativeComparisons)
setSliderValue(1) setSliderValue(1)
setReasoning('')
if (successStatus) { if (successStatus) {
let jsObject = nicelyFormatLinks(quantitativeComparisons, listOfElements) let jsObject = nicelyFormatLinks(quantitativeComparisons, listOfElements)
pushToMongo(jsObject) pushToMongo(jsObject)
@ -290,12 +293,19 @@ export default function Home({ listOfElementsDefault }) {
{`times as valuable as ...`} {`times as valuable as ...`}
</label> </label>
<br /> <br />
<br />
<label>
Reasoning:
<textarea value={reasoning} onChange={(event) => setReasoning(event.target.value)} />
</label>
<br />
<SubmitSliderButton <SubmitSliderButton
posList={posList} posList={posList}
binaryComparisons={binaryComparisons} binaryComparisons={binaryComparisons}
sliderValue={sliderValue} sliderValue={sliderValue}
reasoning={reasoning}
toComparePair={toComparePair} toComparePair={toComparePair}
nextStepSlider={nextStepSlider} nextStepSlider={nextStepSlider}
/> />

18
pages/research.js
View File

@ -25,7 +25,7 @@ import { toLocale, transformSliderValueToPracticalValue, transformSliderValueToA
/* Helpers */ /* Helpers */
let increasingList = (n) => Array.from(Array(n).keys()) let increasingList = (n) => Array.from(Array(n).keys())
let buildLinks = quantitativeComparisons => quantitativeComparisons.map(([element1, element2, distance]) => ({ source: element1, target: element2, distance: distance })) let buildLinks = quantitativeComparisons => quantitativeComparisons.map(([element1, element2, distance, reasoning]) => ({ source: element1, target: element2, distance: distance, reasoning: reasoning }))
Array.prototype.containsArray = function (val) { Array.prototype.containsArray = function (val) {
var hash = {}; var hash = {};
@ -66,7 +66,7 @@ let displayFunctionSlider = (value) => {
}; };
let nicelyFormatLinks = (quantitativeComparisons, listOfElements) => quantitativeComparisons.map(([element1, element2, distance]) => ({ source: listOfElements[element1].name, target: listOfElements[element2].name, distance: distance })) let nicelyFormatLinks = (quantitativeComparisons, listOfElements) => quantitativeComparisons.map(([element1, element2, distance, reasoning]) => ({ source: listOfElements[element1].name, target: listOfElements[element2].name, distance: distance, reasoning: reasoning }))
/* React components */ /* React components */
// fs can only be used here. // fs can only be used here.
@ -95,6 +95,7 @@ export default function Home({ listOfElementsDefault }) {
//let initialComparePair = [list[list.length-2], list[list.length-1]] //let initialComparePair = [list[list.length-2], list[list.length-1]]
let initialComparePair = [initialPosList[initialPosList.length - 2], initialPosList[initialPosList.length - 1]] let initialComparePair = [initialPosList[initialPosList.length - 2], initialPosList[initialPosList.length - 1]]
let initialSliderValue = 1 let initialSliderValue = 1
let initialReasoning = ''
let initialBinaryComparisons = [] let initialBinaryComparisons = []
let initialQuantitativeComparisons = [] let initialQuantitativeComparisons = []
let initialIsListOdered = false let initialIsListOdered = false
@ -110,6 +111,7 @@ export default function Home({ listOfElementsDefault }) {
const [toComparePair, setToComparePair] = useState(initialComparePair) const [toComparePair, setToComparePair] = useState(initialComparePair)
const [sliderValue, setSliderValue] = useState(initialSliderValue) const [sliderValue, setSliderValue] = useState(initialSliderValue)
const [reasoning, setReasoning] = useState(initialReasoning)
const [binaryComparisons, setBinaryComparisons] = useState(initialBinaryComparisons) 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 [quantitativeComparisons, setQuantitativeComparisons] = useState(initialQuantitativeComparisons) // More expressive, but more laborious to search through. For the ordering step, I only manipulate the binaryComparisons.
@ -227,7 +229,7 @@ export default function Home({ listOfElementsDefault }) {
} }
} }
let nextStepSlider = ({ posList, binaryComparisons, sliderValue, element1, element2 }) => { let nextStepSlider = ({ posList, binaryComparisons, sliderValue, Reasoning, element1, element2 }) => {
if (sliderValue < 1 && sliderValue > 0) { if (sliderValue < 1 && sliderValue > 0) {
sliderValue = 1/sliderValue; sliderValue = 1/sliderValue;
[element1, element2] = [element2, element1] [element1, element2] = [element2, element1]
@ -236,11 +238,12 @@ export default function Home({ listOfElementsDefault }) {
console.log(posList) console.log(posList)
let successStatus = nextStepSimple(posList, binaryComparisons, element1, element2) let successStatus = nextStepSimple(posList, binaryComparisons, element1, element2)
let newQuantitativeComparison = [element1, element2, transformSliderValueToActualValue(sliderValue)] let newQuantitativeComparison = [element1, element2, transformSliderValueToActualValue(sliderValue), reasoning]
let newQuantitativeComparisons = [...quantitativeComparisons, newQuantitativeComparison] let newQuantitativeComparisons = [...quantitativeComparisons, newQuantitativeComparison]
setQuantitativeComparisons(newQuantitativeComparisons) setQuantitativeComparisons(newQuantitativeComparisons)
setSliderValue(1) setSliderValue(1)
setReasoning('')
if (successStatus) { if (successStatus) {
let jsObject = nicelyFormatLinks(quantitativeComparisons, listOfElements) let jsObject = nicelyFormatLinks(quantitativeComparisons, listOfElements)
pushToMongo(jsObject) pushToMongo(jsObject)
@ -297,12 +300,19 @@ export default function Home({ listOfElementsDefault }) {
{`times as valuable as ...`} {`times as valuable as ...`}
</label> </label>
<br /> <br />
<br />
<label>
Reasoning:
<textarea value={reasoning} onChange={(event) => setReasoning(event.target.value)} />
</label>
<br />
<SubmitSliderButton <SubmitSliderButton
posList={posList} posList={posList}
binaryComparisons={binaryComparisons} binaryComparisons={binaryComparisons}
sliderValue={sliderValue} sliderValue={sliderValue}
reasoning={reasoning}
toComparePair={toComparePair} toComparePair={toComparePair}
nextStepSlider={nextStepSlider} nextStepSlider={nextStepSlider}
/> />