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

fix: Aesthetics

Browse Source
This commit is contained in:
NunoSempere 2021-11-25 15:49:58 +00:00
parent a154b34100
commit b9a4a371fc
2 changed files with 17 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
lib/comparisonView.js
View File

@ -4,15 +4,13 @@ const elementsDocument = null//
/* Imports */ /* Imports */
import Head from 'next/head' import Head from 'next/head'
import React, { useState } from "react"; import React, { useState } from "react";
import path from 'path';
import { DrawGraph, removeOldSvg } from './labeledgraph'; import { DrawGraph, removeOldSvg } from './labeledgraph';
import { SliderElement, SubmitSliderButton } from "./slider"; import { SubmitSliderButton } from "./slider";
import { DisplayElement } from './displayElement' import { DisplayElement } from './displayElement'
import { DisplayAsMarkdown } from './displayAsMarkdown' import { DisplayAsMarkdown } from './displayAsMarkdown'
import { CreateTableWithDistances } from './findPaths' import { CreateTableWithDistances } from './findPaths'
import { TextAreaForJson } from "./textAreaForJson" import { TextAreaForJson } from "./textAreaForJson"
import { pushToMongo } from "./pushToMongo.js" import { pushToMongo } from "./pushToMongo.js"
import { toLocale, transformSliderValueToPracticalValue, transformSliderValueToActualValue, numToAlphabeticalString } from "./utils.js"
/* Helpers */ /* Helpers */
let increasingList = (n) => Array.from(Array(n).keys()) let increasingList = (n) => Array.from(Array(n).keys())
@ -35,28 +33,6 @@ let checkIfListIsOrdered = (arr, binaryComparisons) => {
return isOrdered return isOrdered
} }
let displayFunctionSliderInner = (value) => {
let result
if (value >= 0) {
result = toLocale(transformSliderValueToPracticalValue(value))
} else {
let inverseresult = toLocale(transformSliderValueToPracticalValue(-value))
if (inverseresult == 1) {
result = '1'
} else {
result = `1/${inverseresult}`
}
}
return result
}
let displayFunctionSlider = (value) => {
let result = displayFunctionSliderInner(value)
result = `The first option is ${result}x as valuable as the second one`
return result
};
let nicelyFormatLinks = (quantitativeComparisons, listOfElements) => quantitativeComparisons.map(([element1, element2, distance, reasoning]) => ({ source: listOfElements[element1].name, target: listOfElements[element2].name, distance: distance, reasoning: reasoning })) let nicelyFormatLinks = (quantitativeComparisons, listOfElements) => quantitativeComparisons.map(([element1, element2, distance, reasoning]) => ({ source: listOfElements[element1].name, target: listOfElements[element2].name, distance: distance, reasoning: reasoning }))
// Main react component // Main react component
@ -213,7 +189,7 @@ export default function ComparisonView({ listOfElementsForView }) {
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), reasoning] let newQuantitativeComparison = [element1, element2, sliderValue, reasoning]
let newQuantitativeComparisons = [...quantitativeComparisons, newQuantitativeComparison] let newQuantitativeComparisons = [...quantitativeComparisons, newQuantitativeComparison]
setQuantitativeComparisons(newQuantitativeComparisons) setQuantitativeComparisons(newQuantitativeComparisons)
@ -261,16 +237,17 @@ export default function ComparisonView({ listOfElementsForView }) {
<label> <label>
{`... is `} {`... is `}
<br /> <br />
<input <input
type="number" type="number"
value={sliderValue} className="text-center text-blueGray-600 bg-white rounded text-lg border-0 shadow outline-none focus:outline-none focus:ring w-8/12 h-10 m-2"
onChange={(event) => { value={sliderValue}
//console.log(event) onChange={(event) => {
//console.log(event.target.value) //console.log(event)
setSliderValue(event.target.value) //console.log(event.target.value)
}} setSliderValue(event.target.value)
className="text-center px-2 py-1 placeholder-blueGray-300 text-blueGray-600 relative bg-white bg-white rounded text-lg border-0 shadow outline-none focus:outline-none focus:ring w-8/12 m-2 h-10" }}
/>
/>
<br /> <br />
{`times as valuable as ...`} {`times as valuable as ...`}
</label> </label>
@ -299,9 +276,11 @@ export default function ComparisonView({ listOfElementsForView }) {
</div> </div>
<br /> <br />
<label className=""> <label className="">
Reasoning (optional): <p className="mb-1">
Reasoning (optional):
</p>
<br /> <br />
<textarea className="mt-2 px-3 py-4 placeholder-blueGray-300 text-blueGray-600 relative bg-white bg-white rounded text-base border-0 shadow outline-none focus:outline-none focus:ring w-full" <textarea className="px-3 py-4 placeholder-blueGray-300 text-blueGray-600 relative bg-white bg-white rounded text-base border-0 shadow outline-none focus:outline-none focus:ring w-full"
value={reasoning} value={reasoning}
onChange={(event) => setReasoning(event.target.value)} onChange={(event) => setReasoning(event.target.value)}
/> />

1
pages/research.js
View File

@ -13,7 +13,6 @@ import ComparisonView from '../lib/comparisonView.js'
const elementsDocument = '../data/listOfResearchOutputs.json' const elementsDocument = '../data/listOfResearchOutputs.json'
/* React components */ /* React components */
// fs can only be used here.
export async function getStaticProps() { export async function getStaticProps() {
const directory = path.join(process.cwd(), "pages") const directory = path.join(process.cwd(), "pages")
let listOfElementsForView = JSON.parse(fs.readFileSync(path.join(directory, elementsDocument), 'utf8')); let listOfElementsForView = JSON.parse(fs.readFileSync(path.join(directory, elementsDocument), 'utf8'));