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