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

chore: Refactor to refer to an input box rather than to a slider which no longer exists

Browse Source
This commit is contained in:
NunoSempere 2022-01-31 16:19:22 -05:00
parent b86deafefd
commit 87722e5ae1
4 changed files with 67 additions and 209 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
lib/.utils.js.swp Normal file
View File

Binary file not shown.

47
lib/comparisonView.js
View File

@ -2,7 +2,7 @@
import Head from "next/head"; import Head from "next/head";
import React, { useState } from "react"; import React, { useState } from "react";
import { DrawGraph, removeOldSvg } from "./labeledGraph"; import { DrawGraph, removeOldSvg } from "./labeledGraph";
import { SubmitSliderButton } from "./slider"; import { InputBox } from "./inputBox";
import { DisplayElement } from "./displayElement"; import { DisplayElement } from "./displayElement";
import { DisplayAsMarkdown } from "./displayAsMarkdown"; import { DisplayAsMarkdown } from "./displayAsMarkdown";
import { CreateTable, buildRows } from "./findPaths"; import { CreateTable, buildRows } from "./findPaths";
@ -68,7 +68,7 @@ export default function ComparisonView({ listOfElementsForView }) {
initialPosList[initialPosList.length - 2], initialPosList[initialPosList.length - 2],
initialPosList[initialPosList.length - 1], initialPosList[initialPosList.length - 1],
]; ];
let initialSliderValue = 1; let initialInputValue = 1;
let initialReasoning = ""; let initialReasoning = "";
let initialBinaryComparisons = []; let initialBinaryComparisons = [];
let initialQuantitativeComparisons = []; let initialQuantitativeComparisons = [];
@ -90,7 +90,7 @@ export default function ComparisonView({ listOfElementsForView }) {
const [listOfElements, setListOfElements] = useState(initialListOfElements); const [listOfElements, setListOfElements] = useState(initialListOfElements);
const [posList, setPosList] = useState(initialPosList); const [posList, setPosList] = useState(initialPosList);
const [toComparePair, setToComparePair] = useState(initialComparePair); const [toComparePair, setToComparePair] = useState(initialComparePair);
const [sliderValue, setSliderValue] = useState(initialSliderValue); const [inputValue, setInputValue] = useState(initialInputValue);
const [reasoning, setReasoning] = useState(initialReasoning); const [reasoning, setReasoning] = useState(initialReasoning);
const [binaryComparisons, setBinaryComparisons] = useState( const [binaryComparisons, setBinaryComparisons] = useState(
initialBinaryComparisons initialBinaryComparisons
@ -132,7 +132,7 @@ export default function ComparisonView({ listOfElementsForView }) {
posList[posList.length - 2], posList[posList.length - 2],
posList[posList.length - 1], posList[posList.length - 1],
]); ]);
setSliderValue(initialSliderValue); setInputValue(initialInputValue);
setBinaryComparisons(initialBinaryComparisons2 || initialBinaryComparisons); setBinaryComparisons(initialBinaryComparisons2 || initialBinaryComparisons);
setQuantitativeComparisons( setQuantitativeComparisons(
initialQuantitativeComparisons2 || initialQuantitativeComparisons initialQuantitativeComparisons2 || initialQuantitativeComparisons
@ -296,20 +296,20 @@ export default function ComparisonView({ listOfElementsForView }) {
} }
}; };
let nextStepSlider = async ({ let nextStepInput = async ({
posList, posList,
binaryComparisons, binaryComparisons,
sliderValue, inputValue,
reasoning, reasoning,
element1, element1,
element2, element2,
}) => { }) => {
if (!dontPushSubmitButtonAnyMore) { if (!dontPushSubmitButtonAnyMore) {
if (sliderValue < 1 && sliderValue > 0) { if (inputValue < 1 && inputValue > 0) {
sliderValue = 1 / sliderValue; inputValue = 1 / inputValue;
[element1, element2] = [element2, element1]; [element1, element2] = [element2, element1];
} }
console.log(`posList@nextStepSlider:`); console.log(`posList@nextStepInput:`);
console.log(posList); console.log(posList);
let [successStatus, result] = nextStepSimple( let [successStatus, result] = nextStepSimple(
posList, posList,
@ -321,7 +321,7 @@ export default function ComparisonView({ listOfElementsForView }) {
let newQuantitativeComparison = [ let newQuantitativeComparison = [
element1, element1,
element2, element2,
sliderValue, inputValue,
reasoning, reasoning,
]; ];
let newQuantitativeComparisons = [ let newQuantitativeComparisons = [
@ -330,7 +330,7 @@ export default function ComparisonView({ listOfElementsForView }) {
]; ];
setQuantitativeComparisons(newQuantitativeComparisons); setQuantitativeComparisons(newQuantitativeComparisons);
setSliderValue(DEFAULT_COMPARE()); setInputValue(DEFAULT_COMPARE());
setReasoning(""); setReasoning("");
changeNumSteps(numSteps + 1); changeNumSteps(numSteps + 1);
if (successStatus) { if (successStatus) {
@ -396,7 +396,7 @@ export default function ComparisonView({ listOfElementsForView }) {
</div> </div>
</div> </div>
{/* Comparison actuator (text, previously slider) */} {/* Comparison actuator (text, previously input) */}
<div className="flex m-auto w-72"> <div className="flex m-auto w-72">
<div className="block m-auto text-center"> <div className="block m-auto text-center">
<br /> <br />
@ -406,11 +406,11 @@ export default function ComparisonView({ listOfElementsForView }) {
<input <input
type="number" type="number"
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" 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"
value={sliderValue} value={inputValue}
onChange={(event) => { onChange={(event) => {
//console.log(event) //console.log(event)
//console.log(event.target.value) //console.log(event.target.value)
setSliderValue(event.target.value); setInputValue(event.target.value);
}} }}
/> />
<br /> <br />
@ -418,13 +418,13 @@ export default function ComparisonView({ listOfElementsForView }) {
</label> </label>
<br /> <br />
<SubmitSliderButton <InputBox
posList={posList} posList={posList}
binaryComparisons={binaryComparisons} binaryComparisons={binaryComparisons}
sliderValue={sliderValue} inputValue={inputValue}
reasoning={reasoning} reasoning={reasoning}
toComparePair={toComparePair} toComparePair={toComparePair}
nextStepSlider={nextStepSlider} nextStepInput={nextStepInput}
dontPushSubmitButtonAnyMore={dontPushSubmitButtonAnyMore} dontPushSubmitButtonAnyMore={dontPushSubmitButtonAnyMore}
/> />
</div> </div>
@ -450,19 +450,6 @@ export default function ComparisonView({ listOfElementsForView }) {
/> />
</label> </label>
<br /> <br />
<div></div>
{/* Old slider element (previous actuator)
<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>
*/}
</div> </div>
{/* Results section */} {/* Results section */}

50
lib/inputBox.js Normal file
View File

@ -0,0 +1,50 @@
/* Imports */
import React, { useState } from "react";
export function InputBox({
posList,
binaryComparisons,
inputValue,
reasoning,
toComparePair,
nextStepInput,
dontPushSubmitButtonAnyMore,
}) {
// This element didn't necessarily have to exist, but it made it easier for debugging purposes
let onClick = (event) => {
if (!dontPushSubmitButtonAnyMore) {
//event.preventDefault();
let obj = {
posList,
binaryComparisons,
inputValue,
reasoning,
element1: toComparePair[1],
element2: toComparePair[0],
};
//
console.log("input@SubmitInputButton");
console.log(obj);
if (!!Number(inputValue) && inputValue >= 0) {
nextStepInput(obj);
} else if (!!Number(inputValue) && inputValue < 0) {
alert("Negative numbers not yet allowed");
} else {
alert("Your input is not a number");
}
}
};
return (
<button
className={
!dontPushSubmitButtonAnyMore
? "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"
: "bg-transparent text-blue-700 font-semibold py-2 px-4 border border-blue-500 rounded mt-5"
}
onClick={onClick}
>
Submit
</button>
);
}

179
lib/slider.js
View File

@ -1,179 +0,0 @@
/* Imports */
import { Slider, Rail, Handles, Tracks, Ticks } from "react-compound-slider";
import React, { useState } from "react";
// https://sghall.github.io/react-compound-slider/#/getting-started/tutorial
/* Definitions */
const sliderStyle = {
// Give the slider some width
position: "relative",
width: "40em",
height: 40,
border: "5em",
};
const railStyle = {
position: "absolute",
width: "100%",
height: 15,
marginTop: 32.5,
borderRadius: 5,
backgroundColor: "lightgrey",
};
/* Support functions */
function Handle({
handle: { id, value, percent },
getHandleProps,
displayFunction,
handleWidth,
}) {
return (
<>
<div className="justify-center text-center text-gray-600 text-xs">
{displayFunction(value)}
</div>
<div
style={{
left: `${percent}%`,
position: "absolute",
marginLeft: -10,
marginTop: 2.5,
zIndex: 2,
width: 30,
height: 30,
cursor: "pointer",
borderRadius: "0%",
backgroundColor: "#374151",
color: "#374151",
}}
{...getHandleProps(id)}
></div>
</>
);
}
function Track({ source, target, getTrackProps }) {
return (
<div
style={{
position: "absolute",
height: 17.5,
zIndex: 1,
marginTop: 8.25,
backgroundColor: " #3B82F6",
borderRadius: 5,
cursor: "pointer",
left: `${source.percent}%`,
width: `${target.percent - source.percent}%`,
}}
{
...getTrackProps() /* this will set up events if you want it to be clickeable (optional) */
}
/>
);
}
/* Body */
// Two functions, essentially identical.
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 / domain, domain])}
values={[value]}
step={0.0001}
onChange={onChange}
reversed={true}
>
<Rail>
{({ getRailProps }) => <div style={railStyle} {...getRailProps()} />}
</Rail>
<Handles>
{({ handles, getHandleProps }) => (
<div className="slider-handles">
{handles.map((handle) => (
<Handle
key={handle.id}
handle={handle}
getHandleProps={getHandleProps}
displayFunction={displayFunction}
handleWidth={"15em"}
/>
))}
</div>
)}
</Handles>
<Tracks right={false}>
{({ tracks, getTrackProps }) => (
<div className="slider-tracks">
{tracks.map(({ id, source, target }) => (
<Track
key={id}
source={source}
target={target}
getTrackProps={getTrackProps}
/>
))}
</div>
)}
</Tracks>
</Slider>
);
}
export function SubmitSliderButton({
posList,
binaryComparisons,
sliderValue,
reasoning,
toComparePair,
nextStepSlider,
dontPushSubmitButtonAnyMore,
}) {
// This element didn't necessarily have to exist, but it made it easier for debugging purposes
let onClick = (event) => {
if (!dontPushSubmitButtonAnyMore) {
//event.preventDefault();
let obj = {
posList,
binaryComparisons,
sliderValue,
reasoning,
element1: toComparePair[1],
element2: toComparePair[0],
};
//
console.log("input@SubmitSliderButton");
console.log(obj);
if (!!Number(sliderValue) && sliderValue >= 0) {
nextStepSlider(obj);
} else if (!!Number(sliderValue) && sliderValue < 0) {
alert("Negative numbers not yet allowed");
} else {
alert("Your input is not a number");
}
}
};
return (
<button
className={
!dontPushSubmitButtonAnyMore
? "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"
: "bg-transparent text-blue-700 font-semibold py-2 px-4 border border-blue-500 rounded mt-5"
}
onClick={onClick}
>
Submit
</button>
);
}