feat: Changes in preparation for being able to change comparisons
This commit is contained in:
parent
3f0b918725
commit
dfa0a38a29
|
@ -7,6 +7,7 @@ import { DisplayElement } from './displayElement'
|
|||
import { DisplayAsMarkdown } from './displayAsMarkdown'
|
||||
import { CreateTable, buildRows } from './findPaths'
|
||||
import { DataSetChanger } from "./datasetChanger"
|
||||
import { ComparisonsChanger } from "./comparisonsChanger"
|
||||
import { pushToMongo } from "./pushToMongo.js"
|
||||
import { increasingList, maxMergeSortSteps, expectedNumMergeSortSteps } from "./utils.js"
|
||||
|
||||
|
@ -51,6 +52,7 @@ export default function ComparisonView({ listOfElementsForView }) {
|
|||
let initialOrderedList = []
|
||||
let initialShowAdvancedOptions = false
|
||||
let initialShowComparisons = false
|
||||
let initialShowLoadComparisons = false
|
||||
let initialShowChangeDataSet = false
|
||||
let initialNumSteps = 0;
|
||||
let initialMaxSteps = maxMergeSortSteps(listOfElementsForView.length)
|
||||
|
@ -73,6 +75,7 @@ export default function ComparisonView({ listOfElementsForView }) {
|
|||
|
||||
let [showAdvancedOptions, changeShowAdvanceOptions] = useState(initialShowAdvancedOptions);
|
||||
let [showComparisons, changeShowComparisons] = useState(initialShowComparisons);
|
||||
let [showLoadComparisons, changeShowLoadComparisons] = useState(initialShowLoadComparisons);
|
||||
let [showChangeDataSet, changeshowChangeDataSet] = useState(initialShowChangeDataSet);
|
||||
let [numSteps, changeNumSteps] = useState(initialNumSteps);
|
||||
let [maxSteps, changeMaxSteps] = useState(initialMaxSteps)
|
||||
|
@ -80,11 +83,11 @@ export default function ComparisonView({ listOfElementsForView }) {
|
|||
let [tableRows, setTableRows] = useState(initialTableRows)
|
||||
|
||||
/* Convenience utils: restart + changeDataSet */
|
||||
let restart = (posList) => {
|
||||
let restart = (posList) => {//({posList, initialBinaryComparisons2, initialQuantitativeComparisons2}) => {
|
||||
setToComparePair([posList[posList.length - 2], posList[posList.length - 1]])
|
||||
setSliderValue(initialSliderValue)
|
||||
setBinaryComparisons(initialBinaryComparisons)
|
||||
setQuantitativeComparisons(initialQuantitativeComparisons)
|
||||
setBinaryComparisons(initialBinaryComparisons2 || initialBinaryComparisons)
|
||||
setQuantitativeComparisons(initialQuantitativeComparisons2 || initialQuantitativeComparisons)
|
||||
setIsListOrdered(initialIsListOdered)
|
||||
setOrderedList(initialOrderedList)
|
||||
changeNumSteps(initialNumSteps)
|
||||
|
@ -107,6 +110,28 @@ export default function ComparisonView({ listOfElementsForView }) {
|
|||
changeMaxSteps(maxMergeSortSteps(newListLength))
|
||||
|
||||
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
|
||||
|
@ -377,23 +402,32 @@ export default function ComparisonView({ listOfElementsForView }) {
|
|||
|
||||
<div className={showAdvancedOptions ? "flex flex-wrap -mx-4 overflow-hidden" : "hidden"}>
|
||||
{/* 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
|
||||
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})}> */}
|
||||
Restart
|
||||
</button>
|
||||
</div>
|
||||
{/* 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
|
||||
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)}>
|
||||
Show comparisons
|
||||
</button>
|
||||
</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 */}
|
||||
<div className="my-4 px-4 w-1/3 overflow-hidden">
|
||||
<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={() => changeshowChangeDataSet(!showChangeDataSet)}>
|
||||
|
@ -416,6 +450,11 @@ export default function ComparisonView({ listOfElementsForView }) {
|
|||
</DisplayAsMarkdown>
|
||||
</div>
|
||||
</div>
|
||||
{/* Load comparisons section */}
|
||||
<div className={showLoadComparisons ? "inline mt-5" : "hidden"}>
|
||||
<ComparisonsChanger handleSubmit={changeComparisons} />
|
||||
{/*<ComparisonsChanger handleSubmit={changeComparisons} />*/}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
|
89
lib/comparisonsChanger.js
Normal file
89
lib/comparisonsChanger.js
Normal 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>
|
||||
|
||||
<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>
|
||||
);
|
||||
}
|
Loading…
Reference in New Issue
Block a user