hierarchical-estimates-visu.../packages/webpage-refactor/components/homepage.js

173 lines
5.3 KiB
JavaScript
Raw Normal View History

2022-06-17 17:44:08 +00:00
import React, { useState } from "react";
2022-06-17 18:47:10 +00:00
import { mergeSort } from "utility-tools";
2022-06-19 00:14:07 +00:00
import { Title } from "./title.js";
2022-06-17 17:44:08 +00:00
import { ProgressIndicator } from "./progressIndicator.js";
import { DisplayElementForComparison } from "./displayElementForComparison.js";
import { ComparisonActuator } from "./comparisonActuator.js";
2022-06-19 23:25:55 +00:00
import { Separator } from "./separator.js";
import { ResultsTable } from "./resultsTable.js";
2022-06-19 00:14:07 +00:00
2022-06-18 23:10:27 +00:00
import { AdvancedOptions } from "./advancedOptions/advancedOptions.js";
2022-06-17 22:48:11 +00:00
import { Graph } from "./graph/graph.js";
2022-06-18 18:18:15 +00:00
import { pushToMongo } from "../lib/pushToMongo.js";
2022-06-17 18:47:10 +00:00
import { resolveToNumIfPossible } from "../lib/squiggle.js";
2022-06-17 17:44:08 +00:00
export function Homepage({ listOfElementsInit }) {
const SLICE = false;
2022-06-17 17:44:08 +00:00
/* Statefull elements */
2022-06-17 18:47:10 +00:00
// list of elements
const [listOfElements, setListOfElements] = useState(
2022-06-18 18:18:15 +00:00
SLICE ? listOfElementsInit.slice(0, 4) : listOfElementsInit
2022-06-17 18:47:10 +00:00
);
// number of steps
2022-06-17 17:44:08 +00:00
const numStepsInit = 0;
const [numStepsNow, setNumStepsNow] = useState(numStepsInit);
2022-06-17 18:47:10 +00:00
// is list ordered?
const [isListOrdered, setIsListOrdered] = useState(false);
2022-06-19 23:25:55 +00:00
const [listAfterMergeSort, setListAfterMergeSort] = useState([]);
2022-06-17 17:44:08 +00:00
2022-06-17 18:47:10 +00:00
// list of comparisons
const [links, setLinks] = useState([]);
const addLink = (link, links) => setLinks([...links, link]);
// paired being currently compared
2022-06-17 17:44:08 +00:00
const pairCurrentlyBeingComparedInit = [
listOfElementsInit[0],
listOfElementsInit[1],
];
const [pairCurrentlyBeingCompared, setPairCurrentlyBeingCompared] = useState(
pairCurrentlyBeingComparedInit
);
// dataset changer
const onChangeOfDataset = (newListOfElements) => {
setListOfElements(newListOfElements);
setLinks([]);
setPairCurrentlyBeingCompared([newListOfElements[0], newListOfElements[1]]);
setNumStepsNow(0);
setIsListOrdered(false);
2022-06-19 23:25:55 +00:00
setListAfterMergeSort([]);
2022-06-17 17:44:08 +00:00
};
2022-06-17 18:47:10 +00:00
// process next step
const mergeSortStep = ({ list, links }) => {
let mergeSortOutput = mergeSort({
list: list,
links: links,
});
setNumStepsNow(numStepsNow + 1);
if (mergeSortOutput.finishedOrderingList == false) {
let newPairToCompare = mergeSortOutput.uncomparedElements;
setIsListOrdered(false);
setPairCurrentlyBeingCompared(newPairToCompare);
} else {
2022-06-19 23:25:55 +00:00
setListAfterMergeSort(mergeSortOutput.orderedList);
2022-06-18 18:18:15 +00:00
pushToMongo({ mergeSortOutput, links });
2022-06-19 23:25:55 +00:00
setIsListOrdered(true); // good if it's at the end.
2022-06-18 18:18:15 +00:00
// alert(JSON.stringify(mergeSortOutput, null, 4));
// chooseNextPairToCompareRandomly({ listOfElements });
// return 1;
}
};
// full
2022-06-17 18:47:10 +00:00
const moveToNextStep = async ({
listOfElements,
pairCurrentlyBeingCompared,
comparisonString,
whileChangingStuff,
newLinksFromChangingStuff,
2022-06-17 18:47:10 +00:00
}) => {
// In the normal course of things:
if (!whileChangingStuff) {
let newLink = {
source: pairCurrentlyBeingCompared[0].name,
target: pairCurrentlyBeingCompared[1].name,
squiggleString: comparisonString,
};
let numOption = await resolveToNumIfPossible(comparisonString);
if (numOption.asNum == false) {
alert(JSON.stringify(numOption.errorMsg));
} else if (numOption.asNum == true) {
// addLink({ ...newLink, distance: numOption.num }, links);
/// let newLinks = [...links, { ...newLink, distance: numOption.num }];
newLink = { ...newLink, distance: numOption.num };
addLink(newLink, links);
let newLinks = [...links, newLink];
console.log("links: ", links);
mergeSortStep({ list: listOfElements, links: newLinks });
2022-06-17 18:47:10 +00:00
}
} else {
mergeSortStep({
list: listOfElements,
links: newLinksFromChangingStuff,
});
setNumStepsNow(0); // almost no guarantees of how many left.
2022-06-17 18:47:10 +00:00
}
// When changing comparisons:
2022-06-17 18:47:10 +00:00
};
2022-06-17 17:44:08 +00:00
return (
2022-06-18 03:38:06 +00:00
<div className="block w-full items-center sm:w-full mt-10">
2022-06-19 00:14:07 +00:00
<Title />
2022-06-17 17:44:08 +00:00
<ProgressIndicator
numStepsNow={numStepsNow}
numElements={listOfElements.length}
/>
2022-06-19 23:25:55 +00:00
2022-06-17 17:44:08 +00:00
{/* Comparisons section */}
2022-06-18 03:20:44 +00:00
<div className={"" /*isListOrdered ? "hidden" : ""*/}>
2022-06-18 03:38:06 +00:00
<div className="flex justify-evenly mt-10">
2022-06-17 17:44:08 +00:00
<DisplayElementForComparison
element={pairCurrentlyBeingCompared[0]}
></DisplayElementForComparison>
<ComparisonActuator
2022-06-17 18:47:10 +00:00
listOfElements={listOfElements}
pairCurrentlyBeingCompared={pairCurrentlyBeingCompared}
moveToNextStep={moveToNextStep}
2022-06-18 18:18:15 +00:00
isListOrdered={isListOrdered}
2022-06-17 17:44:08 +00:00
/>
<DisplayElementForComparison
element={pairCurrentlyBeingCompared[1]}
></DisplayElementForComparison>
</div>
</div>
2022-06-18 23:10:27 +00:00
2022-06-19 23:25:55 +00:00
{/* <Results table /> */}
<ResultsTable
isListOrdered={isListOrdered}
listAfterMergeSort={listAfterMergeSort}
links={links}
/>
{/* <Graph /> */}
<Separator />
<Graph
listOfElements={listOfElements}
links={links}
isListOrdered={isListOrdered}
2022-06-19 23:25:55 +00:00
listAfterMergeSort={listAfterMergeSort}
/>
2022-06-19 23:25:55 +00:00
{/* Advanced options section */}
2022-06-19 23:25:55 +00:00
<Separator />
<AdvancedOptions
links={links}
setLinks={setLinks}
listOfElements={listOfElements}
moveToNextStep={moveToNextStep}
onChangeOfDataset={onChangeOfDataset}
/>
2022-06-17 17:44:08 +00:00
</div>
);
}