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 { 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
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