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

Change slider to text field

Browse Source
This commit is contained in:
NunoSempere 2021-11-25 00:42:34 +00:00
parent 26743ee05e
commit 3d380e4dfa
6 changed files with 122 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
lib/findPaths.js
View File

@ -7,10 +7,13 @@ let avg = arr => arr.reduce((a,b) => (a+b)) / arr.length
let formatLargeOrSmall = num => {
if(num > 1){
return toLocale(truncateValueForDisplay(num))
}else if(num != 0){
}else if(num > 0){
return num.toFixed(-Math.floor(Math.log(num)/Math.log(10)));
}else if(num > -1){
return num.toFixed(-Math.floor(Math.log(-num)/Math.log(10)));
}else{
return num//return "~0"
return toLocale(num)//return "~0"
}
}

1
lib/labeledgraph.js
View File

@ -118,6 +118,7 @@ function drawGraphInner({nodes, links}){
return height-32-(Math.abs(start-end)/2)//height-30
})
.text(function(d){
return Number(d.distance)
return(truncateValueForDisplay(Number(d.distance)))
//return(Number(d.distance).toPrecision(2).toString())
})

4
lib/slider.js
View File

@ -133,7 +133,11 @@ export function SubmitSliderButton({posList, binaryComparisons, sliderValue, toC
//
console.log("input@SubmitSliderButton")
console.log(obj)
if(sliderValue >= 0 ){
nextStepSlider(obj)
}else if(sliderValue < 0){
alert("Negative numbers not yet allowed")
}
}
return( <button

19
lib/utils.js
View File

@ -1,8 +1,11 @@
import crypto from "crypto"
export const hashString = (string) => crypto.createHash('md5').update(string).digest('hex');
const id = x => x
export const transformSliderValueToActualValue = id
export const transformSliderValueToPracticalValue = id
export const transformSliderValueToActualValue = value => 10 ** value //>= 2 ? Math.round(10 ** value) : Math.round(10 * 10 ** value) / 10
export const _transformSliderValueToActualValue = value => 10 ** value //>= 2 ? Math.round(10 ** value) : Math.round(10 * 10 ** value) / 10
export const toLocale = x => Number(x).toLocaleString()
export const truncateValueForDisplay = value => {
if(value > 10){
@ -13,4 +16,16 @@ export const truncateValueForDisplay = value => {
}
}
export const transformSliderValueToPracticalValue = value => truncateValueForDisplay(transformSliderValueToActualValue(value))
export const _transformSliderValueToPracticalValue = value => truncateValueForDisplay(transformSliderValueToActualValue(value))
export function numToAlphabeticalString(num){
// https://stackoverflow.com/questions/45787459/convert-number-to-alphabet-string-javascript/45787487
var s = '', t;
while (num > 0) {
t = (num - 1) % 26;
s = String.fromCharCode(65 + t) + s;
num = (num - t)/26 | 0;
}
return s || undefined;
}

40
package-lock.json generated
View File

@ -1078,6 +1078,14 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/axios": {
"version": "0.21.4",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
"integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
"dependencies": {
"follow-redirects": "^1.14.0"
}
},
"node_modules/bail": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz",
@ -2171,6 +2179,25 @@
"node": ">=8"
}
},
"node_modules/follow-redirects": {
"version": "1.14.5",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.5.tgz",
"integrity": "sha512-wtphSXy7d4/OR+MvIFbCVBDzZ5520qV8XfPklSN5QtxuMUJZ+b0Wnst1e1lCDocfzuCkHqj8k0FpZqO+UIaKNA==",
"funding": [
{
"type": "individual",
"url": "https://github.com/sponsors/RubenVerborgh"
}
],
"engines": {
"node": ">=4.0"
},
"peerDependenciesMeta": {
"debug": {
"optional": true
}
}
},
"node_modules/foreach": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz",
@ -5947,6 +5974,14 @@
"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.4.tgz",
"integrity": "sha512-SA5mXJWrId1TaQjfxUYghbqQ/hYioKmLJvPJyDuYRtXXenFNMjj4hSSt1Cf1xsuXSXrtxrVC5Ot4eU6cOtBDdA=="
},
"axios": {
"version": "0.21.4",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
"integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
"requires": {
"follow-redirects": "^1.14.0"
}
},
"bail": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz",
@ -6872,6 +6907,11 @@
"path-exists": "^4.0.0"
}
},
"follow-redirects": {
"version": "1.14.5",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.5.tgz",
"integrity": "sha512-wtphSXy7d4/OR+MvIFbCVBDzZ5520qV8XfPklSN5QtxuMUJZ+b0Wnst1e1lCDocfzuCkHqj8k0FpZqO+UIaKNA=="
},
"foreach": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz",

70
pages/index.js
View File

@ -14,7 +14,7 @@ import { DisplayAsMarkdown } from '../lib/displayAsMarkdown'
import { CreateTableWithDistances } from '../lib/findPaths'
import { TextAreaForJson } from "../lib/textAreaForJson"
import { pushToMongo } from "../lib/pushToMongo.js"
import { toLocale, transformSliderValueToPracticalValue, transformSliderValueToActualValue } from "../lib/utils.js"
import { toLocale, transformSliderValueToPracticalValue, transformSliderValueToActualValue, numToAlphabeticalString } from "../lib/utils.js"
/* Helpers */
let increasingList = (n) => Array.from(Array(n).keys())
@ -37,18 +37,23 @@ let checkIfListIsOrdered = (arr, binaryComparisons) => {
return isOrdered
}
let displayFunctionSlider = (value) => {
let displayFunctionSliderInner = (value) => {
let result
if (value >= 0) {
result = toLocale(transformSliderValueToPracticalValue(value))
} else {
let inverseresult = toLocale(transformSliderValueToPracticalValue(-value))
if(inverseresult == 1){
if (inverseresult == 1) {
result = '1'
}else{
} 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
@ -82,7 +87,7 @@ export default function Home({ listOfElementsDefault }) {
//let initialComparePair = [list[list.length-2], list[list.length-1]]
let initialComparePair = [initialPosList[initialPosList.length - 2], initialPosList[initialPosList.length - 1]]
let initialSliderValue = 0
let initialSliderValue = 1
let initialBinaryComparisons = []
let initialQuantitativeComparisons = []
let initialIsListOdered = false
@ -216,8 +221,8 @@ export default function Home({ listOfElementsDefault }) {
}
let nextStepSlider = ({ posList, binaryComparisons, sliderValue, element1, element2 }) => {
if (sliderValue < 0) {
sliderValue = -sliderValue;
if (sliderValue < 1) {
// sliderValue = -sliderValue;
[element1, element2] = [element2, element1]
}
console.log(`posList@nextStepSlider:`)
@ -228,7 +233,7 @@ export default function Home({ listOfElementsDefault }) {
let newQuantitativeComparisons = [...quantitativeComparisons, newQuantitativeComparison]
setQuantitativeComparisons(newQuantitativeComparisons)
setSliderValue(0)
setSliderValue(1)
if (successStatus) {
let jsObject = nicelyFormatLinks(quantitativeComparisons, listOfElements)
pushToMongo(jsObject)
@ -262,8 +267,42 @@ export default function Home({ listOfElementsDefault }) {
</DisplayElement>
</div>
</div>
<div className="flex m-auto w-72">
<div className="block m-auto text-center">
{/*`is ${displayFunctionSliderInner(sliderValue)}x times as valuable as`*/}
<br />
<label>
{`... is `}
<br />
<input
type="number"
value={sliderValue}
onChange={(event) =>{
//console.log(event)
//console.log(event.target.value)
setSliderValue(event.target.value)
}}
className="text-center"
/>
<br />
{`times as valuable as ...`}
</label>
<br />
<SubmitSliderButton
posList={posList}
binaryComparisons={binaryComparisons}
sliderValue={sliderValue}
toComparePair={toComparePair}
nextStepSlider={nextStepSlider}
/>
</div>
</div>
<div
className="flex m-auto border-gray-300 border-4 h-72 w-72 p-5"
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">
@ -272,6 +311,10 @@ export default function Home({ listOfElementsDefault }) {
</div>
</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" : ""}`}>
<SliderElement
className="flex items-center justify-center"
@ -281,13 +324,8 @@ export default function Home({ listOfElementsDefault }) {
domain={domain}
/>
</div>
<SubmitSliderButton
posList={posList}
binaryComparisons={binaryComparisons}
sliderValue={sliderValue}
toComparePair={toComparePair}
nextStepSlider={nextStepSlider}
/>
*/}
</div>