feat: Changes in preparation for being able to change comparisons

This commit is contained in:
NunoSempere 2022-01-28 12:50:45 -05:00
parent 3f0b918725
commit dfa0a38a29
2 changed files with 134 additions and 6 deletions

View File

@ -7,6 +7,7 @@ import { DisplayElement } from './displayElement'
import { DisplayAsMarkdown } from './displayAsMarkdown' import { DisplayAsMarkdown } from './displayAsMarkdown'
import { CreateTable, buildRows } from './findPaths' import { CreateTable, buildRows } from './findPaths'
import { DataSetChanger } from "./datasetChanger" import { DataSetChanger } from "./datasetChanger"
import { ComparisonsChanger } from "./comparisonsChanger"
import { pushToMongo } from "./pushToMongo.js" import { pushToMongo } from "./pushToMongo.js"
import { increasingList, maxMergeSortSteps, expectedNumMergeSortSteps } from "./utils.js" import { increasingList, maxMergeSortSteps, expectedNumMergeSortSteps } from "./utils.js"
@ -51,6 +52,7 @@ export default function ComparisonView({ listOfElementsForView }) {
let initialOrderedList = [] let initialOrderedList = []
let initialShowAdvancedOptions = false let initialShowAdvancedOptions = false
let initialShowComparisons = false let initialShowComparisons = false
let initialShowLoadComparisons = false
let initialShowChangeDataSet = false let initialShowChangeDataSet = false
let initialNumSteps = 0; let initialNumSteps = 0;
let initialMaxSteps = maxMergeSortSteps(listOfElementsForView.length) let initialMaxSteps = maxMergeSortSteps(listOfElementsForView.length)
@ -73,6 +75,7 @@ export default function ComparisonView({ listOfElementsForView }) {
let [showAdvancedOptions, changeShowAdvanceOptions] = useState(initialShowAdvancedOptions); let [showAdvancedOptions, changeShowAdvanceOptions] = useState(initialShowAdvancedOptions);
let [showComparisons, changeShowComparisons] = useState(initialShowComparisons); let [showComparisons, changeShowComparisons] = useState(initialShowComparisons);
let [showLoadComparisons, changeShowLoadComparisons] = useState(initialShowLoadComparisons);
let [showChangeDataSet, changeshowChangeDataSet] = useState(initialShowChangeDataSet); let [showChangeDataSet, changeshowChangeDataSet] = useState(initialShowChangeDataSet);
let [numSteps, changeNumSteps] = useState(initialNumSteps); let [numSteps, changeNumSteps] = useState(initialNumSteps);
let [maxSteps, changeMaxSteps] = useState(initialMaxSteps) let [maxSteps, changeMaxSteps] = useState(initialMaxSteps)
@ -80,11 +83,11 @@ export default function ComparisonView({ listOfElementsForView }) {
let [tableRows, setTableRows] = useState(initialTableRows) let [tableRows, setTableRows] = useState(initialTableRows)
/* Convenience utils: restart + changeDataSet */ /* Convenience utils: restart + changeDataSet */
let restart = (posList) => { let restart = (posList) => {//({posList, initialBinaryComparisons2, initialQuantitativeComparisons2}) => {
setToComparePair([posList[posList.length - 2], posList[posList.length - 1]]) setToComparePair([posList[posList.length - 2], posList[posList.length - 1]])
setSliderValue(initialSliderValue) setSliderValue(initialSliderValue)
setBinaryComparisons(initialBinaryComparisons) setBinaryComparisons(initialBinaryComparisons2 || initialBinaryComparisons)
setQuantitativeComparisons(initialQuantitativeComparisons) setQuantitativeComparisons(initialQuantitativeComparisons2 || initialQuantitativeComparisons)
setIsListOrdered(initialIsListOdered) setIsListOrdered(initialIsListOdered)
setOrderedList(initialOrderedList) setOrderedList(initialOrderedList)
changeNumSteps(initialNumSteps) changeNumSteps(initialNumSteps)
@ -107,6 +110,28 @@ export default function ComparisonView({ listOfElementsForView }) {
changeMaxSteps(maxMergeSortSteps(newListLength)) changeMaxSteps(maxMergeSortSteps(newListLength))
restart(newPosList) restart(newPosList)
// restart({posList: newPosList})
}
let changeComparisons = (links, listOfElements) => {
let quantitativeComparisons2 = []
let binaryComparisons2 = []
for(let link of links){
let {source, target, distance, reasoning} = link
let searchByName = (name, candidate) => candidate.name == name
let testForSource = (candidate) => searchByName(source, candidate)
let testForTarget = (candidate) => searchByName(target, candidate)
let element1 = listOfElements.findIndex(testForSource)
let element2 = listOfElements.findIndex(testForTarget)
if(element1 == -1 || element2 == -1){
throw new Error("Comparisons include unknown elements, please retry")
}
quantitativeComparisons2.push([element1, element2, distance, reasoning])
binaryComparisons2.push([element1,element2])
}
// return ({quantitativeComparisons: quantitativeComparisons2, binaryComparisons: binaryComparisons2})
//restart({posList, initialBinaryComparisons2=initialBinaryComparisons, initialQuantitativeComparisons2=initialQuantitativeComparisons})
restart(posList)
} }
// Manipulations // Manipulations
@ -377,23 +402,32 @@ export default function ComparisonView({ listOfElementsForView }) {
<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/4 overflow-hidden">
<button <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="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"
onClick={() => restart(posList)}> onClick={() => restart(posList)}>
{/* onClick={() => restart({posList})}> */}
Restart Restart
</button> </button>
</div> </div>
{/* Button: Show comparisons */} {/* Button: Show comparisons */}
<div className="my-4 px-4 w-1/3 overflow-hidden"> <div className="my-4 px-4 w-1/4 overflow-hidden">
<button <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="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"
onClick={() => changeShowComparisons(!showComparisons)}> onClick={() => changeShowComparisons(!showComparisons)}>
Show comparisons Show comparisons
</button> </button>
</div> </div>
{/* Button: Load comparisons */}
<div className="my-4 px-4 w-1/4 overflow-hidden">
<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"
onClick={() => changeShowLoadComparisons(!showLoadComparisons)}>
Load comparisons
</button>
</div>
{/* Button: Change dataset */} {/* Button: Change dataset */}
<div className="my-4 px-4 w-1/3 overflow-hidden"> <div className="my-4 px-4 w-1/4 overflow-hidden">
<button <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="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"
onClick={() => changeshowChangeDataSet(!showChangeDataSet)}> onClick={() => changeshowChangeDataSet(!showChangeDataSet)}>
@ -416,6 +450,11 @@ export default function ComparisonView({ listOfElementsForView }) {
</DisplayAsMarkdown> </DisplayAsMarkdown>
</div> </div>
</div> </div>
{/* Load comparisons section */}
<div className={showLoadComparisons ? "inline mt-5" : "hidden"}>
<ComparisonsChanger handleSubmit={changeComparisons} />
{/*<ComparisonsChanger handleSubmit={changeComparisons} />*/}
</div>
</main> </main>
</div> </div>

89
lib/comparisonsChanger.js Normal file
View File

@ -0,0 +1,89 @@
import React, { useState } from 'react';
export function ComparisonsChanger({handleSubmit}){
let [value, setValue] = useState(`[
Blah, blah`)
const [displayingDoneMessage, setDisplayingDoneMessage] = useState(false)
const [displayingDoneMessageTimer, setDisplayingDoneMessageTimer] = useState(null)
let handleChange = (event) => {
setValue(event.target.value)
}
let handleSubmitInner = (event) => {
clearTimeout(displayingDoneMessageTimer)
event.preventDefault();
//console.log(event)
console.log("value@handleSubmitInner@ComparisonsChanger")
//console.log(typeof(value));
console.log(value);
try{
let newData = JSON.parse(value)
//console.log(typeof(newData))
//console.log(newData)
handleSubmit(newData)
if(!newData.length || newData.length < 2){
throw Error("Not enough objects")
}
setDisplayingDoneMessage(true)
let timer = setTimeout(() => setDisplayingDoneMessage(false), 3000);
setDisplayingDoneMessageTimer(timer)
}catch(error){
setDisplayingDoneMessage(false)
//alert(error)
//console.log(error)
let substituteText = `Error: ${error.message}
Try something like:
[
{
"source": "x",
"target": "y",
"distance": 99999.99999999999,
"reasoning": "blah blah"
},
{
"source": "y",
"target": "z",
"distance": 1,
"reasoning": "blah blah"
},
{
"source": "x",
"target": "z",
"distance": 10,
"reasoning": "blah blah"
}
]
Your old input was: ${value}`
setValue(substituteText)
}
}
return (
<form onSubmit={handleSubmitInner} className="inline">
<br/>
<br/>
<textarea
value={value}
onChange={handleChange}
rows="10" cols="50"
className=""
/>
<br/>
<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 p-10"
onClick={handleSubmitInner}>
Change dataset
</button>
&nbsp;
<button
className={displayingDoneMessage ? "bg-transparent text-blue-700 font-semibold py-2 px-4 border border-blue-500 rounded mt-5 p-10" : "hidden"}
>
Done!
</button>
</form>
);
}