tweak: General code cleanup.
This commit is contained in:
parent
f11baba423
commit
94f16a12f0
File diff suppressed because one or more lines are too long
|
@ -40,6 +40,8 @@ Given an (ordered) list of elements and a list of utility comparisons, find all
|
||||||
|
|
||||||
_Note_: Some elements will have many more paths than others.
|
_Note_: Some elements will have many more paths than others.
|
||||||
|
|
||||||
|
_Note_: The `findPaths.js` file has a few un-used functions which should make it easier to understand the code.
|
||||||
|
|
||||||
### Aggregate paths (`aggregatePaths`)
|
### Aggregate paths (`aggregatePaths`)
|
||||||
|
|
||||||
Given a list of path, aggregate them to finally produce an estimate of the relative utility of each element.
|
Given a list of path, aggregate them to finally produce an estimate of the relative utility of each element.
|
||||||
|
|
|
@ -18,10 +18,8 @@ export async function aggregatePathsThroughMixtureOfDistributions({
|
||||||
);
|
);
|
||||||
console.group();
|
console.group();
|
||||||
print("Number of paths: ", multipliedDistributions.length);
|
print("Number of paths: ", multipliedDistributions.length);
|
||||||
// print(multipliedDistributions.slice(0, 10));
|
|
||||||
let squiggleCode = `aggregatePath = mx(${multipliedDistributions
|
let squiggleCode = `aggregatePath = mx(${multipliedDistributions
|
||||||
.filter((distributions) => distributions != undefined)
|
.filter((distributions) => distributions != undefined)
|
||||||
// .slice(0, 600)
|
|
||||||
.join(", ")})`;
|
.join(", ")})`;
|
||||||
|
|
||||||
// Start measuring time
|
// Start measuring time
|
||||||
|
@ -54,6 +52,7 @@ export async function aggregatePathsThroughMixtureOfDistributions({
|
||||||
4
|
4
|
||||||
)}`
|
)}`
|
||||||
);
|
);
|
||||||
|
|
||||||
// Stop measuring time
|
// Stop measuring time
|
||||||
let end = Date.now();
|
let end = Date.now();
|
||||||
print(`${(end - start) / 1000} seconds needed for processing`);
|
print(`${(end - start) / 1000} seconds needed for processing`);
|
||||||
|
@ -77,7 +76,6 @@ export const avg = (arr) => sum(arr) / arr.length;
|
||||||
export const geomMean = (arr) => {
|
export const geomMean = (arr) => {
|
||||||
let n = arr.length;
|
let n = arr.length;
|
||||||
let logavg = sum(arr.map((x) => Math.log(x))); // works for low numbers much better
|
let logavg = sum(arr.map((x) => Math.log(x))); // works for low numbers much better
|
||||||
// console.log(logavg);
|
|
||||||
let result = Math.exp(logavg / n);
|
let result = Math.exp(logavg / n);
|
||||||
return result;
|
return result;
|
||||||
};
|
};
|
||||||
|
|
|
@ -13,7 +13,7 @@ const outputFilePath = "./output/output.json";
|
||||||
|
|
||||||
// MAIN
|
// MAIN
|
||||||
async function main() {
|
async function main() {
|
||||||
// read file
|
// Read file
|
||||||
const inputLinksAsString = fs.readFileSync(inputLinksFilePath);
|
const inputLinksAsString = fs.readFileSync(inputLinksFilePath);
|
||||||
const inputListAsString = fs.readFileSync(inputListFilePath);
|
const inputListAsString = fs.readFileSync(inputListFilePath);
|
||||||
const links = JSON.parse(inputLinksAsString);
|
const links = JSON.parse(inputLinksAsString);
|
||||||
|
@ -21,7 +21,6 @@ async function main() {
|
||||||
|
|
||||||
// Merge sort
|
// Merge sort
|
||||||
let mergeSortOutput = mergeSort({ list, links });
|
let mergeSortOutput = mergeSort({ list, links });
|
||||||
// console.log("Output: ");
|
|
||||||
if (mergeSortOutput.finishedOrderingList == false) {
|
if (mergeSortOutput.finishedOrderingList == false) {
|
||||||
console.log("Merge could not proceed");
|
console.log("Merge could not proceed");
|
||||||
console.group();
|
console.group();
|
||||||
|
@ -30,7 +29,6 @@ async function main() {
|
||||||
console.groupEnd();
|
console.groupEnd();
|
||||||
} else {
|
} else {
|
||||||
let orderedList = mergeSortOutput.orderedList;
|
let orderedList = mergeSortOutput.orderedList;
|
||||||
// console.log(orderedList);
|
|
||||||
console.log("Sorted output: ");
|
console.log("Sorted output: ");
|
||||||
console.group();
|
console.group();
|
||||||
console.log(orderedList.map((x) => x.name));
|
console.log(orderedList.map((x) => x.name));
|
||||||
|
@ -39,7 +37,6 @@ async function main() {
|
||||||
|
|
||||||
// find Paths
|
// find Paths
|
||||||
let paths = await findDistances({ orderedList, links });
|
let paths = await findDistances({ orderedList, links });
|
||||||
// console.log(JSON.stringify(paths, null, 4));
|
|
||||||
|
|
||||||
// Aggregate paths.
|
// Aggregate paths.
|
||||||
let aggregatedPaths = await aggregatePaths({
|
let aggregatedPaths = await aggregatePaths({
|
||||||
|
|
|
@ -13,6 +13,8 @@ const findElementPosition = (name, nodes) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
async function findPathsWithoutPrunning({
|
async function findPathsWithoutPrunning({
|
||||||
|
// DO NOT DELETE THIS UN-USED FUNCTION
|
||||||
|
// USEFUL FOR UNDERSTANDING AGAIN HOW THIS CODE WORKS AFTER A FEW MONTHS
|
||||||
sourceElementName,
|
sourceElementName,
|
||||||
targetElementName,
|
targetElementName,
|
||||||
maxLengthOfPath,
|
maxLengthOfPath,
|
||||||
|
@ -110,10 +112,11 @@ async function findPaths({
|
||||||
link.target == targetElementName) ||
|
link.target == targetElementName) ||
|
||||||
(link.source == targetElementName && link.target == sourceElementName)
|
(link.source == targetElementName && link.target == sourceElementName)
|
||||||
) {
|
) {
|
||||||
// direct Path
|
// We have found a direct path.
|
||||||
let newPath = pathPlusLink(pathSoFar, link);
|
let newPath = pathPlusLink(pathSoFar, link);
|
||||||
paths.push(newPath);
|
paths.push(newPath);
|
||||||
} else if (link.source == sourceElementName) {
|
} else if (link.source == sourceElementName) {
|
||||||
|
// Recursively call find Paths
|
||||||
let newPaths = await findPaths({
|
let newPaths = await findPaths({
|
||||||
pathSoFar: pathPlusLink(pathSoFar, link),
|
pathSoFar: pathPlusLink(pathSoFar, link),
|
||||||
maxLengthOfPath: maxLengthOfPath - 1,
|
maxLengthOfPath: maxLengthOfPath - 1,
|
||||||
|
@ -160,11 +163,7 @@ async function findExpectedValuesAndDistributionsForElement({
|
||||||
// then orders them correctly in the for loop
|
// then orders them correctly in the for loop
|
||||||
// (by flipping the distance to 1/distance when necessary)
|
// (by flipping the distance to 1/distance when necessary)
|
||||||
// and then gets the array of weights for the different paths.
|
// and then gets the array of weights for the different paths.
|
||||||
/*
|
|
||||||
console.log(
|
|
||||||
`findDistance@findPaths.js from ${sourceElementPosition} to ${targetElementPosition}`
|
|
||||||
);
|
|
||||||
*/
|
|
||||||
let maxLengthOfPath = Math.abs(sourceElementPosition - targetElementPosition);
|
let maxLengthOfPath = Math.abs(sourceElementPosition - targetElementPosition);
|
||||||
let paths = await findPaths({
|
let paths = await findPaths({
|
||||||
sourceElementName,
|
sourceElementName,
|
||||||
|
@ -207,49 +206,6 @@ async function findExpectedValuesAndDistributionsForElement({
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
return processedPaths;
|
return processedPaths;
|
||||||
|
|
||||||
/*
|
|
||||||
let expectedValues = [];
|
|
||||||
for (let path of paths) {
|
|
||||||
let currentSource = sourceElementName;
|
|
||||||
let weight = 1;
|
|
||||||
for (let element of path) {
|
|
||||||
let distance = 0;
|
|
||||||
if (element.source == currentSource) {
|
|
||||||
distance = element.distance;
|
|
||||||
currentSource = element.target;
|
|
||||||
} else if (element.target == currentSource) {
|
|
||||||
distance = 1 / Number(element.distance);
|
|
||||||
currentSource = element.source;
|
|
||||||
}
|
|
||||||
weight = weight * distance;
|
|
||||||
}
|
|
||||||
expectedValues.push(weight);
|
|
||||||
}
|
|
||||||
|
|
||||||
let distributionalForm = [];
|
|
||||||
for (let path of paths) {
|
|
||||||
let currentSource = sourceElementName;
|
|
||||||
let multipliedDistributionsInPath = 1;
|
|
||||||
for (let element of path) {
|
|
||||||
let anotherDistributionInPath;
|
|
||||||
if (element.source == currentSource) {
|
|
||||||
distributionInPath = element.squiggleString;
|
|
||||||
currentSource = element.target;
|
|
||||||
} else if (element.target == currentSource) {
|
|
||||||
distance = `1 / (${element.squiggleString})`;
|
|
||||||
currentSource = element.source;
|
|
||||||
}
|
|
||||||
multipliedDistributionsInPath = `${multipliedDistributionsInPath} * (${anotherDistributionInPath})`;
|
|
||||||
}
|
|
||||||
distributionalForm.push(multipliedDistributionsInPath);
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
expectedValues,
|
|
||||||
distributionalForm,
|
|
||||||
// paths,
|
|
||||||
};
|
|
||||||
*/
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function findDistancesFromAllElementsToReferencePoint({
|
async function findDistancesFromAllElementsToReferencePoint({
|
||||||
|
@ -263,15 +219,12 @@ async function findDistancesFromAllElementsToReferencePoint({
|
||||||
/* Get or build reference element */
|
/* Get or build reference element */
|
||||||
let midpoint = Math.round(nodes.length / 2);
|
let midpoint = Math.round(nodes.length / 2);
|
||||||
referenceElement = referenceElement || nodes[midpoint];
|
referenceElement = referenceElement || nodes[midpoint];
|
||||||
// console.log(`referenceElement.position: ${referenceElement.position}`);
|
|
||||||
|
|
||||||
/* Get distances. */
|
/* Get distances. */
|
||||||
let distancesArray = nodes.map((node) => {
|
let distancesArray = nodes.map((node) => {
|
||||||
if (node.name == referenceElement.name) {
|
if (node.name == referenceElement.name) {
|
||||||
return [1];
|
return [1];
|
||||||
} else {
|
} else {
|
||||||
// console.log("node");
|
|
||||||
// console.log(node);
|
|
||||||
let expectedValuesAndDistributionsForElement =
|
let expectedValuesAndDistributionsForElement =
|
||||||
findExpectedValuesAndDistributionsForElement({
|
findExpectedValuesAndDistributionsForElement({
|
||||||
sourceElementName: referenceElement.name,
|
sourceElementName: referenceElement.name,
|
||||||
|
@ -303,7 +256,6 @@ export async function findDistancesFromAllElementsToAllReferencePoints({
|
||||||
links,
|
links,
|
||||||
referenceElement: node,
|
referenceElement: node,
|
||||||
});
|
});
|
||||||
// alert(`distancesFromNode.length: ${distancesFromNode.length}`);
|
|
||||||
distancesForAllElements = distancesForAllElements.map((arr, i) => {
|
distancesForAllElements = distancesForAllElements.map((arr, i) => {
|
||||||
return !!arr && arr.length > 0
|
return !!arr && arr.length > 0
|
||||||
? [...arr, ...distancesFromNode[i]]
|
? [...arr, ...distancesFromNode[i]]
|
||||||
|
|
|
@ -7,7 +7,6 @@ function isFirstElementGreater(links, element1, element2) {
|
||||||
(link.source == element2.name && link.target == element1.name)
|
(link.source == element2.name && link.target == element1.name)
|
||||||
);
|
);
|
||||||
if (relevantComparisons.length == 0) {
|
if (relevantComparisons.length == 0) {
|
||||||
// console.log(element1, "vs", element2);
|
|
||||||
let answer = {
|
let answer = {
|
||||||
foundAnswer: false,
|
foundAnswer: false,
|
||||||
error: errorMsg,
|
error: errorMsg,
|
||||||
|
@ -15,7 +14,6 @@ function isFirstElementGreater(links, element1, element2) {
|
||||||
return answer;
|
return answer;
|
||||||
} else {
|
} else {
|
||||||
const firstLink = relevantComparisons[0];
|
const firstLink = relevantComparisons[0];
|
||||||
// console.log(firstLink);
|
|
||||||
const firstElementFirst =
|
const firstElementFirst =
|
||||||
firstLink.source == element1.name && firstLink.target == element2.name
|
firstLink.source == element1.name && firstLink.target == element2.name
|
||||||
? true
|
? true
|
||||||
|
@ -34,16 +32,11 @@ function isFirstElementGreater(links, element1, element2) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function merge(links, left, right) {
|
function merge(links, left, right) {
|
||||||
let sortedArr = []; // the sorted elements will go here
|
let sortedArr = [];
|
||||||
|
|
||||||
while (left.length && right.length) {
|
while (left.length && right.length) {
|
||||||
// insert the biggest element to the sortedArr
|
// insert the biggest element to the sortedArr
|
||||||
let getComparisonAnswer = isFirstElementGreater(links, left[0], right[0]);
|
let getComparisonAnswer = isFirstElementGreater(links, left[0], right[0]);
|
||||||
if (getComparisonAnswer.foundAnswer == false) {
|
if (getComparisonAnswer.foundAnswer == false) {
|
||||||
// console.log("Error@:");
|
|
||||||
// console.group();
|
|
||||||
// console.log({ left, right });
|
|
||||||
// console.groupEnd();
|
|
||||||
let result = {
|
let result = {
|
||||||
finishedMerge: false,
|
finishedMerge: false,
|
||||||
uncomparedElements: [left[0], right[0]],
|
uncomparedElements: [left[0], right[0]],
|
||||||
|
@ -53,6 +46,8 @@ function merge(links, left, right) {
|
||||||
} else if (getComparisonAnswer.foundAnswer == true) {
|
} else if (getComparisonAnswer.foundAnswer == true) {
|
||||||
if (getComparisonAnswer.isFirstElementFirst == true) {
|
if (getComparisonAnswer.isFirstElementFirst == true) {
|
||||||
// left[0] > right[0]
|
// left[0] > right[0]
|
||||||
|
// note that we can order from smallest to largest or the reverse
|
||||||
|
// ; I forget which one this is.
|
||||||
sortedArr.push(right.shift());
|
sortedArr.push(right.shift());
|
||||||
} else {
|
} else {
|
||||||
sortedArr.push(left.shift());
|
sortedArr.push(left.shift());
|
||||||
|
@ -70,7 +65,6 @@ function merge(links, left, right) {
|
||||||
}
|
}
|
||||||
|
|
||||||
export function mergeSortInner({ recursiveInput, links }) {
|
export function mergeSortInner({ recursiveInput, links }) {
|
||||||
// console.log({ l: list.length });
|
|
||||||
if (recursiveInput.bottleneckedByComparison == true) {
|
if (recursiveInput.bottleneckedByComparison == true) {
|
||||||
let result = {
|
let result = {
|
||||||
recursiveInput: {
|
recursiveInput: {
|
||||||
|
@ -97,7 +91,7 @@ export function mergeSortInner({ recursiveInput, links }) {
|
||||||
}
|
}
|
||||||
|
|
||||||
const left = recursiveInput.list.slice(0, half); // the first half of the list
|
const left = recursiveInput.list.slice(0, half); // the first half of the list
|
||||||
const right = recursiveInput.list.slice(half, recursiveInput.list.length); // Note that splice is destructive.
|
const right = recursiveInput.list.slice(half, recursiveInput.list.length); // Note that splice is destructive, and that slice instead creates a new array.
|
||||||
let orderedFirstHalfAnswer = mergeSortInner({
|
let orderedFirstHalfAnswer = mergeSortInner({
|
||||||
recursiveInput: { list: left, bottleneckedByComparison: false },
|
recursiveInput: { list: left, bottleneckedByComparison: false },
|
||||||
links,
|
links,
|
||||||
|
@ -164,7 +158,7 @@ export function mergeSort({ list, links }) {
|
||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
/*
|
/*
|
||||||
// otherwise
|
// otherwise, test all other permutations:
|
||||||
let permutation = list.slice();
|
let permutation = list.slice();
|
||||||
var length = list.length;
|
var length = list.length;
|
||||||
// let result = [list.slice()];
|
// let result = [list.slice()];
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -4,15 +4,21 @@ This repository creates a react webpage that allows to extract a utility functio
|
||||||
|
|
||||||
It presents the users with a series of elements to compare, using merge-sort in the background to cleverly minimize the number of choices needed.
|
It presents the users with a series of elements to compare, using merge-sort in the background to cleverly minimize the number of choices needed.
|
||||||
|
|
||||||
![](./public/example-prompt.png)
|
<p align="center">
|
||||||
|
<img width="50%" height="50%" src="./public/example-prompt.png">
|
||||||
|
</p>
|
||||||
|
|
||||||
Then, it cleverly aggregates them, on the one hand by producing a graphical representation:
|
Then, it cleverly aggregates them, on the one hand by producing a graphical representation:
|
||||||
|
|
||||||
![](./public/example-graph.png)
|
<p align="center">
|
||||||
|
<img width="50%" height="50%" src="./public/example-graph.png">
|
||||||
|
</p>
|
||||||
|
|
||||||
and on the other hand doing some fast and clever mean aggregation [^1]:
|
and on the other hand doing some fast and clever mean aggregation [^1]:
|
||||||
|
|
||||||
![](./public/example-table.png)
|
<p align="center">
|
||||||
|
<img width="50%" height="50%" src="./public/example-table.png">
|
||||||
|
</p>
|
||||||
|
|
||||||
Initially, users could only input numbers, e.g., "A is `3` times better than B". But now, users can also input distributions, using the [squiggle](https://www.squiggle-language.com/) syntax, e.g., "A is `1 to 10` times better than B", or "A is `mm(normal(1, 10), uniform(0,100))` better than B".
|
Initially, users could only input numbers, e.g., "A is `3` times better than B". But now, users can also input distributions, using the [squiggle](https://www.squiggle-language.com/) syntax, e.g., "A is `1 to 10` times better than B", or "A is `mm(normal(1, 10), uniform(0,100))` better than B".
|
||||||
|
|
||||||
|
@ -65,7 +71,7 @@ The core structure for links is as follows:
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"source": "Spiderman",
|
"source": "Spiderman",
|
||||||
"target": "Doctor Octopus",
|
"target": "Jonah Jameson",
|
||||||
"squiggleString": "20 to 2000",
|
"squiggleString": "20 to 2000",
|
||||||
"distance": 6.76997149080232
|
"distance": 6.76997149080232
|
||||||
},
|
},
|
||||||
|
@ -93,13 +99,11 @@ Distributed under the MIT License. See LICENSE.txt for more information.
|
||||||
- [x] Paths table
|
- [x] Paths table
|
||||||
- [x] Add paths table
|
- [x] Add paths table
|
||||||
- [x] warn that the paths table is approximate.
|
- [x] warn that the paths table is approximate.
|
||||||
- However, I really don't feel like re-adding this after having worked out the distribution rather than the mean aggregation
|
- I really don't feel like re-adding this after having worked out the distribution rather than the mean aggregation
|
||||||
- However, I think it does make it more user to other users.
|
- On the other hand, I think it does make it more user to other users.
|
||||||
|
- [x] Change README.
|
||||||
- [ ] Add functionality like names, etc.
|
- [ ] Add functionality like names, etc.
|
||||||
- I also don't feel like doing this
|
- I also don't feel like doing this
|
||||||
- [ ] Look back at Amazon thing which has been running
|
- [ ] Look back at Amazon thing which has been running
|
||||||
- [x] Change README.
|
|
||||||
|
|
||||||
## Footnotes
|
|
||||||
|
|
||||||
[^1]: The program takes each element as a reference point in turn, and computing the possible distances from that reference point to all other points, and taking the geometric mean of these distances. This produces a number representing the value of each element, such that the ratios between elements represent the user's preferences: a utility function. However, this isn't perfect; the principled approach woud be to aggregate the distributions rather than their means. But this principled approach is much more slowly. For the principled approach, see the `utility-tools` repository.
|
[^1]: The program takes each element as a reference point in turn, and computing the possible distances from that reference point to all other points, and taking the geometric mean of these distances. This produces a number representing the value of each element, such that the ratios between elements represent the user's preferences: a utility function. However, this isn't perfect; the principled approach woud be to aggregate the distributions rather than their means. But this principled approach is much more slowly. For the principled approach, see the `utility-tools` repository.
|
||||||
|
|
|
@ -64,7 +64,8 @@ export function AdvancedOptions({
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
{/* Element: Show comparisons */}
|
{/* Element: Show comparisons */}
|
||||||
<ShowComparisons links={links} show={showComparisons} />
|
{/* <ShowComparisons links={links} show={showComparisons} /> */}
|
||||||
|
|
||||||
{/* Element: Change comparisons */}
|
{/* Element: Change comparisons */}
|
||||||
<ComparisonsChanger
|
<ComparisonsChanger
|
||||||
setLinks={setLinks}
|
setLinks={setLinks}
|
||||||
|
@ -73,6 +74,8 @@ export function AdvancedOptions({
|
||||||
moveToNextStep={moveToNextStep}
|
moveToNextStep={moveToNextStep}
|
||||||
links={links}
|
links={links}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
{/* Element: Dataset changer */}
|
||||||
<DataSetChanger
|
<DataSetChanger
|
||||||
onChangeOfDataset={onChangeOfDataset}
|
onChangeOfDataset={onChangeOfDataset}
|
||||||
show={showChangeDataset}
|
show={showChangeDataset}
|
||||||
|
|
|
@ -1,9 +1,6 @@
|
||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
import { Separator } from "../separator.js";
|
import { Separator } from "../separator.js";
|
||||||
|
|
||||||
// import JSONInput from "react-json-editor-ajrm/index";
|
|
||||||
// import locale from "react-json-editor-ajrm/locale/en";
|
|
||||||
|
|
||||||
const checkLinksAreOk = (links, listOfElements) => {
|
const checkLinksAreOk = (links, listOfElements) => {
|
||||||
let linkSourceNames = links.map((link) => link.source.name);
|
let linkSourceNames = links.map((link) => link.source.name);
|
||||||
let linkTargetNames = links.map((link) => link.target.name);
|
let linkTargetNames = links.map((link) => link.target.name);
|
||||||
|
@ -68,7 +65,6 @@ export function ComparisonsChanger({
|
||||||
|
|
||||||
useEffect(async () => {
|
useEffect(async () => {
|
||||||
setValue(JSON.stringify(links, null, 4));
|
setValue(JSON.stringify(links, null, 4));
|
||||||
// console.log(JSON.stringify(config, null, 10));
|
|
||||||
}, [links]);
|
}, [links]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -87,27 +83,6 @@ export function ComparisonsChanger({
|
||||||
cols={90}
|
cols={90}
|
||||||
className="text-left text-gray-600 bg-white rounded text-normal p-10 border-0 shadow outline-none focus:outline-none focus:ring "
|
className="text-left text-gray-600 bg-white rounded text-normal p-10 border-0 shadow outline-none focus:outline-none focus:ring "
|
||||||
/>
|
/>
|
||||||
{/* */}
|
|
||||||
{/*
|
|
||||||
<div className="flex text-left text-xl justify-around ">
|
|
||||||
<JSONInput
|
|
||||||
placeholder={value} // data to display
|
|
||||||
theme="dark_vscode_tribute" //"light_mitsuketa_tribute" //
|
|
||||||
locale={locale}
|
|
||||||
colors={{
|
|
||||||
string: "#DAA520", // overrides theme colors with whatever color value you want
|
|
||||||
}}
|
|
||||||
height="550px"
|
|
||||||
style={{
|
|
||||||
body: {
|
|
||||||
fontSize: "20px",
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
onChange={onChangeForJsonEditor}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
*/}
|
|
||||||
<br />
|
<br />
|
||||||
<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 p-10"
|
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"
|
||||||
|
|
|
@ -33,14 +33,10 @@ export function DataSetChanger({ onChangeOfDataset, show, listOfElements }) {
|
||||||
let handleSubmitInner = (event) => {
|
let handleSubmitInner = (event) => {
|
||||||
clearTimeout(displayingDoneMessageTimer);
|
clearTimeout(displayingDoneMessageTimer);
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
//console.log(event)
|
|
||||||
console.log("value@handleSubmitInner@DataSetChanger");
|
console.log("value@handleSubmitInner@DataSetChanger");
|
||||||
//console.log(typeof(value));
|
|
||||||
console.log(value);
|
console.log(value);
|
||||||
try {
|
try {
|
||||||
let newData = JSON.parse(value);
|
let newData = JSON.parse(value);
|
||||||
//console.log(typeof(newData))
|
|
||||||
//console.log(newData)
|
|
||||||
if (!newData.length || newData.length < 2) {
|
if (!newData.length || newData.length < 2) {
|
||||||
throw Error("Not enough objects");
|
throw Error("Not enough objects");
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import React, { state } from "react";
|
import React, { state } from "react";
|
||||||
import { CopyBlock, googlecode } from "react-code-blocks";
|
import { CopyBlock, googlecode } from "react-code-blocks";
|
||||||
import { Separator } from "../separator.js";
|
import { Separator } from "../separator.js";
|
||||||
// googlecode
|
|
||||||
|
|
||||||
export function ShowComparisons({ links, show }) {
|
export function ShowComparisons({ links, show }) {
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
// import { SubmitButton } from "./submitButton";
|
|
||||||
|
|
||||||
export function ComparisonActuator({
|
export function ComparisonActuator({
|
||||||
listOfElements,
|
listOfElements,
|
||||||
|
@ -16,7 +15,6 @@ export function ComparisonActuator({
|
||||||
};
|
};
|
||||||
|
|
||||||
const onClickSubmitEvent = (event) => {
|
const onClickSubmitEvent = (event) => {
|
||||||
// console.log(event.target.value);
|
|
||||||
if (!isListOrdered) {
|
if (!isListOrdered) {
|
||||||
moveToNextStep({
|
moveToNextStep({
|
||||||
listOfElements,
|
listOfElements,
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import React, { useEffect, useState, useRef } from "react";
|
import React, { useEffect, useState, useRef } from "react";
|
||||||
import colormap from "colormap";
|
import colormap from "colormap";
|
||||||
import cytoscape from "cytoscape";
|
import cytoscape from "cytoscape";
|
||||||
import spread from "cytoscape-spread";
|
|
||||||
|
|
||||||
import {
|
import {
|
||||||
resolveToNumIfPossible,
|
resolveToNumIfPossible,
|
||||||
|
@ -10,6 +9,7 @@ import {
|
||||||
import { truncateValueForDisplay } from "../../lib/truncateNums.js";
|
import { truncateValueForDisplay } from "../../lib/truncateNums.js";
|
||||||
import { cutOffLongNames } from "../../lib/stringManipulations.js";
|
import { cutOffLongNames } from "../../lib/stringManipulations.js";
|
||||||
|
|
||||||
|
// import spread from "cytoscape-spread";
|
||||||
// import dagre from "cytoscape-dagre";
|
// import dagre from "cytoscape-dagre";
|
||||||
// import cola from "cytoscape-cola";
|
// import cola from "cytoscape-cola";
|
||||||
// import fcose from "cytoscape-fcose";
|
// import fcose from "cytoscape-fcose";
|
||||||
|
@ -36,7 +36,7 @@ const getEdgeLabel = async (squiggleString) => {
|
||||||
//alert("▁▁▁▁▁▁▁▁▁▁▁");
|
//alert("▁▁▁▁▁▁▁▁▁▁▁");
|
||||||
}
|
}
|
||||||
|
|
||||||
return squiggleString + sparklineConcat; //sparkline;
|
return squiggleString + sparklineConcat;
|
||||||
};
|
};
|
||||||
|
|
||||||
const getColors = (n) => {
|
const getColors = (n) => {
|
||||||
|
@ -50,7 +50,7 @@ const getColors = (n) => {
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
colors = colormap({
|
colors = colormap({
|
||||||
colormap: "greys", // hot,
|
colormap: "greys", // other themes: hot, winter, etc.
|
||||||
nshades: n,
|
nshades: n,
|
||||||
format: "hex",
|
format: "hex",
|
||||||
alpha: 1,
|
alpha: 1,
|
||||||
|
@ -77,7 +77,7 @@ export function Graph({
|
||||||
//setVisibility("invisible");
|
//setVisibility("invisible");
|
||||||
let layoutName = "circle"; //
|
let layoutName = "circle"; //
|
||||||
|
|
||||||
// cytoscape.use(circle); // spread, circle,
|
// cytoscape.use(spread); // necessary for non-default themes,
|
||||||
let listOfElementsForGraph = isListOrdered
|
let listOfElementsForGraph = isListOrdered
|
||||||
? listAfterMergeSort
|
? listAfterMergeSort
|
||||||
: listOfElements;
|
: listOfElements;
|
||||||
|
@ -122,7 +122,6 @@ export function Graph({
|
||||||
content: "data(id)",
|
content: "data(id)",
|
||||||
"background-color": "data(color)",
|
"background-color": "data(color)",
|
||||||
"text-wrap": "wrap",
|
"text-wrap": "wrap",
|
||||||
//"text-overflow-wrap": "anywhere",
|
|
||||||
"text-max-width": 70,
|
"text-max-width": 70,
|
||||||
"z-index": 1,
|
"z-index": 1,
|
||||||
},
|
},
|
||||||
|
@ -166,8 +165,6 @@ export function Graph({
|
||||||
"text-border-width": 0.5,
|
"text-border-width": 0.5,
|
||||||
"text-border-opacity": 1,
|
"text-border-opacity": 1,
|
||||||
"z-index": 3,
|
"z-index": 3,
|
||||||
|
|
||||||
// "text-rotation": "autorotate"
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
@ -175,28 +172,22 @@ export function Graph({
|
||||||
const config = {
|
const config = {
|
||||||
container: containerRef.current,
|
container: containerRef.current,
|
||||||
style: cytoscapeStylesheet,
|
style: cytoscapeStylesheet,
|
||||||
elements: [
|
elements: [...nodeElements, ...linkElements],
|
||||||
/* Dummy data:
|
|
||||||
{ data: { id: "n1" } },
|
|
||||||
{ data: { id: "n2" } },
|
|
||||||
{ data: { id: "e1", source: "n1", target: "n2" } },
|
|
||||||
|
|
||||||
Real data:*/
|
|
||||||
...nodeElements,
|
|
||||||
...linkElements,
|
|
||||||
],
|
|
||||||
layout: {
|
layout: {
|
||||||
name: layoutName, // circle, grid, dagre
|
name: layoutName, // circle, grid, dagre
|
||||||
minDist: 10,
|
minDist: 10,
|
||||||
//prelayout: false,
|
//prelayout: false,
|
||||||
// animate: false, // whether to transition the node positions
|
// animate: false, // whether to transition the node positions
|
||||||
// animationDuration: 250, // duration of animation in ms if enabled
|
// animationDuration: 250, // duration of animation in ms if enabled
|
||||||
|
// the cytoscape documentation is pretty good here.
|
||||||
},
|
},
|
||||||
userZoomingEnabled: false,
|
userZoomingEnabled: false,
|
||||||
userPanningEnabled: false,
|
userPanningEnabled: false,
|
||||||
};
|
};
|
||||||
cytoscape(config);
|
cytoscape(config);
|
||||||
//setTimeout(() => setVisibility(""), 700);
|
// setTimeout(() => setVisibility(""), 700);
|
||||||
|
// necessary for themes like spread, which have
|
||||||
|
// a confusing animation at the beginning
|
||||||
};
|
};
|
||||||
useEffect(async () => {
|
useEffect(async () => {
|
||||||
await callEffect({
|
await callEffect({
|
||||||
|
@ -205,7 +196,6 @@ export function Graph({
|
||||||
isListOrdered,
|
isListOrdered,
|
||||||
listAfterMergeSort,
|
listAfterMergeSort,
|
||||||
});
|
});
|
||||||
// console.log(JSON.stringify(config, null, 10));
|
|
||||||
}, [listOfElements, links, isListOrdered, listAfterMergeSort]);
|
}, [listOfElements, links, isListOrdered, listAfterMergeSort]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -15,6 +15,7 @@ import { resolveToNumIfPossible } from "../lib/squiggle.js";
|
||||||
|
|
||||||
export function Homepage({ listOfElementsInit }) {
|
export function Homepage({ listOfElementsInit }) {
|
||||||
const SLICE = false;
|
const SLICE = false;
|
||||||
|
|
||||||
/* Statefull elements */
|
/* Statefull elements */
|
||||||
|
|
||||||
// list of elements
|
// list of elements
|
||||||
|
@ -43,6 +44,8 @@ export function Homepage({ listOfElementsInit }) {
|
||||||
pairCurrentlyBeingComparedInit
|
pairCurrentlyBeingComparedInit
|
||||||
);
|
);
|
||||||
|
|
||||||
|
/* Effects */
|
||||||
|
|
||||||
// dataset changer
|
// dataset changer
|
||||||
const onChangeOfDataset = (newListOfElements) => {
|
const onChangeOfDataset = (newListOfElements) => {
|
||||||
setListOfElements(newListOfElements);
|
setListOfElements(newListOfElements);
|
||||||
|
@ -67,14 +70,11 @@ export function Homepage({ listOfElementsInit }) {
|
||||||
} else {
|
} else {
|
||||||
setListAfterMergeSort(mergeSortOutput.orderedList);
|
setListAfterMergeSort(mergeSortOutput.orderedList);
|
||||||
pushToMongo({ mergeSortOutput, links });
|
pushToMongo({ mergeSortOutput, links });
|
||||||
setIsListOrdered(true); // good if it's at the end.
|
setIsListOrdered(true); // should be at the end, because some useEffects are triggered by it.
|
||||||
// alert(JSON.stringify(mergeSortOutput, null, 4));
|
|
||||||
// chooseNextPairToCompareRandomly({ listOfElements });
|
|
||||||
// return 1;
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// full
|
// Main mergesort step
|
||||||
const moveToNextStep = async ({
|
const moveToNextStep = async ({
|
||||||
listOfElements,
|
listOfElements,
|
||||||
pairCurrentlyBeingCompared,
|
pairCurrentlyBeingCompared,
|
||||||
|
@ -82,8 +82,8 @@ export function Homepage({ listOfElementsInit }) {
|
||||||
whileChangingStuff,
|
whileChangingStuff,
|
||||||
newLinksFromChangingStuff,
|
newLinksFromChangingStuff,
|
||||||
}) => {
|
}) => {
|
||||||
// In the normal course of things:
|
|
||||||
if (!whileChangingStuff) {
|
if (!whileChangingStuff) {
|
||||||
|
// In the normal course of things:
|
||||||
let newLink = {
|
let newLink = {
|
||||||
source: pairCurrentlyBeingCompared[0].name,
|
source: pairCurrentlyBeingCompared[0].name,
|
||||||
target: pairCurrentlyBeingCompared[1].name,
|
target: pairCurrentlyBeingCompared[1].name,
|
||||||
|
@ -94,8 +94,6 @@ export function Homepage({ listOfElementsInit }) {
|
||||||
if (numOption.asNum == false) {
|
if (numOption.asNum == false) {
|
||||||
alert(JSON.stringify(numOption.errorMsg));
|
alert(JSON.stringify(numOption.errorMsg));
|
||||||
} else if (numOption.asNum == true) {
|
} else if (numOption.asNum == true) {
|
||||||
// addLink({ ...newLink, distance: numOption.num }, links);
|
|
||||||
/// let newLinks = [...links, { ...newLink, distance: numOption.num }];
|
|
||||||
newLink = { ...newLink, distance: numOption.num };
|
newLink = { ...newLink, distance: numOption.num };
|
||||||
addLink(newLink, links);
|
addLink(newLink, links);
|
||||||
let newLinks = [...links, newLink];
|
let newLinks = [...links, newLink];
|
||||||
|
@ -103,14 +101,13 @@ export function Homepage({ listOfElementsInit }) {
|
||||||
mergeSortStep({ list: listOfElements, links: newLinks });
|
mergeSortStep({ list: listOfElements, links: newLinks });
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
// When changing comparisons:
|
||||||
mergeSortStep({
|
mergeSortStep({
|
||||||
list: listOfElements,
|
list: listOfElements,
|
||||||
links: newLinksFromChangingStuff,
|
links: newLinksFromChangingStuff,
|
||||||
});
|
});
|
||||||
setNumStepsNow(0); // almost no guarantees of how many left.
|
setNumStepsNow(0); // almost no guarantees of how many left.
|
||||||
}
|
}
|
||||||
|
|
||||||
// When changing comparisons:
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -13,7 +13,6 @@ async function fullResultsTable({ listAfterMergeSort, links }) {
|
||||||
orderedList: listAfterMergeSort,
|
orderedList: listAfterMergeSort,
|
||||||
links: links,
|
links: links,
|
||||||
});
|
});
|
||||||
// console.log(pathsArray);
|
|
||||||
let aggregatedPaths = await aggregatePaths({
|
let aggregatedPaths = await aggregatePaths({
|
||||||
pathsArray: pathsArray,
|
pathsArray: pathsArray,
|
||||||
orderedList: listAfterMergeSort,
|
orderedList: listAfterMergeSort,
|
||||||
|
@ -39,7 +38,7 @@ function getStdev(arr) {
|
||||||
|
|
||||||
export const geomMean = (arr) => {
|
export const geomMean = (arr) => {
|
||||||
let n = arr.length;
|
let n = arr.length;
|
||||||
let logavg = sum(arr.map((x) => Math.log(x))); // works for low numbers much better
|
let logavg = sum(arr.map((x) => Math.log(x))); // works for low numbers much better, numerically
|
||||||
let result = Math.exp(logavg / n);
|
let result = Math.exp(logavg / n);
|
||||||
return result;
|
return result;
|
||||||
};
|
};
|
||||||
|
@ -92,8 +91,6 @@ function getRow(row, i) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function reactTableContents(tableContents) {
|
function reactTableContents(tableContents) {
|
||||||
// alert(JSON.stringify(tableContents));
|
|
||||||
// return "Hello";
|
|
||||||
return tableContents.map((row, i) => getRow(row, i));
|
return tableContents.map((row, i) => getRow(row, i));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -102,16 +99,14 @@ export function ResultsTable({ isListOrdered, listAfterMergeSort, links }) {
|
||||||
const [tableContents, setTableContents] = useState([]);
|
const [tableContents, setTableContents] = useState([]);
|
||||||
|
|
||||||
useEffect(async () => {
|
useEffect(async () => {
|
||||||
// console.log(JSON.stringify(config, null, 10));
|
|
||||||
if (isListOrdered && listAfterMergeSort.length > 0) {
|
if (isListOrdered && listAfterMergeSort.length > 0) {
|
||||||
// both necessary because there is a small moment when list is ordered
|
// both comparisons aren't strictly necessary,
|
||||||
// but listAfterMergeSort wasn't ready yet
|
// but it bit me once, so I'm leaving it
|
||||||
let tableContentsResult = await fullResultsTable({
|
let tableContentsResult = await fullResultsTable({
|
||||||
listAfterMergeSort,
|
listAfterMergeSort,
|
||||||
links,
|
links,
|
||||||
});
|
});
|
||||||
console.log(tableContentsResult);
|
console.log(tableContentsResult);
|
||||||
// alert(JSON.stringify(tableContentsResult));
|
|
||||||
setTableContents(tableContentsResult);
|
setTableContents(tableContentsResult);
|
||||||
setIsTableComputed(true);
|
setIsTableComputed(true);
|
||||||
}
|
}
|
||||||
|
|
|
@ -13,4 +13,3 @@ export async function pushToMongo(data) {
|
||||||
console.log(response);
|
console.log(response);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// pushToMongo()
|
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
let topOutAt100AndValidate = (x) => {
|
let topOutAt100AndValidate = (x) => {
|
||||||
// return 10;
|
|
||||||
if (x == x) {
|
if (x == x) {
|
||||||
return x > 99 ? 99 : x < 0 ? 2 : x;
|
return x > 99 ? 99 : x < 0 ? 2 : x;
|
||||||
} else {
|
} else {
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
/* Notes */
|
/* Notes */
|
||||||
|
|
||||||
// This function is just a simple wrapper around lib/comparisonView.
|
// This function is just a simple wrapper around components/homepage.
|
||||||
// Most of the time, I'll want to edit that instead
|
// Most of the time, I'll want to edit that instead
|
||||||
|
|
||||||
/* Imports */
|
/* Imports */
|
||||||
|
|
Loading…
Reference in New Issue
Block a user