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

fix: Kill submit button once end is reached

Browse Source
This commit is contained in:
NunoSempere 2021-12-08 16:46:17 +01:00
parent 9a22936ed7
commit 5de6a18e10
2 changed files with 55 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
lib/comparisonView.js
View File

@ -56,6 +56,7 @@ export default function ComparisonView({ listOfElementsForView }) {
let initialMaxSteps = maxMergeSortSteps(listOfElementsForView.length) let initialMaxSteps = maxMergeSortSteps(listOfElementsForView.length)
let initialExpectedSteps = expectedNumMergeSortSteps(listOfElementsForView.length) let initialExpectedSteps = expectedNumMergeSortSteps(listOfElementsForView.length)
let initialTableRows = [] let initialTableRows = []
let initialDontPushSubmitButtonAnyMore = false
// state variables and functions // state variables and functions
const [listOfElements, setListOfElements] = useState(initialListOfElements) const [listOfElements, setListOfElements] = useState(initialListOfElements)
@ -68,6 +69,7 @@ export default function ComparisonView({ listOfElementsForView }) {
const [isListOrdered, setIsListOrdered] = useState(initialIsListOdered) const [isListOrdered, setIsListOrdered] = useState(initialIsListOdered)
const [orderedList, setOrderedList] = useState(initialOrderedList) const [orderedList, setOrderedList] = useState(initialOrderedList)
const [dontPushSubmitButtonAnyMore, setDontPushSubmitButtonAnyMore] = useState(initialDontPushSubmitButtonAnyMore)
let [showAdvancedOptions, changeShowAdvanceOptions] = useState(initialShowAdvancedOptions); let [showAdvancedOptions, changeShowAdvanceOptions] = useState(initialShowAdvancedOptions);
let [showComparisons, changeShowComparisons] = useState(initialShowComparisons); let [showComparisons, changeShowComparisons] = useState(initialShowComparisons);
@ -88,6 +90,7 @@ export default function ComparisonView({ listOfElementsForView }) {
changeNumSteps(initialNumSteps) changeNumSteps(initialNumSteps)
removeOldSvg() removeOldSvg()
setTableRows(initialTableRows) setTableRows(initialTableRows)
setDontPushSubmitButtonAnyMore(initialDontPushSubmitButtonAnyMore)
} }
let changeDataSet = (listOfElementsNew) => { let changeDataSet = (listOfElementsNew) => {
@ -190,31 +193,31 @@ export default function ComparisonView({ listOfElementsForView }) {
} }
} }
let nextStepSlider = async ({ posList, binaryComparisons, sliderValue, Reasoning, element1, element2 }) => { let nextStepSlider = async ({ posList, binaryComparisons, sliderValue, reasoning, element1, element2 }) => {
if (sliderValue < 1 && sliderValue > 0) { if (!dontPushSubmitButtonAnyMore) {
sliderValue = 1 / sliderValue; if (sliderValue < 1 && sliderValue > 0) {
[element1, element2] = [element2, element1] sliderValue = 1 / sliderValue;
} [element1, element2] = [element2, element1]
console.log(`posList@nextStepSlider:`) }
console.log(posList) console.log(`posList@nextStepSlider:`)
let [successStatus, result] = nextStepSimple(posList, binaryComparisons, element1, element2) console.log(posList)
let [successStatus, result] = nextStepSimple(posList, binaryComparisons, element1, element2)
let newQuantitativeComparison = [element1, element2, sliderValue, reasoning] let newQuantitativeComparison = [element1, element2, sliderValue, reasoning]
let newQuantitativeComparisons = [...quantitativeComparisons, newQuantitativeComparison] let newQuantitativeComparisons = [...quantitativeComparisons, newQuantitativeComparison]
setQuantitativeComparisons(newQuantitativeComparisons) setQuantitativeComparisons(newQuantitativeComparisons)
setSliderValue(DEFAULT_COMPARE()) setSliderValue(DEFAULT_COMPARE())
setReasoning('') setReasoning('')
changeNumSteps(numSteps + 1) changeNumSteps(numSteps + 1)
if (successStatus) { if (successStatus) {
setDontPushSubmitButtonAnyMore(true)
let jsObject = nicelyFormatLinks(quantitativeComparisons, listOfElements) let jsObject = nicelyFormatLinks(quantitativeComparisons, listOfElements)
await pushToMongo(jsObject) await pushToMongo(jsObject)
console.log(jsObject) console.log(jsObject)
alert("Comparisons completed. Background work might take a while, or straight-out fail") alert("Comparisons completed. Background work might take a while, or straight-out fail")
setTimeout(async () => {
// Make sure to do this after the
setIsListOrdered(true) setIsListOrdered(true)
setOrderedList(result) setOrderedList(result)
@ -226,15 +229,21 @@ export default function ComparisonView({ listOfElementsForView }) {
rows: tableRows, rows: tableRows,
setTableRows setTableRows
}) })
/*
setTimeout(async () => {
// Make sure to do this after the
}, 100); }, 100);
*/
}
} }
} }
// Html // Html
return ( return (
<div className="flex flex-col items-center justify-center min-h-screen py-2"> <div className="flex flex-col items-center justify-center min-h-screen py-2">
{/* Webpage name & favicon */} {/* Webpage name & favicon */}
<div className="mt-20"> <div className="mt-20">
<Head > <Head >
@ -243,18 +252,19 @@ export default function ComparisonView({ listOfElementsForView }) {
</Head> </Head>
</div> </div>
<main className="flex flex-col items-center w-full flex-1 px-20 text-center"> <main className="flex flex-col items-center w-full flex-1 px-20 text-center">
{/* Heading */} {/* Heading */}
<h1 className="text-6xl font-bold"> <h1 className="text-6xl font-bold">
Utility Function Extractor Utility Function Extractor
</h1> </h1>
{/* Approximate progress indicator */} {/* Approximate progress indicator */}
<p>{`${numSteps} out of ~${expectedSteps} (max ${maxSteps}) comparisons`}</p> <p>{`${numSteps} out of ~${expectedSteps} (max ${maxSteps}) comparisons`}</p>
{/* Comparison section */} {/* Comparison section */}
<div className={isListOrdered ? "hidden" : ""}> <div className={isListOrdered ? "hidden" : ""}>
<div className="flex flex-wrap items-center max-w-4xl sm:w-full mt-10"> <div className="flex flex-wrap items-center max-w-4xl sm:w-full mt-10">
{/* Element 1 */} {/* Element 1 */}
<div className="flex m-auto border-gray-300 border-4 h-72 w-72 p-5"> <div className="flex m-auto border-gray-300 border-4 h-72 w-72 p-5">
<div className="block m-auto text-center"> <div className="block m-auto text-center">
@ -292,10 +302,11 @@ export default function ComparisonView({ listOfElementsForView }) {
reasoning={reasoning} reasoning={reasoning}
toComparePair={toComparePair} toComparePair={toComparePair}
nextStepSlider={nextStepSlider} nextStepSlider={nextStepSlider}
dontPushSubmitButtonAnyMore={dontPushSubmitButtonAnyMore}
/> />
</div> </div>
</div> </div>
{/* Element 2 */} {/* Element 2 */}
<div className="flex m-auto border-gray-300 border-4 h-72 w-72 p-5"> <div className="flex m-auto border-gray-300 border-4 h-72 w-72 p-5">
<div className="block m-auto text-center"> <div className="block m-auto text-center">
@ -353,7 +364,7 @@ export default function ComparisonView({ listOfElementsForView }) {
</CreateTable> </CreateTable>
</div> </div>
</div> </div>
{/* Convenience functions */} {/* Convenience functions */}
<div className="w-2/12 flex justify-center mt-10"> <div className="w-2/12 flex justify-center mt-10">
<button <button
@ -364,7 +375,7 @@ export default function ComparisonView({ listOfElementsForView }) {
</button> </button>
</div> </div>
<div className={showAdvancedOptions? "flex flex-wrap -mx-4 overflow-hidden" : "hidden"}> <div className={showAdvancedOptions ? "flex flex-wrap -mx-4 overflow-hidden" : "hidden"}>
{/* Button: Restart */} {/* Button: Restart */}
<div className="my-4 px-4 w-1/3 overflow-hidden"> <div className="my-4 px-4 w-1/3 overflow-hidden">
<button <button

29
lib/slider.js
View File

@ -125,25 +125,28 @@ export function SliderElement({ onChange, value, displayFunction, domain }) {
) )
} }
export function SubmitSliderButton({ posList, binaryComparisons, sliderValue, reasoning, toComparePair, nextStepSlider }) { 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 // This element didn't necessarily have to exist, but it made it easier for debugging purposes
let onClick = (event) => { let onClick = (event) => {
//event.preventDefault(); if(!dontPushSubmitButtonAnyMore){
let obj = { posList, binaryComparisons, sliderValue, reasoning, element1: toComparePair[1], element2: toComparePair[0] } //event.preventDefault();
// let obj = { posList, binaryComparisons, sliderValue, reasoning, element1: toComparePair[1], element2: toComparePair[0] }
console.log("input@SubmitSliderButton") //
console.log(obj) console.log("input@SubmitSliderButton")
if (!!Number(sliderValue) && sliderValue >= 0) { console.log(obj)
nextStepSlider(obj) if (!!Number(sliderValue) && sliderValue >= 0) {
} else if (!!Number(sliderValue) && sliderValue < 0) { nextStepSlider(obj)
alert("Negative numbers not yet allowed") } else if (!!Number(sliderValue) && sliderValue < 0) {
} else { alert("Negative numbers not yet allowed")
alert("Your input is not a number") } else {
alert("Your input is not a number")
}
} }
} }
return (<button return (<button
className="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" 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}> onClick={onClick}>
Submit Submit
</button>) </button>)